HTMLタグにIDやクラスを指定するワケ
読者のニコラスさんからの投稿です： <body>要素や<HTML>要素内で、IDやクラスが使われているのをよく目にするのですが、何故この様なことをする必要があるのでしょうか。どちらの要素もファイル上1つしか存在しないはずなので、bodyやhtmlをCSSで直接装飾したらよいのではないでしょうか。 ニコラスさんがおっしゃっているのは、おそらくこういうことではないかと思います： ただ下記の様にして、クラスネームを省略してしまったらいいのではないかと言うことですよね： 結局HTMLファイル上に、<html>要素は1つしか存在しませんものね。 ニコラスさんのおっしゃることはよく分かります。確かにWEBページのソース表示を見てみると、<html>タグ内に余計なクラスやIDが記述されているのを見かけることがあります。しかし実際、これらのトップレベルのクラスは非常に便利なんです。それではセオリーの復習と、実際の例をいくつか見てみましょうか。 この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 多数のページ、少数のCSSファイル CSSの基本的な考え方は、マークアップからデザイン部分を抽出することです。100を超える全てのページが同じCSSファイルを共有することだってあるのです。これは様々な理由から、きわめて効率的であると言えるかと思います。まず1つ目の理由として、デザインの変更が必要となった時、100ページそれぞれを修正するよりも、一発修正出来た方が楽に決まっています。トップレベルのクラスはどのページが現在表示されているのか識別するのに役に立ち、またその他のページとは異なるスタイリングを施すことも可能にします。 異なるページで、同じCSSを共有し、異なるデザインを施す。そして最高レベルの要素で発生していることなので、ページ全体のデザインは、個々のクラスを使用して設定することが出来ます。（よろしければ過去のアーティクルもご参照くださいね。） WordPress WordPressのパワーサイトでは、ページを表示するためにテーマを使用します。サイト上の全てのページはアクティブなテーマから作られています。このテーマには「header.php」と呼ばれるファイルがあり、全てのページの上部（doctypeやhead、bodyやhtmlのオープニングタグなど）を出力しています。また、WordPressには「body_class()」というファンクションがあり、こちらはロードされているページの種類に応じて、多数のクラスを出力してくれます。殆どのテーマに下記のようなオープニングボディタグがあります： シングルポストのページでは、この様な出力になるかと思います： ホームページの場合は、この様な出力になるかと思います： このお陰でCSSで使用可能な多数のフックが出来るので、ページの種類に応じて個別設定が可能になります。 html要素を直接スタイル設定することが出来るのに、何故WordPressが「body_class」と呼ぶのかよく分かりませんよね。そうなんです。この機能をhtml要素に適用させることが出来るんですよ。 Modernizr Modernizrは、JavaScriptライブラリで、こちらもトップレベルのクラスを追加してくれます。ロードされ実行される時にクラスを動的にhtml要素に追加します。クラスは現在のブラウザの機能を象徴しており、WordPressが適用させてくるクラスは、個々のページをそれぞれ別々に設定することを可能とするクラスであり、Modernizerが適用させてくるクラスは、ブラウザの機能に応じて同じページが異なって見えるように使用出来るクラスです。 Modernizr使用後のhtml要素はこのような感じになります： なのでCSSを使って、機能に応じて異なる設定をすることが出来ます： その他には？ もしこの他にもトップレベルのクラスの使用方法をご存知でしたら、是非教えてください。
