Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- HTML5入門編 - タイトルを表示させてみよう
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
運営及び開発費用ご支援のお願い
当サイト(wp-p.info)の情報はお役に立ちましたでしょうか。当サイトでは運営及び開発費用ご支援の募集をさせて頂いております。よろしければご支援についてご検討頂けませんでしょうか。何卒宜しくお願い致します。
タイトルを表示させてみよう
みなさまどうもこんにちわ。
今回は『タイトル』について解説をしていきたいと思います。ちょっと前の記事でもでてきましたね。これをもっと掘り下げていきたいと思います。
まずタイトルとは何か、というとそのウェブサイトの名前(表題)のようなものになります。今表示しているブラウザのタブのあたりに注目してください。そこに文字がでてきているかと思います。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要素の解説は以上となります。
次の記事では『文字の表示』について進めていきたいと思います。引き続き頑張っていきましょう。ではー。
この記事は桜舞が執筆致しました。
![]() 著者が愛する小型哺乳類 |
桜舞 春人 Sakurama HarutoISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。 |
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
Introduction
当サイトでは有料会員様の募集をしております。現在約431本の記事を公開中です。
有料会員になるとこれら全ての記事が読み放題となります。
お申込み頂ける際はログインまたはアカウント作成後、有料会員件をご購入下されば幸いです。有料会員権はまとめ買いがお得です。
現在の有料会員権一覧sale中!!
30日分980円
月額約980円、日額約32円
90日分通常2940円のところ1980円 (960円OFF)
月額約660円、日額約22円
180日分通常5880円のところ2980円 (2900円OFF)
月額約496円、日額約16円
360日分通常11760円のところ4980円 (6780円OFF)
月額約415円、日額約13円