css とは

css (Cascading Style Sheet) について、ごく基本的な知識を分かりやすく説明しています。この内容は MoogaOne に含まれるマニュアル「HTMLとcss」(ファイル名 HTMLAndCSS.doc)の内容とほぼ同じものです。

1. HTML の役割とデザインにおける問題点

(a) HTML ソースとは

いわゆるインターネット上の「ホームページ」は、HTMLという記述様式で書かれたテキスト(HTMLソース)をインターネットエクスプローラやネットスケープなどのブラウザソフトを通じて見たものです。任意のホームページを表示して、ブラウザの「表示」メニューから「ソース」を選択してください。別ウィンドウに、現在見ているホームページの本体であるところのHTMLソースが表示されます。現在ホームページ作成ソフトには、ブラウザを通じてみたイメージのまま編集ができる便利な機能(ページ編集)がついており、そちらを使う人が圧倒的多数を占めていますが、本来はこのHTMLソースを書くことで作成します。

HTMLの基本ルールは2つしかありません。文章や画像などホームページの内容はタグと呼ばれる記号でサンドイッチのように挟み込むことと、挟み込まれる内容の構成形態に適合した種類のタグを使用することです。以下は HTML ソースの例です。

HTML ソースの例 1

<P>いわゆるインターネット上の「ホームページ」は、HTMLという記述様式で書かれたテキスト(HTMLソース)をインターネットエクスプローラやネットスケープなどのブラウザソフトを通じて見たものです。</P>

Pは段落を表すタグで、<P>から</P>の間に書かれた文章が一つの段落となります。どの種類のタグにおいても、始まりのタグに / (スラッシュ)を付加したタグを終了のタグとして使用します。下の例を見てサンドイッチ構造を理解してください。

HTML ソースの例 2

<HTML>

<HEAD>

<TITLE>テストページ</TITLE>

</HEAD>

<BODY>

<H1>使える図書館ホームページ</H1>

<H2>ホームページの仕組み</H2>

<H3>HTMLの基本</H3>

<P>いわゆるインターネット上の「ホームページ」は、HTMLという記述様式で書かれたテキスト(HTMLソース)をインターネットエクスプローラやネットスケープなどのブラウザソフトを通じて見たものです。</P>

</BODY>

</HTML>

上の例で使われているタグの意味は以下のとおりです。

(b) HTML によるデザインの問題点

HTMLの役割は、タグを使って含まれる内容の種別とその範囲を規定することです。したがって、文字や画像の「大きさ・色・種類・レイアウト」など、いわゆるデザインは、もともとHTMLの概念には入っていません。ところが現在、多くのホームページでは、HTMLのタグに無理にデザインの定義を書き込んだデザインを行っています。下の例では文字列を表す<FONT>タグの中に、文字の色とサイズを書き込んでいます。

タグに書き込みした HTML ソースの例

<FONT COLOR="#CC6633" SIZE="-1">ホームページのデザイン要素は可能な限りcssを使うことが薦められています。</FONT>

また、テーブル(表組み)用のタグをレイアウトの枠として使ったりしてHTMLを使ってデザインをすることが慣例となっています。下の例ではレイアウトのために表を使っています。表を使わずにレイアウトができれば、<TABLE><TBODY><TR><TD>タグは全て不要になります。

テーブルをレイアウトに使った HTML ソースの例

<TABLE width=740>

  <TBODY>

    <TR>

      <TD vAlign=top>

        <TABLE>

          <TBODY>

            <TR>

              <TD></TD>

              <TD>大学の資料を探す</TD>

            </TR>

            <TR>

              <TD><A href="http://.XX/">蔵書検索</A></TD>

            </TR>

          </TBODY>

        </TABLE>

      </TD>

    </TR>

  </TBODY>

</TABLE>

これらの技術はソースを複雑化させ、作成・管理を困難にするだけではなく、視覚障害者などのホームページ読み上げソフトの利用者に負担をかけるなど、その弊害が多く指摘されています。

2. css の意義

(a) css による内容とデザインの分離

