見出しの画像をサイトマップ風 CSS で管理
<h1> の見出しを画像にされてる方は大勢いらっしゃることかと思います。（僕は普段はしてませんけど。）でも、この見出し画像ってどのように管理されてますか？直接 HTML に埋め込んでますか？それとも外部 CSS ファイルに一括して記述されてますか？どちらの方法を採っても、メンテナンスしにくいですよね。
今日は h1 の見出し画像を、独立した見出し画像管理用 CSS ファイル（h1.css）で管理する方法についてのメモです。
- 見出し画像管理用として独立したファイルを設ける（h1.css）
- メイン CSS ファイルの先頭に @import を使って h1.css を取込む
- h1 の id 名はサイト全体の中で一意（unique）にする
- id 名は HTMLファイル名と同一の名前にする
- ディレクトリも "-"（ハイフン）で区切って id 中に記述
- 見出し用画像の名前も HTML ファイル名と同一の名前にする
- h1.css にタブインデントを使ってサイトマップ風に記述
半分以上、思いつきで編み出した方法で、中身はこういうちょっとした工夫の組み合わせなんですけど、これが結構イケそうな感じです。
以前、「SEO効果と見映えを両立した見出し」というエントリーをアップしましたけど、今日はその続編みたいな内容です。
通常の <h1> の取り扱い
「SEO効果と見映えを両立した見出し」で取り上げた mint の作者、Shaun Inman氏は、
- body > #home > #container > #navigation
- body > #home > #container > #content
の 2個所に対して h1 を入れてますが、僕は h1 は原則 "1 h1" per 1 page にすることにしてます。ページ内に <h1> がひとつしかないってことは、その時点で <h1> が一意（ unique ）になるので、<h1> に対して id をつける必要だってなくなりますよね。書式のルールは以下の通り。
<title>PageTitle - WebsiteName</title>
:
<body>
<h1>PageTitle</h1>
:
似たようなルールにしてる方はたくさんおられるかと思いますが、僕の場合はこのように、<title> と <h1> とで同一のページタイトルをつけ、<title> にはさらにサイト名もつけてます。別に何か特別なことをしてるわけじゃありませんが、こうしておくと、Google などでヒットした時にページタイトルと一緒にサイト名も表示されるので、どこのサイトのページかが瞬時にわかるわけです。（どこのサイトのリソースかって、結構重視しません？）
見出しを画像にしている場合は id があった方が..
ただ、これは僕が幸いにも見出しに画像を使わずに済ませられる環境にいるから言えるタワゴトであって、商用サイトなどで見出しを画像で飾る必要がある場合、ページごとに <h1> に対して異なる画像を割り当てたくなることが当然ありますよね。そういう時、僕もさすがにやむをえず id をつけます。この時、<h1> の id はサイト全体に照らして、ページごとにユニークな名前をつける訳ですが（つまりサイト全体で重複がないようにする）、これをすべてデフォルト CSS ファイルに記述すると、CSS ファイルが肥大化して見にくくなるので（Inman氏のケースもそう）、別途 h1.css もしくは hn.css という名前の CSS ファイルを作って、そこで管理するようにしてます。つまり見出し管理専用 CSS ファイルというわけです。この CSS はデフォルト CSS（僕の場合は screen.css という名前にしてることが多いです。）の頭に、
などと入れておけば、編集個所は 1個所で済みますし、いちいち HTML ファイルごとに <link> として追加する必要がなくなるのでとっても楽です。
h1.css をサイトマップ化してしまおう！
さらにさらにつけ加えるなら、この h1.css の中の見出し群をタブインデントを使って、サイトマップ風にしてしまうと、メンテナンス時にとっても便利でオススメです（下のようなカンジです）。
----------------------------------- */
h1 {
height: 120px;
text-indent: -3000px;
line-height: 0;
margin: 0;
padding: 0;
/* 個別設定
----------------------------------- */
h1#index {....} /* index.htm の見出し */
h1#features-upgraded {
/* （以下、プロパティは省略 ^ ^;;） */
h1#features-fixed {....}
h1#features-known-bugs {....}
h1#price-category1-standard {....}
h1#price-category1-professional {....}
h1#members-services {....}
ポイントは以下の通り。
- h1 の id 名は HTML ファイル名と同じにする！
- id 名を考える手間が軽減される
- h1.cssを見たときにも一目でHTML側のファイル名がわかる
- よってh1.css自体がほぼ完全なサイトマップになる！
- つまるところ、初めて h1.css を覗く人でも瞬時にどこに何が書かれているかが分かるし、探しやすい！
- ネーミングルールがはっきりしてるので、HTML コーダーと CSS デザイナーとでの完全分業ができる！
- 背景画像の名前も HTML ファイル名と同じにする！
- 画像と HTML の対応関係の間違いをすぐに発見できる！（Perl などで簡単なチェックプログラムも書ける！）
- スクリプトや CMS ツール等を使って、HTML や CSS の追加作業がほぼ自動化できる！
- ディレクトリ階層は "-"（ハイフン）で仕切る（id名 = ディレクトリ名 + ファイル名とすれば、意識しなくても、自然と id名がサイト全体で一意になる）
（注：IE 3 のみハイフン入りセレクタに非対応。）
ちなみに CSS ソースにタブインデントをつけて文書構造を把握しやすくするというテクニックは、"CSS の可読性を高めるためのアイデア"@Lucky bag::blogあたりからヒントを頂戴してます。
id 名と HTML のファイル名を同一にする点などは、クラス名とファイル名が対応してる必要がある Java っぽい発想ですけど、それだけに結構有効なんじゃないかと思うんですけど、いかがでしょう？皆さまのご意見、お待ちしてまーす。
2006-01-08 追記
言い忘れてましたが、セレクタの頭にわざわざ "h1" を冠しているのは、<h1> 以外のところで使う id 名とのバッティングは許容しておくためです。HTML コーダーの人がいちいちページ内で使う id 名が重複してないかを h1.css で確認するなんて馬鹿げてますからね。id は本来、ページ内でユニークであればいい訳ですから。
あと、素朴な疑問。XHTML の id 属性値や CSS セレクタの文字数の上限って何文字くらいなんでしょう？256文字くらいはいけるのかな？ご存知の方は是非教えてください。(^_^;)
| 固定リンク
「［Web］XHTML」カテゴリの記事
- HTML の見出しをめぐる議論(2007.07.11)
- Re: XHTML+CSS (r)evolution, 3rdの内容は信ずるに値するか?(2007.06.03)
- 論理構造を文脈に読み換えながら class 名を考える(2007.05.30)
- 定義リストの違和感（続）(2007.05.28)
- 定義リストの違和感(2007.05.26)
この記事へのコメントは終了しました。
コメント