シェアする
Displaying a Title - Japanese Only
みなさまどうもこんにちわ。
今回は『タイトル』について解説をしていきたいと思います。ちょっと前の記事でもでてきましたね。これをもっと掘り下げていきたいと思います。
まずタイトルとは何か、というとそのウェブサイトの名前(表題)のようなものになります。今表示しているブラウザのタブのあたりに注目してください。そこに文字がでてきているかと思います。GoogleChromeだと以下の部分になりますね。
この部分に出力される文字がウェブサイトのタイトルになります。タイトルを変更するにはtitle要素の中を変更する必要がありますので早速やってみましょう。
前の記事と同じように基本的なHTMLソースを用意してください。以下のソースになります。ダウンロードしたい方はこちらからどうぞ。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
このhead要素の中にtitle要素があるのを確認できますでしょうか。以下の部分ですね。
<title></title>
ウェブサイトのタイトルを設定するにはこちらにお好きな文字を入れるだけで完成となります。
では実際にやってみましょう。前の記事では『Hello World』と入力しました。今回は『初めてのボクのウェブサイト』と入力してみましょう。以下のような形になります。
<title>ボクの初めてのウェブサイト</title>
これを先ほどのHTMLソースに記述し保存します。こんな感じになりますね。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ボクの初めてのウェブサイト</title> </head> <body> </body> </html>
そしたらブラウザでチェックしてみましょう。
しっかりタイトルに『ボクの初めてのウェブサイト』と表示されましたでしょうか。表示されればOKです。もし表示されない場合はタグの中に空白文字などが挿入していないか、全角文字になっていないかなどしっかり確認してみましょう。
このようにタイトルの設定の記述はとても簡単なのですが、いくつかの注意点があります。
まずHTMLファイルには必ず一つのtitle要素を入れなくてはいけないというルールがあります。2ついれてしまってもダメです。
もしtitle要素を入れ忘れてしまってもページが表示されないなどという大きなバグになることはないのですがHTML文法上のルールでは間違いとなってしまいます。なので忘れないようにしっかり確認していきましょう。
もうひとつはtitle要素に入ることができるのは文字だけになります。HTMLでは画像やリンクなど様々なものが存在していますが、titleタグの中にいれてしまってはいけません。これも忘れないようにしてください。
というわけでtitle要素の解説は以上となります。
次の記事では『文字の表示』について進めていきたいと思います。引き続き頑張っていきましょう。ではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
