月別 : Shacolon.com

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と同様に自分でタグの意味づけを行うことができる。

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

実験的なものではありますがとりあえずアップ！ということでめでたしめでたし。2階層目からはまだ未制作ですが、きっとそのうちできるだろうと思います。

ちなみに、このブログはこんなこと書きます。
・CSS
・Webのこと
・学校のこと
・たわごと

「CSS」においてはCSSのちょっとしたテクニックを紹介する予定なので、いろいろ参考にしてください。ちなみに、ここで紹介するCSSテクニックを将来このサイトの主コンテンツにするつもりでいます。お楽しみに～（笑）

これまでの流れとして以下の通り報告。

フェーズ1「サイト設計」
フェーズ2「デザイン作成」
フェーズ3「コーディング」

これからフェーズ4「独自タグの実験」を行います。
MovableTypeで定義されている独自タグがどのように機能するか、といった実験です。
ホントは裏でこっそりやるつもりでしたが今回も公開します。

http://www.shacolon.com/shacolog/

現在リニューアルの準備中です。