【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

16Apr2012

CSSで作るシンプルな見出し(Hタグ)デザイン

CSSで作る見出しデザイン僕はデザイン関連はまるっきり人任せなのですが、今回は少々デザイン関連のお話にチャレンジしてみます^^;

CSSで作るシンプルな見出しのサンプルをいくつかご紹介します。

CSS3では透過やグラデーションを扱える為、デザインの可能性がトンデモなく広がりました。
ただし未だにCSS3非対応のブラウザを愛用している人が多い事と、当サイトは初心者向けという事ですので、今回はCSS2で作る見出しサンプルです。

サンプルでは色の指定を当サイトで使用される【緑】になっていますので、お好きな色に代えてお使いください。

※見出しだらけでゴチャゴチャしていますが、頭にナンバリングされているのが本物の見出しです 笑

1. CSSで作る見出しのサンプル ”超”基本編

まずは文頭にアクセントを。

CSSで作る見出しサンプル その1

h2 {
border-left:5px solid #48832C;
padding:3px 15px;
}

これに下線をつけてみると・・・

CSSで作る見出しサンプル その2

h2 {
border-left:5px solid #48832C;
border-bottom:1px solid #48832C;
padding:3px 15px 5px;
}

下にborderが追加された分、視覚的にはバランスが崩れるのでpaddingで調節しています。

次は全部囲っちゃいましょう!
(1pxのborderを5pxの左borderで上書きしている点に注意。順番が逆だと4辺1pxになります。。)

CSSで作る見出しサンプル その3

h2 {
border:1px solid #48832C;
border-left:5px solid #48832C;
padding:3px 15px;
}

border指定の応用でいろいろ作れますね

CSSで作る見出しサンプル その4

h2 {
border:1px solid #48832C;
border-left:5px solid #48832C;
border-right:5px solid #48832C;
padding:3px 15px;
}

CSSで作る見出しサンプル その5

h2 {
border:1px solid #48832C;
border-left:6px solid #48832C;
border-bottom:2px solid #48832C;
padding:3px 15px;
}

borderだけのデザインに飽きたので背景を白にしてみます。

CSSで作る見出しサンプル その6

h2 {
border:1px solid #48832C;
border-left:5px solid #48832C;
padding:3px 15px;
background-color:#FFF;
}

当サイトのデザインにはまったくマッチしていませんが、よく使われているデザインです^^;

CSSで作る見出しサンプル その7

h2 {
border-left:5px solid #48832C;
padding:3px 15px;
background-color:#FFF;
}

これらのテクだけでもちょっと頑張れば企業サイトっぽい見出しになります。

銀行系??

CSSで作る見出しサンプル その8

h2 {
border-top:2px solid #5285C2;
border-bottom:1px solid #999;
background-color:#f9f9f9;
padding:4px; color:#444;
}

IT系??

CSSで作る見出しサンプル その9

h2 {
border-left:1px solid #0F9;
border-bottom:14px solid #eee;
padding:6px 0 11px 10px;
background-color:#FFF;
color:#777;
}

趣向を代えて、点線系はどうでしょうか?

CSSで作る見出しサンプル 点線系1

h2 {
border-bottom:2px dotted #48832C;
padding:4px 6px;
}

CSSで作る見出しサンプル 点線系2

h2 {
border-bottom:2px dashed #48832C;
padding:4px 6px;
}

太めの点線はかわいい雰囲気になりますね

CSSで作る見出しサンプル 点線系3

h2 {
border-bottom:2px dashed #48832C;
text-align:center;
color:#48832C;
padding:4px 6px;
}

2. 実線以外のボーダーを使うと・・・

CSSのデザインはブラウザごとに微妙に異なります。
点線系を使うとそれが明らかになりますので注意してください。
ブラウザごとのボーダーデザインの違い

3. divタグも併用するとデザインの幅が広がります

ここまではHタグのみを使ったデザインでした。

Hタグの外側にDivタグを設置することで、デザインの幅がものすごく広がります。

CSSのボーダーのみを使ったシンプルなデザインでも、2重にする事で以下のようになります。

CSSで作る見出しサンプル 2重構造

<div class="a">
<h2 class="b">CSSで作る見出しサンプル 2重構造</h2>
</div>
.a {
border:1px solid #48832C;
}
.b {
border-left:4px solid #48832C;
margin:5px;
padding-left:10px;
}

