CSSの基礎 その1 > CSSの基礎 その2 > 作例 > 総合

Cascading Style Sheets

CSSはHTML・XHTML言語でデザインを担当しホームページをより表現力が豊かになります。Webページの主要なデザインのパターンを、デザインのバランスを目的にしたサンプルです。HTML/XHTMLやスタイルシート(CSS)の基本的な使い方を勉強しながら、いつでも使える参考フォームと致します。

スタイルシートとは?

XHTMLは本来論理構造を記述するものであり、デザインついてはあまり考慮されていません。近年デザインを重視したWebページの需要が高まってきています。そこでCSS(Cascading Style Sheets/スタイルシート)がデザインを構成するものとしてサポートされるようになりました。スタイルシートは細かなデザイン設定が可能になり、従来のHTMLより高度なレイアウトデザインが実現できます。そのため、Webページの論理構造をXHTMLが担当し、デザイン面の設定をCSS(スタイルシート)が担当するようになりました。スタイルシートではデザイン面だけでなく印刷に関する設定などのWebページ以外への出力についてもサポートされています。

※スタイルシートを使えば、タグでは実現できなかった凝ったページを作ることができます。

スタイルシートの基本

スタイルシートはXHTMLに埋め込んで記述することが出来ます。埋め込む場合は<head>~</head>タグの中に記述し、どのタグにどんな効果を与えるか定義することができます。

スタイルシートの記述方法

スタイルシートの記述方法には、3通りあります。

●XHTML内の埋め込み
※クラス名やIDを定義して、タグの中でも指定した部分だけにスタイルシートを適用することができます。クラス名は本文中に何度でも使うことができますが、ID名は1ケ所しか使うことができません。

●タグに直接記述
スタイルシートを認識しないブラウザでは<style>タグに囲まれた設定部分を本文と誤解し表示します。それを避けるためにスタイルの設定部分をHTMLのコメントの形式にします。コメントアウトしてもスタイルシートに対応したブラウザは認識できますし、対応していないブラウザでは設定部分は表示されなくなります。

●外部ファイルの読み込み
XHTMLフアイル上ではスタイルの設定は行わず、外部にCSSフアイルを用意し、必要に応じてHTMLファイルに読み込ませる方法です。複数のHTMLファイルに同一のCSSファイルを読み込んで、サイト全体のページの雰囲気を統一したい場合などに利用します。