HOME

--- 項目 --- リスト 見出し テーブル 引用 フォーム フレーズ要素 アンカー リスト２ マークアップ CSS 印刷用スタイル レイアウト テキスト 画像置換 body要素

見出し

マークアップ

<h1>Beautiful Page Title</h1>

スタイルシート

シンプルな見栄え

h1 {
	font-family: Arial, sans-serif;
	font-size: 24px;
	color: #369;
	}

▲このページのトップへ

ボーダーを追加

h1 {
	font-family: Arial, sans-serif;
	font-size: 24px;
	color: #369;
	padding-bottom: 4px;
	border-bottom: 1px solid #999;
	}

★見出しはブロックレベル要素なので、ボーダーはテキストの下だけに伸びているのではなく、ページを水平に横切って可能な限り長く描画される

バックグラウンドの追加

わずかなパディングとバックグラウンド・カラーを追加するだけで、画像を使わなくてもスタイリッシュな見出しになる

h1 {
	font-family: Arial, sans-serif;
	font-size: 24px;
	color: #fff;
	padding: 4px;
	background-color: #696;
	}

▲このページのトップへ

バックグラウンドとボーダー

見出しの下に細いボーダーを追加し、明るいバックグラウンド・カラーと組み合わせると、画像を使わずに三次元的な視覚効果を生み出すことができる。
色の濃淡を調整することで、三次元的なエフェクトが生き生きとしたものになる。

h1 {
	font-family: Arial, sans-serif;
	font-size: 24px;
	color: #666;
	padding: 4px;
	background-color: #ddd;
	border-bottom: 2px solid #ccc;
	}

▲このページのトップへ

繰り返し表示させる背景

画像エディタを用いて、10×10の小さなグラデーションの画像を作成する。

h1 {
	font-family: Arial, sans-serif;
	font-size: 24px;
	color: #369;
	padding-bottom: 14px;
	background: url(10x10.gif) repeat-x bottom;
	}

★背景画像の指定にrepeat-xを使用すると、水平方向のみに繰り返される（垂直方向の繰り返しにはrepeat-y）。また、画像を要素の下部に設定し、若干の余分な下部パディングを追加することで、背景画像を上のテキスト間のスペースを調整できる。

▲このページのトップへ

簡単に交換可能なアイコン

ページ上の装飾的なリストマーカーやアイコンをインライン画像としてマークアップする代わりに、CSSのbackgroundプロパティを用いれば、テキストの左にアイコンを設定することができる。この方法により、サイトの見た目の印象が簡単に変更することができるようになる。ひとつのCSSを更新するだけで、サイト全体の見栄えがすぐに変更される。
このコードは、背景画像を繰り返し表示させたサンプルに似ている。

h1 {
	font-family: Arial, sans-serif;
	font-size: 24px;
	color: #369;
	padding-left: 30px;
	background: url(arrowicon.gif) no-repeat 0 50%;
	}

▲このページのトップへ

カメレオンエフェクト

マークアップに<img>を記述することにより実現されるトリック

<h3><img src="13x13trans.gif" width="13" height="13" alt="*" />BEAUTIFULDAYS</h3>

★CSSで処理するのではなくXHTMLでマークアップする理由
　・見出しのトピックに応じて、さまざまなアイコンがある（ブックコーナーならブックアイコン、日替わり引用句ならクォーテーションアイコン、など）
　・月ごとにサイト全体のカラースキームを変更する。この変更はCSSを使用する。
★新しいカラースキームに変更するごとに新しい画像を作成しなくても、ページの他の要素と一緒にアイコンのカラーを交換できるように、白と透明（交換された色が透けて表示される）の2色を使用したアイコンを作成する。

h3 img {
	background: #696;
	vertical-align: middle;
	}

★CSSで指定した背景色は、ページ上にインラインでコーディングされた画像、またはCSSで表示させた画像より後ろに表示される。

h1 {
	font-family: Arial, sans-serif;
	font-size: 24px;
	color: #fff;
	padding-left: 30px;
	background: #696 url(13x13arrow.gif) no-repeat 0 50%;
	}

ここで、13x13arrow.gifは、指定した背景色（#696）の上に表示される。
このトリックが役に立つのは、小さな角丸コーナーや装飾的な画像の配置と色が関係し合う場合である。これらの（コンテンツそのものではない）画像の表示は完全にCSSファイルから制御するようにしておくと、将来更新を行う場合に簡単に交換できる。

▲このページのトップへ