友人のブロガーが「hタグは文字の大小を決めるタグ」だと思っていたそうです。
WEBデザイナーやってる人間からすると衝撃だったんですけど、もしかしたら結構こういう基礎的なところを知らずにブログやってる人も多いのかなと。
今日は見出しを表すhタグについて解説します。
きちんとした階層構造にしよう
htmlの見出しのタグというと、h1～h6までのタグです。
hタグは見出しを表すタグで、文字の大小を表すだけではありません。
文章の中できちんと見出しとして使いましょう。
ブログの場合テーマによってまちまちですが、だいたい記事のタイトルがh1になってると思います。
なので本文中で使うタグは、一番大きい見出しをh2で、それ以降順番にh3,h4…と使っていきます。
つまりこんな感じになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <h1>Evernote連携アプリまとめ(記事タイトル)</h1>Evernote連携アプリまとめを紹介します。<h2>僕が使ってるEvernote連携アプリ(大見出し)</h2>僕が使ってるEvernote連携アプリはこちら<h3>送信系アプリ(中見出し)</h3>送る系のアプリです。<h4>FastEver(小見出し)</h4>AppHTMLで成形したリンクなど。<h4>PostEver(小見出し)</h4>AppHTMLで成形したリンクなど。<h3>整理系アプリ(中見出し)</h3>整理する系のアプリです。<h4>MoveEver(小見出し)</h4>AppHTMLで成形したリンクなど。<h4>MergeEver(小見出し)</h4>AppHTMLで成形したリンクなど。 |
このようにきちんとした階層構造になるように見出しを付けていきましょう。
良くない例） h1の次にh2を使わず、h3を使う。
hタグをhtmlでデザインしないほうがいい
見出しのデザインをhtmlでやってる人をたびたび見かけます。
僕がよく見かける間違った例と、本当はこのように書いた方がいいという正しい例を書いておきます。
間違った見出しの例
間違った見出しの書き方はたとえばこういう感じ。
1 | <h2><strong><span style="color:#000000;">h2の見出し</span></strong></h2> |
こういう書き方は文法上あってはいるものの、基本的には良くないです。
理由としては
- デザインはCSSファイルで指定するべきだから
- htmlに直接書くとあとで編集が大変だから
- SEO的にもイケてないと思う(SEOに関してはド素人なので断言できないですけど)
という感じ。
その場合はspanやstrongを使わず、h2にstyleと書いて指定した方がいいと思います。
【追記】
strongタグをhタグ内に入れることは文法上間違いではないとご指摘いただきましたので上記の文章を一部改訂しました。
ただ、やはり「太字にしたい」という理由だけでstrongタグを入れてるとしたら外した方がいいと僕は思ってます。
hタグ内で強調したい箇所があり、そこをstrongタグでマークアップしているのであればまったく問題ないです。
正しい見出しの例
こちらが正しい見出しの書き方です。
1 2 3 4 5 | <h2>h2の見出し</h2><h3>h3の見出し</h3><h4>h4の見出し</h4><h2 class="midashi_L">classを指定するのもあり</h2> |
では文字の色を変えたり背景色を変えるといったデザインはどうしたらいいかというと、cssの外部ファイルに記述します。
hタグのデザインをcssのファイルに記述する
文字の色を大きくしたり、文字を太くしたり、色を変えたり…。
そういったデザインの変更点はすべてcssの外部ファイルに記述します。
html側にはclass名かid名を付けて、そのclass,idに応じたスタイルをcssファイル側で指定してあげると、そのデザインが反映されるという仕組みです。
・idは一度しか使えない
・classは何度も使える
という点だけです。
見出しっぽい帯の例です。
1 2 3 4 5 | <div class=".entry-content"><h2>h2の見出し</h2></div> |
1 2 3 4 5 6 7 8 | .entry-content h2{font-size:150%; /* 文字サイズ大き目(24px,18pt相当) */font-weight:bold; /* 文字を太文字に */color:#000000; /* 文字の色を黒に */border-bottom:1px solid #ffaa00; /* 見出しの下に1pxのオレンジ色の直線を引く */background-color:#ffffcc; /* 背景色を薄いクリーム色に */padding:5px 0 0 10px; /* 余白の調整 */} |
「.entry-content h2」という箇所はWordPressのTwentytenの構造に合わせたclass名です。ご自身のブログで使われる場合は任意のclass名、もしくはid名に変えて使ってください。
▼実際上記のソースを再現するとこうなります。
最後に
駆け足で説明してしまったので、もしかしたら初心者の方はかえって混乱してしまうかもしれませんね(^^;)
ご不明な点などありましたら、お気軽にTwitterでメンションください！
ご質問内容をブログのネタにさせていただきます。