Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える

色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用の HTML と CSS コードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらっても OK です :)

サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Safari で動作確認済。

見出しの装飾

斜線を使った見出し

まずは基本。背景画像を使って見出しの下部に斜線を表示させます。斜線だけでなく、線種を変えていろんなデザインに応用できます。

グラデーションを使った見出し

CSS3 を使ってグラデーションを！IE6 ～ 8 にも対応させるため、CSS3 PIEを利用します。まずはCSS3 PIEをダウンロード。PIE.htcファイルをアップロードし、behavior: url(PIE.htc); と -pie-background:linear-gradient(グラデーションの位置と色); を記述すれば OK。「たった一行を追加するだけで IE6/7/8 を CSS3 対応にする -CSS3 PIE」で詳しく説明されています。

グラデーションと角丸を使った見出し

こちらも CSS3 を使います。上記と同様、CSS3 PIE を IE 用に利用。見出しだけでなくボタンなどにも使えますね！

英語も一諸に表示した見出し

時々見かける日本語＋英語の見出し。画像を使っているサイトが多いのですが、テキストでももちろん実装可能です！

リストの装飾

数字のリスト

数字の部分もフォントや色を変えたらとっても素敵なデザインに！ここでは最近マイブームなGoogle Fontを利用。ここのサイトに登録してあるフォントを無料で Web フォントとして使うことができます。IE6〜対応。英語しか登録されていないので、日本語サイトではこのように「部分的に」しか使えないと思いますが…。原理としては、ol でフォントや色を変えて、span で元に戻す感じです。

点の部分だけ色を変える

お手軽に装飾できるこの技。技というほどでもないかもしれませんが、さっと使えて便利です。先ほどと同じくul に色をつけて、 span で元に戻します。

画像を使う

王道ですね。サイトにあった色・マークを選択してください！

グラデーションを使う

再び登場、CSS3 ＋ CSS3 PIE。グラデーションと 1px のラインを使う事で立体感が出せます。

引用文の装飾

背景色とボーダー

とっても無難な装飾。でもあるのとないのでは見た目が全然違いますね！

大きなクォーテーション背景画像

インパクトあります。クライアントや読者からの感想を表示する時にアクセントとなっていいかも。

最初と最後にクォーテーションの画像

ちょんちょんっとつけるだけで雰囲気が全然違いますね。blockquote に最初の画像、中の span タグに閉じ画像をプラス。

これらの色やサイズ、フォントなどをちょっと変えるだけで簡単に使用できると思います！