• home
  • design
  • photo
  • music
  • blog
  • link
  • contact

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である。

css box sample

*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ページが表示されるように工夫すること。また、そのための技術。「検索エンジン最適化」などとも呼ばれる。