1｜小テスト

前回までの理解度の確認のため、小テストを行います。各自で資料等は見ずに5分程度、各自で取り組んでください。

出席は課題の提出をもって確認します。必ずやっておくようにしてください。

前回の課題の確認とHTMLの復習

前回までは、Web上の文書を記述する言語であるHTMLを扱ってきました。HTMLでは、見出しや段落などといった文書の構造に沿って「要素」を「タグ」を使って「マークアップ」しました。

必要な項目は記述されているでしょうか？ 文書は正しくマークアップされているでしょうか？ 各自で確認をしてください。

2｜CSSの記述方法

今回からは、HTMLと組み合わせ、文書の見た目を制御する技術であるスタイルシートを扱います。中でも標準的に用いられるCSS（Cascading Style Sheet）という言語を学びます。CSSは今日のWebページの見た目を記述している標準的な言語です。

CSSとHTMLの対応付け

作業の前に、前回提出した課題を「work03.html」という名前で複製しておいてください。（取っておく用）

前回の課題（保存用ではなく、作業用。work04_1.htmlなどと名付けておくとよい）のhead要素の中に以下のstyle要素を追記してWebブラウザで確認してみましょう。

<style>
body {
  font-size: xx-large;
  color: red;
  background-color: #ffccff;
}
</style>

HTMLの中にstyle要素を作り、その中に直接CSSを記述します。これはもっとも単純なHTMLとCSSの連携の方法です。<style>というタグはHTMLで、その中に記述された body {…} という部分がCSSです。head要素内にstyle要素を持たせると、その要素に記述したCSSをそのHTML文書の見た目として適用することができます。（このCSS自体の意味は後述します。）

これはもっともシンプルなCSSとの連携方法ですが、ひとつのHTML文書の中に直接に表示方法が記述されており、あまりスマートではありません。代わりに、以下の内容を新しいファイル work04_2.css に保存してみましょう。

body {
  font-size: xx-large;
  color: red;
  background-color: #ffccff;
}

元のHTMLのstyle要素は削除します。その代わりに、以下のlink要素を追加します。（このlink要素は空要素ですので、終了タグは必要ありません。）

<link rel="stylesheet" type="text/css" href="work04_2.css">

link要素は、HTMLファイルを他のリソース（ファイル等）にリンク付けする要素です。rel属性にはリンク先のリソースとの関係を記述しますが、ここに「stylesheet」を指定することで、ターゲットのファイルをスタイルシートとして読み込みます。type属性にはこのスタイルシートがCSSで記述されている旨を、href属性はa要素で用いたものと同じくリンク先のファイルを記述します。

こうしてHTMLファイルとCSSファイルを独立させ、それを対応づけました。内容を記述するファイルと見栄えを記述するファイルが完全に分離されることとなります。このようにファイルを分離しておくことで、文書に対応づける見栄えを簡単に切り替えたり、同じ見栄えを複数の文書に適用したりすることが容易になります。

今回、style要素も説明しましたが、これ以降この授業では全て別ファイルとしてCSSを作成し、link要素でリンクさせる方法をとります。

CSSの文法

それではCSSの中身を見ていきましょう。CSSは、以下の構造をしています。

セレクタ {
  プロパティ: 値;
  プロパティ: 値;
  …
}

セレクタにより、HTML文書内の特定のパーツを選択します。そのターゲットの見た目を、その後のカッコ{}内に記述した見た目に表示します。見た目は、プロパティ: 値;の組を、必要な数だけ並べて書くことができます。

コロン（:）やセミコロン（;）を書き忘れたり、書き間違えたりしないように十分注意しましょう。 見やすいように半角スペースやタブを用いてもよいですが、全角文字は使ってはいけません。

セレクタ

スタイルが適用される対象をパターンマッチングを用いて指定します。 対象を指定するために用いられるパターンのことをセレクタと呼び、代表的なものとして以下のようなものがあります。 先ほどの例で使用したのはタイプセレクタであり、文書内の body 要素以下を対象にスタイルを指定したことになります。

