オトコのキモチ３

ちょっとHTML(2) - h4，h5 で紹介した見出しをCSSで装飾する例をいくつか。

見出し h4

はてなでよく見かけるタイプ。

h4 {
  width:12em;
  border:solid #CCCCCC;
  border-width:0 0 1px 12px;
  padding:0.4em 0.4em;
}

見出し h4

付箋風。

h4 {
  width:12em;
  border:solid #CCCCCC;
  border-width:1px 1px 1px 12px;
  padding-top:0.4em;
  padding-bottom:0.4em;
  padding-left:0.4em;
}

IE にこんなバグがあるので，padding-rightを指定しない。

見出し h4

適度に目立つ。

h4 {
  width:12em;
  border:solid #CCCCCC;
  border-width:5px 0;
  padding:0.2em 0.4em;
}

見出し h4

目立ちすぎない程度に。

h4 {
  style="width:12em;
  border-bottom:solid 5px #CCCCCC;
  padding:0.2em 0.4em;
}

見出し h4

見出し h5

見出し h6

margin-left を調整すると階層が分かりやすくなるかも 。

h4 {
  border-left:solid 8px #CCCCCC;
  padding:1em 0.4em;
}

h5 {
  margin-left:15px;
  border-left:solid 6px #CCCCCC;
  padding:0.7em 0.4em;
}

h6 {
  margin-left:30px;
  border-left:solid 4px #CCCCCC;
  padding:0.4em;
}

見出し h4
２行目

見出しを２行に。<br />もOK。

h4 {
  border-left:solid 8px #CCCCCC;
  padding:0.4em 0.4em;
  line-height:200%;"
}

見出し h4

背景画像を入れてみた。

h4 {
  width:12em;
  background:url(image-uri);
  padding:0.5em 1em;
}

見出し h4

背景画像を透過GIFにしておけば，背景色が透けて出る。レースまたは網タイツ風。（こんなこともできる参考：Lucky bag::blog: 背景画像に使える透過 GIF）

h4 {
  width:12em;
  background:#FFE9FF url(image-uri);
  padding:0.5em 1em;
}

見出し h4

背景を濃くすれば白抜きの文字もよし。

h4 {
  width:12em;
  background:#993333 url(image-uri);
  padding:0.5em 1em;
  color:#FFFFFFF;
}

見出し h4

border を入れてみる。隆起。

h4 {
  width:12em;
  background:url(image-uri);
  padding:0.5em 1em;
  border:solid #999999;
  border-width:0 1px 1px 0;
}

見出し h4

同じく押下。

h4 {
  width:12em;
  background:url(image-uri);
  padding:0.5em 1em;
  border:solid #999999;
  border-width:1px 0 0 1px;
}

見出し h4

半分から下だけ。セミヌード風。

h4 {
  width:12em;
  background:url(image-uri) repeat-x 0 1.1em;
  padding:0.5em 1em;
}

見出し h4

セミヌード風に背景色。

h4 {
  width:12em;
  background:#FFE9FF url(image-uri) repeat-x 0 1.1em;
  padding:0.5em 1em;
}

背景画像で使用したものは次の２つ。

セミヌード風以外は，3×3px の繰り返しでよいのだが，repeart-x で開始位置を設定する都合上，縦を長めに作ってある。

背景画像は，こんなふうに作っておくと使い勝手がいい。

縦横に繰り返すとき（repeart：CSSで何も書かなければこれ）

繰り返しの最小パターンでコンパクトに。

横に繰り返すとき（repeart-x）

縦を長めに。 見出しが２行になる場合にも対応できるように。長めの見出しはフォントサイズによっては折り返されることがある。

縦に繰り返すとき（repeart-y）　

横を長めに。 リキッド（横幅可変）のときは必須。横幅固定の場合，CSSで横幅を広げたときにも対応できる。

繰り返しをしないとき（no-repeart）

縦横とも大きめに。

img要素で画像を挿入する場合，画像が親要素の幅より大きいと親要素を飛び出すか，親要素の横幅を押し広げてしまう（IE）ので，画像を大きめに作ることはよくない。大きい画像を使うならwidth，heightでサイズを調整する必要がある。が，背景画像はその要素の決められた領域の中だけにしか表示されず，飛び出すことも要素の横幅を広げることもない。なので場合によっては大きめに作っておくほうが後々のためによいこともある。

関連するエントリ

ちょっとHTML/ちょっとCSS - INDEX

ちょっとHTML(2) - h4，h5