Works

Flyer

Web

Others

Tips

XTHML + CSS - 簡単な解説と利点 -

Web Standards

Web StandardsとはW3Cが勧告している技術使用で、アクセス方法、コンピュータの環境を問わず見栄えが変わらず、より良い、より正しいWebページ、品質を高め利用者の立場に立ったページ記述を目的としています。

XTHML + CSSを構築して行く上での、より良い、より正しいWebページとは、Validで論理的なXhtml/Htmlを書くことが基本で、視覚的要素は取り除き、構造のみを記述する。従来よく使われてきた、テーブルレイアウト等は使わず、視覚的要素、及びレイアウトはCSSで作るという事です。例をあげて言うなら、太字で表示したい文字があったとき、<b>や<strong>等を使っていましたが、その文字を視覚的要因のみで太字にしたい場合はCSSを使って太文字を表現する、その文字に重要性があり、強調したあいのであれば<strong>を使うということです。要するに、簡単に言えばXhtml/HtmlはWebサイトで発信すべき情報（Contents）のみを記載し、それに応じた適切なタグでマークアップし、レイアウト情報はCSSにもたせるということです。さらに、正しいXhtml/Htmlを記述する事により、様々なBrowsing環境に対応したAccessibleなWebページになります。

SEO

SEOについて、ここで詳しくは話しませんが、Validで論理的なXHTMLを作り、CSSでレイアウトする事によりXHTMLの文章がシンプルな構造になり、検索エンジンが文書構造を容易に理解することができる。これはSEOの基本そして重要なポイントになります

*SEOはもちろん重要で大切ですが、アクセスアップに一番重要で効果的なのは、やっぱり内容。

複数ページのデザイン同時編集

Contentsや構造を編集したい場合はXhtml/Htmlの各ページを編集しなければなりませんが、レイアウト情報をもつCSSを使えば、これを差し替えたり、編集するだけでデザイン変更が簡単に行える。従来のテーブルレイアウト等ではレイアウト情報が一元化されていないため、デザイン変更の際はすべてを作り直さなければいけなかったが、CSSを有効的に使えば大量のページを瞬時に編集出来る。

Browser（Internet Explorer, Firefox, Netscape, Safari等）

CSSでレイアウトするとき注意しなければいけない事があります、Browserによる表示の違いです。各Browserとも、Web Standardsをかなりの程度でサポートしてきています。しかし、Browserによって対応していないCSS属性やバグも存在し、各Browserでの表示確認が必要となります。

CSS Tips

CSSでレイアウトする時には常識と言われているBrowserのDefault Styleを無くす方法。

* {margin:0; padding:0; font-size:100%; font-weight:normal; font-style:normal; text-decoration:none; color:（#適当な色を入れて下さい）; background:transparent;}

最低でもマージンとパディングのStyleは殺したほうがレイアウトしやすいと思います。* {margin:0; padding:0;}

利用可能単位

em	フォントサイズを1とする単位
ex	小文字「x」の高さを1とする単位
px	ピクセル
pt	ポイント(1/72インチ)
pc	パイカ(12ポイント)
mm	ミリメートル
cm	センチメートル
in	インチ(2.54cm)
%	パーセント

*一般的には「em」「px」「%」が使用されています。

ボックスの構造

セレクタで指定された要素はボックスで表示される。内側の余白はPadding、外側の余白はMargin、内側と外側の余白の境界に表示させる事が出来るのがBorderである。

*IE5.5以前のバージョンでは、widthやhightでボックスの大きさを指定するとborderまで含まれてしまう。

用語解説 Quote from IT用語辞典 e-Words

W3C: W3C - The World Wide Web Consortium; 1994年10月に発足した、WWWで利用される技術の標準化をすすめる団体。

XHTML: Extensible HyperText Markup Language; W3Cが仕様策定を行っている、Webページを記述するためによく使われるHTMLを、XMLに適合するように定義し直したマークアップ言語。

CSS: Cascading Style Sheet; Webページのレイアウトを定義する規格。

SEO: Search Engine Optimization; サーチエンジンの上位に自分のWebページが表示されるように工夫すること。また、そのための技術。「検索エンジン最適化」などとも呼ばれる。