Blue Point Solutions

HTMLタグにIDやクラスを指定するワケ

読者のニコラスさんからの投稿です：

<body>要素や<HTML>要素内で、IDやクラスが使われているのをよく目にするのですが、何故この様なことをする必要があるのでしょうか。どちらの要素もファイル上1つしか存在しないはずなので、bodyやhtmlをCSSで直接装飾したらよいのではないでしょうか。

ニコラスさんがおっしゃっているのは、おそらくこういうことではないかと思います：

<html class="happyNewYear">

.happyNewYear { background: url(/images/fireworks.jpg); }

ただ下記の様にして、クラスネームを省略してしまったらいいのではないかと言うことですよね：

html { background: url(/images/fireworks.jpg); }

結局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()」というファンクションがあり、こちらはロードされているページの種類に応じて、多数のクラスを出力してくれます。殆どのテーマに下記のようなオープニングボディタグがあります：

<body <?php body_class(); ?>>

シングルポストのページでは、この様な出力になるかと思います：

<body class="single single-post postid-8212 logged-in">

ホームページの場合は、この様な出力になるかと思います：

<body class="home blog">

このお陰でCSSで使用可能な多数のフックが出来るので、ページの種類に応じて個別設定が可能になります。

.single h2 {
   font-size: 150%; /* Fonts bigger on single post pages */
}
.home aside {
   width: 100%;  /* Sidebar kicked to bottom of page on homepage */
}

html要素を直接スタイル設定することが出来るのに、何故WordPressが「body_class」と呼ぶのかよく分かりませんよね。そうなんです。この機能をhtml要素に適用させることが出来るんですよ。

Modernizr

Modernizrは、JavaScriptライブラリで、こちらもトップレベルのクラスを追加してくれます。ロードされ実行される時にクラスを動的にhtml要素に追加します。クラスは現在のブラウザの機能を象徴しており、WordPressが適用させてくるクラスは、個々のページをそれぞれ別々に設定することを可能とするクラスであり、Modernizerが適用させてくるクラスは、ブラウザの機能に応じて同じページが異なって見えるように使用出来るクラスです。
Modernizr使用後のhtml要素はこのような感じになります：

<html class="js flexbox canvas canvastext no-webgl no-touch
  geolocation postmessage websqldatabase no-indexeddb
  hashchange history draganddrop websockets rgba hsla
  multiplebgs backgroundsize borderimage borderradius
  boxshadow textshadow opacity cssanimations csscolumns
  cssgradients cssreflections csstransforms no-csstransforms3d
  csstransitions fontface video audio localstorage sessionstorage
  webworkers applicationcache svg inlinesvg smil svgclippaths">

なのでCSSを使って、機能に応じて異なる設定をすることが出来ます：

section {
  background: url(boring-fallback.jpg);
}
.multiplebgs section {
  background:
    url(logo.png) top left no-repeat,
    url(texture.jpg),
    url(top-edge.png) top left repeat-y;
}