XHTML+CSS : Shacolon.com

CSSは使い方によってはユーザビリティを向上させることができる。一般的に　a:hover　を使ったサイトは多く見かける。これはアンカーに対して　:hover　という擬似セレクタを用いることで、マウスが要素の上に乗せた状態 いわゆる「ロールオーバー」を実現できるというもの。

ブラウザの対応度も高いため、JavaScriptで制御するより安全・確実だ。CSSなのでもちろん背景画像も差し替えが可能で、使い方によってはかなり複雑なこともできるので是非習得したい。

ユーザーのアクションに応じて画面を変化させる擬似セレクタは他にもある。それが　:focus　というセレクタなのだが、例えば入力中のテキストエリアの背景色を変化させることで今どこのエリアに入力中なのか一目で分かるようにできる。使い方は下の通り。

textarea:focus {
background: #eee;
}

:focus　はテキストエリアだけでなく、　<input type="text"/>　でも同様のことができる。しかし、CSSに記述する際は下のようにtypeを限定しておいた方が便利だろう。

input[type="text"]:focus {
background: #eee;
}

ちなみに、このセレクタを使うと入力時にボーダーが太く表示される場合があるため、同時に
textarea:focus {
background: #eee;
border: 1px solid #ccc;
}
というように、ボーダーも設定した方が見栄えよくまとまる。

IEだけ特別なCSSを適用させる方法として有名どころで言えば「スターHTMLハック」、「アンダースコアハック」などがある（詳細は続きで記載）。

しかし、ひとつのCSSファイルに全て書き込んでしまうと変更や更新が生じた際に見つけ出せないという問題が発生する。これを防ぐためにIEのバグを修正する専用のCSSファイルを作っておきたい。この場合、IEのみ読み込むように設定しなければならないのだが、以下の方法を使えば簡単に実現可能だ。

まずXHTMLにはインポート専用のCSSファイルを読み込ませておく。

<link rel="stylesheet" type="text/css" media="all" href="css/importer.css" />

メディアに「screen」以外の値を記述すると、NN4.xではCSSを読み込まなくなる。インポート専用のCSSには下のように記述して、基になるCSSファイルとIEのみ読み込ませたいCSSをインポートする。

@import "base.css";
@import iefix.css;

IE以外のブラウザではダブルクォーテーションのない@importは無視される。そのため、IEのみ適用させることが可能だ。ひとつ注意が必要なのが、IEの場合どちらのCSSもインポートされるため、IE専用のCSSファイルには上書きしたいプロパティのみ記述するのが望ましい。

»続きを読む

HTMLをブラウザでどのように表示するかを定義するもの。ブラウザはもともとデフォルトのスタイルシートを持っていて、文字の大きさ、太さ、スタイル、書体など、表示の定義は既に用意されている。

Webサイト製作者はこのスタイルシートを自分で定義することができ、表示方法を自由に操ることができる。これがいわゆるCSS（カスケーディングスタイルシート）と呼ばれ、現在ではどのブラウザでもほとんど意図した通りに表示してくれる。

CSSは文字の表示に関する定義のみならず、例えば画像の周りに5pxほど余白を設けたり、段落の最初に1文字分のスペースを空けたり、更には画面左から500pxの位置にラインを引く・・・なんていうこともできる。CSSを使うことでHTMLの基本的な構造（見出し、段落など）を変えることなく見栄えを操ることができるため、SEO（サーチエンジン最適化）対策やアクセシビリティの向上に繋がる。

CSSのメリットはそれだけではない。HTMLでは表現しえなかった表現も可能となる以外に、作業時間の短縮にも繋がる。これはひとつのCSSファイル（*.css）を複数のHTMLファイル（*.html）で共有することで、全てのページに共通の表示方法を適用させることができるというもの。つまり、CSSファイルにたった1行加えただけで何百、何万のページを一挙にデザイン変更することが可能ということなのだ。

XHTMLはXMLをベースに定義されているため、HTMLよりも記述ルールが厳しくなっている。とは言っても、基本的にはHTML4.01と変わりなく、注意すべきことは以下のことだけなので簡単に移行できる。

• タグは必ず「開始タグ」と「終了タグ」を入れる。
• 空要素はスラッシュで閉じる。
• 宣言は必ず「プロパティ="値"」で構成する。
• タグには小文字を使う。

タグは必ず「開始タグ」と「終了タグ」を入れる。

HTMLというのはこれまで”タグの閉じ忘れ”はブラウザの自動補完によってある程度は許容されていた。しかしXHTMLではこれを補完できない仕組みになっている。下記の通り、必ず閉じるように注意しよう。

悪い例）
<li>リスト1
<li>リスト2
<li>リスト3

良い例）
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>

空要素はスラッシュで閉じる。

<br>タグや<img>タグは空要素といって、「開始タグ」や「終了タグ」といった概念を持たない。タグそのものが表示に影響するものである。これら空要素は下記のようにスラッシュ（/）で閉じる必要がある。

<br />
<img src="image.jpg" width="150" height="100" alt="画像" />

また、下記のように書いても良い。

<br></br>
<img src="image.jpg" width="150" height="100" alt="画像"></img>

宣言は必ず「プロパティ="値"」で構成する。

これまでHTMLでは値を持たないプロパティがいくつか存在していたが、それらも必ず値を入れる必要がある。ただし値にはプロパティ名をいれるようにすること。

悪い例）
<input type="checkbox" checked />

良い例）
<input type="checkbox" checked="checked" />

タグには小文字を使う。

これまでHTMLで構成されたサイトではタグに大文字を用いることができたが、XHTMLの場合全てのタグは小文字で記述するというルールが存在する。

悪い例）
<TABLE>
<TR>
<TD>テーブルタグ</TD>
</TR>
</TABLE>

良い例）
<table>
<tr>
<td>テーブルタグ</td>
</tr>
</table>

XHTMLとは、XMLをベースにHTMLを再定義したもの。HTMLは実質、バージョン4.01で進化は止まっている。XHTMLはいわばHTMLバージョン5のようなもので、現状XHTML1.0で記述されることが多い。（つまりHTML5.0のようなもの。）

なぜHTML5.0ではなくXHTML1.0なのかというと、これはインターネットの将来を見越してのことだと言えるかもしれない。というのも、XHTMLとは「eXtensible Hyper Text Markup Language（エクステンシブルハイパーテキストマークアップランゲージ）」つまり拡張のできるHTMLのことで、XMLと同様に自分でタグの意味づけを行うことができる。

もしも将来「<書籍>」という拡張タグができた場合、世界中に存在する莫大な情報の中から「書籍」に関する情報だけを抜き出すことができる。つまり、全世界の複数のサーバーがひとつの巨大なデータベースとして扱えるようになるということなのだ。