これに対してcss (Cascading Style Sheet) はホームページのデザイン要素の全てをHTMLファイルとは別のファイルに記述し、HTMLからそのファイルを参照(読み込み)させることでデザインを制御する仕組みになっています。そうすることでHTMLはホームページの中身である「本文」と「構成」だけを、cssがその「デザイン」だけを、それぞれ分業して受け持つことになります。以下は、上の「HTML タグに書き込みした HTML ソースの例」とほぼ同様のデザインをcssを使って実現したものです。

HTML ファイルのソース

<P>ホームページのデザイン要素は可能な限りcssを使うことが薦められています。</P>

css ファイルのソース

P{

color:#CC6633;

font-size:85%;

}

上がHTMLファイルの内容、下がcssファイルの内容です。PというHTMLタグに対して文字色番号CC6633、文字サイズが標準の85%のデザインが適用されます。cssを使えば、HTMLファイルの中身が見やすくなり、誰にでも理解・編集しやすいHTMLになります。cssを使えば、HTMLソースが短くて済むため、サイト全体のファイルサイズが小さくてすみます。使用する画像の数も少なくて済みます。cssを使えば、複数のHTMLから同一のcssを参照させることで、多くのページのデザインを一括して制御することも可能になります。cssを1文字書き換えるだけで、サイト全体の文字サイズ、色などが変更できます。cssを使えば、ホームページ読み上げソフトを使用している視覚障害者ほかに使いやすいページを提供できます。cssによるデザインは、ウェブページデザインがあるべき姿であり、理論性とシンプルさにおいてホームページユーザビリティの概念に共鳴する技術と捉えることができます。

(b) css の記述方法

次に css の記述法について、簡単に説明します。cssの基本的な記述の例は以下のようなものです。

P{

font-size:85%;

line-height:150%;

margin:10 15 5 20;

}

この css の意味は「<P>と</P>タグではさまれた内容に対して、サイズを標準の85%に、改行幅を150%にし、<P>から</P>までの領域の周りに上10ピクセル、右15ピクセル、下5ピクセル、左20ピクセルの余白を取って表示する」ということです。これらの指定内容は「スタイル」と呼ばれます。<P>タグを始め、<H1><H2><H3>や<TABLE>など全てのタグにスタイルが適用可能です。このようないくつかのスタイルの集合体をテキストファイルとして、拡張子.cssをつけて、しかるべき場所に保存して利用します

しかし、それぞれのタグにスタイルを指定しただけでは、細かいデザインは不可能です。たとえば同じ<P>タグを使っていても「ページのある部分では通常の黒い文字、ほかの部分では赤い文字で太文字」にしたい場合もあります。そこで、<DIV>というタグが使われます。<DIV>タグは、それ自体では意味を持たず、cssと一緒に使われることで、HTML上でスタイルを指定する範囲を決めるためのタグです。たとえばあるページに以下のようなHTMLを書き、

<DIV CLASS="Kyocho">

<P>大ニュース! 隣の家に塀ができたって。へえー。へえー。</P>

</DIV>

そのページが参照しにいくcssファイルに以下のように書き込みます。

.Kyocho{

color:red;

font-weight:bold;

}

css の Kyocho の直前に .(ピリオド)があることに注意してください。HTML内のCLASS=" " がcss の名前の直前に付けられる . (ピリオド)に対応する仕組みになっています。この css の意味は「CLASSの名前がKyocho という名前の範囲(<DIV CLASS="Kyocho">~</DIV>)に記述される内容に対して、その範囲の文字の色を赤に、文字を太文字に」となります。

cssでは、文字サイズ・文字色・文字の種類・文字の太さ・行間・文字揃の他に、背景色・取り込み画像・画像のサイズ・画像の枠・指定範囲の回り込み・指定範囲の周りの余白など様々なスタイルを指定できます。cssの最大の問題は、ブラウザの種類とバージョンによって、特定のcssに対応していなかったり、他のブラウザとは異なる解釈をすることです。しかし、この問題もcssがより広く使われるようになってきているので、近い将来解決すると思われます。

お問い合わせメールはmoogaone@gmail.com(@は小文字にして)まで

Design Concept by MoogaOne