大抵のWebサイトはコンテンツや文章がいくつもありますよね。
そうなると、見出しは何回も出てくることが多く、CSSでかっこよくデザイン出来るととても便利です。また、hタグによる見出しは検索エンジンに引っかかりやすい特性があります。
CSSで画像を指定することで、オリジナルの見出しを作ることもスタンダードな方法ですが、今回は画像を使用せずにできるかっこいい見出しを作っていきましょう。
左に罫線の見出し
よく見かけると思いますが、とても基本的な見出しの1つです。CSSは下記の様な記述になります。
|
1 2 3 4 |
h1 { padding: .30em 0 .30em .70em; border-left: 7px solid #87CEFA; } |
内側の余白と、左側の罫線を指定しただけでわかりやすい見出しが作れました。
更に、下に罫線を指定することでより強調した見出しになります。
|
1 2 3 4 5 6 |
CSS/ h1 { padding: .30em 0 .30em .70em; border-left: 7px solid #87CEFA; border-bottom: 1px solid #87CEFA; } |
見出し下の罫線の指定を追加しました。
罫線で囲む
他にもただ囲みたいだけの場合は、borderで指定します。
|
1 2 3 4 |
h1 { padding: .30em 0 .30em .70em; border: 1px solid #191970; } |
更に、radiusの指定も記述することで、角を丸くすることもできます。
|
1 2 3 4 5 |
h1 { padding: .30em 0 .30em .70em; border: 1px solid #191970; border-radius: 4px; } |
罫線のカスタマイズ
見出しに欠かせないのが、線を上下や左右、または囲むように配置するスタイリングです。
先ほどご紹介したサンプルでは、罫線は実線(solid)を指定していましたが、その他にも色々な種類の罫線が指定できるので、線の種類を変更するだけで大きくカスタマイズが可能です。
・dotted 点
・dashed 点線
・double 二重線
・none なし
その他にも色々あるので、デザインにあわせて試してみてください。
背景色を変える
これも簡単に見出しを強調することができるスタイリングです。
|
1 2 3 4 |
h1 { padding: .5em .75em; background-color: #87CEFA; } |
背景色を変えた時も、radiusの指定も記述することで、更に角を丸くできます。
|
1 2 3 4 5 |
h1 { padding: .5em .75em; background-color: #87CEFA; border-radius: 5px; } |
好みのスタイルを組み合わせる
代表的なものをいくつか紹介しましたが、これらを組み合わせることでよりたくさんのかっこいい見出しを作ることができます。
|
1 2 3 4 5 |
h1 { padding: .5em .75em; background-color:#87CEFA; border-top: 1px solid #000; } |
これは背景色の指定と、下の罫線の指定を組み合わせたものです。更に上にも罫線を指定すると以下の様になります。
|
1 2 3 4 5 6 |
h1 { padding: .5em .75em; background-color:#87CEFA; border-top: 2px solid #000; border-bottom: 2px solid #000; } |
線の太さも1px太くしてみました。
この様に簡単な指定を組み合わせるだけで、様々な見出しを作ることが可能です。文字の色やサイズでも印象が大きく変わるので、デザインに合わせて変更してみましょう。