代表的なセレクタ

パターン	名称	意味
*	全称セレクタ	すべての要素にマッチする。
E	タイプセレクタ	すべての E 要素にマッチする。
E F	子孫セレクタ	E 要素の子孫であるすべての F 要素にマッチする。
E.foo	クラスセレクタ	class 属性が foo であるすべての E 要素にマッチする。
E#bar	一意セレクタ	id 属性が bar である E 要素にマッチする。

プロパティと値

セレクタに対するスタイルは、セミコロンで区切られたゼロ個以上のプロパティと値のセットとして記述します。 プロパティとは、文字のサイズや色といった設定しようとする項目のことです。 プロパティに続けて、そのプロパティに設定する値（実際にどのようなスタイルにするのか）をコロンで区切って記述します。

たとえば、以下のようなプロパティがあります。 演習ですべて取り上げるのは不可能なので、必要に応じて市販の解説書や参考サイトを参照して各自で調べるとよいでしょう。

代表的なプロパティ

用途	プロパティ	値の指定方法
前景色（文字の色）	color	色名・RGB成分（後述）
背景色	background-color
背景画像	background-image	画像のURL（後述）
フォントの種類	font-family	フォント名・総称フォントファミリ（serif など）
フォントの大きさ	font-size	pt や % などの単位つきの数値・キーワード（large など）
フォントの太さ	font-weight	100 〜 900 の 100 刻みの数値・キーワード（bold など）
フォントの形状	font-style	キーワード（italic など）
文字の装飾	text-decoration	キーワード（underline など）

参考サイト

• CSS3リファレンス
• CSS3って何ができるの？- coliss
• CSS Reference - World Wide Web Guide

3｜スタイルシートによる装飾

色の指定方法

スタイルシートの基礎が理解できたら、さっそく前回作成したファイルの他の部分の色も変えてみましょう。 色を変えたい要素の前景色と背景色のスタイル指定をCSSファイルに追加します。 先ほどと同じように、セレクタで要素を指定し、color プロパティと background-color プロパティで色を指定します。 色を指定するには、以下の 2 通りの方法があります。

色名で指定する

色名で指定する場合、aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow の 17の標準色とすべてのブラウザでサポートされる130色＝147色を利用することができます。
CSS 色名

RGB 成分で指定する

RGB 成分で指定する場合、以下のいずれかの方法を利用できます。

• # 記号の後に各成分の値を 16 進数で 2 桁ずつ（00 〜 ff）指定する。
• rgb() のカッコ内に各成分の値（0 〜 255）をカンマで区切って指定する。
• rgb() のカッコ内に各成分の割合（0% 〜 100%）をカンマで区切って指定する。

以下に示す 4 つの指定方法は、すべて同じオレンジ色となります。

  color: orange;
  color: #ffa500;
  color: rgb(255, 165, 0);
  color: rgb(100%, 65%, 0%);

文字の装飾

以下にいくつかの装飾例を示します。適宜変更しながら前回の課題に適用してみましょう。（同じタグのないものは適宜セレクタ部分を変えるなどして試してみてください。）

1. <h2>タグに装飾を施す。margin, paddingの違いは次週解説する。

   
     h2 {
     	margin-top:50px;  /* 余白（上部）*/
     	margin-bottom:20px;  /* 余白（下部）*/
     	padding:5px 15px;  /* 空白領域（上下　左右）*/
     	background:#f5f5f5;  /* 背景色 */
     	border-left:#2f4f4f 8px solid;  /* 枠線（左部）色 スタイル（直線）*/
     	font-size: 160%;  /* 文字のサイズ（相対指定） */
     	font-weight: bold;  /* 文字の太さ */
     	color:#2f4f4f;  /* 文字の色 */
     }
     



2. <h3>タグに装飾を施す。

   
     h3 {
     	font-size: 120%;
     	margin: 1rem 2rem;  /* 余白（上下　左右を相対指定）*/
     }
   
     h3:first-letter {  /* 最初の文字を指定 */
     	color: #008080;
     	font-size: 150%;
     }
     

   参考：CSS3の新単位remで文字サイズの指定を分かりやすく。



