演習2 - スタイルシートの基礎

2.0 はじめに

 本演習では、スタイルシートの基礎について学びます。 演習0で学んだように、スタイルシート(以下、本文ではCSS)はHTML全体の構成において装飾的な機能を受け持っています。 ですので、CSSを適切に使いこなすにあたっては、デザイナー的な資質が要求されるかもしれません。 ただ、この講義の目的は、あくまでプログラミングのリテラシーを養うことにあります。 デザイン的な探求は後回しとし、まずは「CSSをどうやったらプログラムできるのか」について、 必要最低限の知識を身に付けていきましょう。

2.1 スタイルシートの埋め込み方

サンプル

例によって、サンプルを準備し、実行結果を確認してみます。

- - - - - sample2A.html - - - - - - - - - - - - - - - - - - - - -

- - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

beatles, lyrics

A day in the life

I read the news today oh, boy. About a lucky man who made the grade. And though the news was rather sad. Well, I just had to laugh. I saw the photograph. He blew his mind out in a car. He didn't notice that the lights had changed. A crowd of people stood and stared. They'd seen his face before. Nobody was really sure if he was from the house of lords.

I saw a film today oh, boy. The english army had just won the war. A crowd of people turned away. But I just had to look. Having read the book. I'd love to turn you on.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

サンプルの内部構造

 実行結果を吟味する前に、ソースの構造(要素の配置)を確認しておきましょう。 head要素body要素を切り離したうえ、 CSSに関連した部分のみに注目すると、 以下のような非常にシンプルな構造を取り出すことができます。

  • head要素
      <head>
        <style>
          #typeA{...}
          #typeB{...}
        </style>
      </head>
  • body要素
      <body>
          <p id=typeA>...</p>
          <p id=typeB>...</p>
      </body>

スタイルシートの定義(style要素)

 まずhead要素の内部に注目してみますと、 新しく、<style>と</style>で囲まれたstyle要素が使用されていることがわかります。 このstyle要素こそが、CSSの内容を記述するための場所となります。 第1回の復習になりますが、head要素とは、HTMLの本文には直接に現れないメタデータを提供するものでした。 すなわち、本文の装飾を指示する機能要素であるstyle要素は、head要素の中に記述される必要があるのです。

 style要素の中には2つの括弧グループがあり、それぞれの先頭には、#で始まる名前(#typeA, #typeB)が付されています。 これらは、簡単に言うと、次のような構造となっています。

装飾の適用対象{装飾の内容}

 CSSを設定するためには、当然ながら、まず「装飾の内容」を決める必要がありますが、 それだけでは、その装飾が本文中のどの要素に対して適用されるのかがわかりません。 よって、CSSの設定にあたっては、装飾の内容と装飾の対象をセットで記述する必要があります。 この「装飾を適用する対象」のことをCSSではセレクタと呼びます。 今回の場合であれば、#typeAと#typeBが、装飾の適用対象を指し示すセレクタとして機能しています(具体的にどの要素と結びつくのかは、少し後で説明します)。

 続いて、装飾の内容の記述部分を含めた、CSSの基本的な書式について学びます。 以下に、CSSの装飾内容の基本的な書式を示します。

css_structure.png

図に示すように、基本的に装飾内容は、

装飾の性質(属性) : 値 ;

を1つのセットにして、一つのセレクタの中に複数の装飾要素を含めることができます。 なお、装飾の性質のことをCSSでは属性と呼びます。 属性とは、具体的には、「色」や「フォント」や「線の太さ」などを指し、利用できる属性は、あらかじめCSSの側で決められています。

さて、今回のサンプルの中で、セレクタ#typeAに関するCSSの記述を確認してみます。

#typeA{
 font-family:"Courier New";
 background-color:#CCCCCC;
 color:black;
}

