ノウハウコラム： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

HTML5で短くなったDOCTYPE宣言

HTML5には「頻繁に書く必要のあるものは簡単に書けるように」という考えがあり、これまで書いていたコードがより簡単になります。たとえば、HTML5において、DOCTYPEは「標準モードへのスイッチ」という役割でしかありません。そのため、DOCTYPE宣言以下のように短くなっていきます。

これまでのDOCTYPEは上記のように長く、そのまま入力できる人は少ないと思います。
HTML5では上記のように長く、複雑だったものは以下のように簡略化されました。

なお、主要なブラウザはIE6も含め、このDOCTYPEで標準モードに切り替わります。

preタグで囲ったテキストは自動改行されないため、文章量が多いとコンテンツ領域を越えてしまったり、越えないように overflow: auto などを指定するのですが、利用規約などをpreでマークアップしたときにはちょっと見難いものになってしまいます（縦横のスクロールバーでます！）。

そんなときに使えるのがpreタグで囲ったテキストも自動改行させるスタイルシートです。記述はとても簡単で以下のコードをpreタグに対して指定してあげるだけです。

連続した がIE6では1つの として表示されることがあります。例えば、文章の行間を1行分空けたいときなどに を2つ指定したりしますが、ある条件が重なるとIE6では1つとして認識されてしまいます。
◆サンプル（別ウィンドウで開きます）

を包括する要素に letter-spacing が指定されている場合に発生します。値はpxの絶対値指定でもemの相対値指定でも発生し、またネガティブ値（-5pxなど）でも発生します。

に letter-spacing: 0 か letter-spacing: normal を指定することで対処できます。
◆サンプル（別ウィンドウで開きます）

サンプルでは 一つ一つに指定していますが、スタイルシートで br { letter-spacing: normal } と記述しても対処できますので、CSSファイルに取り合えず記述しておくのもいいかもしれません。

CSSには様々な指定方法があり、この指定方法によって優先順が決められています。例えば、同じP要素に対してセレクタを下記のように指定したとします。

このように後ろに指定されたものが優先されるというだけではなく、スタイルセレクタの種類によっても優先順位に影響を与えます。

Thickboxの使い方 - 画像やHTMLのポップアップをお手軽に！の記事でThickboxの使い方をご紹介しましたが、prototype.jsとの共存ができないというごとが判明したので、今回はprototype.jsとの共存方法をご紹介します。

重要なポイントは上記のサイトでまとめられていますので、それを踏まえた実際のやり方がこちら。