3. <table>タグに装飾を施す。

   
     table {
     	border: medium solid #2f4f4f;  /* 枠線の装飾 */
     	margin: 1rem 3rem;
     }
   
     th, td {
     	border: thin solid #2f4f4f;
     	padding: 0.1rem 0.5rem;
     }
   
     th {
     	color: #ffffff;
     	background-color: #008080;
     }
     

   参考：borderのスタイルを指定する



4. <p>, <ol>, <ul>, <address>タグに装飾を施す。

   
     p {
     	padding: 1rem 2rem;
     	line-height: 1.8rem;  /* 行間の設定 */
     }
   
     ol, ul {
     	padding: 1rem 4rem;
     }
   
     li {
     	line-height: 1.8rem;
     }
   
     address {
     	padding: 1rem 2rem;
     	font-style: normal;  /* 文字のスタイル（標準） */
     	text-align: right;
     }
     



5. <a>タグに装飾を施す。

   
     a:link {  /* リンク（クリック前） */
     	color:#3366ff;
     	text-decoration:none;  /* 文字の飾り（無し） */
     }
   
     a:visited {  /* リンク（クリック後） */
     	color:#666666;
     	text-decoration:none;
     }
   
     a:hover {  /* リンク（カーソルオン） */
     	color:#ff66ff;
     	text-decoration:underline;  /* 文字の飾り（下線） */
     }
     

背景画像の指定方法

1. body 要素の background-image（背景画像）プロパティに画像ファイルを相対パスで指定しています。 画像ファイルを指定するには、"url()" のカッコ内にファイルの URI を記述します。

   
     /*--------------------------------------
       Structure Module
     ---------------------------------------*/
   
     body {
     	background-image: url("back.jpg");
     	background-position: right bottom;  /* 画像表示位置（右下） */
     	background-repeat: no-repeat;  /* 画像表示方法（繰り返し無し） */
     	background-attachment: fixed;  /* 画像固定 */
     }
     

補足：画像を貼る

CSSで指定する際のほか、HTMLのimgタグでも、利用する画像をURIで指定します。これはhttp://..../....jpgというようにファイルのURIを完全に指定することも可能ですが、当該HTML文書と同じディレクトリに画像ファイルを置けば、ファイル名のみで指定することもできます。先のCSSの記述例ではそうなっています。

画像は、img要素に、CSSのwidth/heightプロパティを指定するか、HTMLでwidth/height属性を指定することで表示上の大きさを指定することができます。

4｜スタイルシートの便利な機能

カスケード処理

ある要素のあるプロパティに対する記述が複数あるとき、スタイルの競合が発生する場合があります。 その競合を解決するための規則をカスケード処理と呼びます。 カスケード処理におけるスタイルの優先順位は以下のように決定されます。

1. 重要度および出処によって優先順位を計算する。
2. 詳細度によって優先順位を計算する。
3. 記述順によって優先順位を計算する。

一般的には、より詳細な指定を行なっているセレクタのほうが優先され、詳細度によって優先順位が決定できない場合には、より後の位置で指定されたスタイルが優先されると考えればよいでしょう。

複数のCSS

CSSファイルは複数の指定が可能です。
基本的な装飾とある特定の装飾を分けて書かれることが一般的でです。 特にフレームワークなどのテンプレートをもとに制作する場合は、テンプレートのCSSはそのまま残し、 必要な装飾を別途CSSを用意して記述すると、どこにどのような装飾を施したのかが分かりやすくなります。

5｜課題：イベントの告知ページの装飾

前回作成した期間限定カフェ企画のページの見た目を作っていきます。

次回さらに発展的な内容を扱いますので、今回は本教材の範囲内で適宜テキストの装飾を行なってください。

作成できたところまでのHTMLソースコードとCSSソースコード、それをブラウザで表示したスクリーンショットをレポートにまとめ、提出してください。