ちょっとグレードアップしましたね^^

あとはみなさんのセンス次第です!(←デザインの引き出しが少ないので作例が作れない!!)

4. 説明付きの見出しデザイン

説明を付けたい場合は2種類の方法が考えられます。

一つは、説明ごとHタグに入れてしまう方法。

CSSで作る見出しサンプル 説明付き1説明付きの見出しでは見出し本文の下に短い説明が付きます

<h2 class="a">
CSSで作る見出しサンプル 説明付き1
<span class="b">説明付きの見出しでは見出し本文の下に短い説明が付きます</span>
</h2>
.a {
border-left:5px solid #48832C;
border-bottom:1px solid #48832C;
padding:3px 10px;
}
.b {
display:block; //spanをブロック要素に
margin:5px 0 0 8px;
color:#999;
font-size:0.5em; //h2に対して50%
font-weight:400;
}

ただし、この方法だと「説明部分は文書構造的にH(見出し)なのか?」という疑問に直面します。個人的には”見出しは一文である”と決めているので、説明部分は見出しとは言えず、それゆえHタグに説明まで含めるのは文書構造的に間違いだと思います。

こんなクソ生真面目な話に興味ない場合はH内に説明を入れてもいいですが、真面目なWEB制作を心がける人は以下の方法を使い”見出し”と”説明”を分離させましょう!

CSSで作る見出しサンプル 説明付き2

説明付きの見出しでは見出し本文の下に短い説明が付きます

<div class="a">
<h2 class="b">CSSで作る見出しサンプル 説明付き1</h2>
<p class="c">説明付きの見出しでは見出し本文の下に短い説明が付きます</p>
</div>
.a {
border-left:5px solid #48832C;
border-bottom:1px solid #48832C;
padding:3px 10px;
}
.b {
margin:0; //divのpaddingとpのmarginで余白を調節しているのでhのmarginは0
}
.c {
margin:5px 0 0 8px;
color:#999;
font-size:0.7em; //通常のpに対して70%サイズ
}

「SEO的には全部Hタグに入れたほうがいいでしょ!?」と思った人は、こちらの記事をお読みください。

オススメ記事:“SEO”は死語になる!? (比較的短文です)

5. 画像を使った見出しの作りかた

5.1. チェックボックスを付けてみよう!

「CSSで作る」と言った場合、一般的には「画像を使わない」という意味になると思います。。

が、やはり画像を使った見出しのほうがかっこいいですので、ここでも軽く作り方をご紹介します。

まずは”ありがち”な以下のチェックボックス画像を、見出しに付けてみましょう!
チェックボックスを見出しに取り入れる

Hタグに背景画像として表示すると、こんな感じ。

CSSで作る見出しサンプル 2重構造

<h2 class="a">CSSで作る見出しサンプル 画像見出し1</h2>
.a {
background:url(画像のURL) no-repeat left center;
padding-left:30px; //画像の分だけ左に余白を確保する
}

もうちょっと見出しっぽくする為に、ボーダーを付けてみましょう。
ボーダー、ボーダー、、、バカの一つ覚えみたいで恥ずかしいけど、ボクめげない!!

CSSで作る見出しサンプル 画像見出し2

.a {
background:url(画像のURL) no-repeat left center;
padding-left:30px;
padding:5px 0 5px 30px;
border-bottom:2px dotted #48832C;
}

5.2. 画像を使う際の注意

見出しに画像を使う時に注意したい点が一つあります。
それは、見出しが2行以上になった時を考慮する、という事。

2行を想定していない画像を使って、ちょっとテストしてみましょう。
(スマホでは意図しない表示になるかもしれません。。作例と説明が意味不明の場合は、一般的なモニタサイズのPCで閲覧してください><)

画像見出しの注意

文章を詰め込んで2行以上にしてみます。

CSSで作る見出しサンプル 画像見出しを作る際は高さ固定のデザインで作ってしまうと画像をはみ出して変な感じになっちゃいます。気をつけましょう!

汎用性を考えると見出しデザインは「2行以上になる」事を考慮する必要があります。
高さを固定してしまうのではなく上下に柔軟性のあるデザインが求められます。

これを実現する為には

・下(上)のみの画像デザイン
・L字型の画像デザイン
・上下にループする背景画像

などが最適です。

というか、画像で全体を囲ってしまわなければ、相当おかしな事にはなりません。

関連記事