確かに、基本的な書式に従って記述されていることがわかります。 なお、属性の意味については、英語から類推可能と思いますが、font-familyは「文字のフォント」、background-colorは「背景色」、colorは「文字の色」に関する属性を指定するものです(色の設定方法については、2.2で説明します)。 よって、#typeAの装飾パタンは、以下のように特徴付けることができます。

  • 文字のフォントとして"Courier New"を用いる。
  • 背景色として薄い灰色(#CCCCCC)を用いる。
  • 文字の色として黒色(black)を用いる。

typeBについては、少し異なる設定がされていますね。各自で確認してみてください。

スタイルシートを与える要素の指定(id属性)

 さて、ここまでの話で、CSSを定義する方法について確認しました。 CSSには「装飾内容(属性+値)」と「装飾の適用対象(セレクタ)」が含まれていました。 次に知るべきは、定義した装飾内容を、セレクタに従って、HTML文書内の「何らかの意味構造」に対して適用する方法です。 ここで「何らかの意味構造」という風に書きましたが、 実際に装飾内容を適用する単位はHTMLの要素(段落、リンク、画像、、、)となります。 まず、このことを覚えておいてください。

 繰り返しになりますが、それぞれの装飾内容には、 (外部から)自分自身にアクセスするためのセレクタが存在します。 セレクタとは、いわば、HTMLとCSSを結びつけるIDのようなものです。 すなわち、装飾内容を適用する要素に対して、望みのIDを指定することができれば、 要素と装飾内容が適切に接続されることになります。

css-type-connection.png

今回のサンプルでは、p要素(段落要素)に対してid属性を与えることで、HTMLとCSSの接続を果たしてます。

<p id=typeA>...</p>
<p id=typeB>...</p>

id属性の属性値に、style属性で定義されたセレクタ(#は抜きます)が代入されていることがわかります。 これによって、p要素で作られた段落の装飾方法として、 対応するセレクタの装飾内容が適用されることになります。 今回のケースでは、1行目の段落には「Courierフォント+灰色背景+黒文字」が、 2行目の段落では「イタリック+黒背景+白文字」が適用されます。

セレクタ(要素指定)のバリエーション

 以上で示したようなタイプの#を接頭語とするセレクタをIDセレクタと呼びます。 実際には、IDセレクタ以外にも、便利なセレクタが多く存在します。以下で、主なセレクタについて紹介していきます。

  • タイプセレクタ

     sample2Aのケースでは、要素に対してid属性を用いることで、「どの装飾内容をどの要素に与えるか」を決定していました。 これは、同じ要素名を持つ要素に対して、別々の装飾内容(typeAとtypeB)を割り当てることができる点で有用です。 一方で、同じ要素名に対して、別々の装飾パタンを割り当てる必要がないのであれば、わざわざid属性を記述する必要はありません。

    - - - - - sample2B.html - - - - - - - - - - - - - - - - - - - - -

    - - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

    実行結果は、sample2B.html から確認してください。

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    今回の場合、style要素の中で、セレクタと装飾内容は以下のように定義されています。

    <style>
     h1{...}
     p{...}
    </style>
    まず、h1やpに接頭語として#が使われていないことに注意してください。 このようなセレクタの書式が使われた場合、 「HTML本体の全てのh1要素あるいはp要素に対して、 ...に記述した装飾内容を適用せよ」ということを意味することになります。 この場合、h1要素p要素に対して「id属性」を与えてやる必要はありません。 このような形で、要素名を単位として装飾内容を対応させる場合のセレクタをタイプセレクタと呼びます。
  • ユニバーサルセレクタ

    全ての要素に対してスタイルを適用する場合は、

    <style>
     *{...}
    </style>

    とします。このような*を用いた適用の仕方をユニバーサルセレクタと呼びます。 以下にサンプルを示します。

    - - - - - ソース - - - - - - - - - - - - - - - - - - - - -

    (sample2C.html, 一部省略)

    - - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

    実行結果は、sample2C.html から確認してください。

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

     実行結果によると、2段落目のp要素以外、 全て『Courierフォント-灰色背景-黒文字』のスタイルが適用されています。 これは、ユニバーサルセレクタによって、 あらゆる要素(body要素 h1要素 p要素)に単一のスタイルが設定されたためです。

     さて、2段落目は、なぜユニバーサルセレクタの適用を免れたのでしょうか。 2段落目のp要素は、id属性によって、 style要素で別に定義されている装飾内容のIDセレクタ(#typeB)と関連づけられています。 このように、より範囲を限定するセレクタ(IDセレクタタイプセレクタ)の一致が得られれば、 (仮にユニバーサルセレクタが定義されている場合であっても)そちらの装飾内容が優先されることに注意してください。

2.2 色の指定方法

 前回のサンプルで、CSSの色の指定に関して、次のようなバリエーションがありました。

background-color:black;
background-color:#CCCCCC;
color:rgba(255,255,255,1.0);

それぞれは、色の指定に関する異なる書式に対応しています。

直接色名で指定する方法

 blackやwhilte、greenなど、色を英単語として直接に指定する方法です。 最も直感的な方法ではありますが、あらかじめ、色名を把握しておく必要があります。

 なお、使える色のリストは以下のサイト等を参考にしてください。

RGBによる指定

コンピュータの世界で最もよく使われる色の表現方法で、 赤(Red)と緑(Green)と青(Blue)の組み合わせで、あらゆる色を作ります。 通常、各色成分のレベルは0-255の256段階(8ビット-1バイト)で表します。 これらを通常の10進数で指定する場合は、

color: rgb(205,205,205);

16進数で指定する場合は

color: #CCCCCC; 

という風になります(16進数は00,01,02, ...0A,0B, ...0F,10,11, ...FFと増えていきます)。

RGBAによる指定

RGB成分に加えて、アルファ値と呼ばれる透明度の指定を行います。

color:rgba(255,255,255,1.0);

RGBと異なり、アルファ値のレベルは0.0-1.0の間で指定します。 0.0が完全な透明、1.0が完全な不透明を意味します。

2.3 ボックスモデルによる装飾

 以下では、CSSの装飾についての決まり事について学びます。

ボックスモデル

 CSSでは、各要素(見出し、段落、ある範囲の文字、画像、リンク、、)に対してボックスと呼ばれる四角い領域を複数生成しています。

boxmodel_structure.png

上図に示すように、ボックスの内部には、4種類の領域単位が存在します(ボックスモデル)。 これらの幅を調整し、それぞれに色や画像を当てはめることで、自由度の高い装飾が可能となります。 それでは、上図で使われている4つの領域の意味について、以下に簡単に説明します。

内容領域
要素の領域をぎりぎりのラインで囲むボックスです。上図は、<p>-</p>によって構成される段落要素に対する内容領域の例です。
padding
内容領域とborderによって作られる罫線との間に生まれる「内側の余白」部分の領域を指します。
border
内容領域を囲む罫線領域を指します。要素に指定する背景色や背景画像はこの領域まで及びます
margin
罫線の外側の余白領域を意味しています。これによって、他のボックスとの空間的な距離を決定します。

ボックスモデルの設定方法

 上図の中の、padding、border、marginはそれぞれスタイル要素で設定可能な属性の名前でもあります。具体的には、

といった感じです。では、各ボックスの設定方法を具体的に説明していきます。

  • border 罫線の種類 罫線の太さ 罫線の色

    罫線の場合、設定項目は3つあります。上の例の場合、罫線のタイプが実線、幅が3ピクセル、色はオレンジです。 「罫線の種類」属性の属性値としては、以下のようなものが存在します。

    nonedotteddahsedsoliddoublegroove
    表示しない点線破線実践二重線立体的な線

    なお、罫線の上下左右を独立に設定したい場合、borderの代わりに、border-top(上)、border-bottom(下)、border-left(左)、border-right(右)を、属性の名前として使用することができます。

  • padding/margin 上下左右の余白サイズ

    paddingやmarginのような余白の設定の場合、余白のサイズのみが設定可能な属性値となります。上記の例の場合、上下左右の罫線外余白を15ピクセル、罫線内余白を20ピクセルとしています。border同様に、実際の余白領域は上下左右の4種類の領域が存在します。これらを独立に設定する場合、marginのときと同様に、*-top, *-bottom, *-left, *-right(*にはpaddingまたはmarginが入ります)とすることで、上下左右の余白を個別に指定できます。また、次のように、属性値を複数利用する方法もあります。

    padding/margin 上下左右
    padding/margin 上下 左右
    padding/margin 上 左右 下
    padding/margin 上 下 左 右

サンプル

 以下では、2種類のサンプルを通して、ボックスモデルの実際の適用結果を見ていきましょう。

  • サンプル1

    - - - - - sample2D.html - - - - - - - - - - - - - - - - - - - - -

    (styleタグ部分のみ抜粋)

    - - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

    box model pattern

    box model

    A

    I read the news today oh, boy. About a lucky man who made the grade. And though the news was rather sad. Well, I just had to laugh. I saw the photograph. He blew his mind out in a car. He didn't notice that the lights had changed. A crowd of people stood and stared. They'd seen his face before. Nobody was really sure if he was from the house of lords.

    B

    I read the news today oh, boy. About a lucky man who made the grade. And though the news was rather sad. Well, I just had to laugh. I saw the photograph. He blew his mind out in a car. He didn't notice that the lights had changed. A crowd of people stood and stared. They'd seen his face before. Nobody was really sure if he was from the house of lords.

    C

    I read the news today oh, boy. About a lucky man who made the grade. And though the news was rather sad. Well, I just had to laugh. I saw the photograph. He blew his mind out in a car. He didn't notice that the lights had changed. A crowd of people stood and stared. They'd seen his face before. Nobody was really sure if he was from the house of lords.

    D

    I read the news today oh, boy. About a lucky man who made the grade. And though the news was rather sad. Well, I just had to laugh. I saw the photograph. He blew his mind out in a car. He didn't notice that the lights had changed. A crowd of people stood and stared. They'd seen his face before. Nobody was really sure if he was from the house of lords.

    E

    I read the news today oh, boy. About a lucky man who made the grade. And though the news was rather sad. Well, I just had to laugh. I saw the photograph. He blew his mind out in a car. He didn't notice that the lights had changed. A crowd of people stood and stared. They'd seen his face before. Nobody was really sure if he was from the house of lords.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

     実行結果を確認しましょう。AからEの見出しを持つ各段落は、スタイルシートのIDセレクタ(#typeA-E)の設定を反映しています。全てのスタイルで同じ色とサイズの罫線が利用されている一方で、各スタイルで、余白の設定等が少しずつ異なります。 それでは、以下で、各スタイルの設定内容を順に確認します。

    • Aでは罫線の設定がされています(実線、5ピクセル、茶色)。これによって、段落領域が、茶色の線によって囲まれました。
    • Bでは、新たにpaddingとして10ピクセルを設定しました。これによって、文字と罫線の間に10ピクセルの余白ができました。
    • Cでは、paddingに対して2つの属性値(10px 3px)を与えました。先に述べたように、このとき、第一項は上下の余白、第二項は左右の余白を表すことになります。これによって、上下の余白が少なくなったことがわかります。
    • Dでは、新たにmarginの設定がされています。今回はmargin-left、すなわち罫線の左側の余白領域を10ピクセルと設定しています。
    • Eでは、罫線の属性であるborderがborder-leftに置き換えられています。これによって、上下右の罫線が消え、左側の罫線のみが残りました。
  • サンプル2

    - - - - - sample2E.html - - - - - - - - - - - - - - - - - - - - -

    (style要素)

    (body要素)

    - - - - - 実行結果 - - - - - - - - - - - - - - - - - - - -

    box model pattern

    box model

    A

    I read the news today oh, boy. About a lucky man who made the grade. And though the news was rather sad. Well, I just had to laugh. I saw the photograph. He blew his mind out in a car. He didn't notice that the lights had changed. A crowd of people stood and stared. They'd seen his face before. Nobody was really sure if he was from the house of lords.

    B

    I read the news today oh, boy. About a lucky man who made the grade. And though the news was rather sad. Well, I just had to laugh. I saw the photograph. He blew his mind out in a car. He didn't notice that the lights had changed. A crowd of people stood and stared. They'd seen his face before. Nobody was really sure if he was from the house of lords.

    C

    I read the news today oh, boy. About a lucky man who made the grade. And though the news was rather sad. Well, I just had to laugh. I saw the photograph. He blew his mind out in a car. He didn't notice that the lights had changed. A crowd of people stood and stared. They'd seen his face before. Nobody was really sure if he was from the house of lords.

    D

    I read the news today oh, boy. About a lucky man who made the grade. And though the news was rather sad. Well, I just had to laugh. I saw the photograph. He blew his mind out in a car. He didn't notice that the lights had changed. A crowd of people stood and stared. They'd seen his face before. Nobody was really sure if he was from the house of lords.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

     style要素の内部を除くと、これまで学んだセレクタとは別の書式の記述が新たに見られます。

    .typeColor{...}
    .typeSpace{...}

    このように、ピリオドに続いて任意の名前をセレクタとするものをクラスセレクタと呼びますクラスセレクタに続いて設定されたスタイルは、同様の名前のclass属性を持つ全ての要素に対して適用されます。 ある要素に対してclass属性の属性値を設定する場合、

    <p class="classP"> ... </p>
    のように、属性値をダブルクォーテーションで囲む必要があります(idの場合は不要であることに注意)。 また、class属性は、以下のように記述することで、同一の要素に対して複数の属性値を設定することもできます。
    <element class="classP classQ classR ..." id=idA>
    実は、id属性の場合、単一の要素に対して一つのidセレクタしか与えられないというルールがあります。 そのため、今回のように、共通のスタイルと個別のスタイルを使い分ける場合、 idセレクタクラスセレクタを併用することが有用となります。

     以下で、サンプルを理解するポイントについて簡単に確認していきましょう。

    • サンプルでは、背景色+文字色を反転させるスタイル(typeColor)と余白に関するスタイル(typeSpace)をクラスセレクタとして記述し、複数の段落で部分的に共有させています。これとは別に、各段落固有の設定(今回の場合、罫線の種類)については、idセレクタ(typeA、typeB、typeC、typeD)として記述しています。
    • 今回は見出しBからDに続く段落で、様々なタイプの罫線を使っています(double:二重線、dotted:点線、dashed:破線、groove:立体的な線)。それぞれ、ソースと照らし合わせて確認してください。
    • B段落とC段落では、同じ白い二重線が使われていますが、C段落の場合のみ灰色となっています。typeCで設定されている罫線のアルファ値が0.5であるため、
      border-left:double 20px rgba(255,255,255,0.5);
      結局、黒の下地に対して半透明の白が塗られていることになります。 先に触れたことですが、背景色の境界が罫線領域の境界と一致することについて今一度注意してください

2.4 演習課題

課題詳細

今回学んだスタイルシートを用いて、 sample1X.htmlに対して装飾を施したsample2X.htmlを作成してください。

  • 文章や画像は、基本的には変更しないものとします。
  • idセレクタ、タイプセレクタ、 ユニバーサルセレクタ、クラスセレクタを必要に応じて使い分けてください。

補足(主要なセレクタのまとめ)

idセレクタ
同一のid属性を持つ要素に対する装飾。
<style> #TYPE{...} </style>
<p id=TYPE> ... </p>
クラスセレクタ
同一のクラス属性を持つ要素に対する装飾。
<style> .TYPE1{...} .TYPE2{...} </style>
<p class="TYPE1 TYPE2"> ... </p>
タイプセレクタ
特定の要素に対する装飾。
<style> p{...} img{...}</style>
<p> ... </p> <img> </img>
pは任意の要素名に置き換えることができる。
ユニバーサルセレクタ
全ての要素に対する装飾。
<style> *{...} </style>

添付ファイル: fileboxmodel.png 205件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-10-17 (水) 10:14:01 (2344d)