カンタンにCSSで見出しを作ってみよう！

CSSの勉強をしています、@jinnaitkaumiです。

有名なブログはどれも、分かりやすい見出しを使っていますよね。それを作ってみましょう。

ようはCSSというデザインシートに、例えば「h2」という名前をつけて、いろいろ定義しておいて、それを実際の記事で呼び出せばいいのです。

<h2>見出し</h2>

↑こんな感じでね。

今回はデザイン的な話をしようかな、と思います。
素人がカンタンに話すだけなので、一応、検索で調べたり、他のブロガーさんのソースを読んでみたりすることをオススメします。

• 見出しのデザインを変更して、タグもすべて修正しました！ | jinnaitakumi.com

デザインしよう

今回、目指すのはよく見かけるこういう形（↓）の見出しです。

ソースから見て行きましょう

h2 {
    font-size:115.5%;
    font-weight:bold;
    border-color:#36f;
    border-width:0 0 1px 10px;
    border-style:solid;
    background:#fff;
    padding:7px 10px 5px 10px;
}

順番がもしかしたら良くないかもしれないので、その辺はあしからず。

font-size

分かりやすいところから、「font-size」は文字サイズを調整できます。

font-weight

「bold」にすれば太字になります。

border-color

見出しのラインの色を指定します。
カラーのコードはこちらが参考になりますよ

• ウェブセーフカラー色相環
• HTML色見本

border-wigth

ラインの幅を調整できます。
左から順番に「上の幅、右の幅、下の幅、左の幅」です。

background

見出しの部分の背の色ですね。
#fffはホワイトですが、例えば#f00などにすれば、赤になります。

padding

文字の配置を調整します。「上から何px離す」とかですね。

あとはタグを付けて呼び出す

実際にCSSにデザインしたらあとは呼び出せばOKです。

<h2>見出し</h2>

CSSで見出しのデザインを作るメリット

「HTMLで直接装飾したほうがカンタンじゃん！」
と思う人がいるかもしれませんが、そうなると、あとからデザインの修正が全くできなくなります。

またHTMLの規格が変わって、使えなくなる装飾タグが出てくる可能性もあります。
そういうときに、HTMLで直接装飾していると、あとから修正するのがホントに大変です。

ただCSSにデザインを作ってh2タグなどで呼び出すだけにしておけば、CSSさえ修正すれば、昔の記事も全部修正できてしまいます。

これはとても便利ですよ。

おわりに

まだ私自身が勉強中ですから、これからも新しい発見などがあったら、ブログでシェアしていこうと思っています。

ブログの見栄えを良くすることは、記事が読みやすくすることにもなります。見出しがなかったり、デザインが微妙だと、ちょっと読みにくいですよね。

• 見出しのデザインを変更して、タグもすべて修正しました！ | jinnaitakumi.com

これはWordPressやMovavleTypeはもちろん、FC2などでも使えるので、ブロガーの方はぜひ、試してみてください。

※CSSに詳しい方などで、本記事の間違いなどに気がついた方がいましたら、ご連絡いただけるとありがたいです。TwitterでもメールでもOKです。