Webプログラミング2023

今回の内容

より複雑なCSSの記述（セレクタ、ボックスモデル）
ナビゲーションのあるページ
イベント告知ページの分割、ナビゲーション

1. 小テスト 2. セレクタの活用 3. ボックスモデル 4. ナビゲーションのあるページの作成 5. 課題：イベントの告知ページの分割、ナビゲーション

1｜小テスト

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

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

作業

小テスト

2｜セレクタの活用

今回は、前回途中まで作成したカフェのページの見た目をさらに装飾していきます。

今回は大きく分けて2つの事柄を学びます。まずひとつめはより細かく個別の要素を選択する方法を習得し、次にその要素を飾るための知識としてボックスモデルに基づく装飾を扱います。

セレクタ

前回の演習では、要素の種類ごとに見た目を設定しました。これは逆にいうと、同じ種類の要素であれば同じ見た目で表示されるようなCSSの記述を行いました。h1を赤文字に指定すれば、そのCSSが適用されるすべてのHTML文書内のh1要素は赤文字になります。これはCSSの効果的な使い方でありもっとも基本的な利用方法ですが、凝ったデザインを作ろうと思った際には融通が利きません。例えば段落を表すp要素であっても、こちらではこの見た目、こちらではこの見た目というように表示を分けたい場合があります。

このような柔軟な見た目の指定を行うためには、前回の資料に記載した下記のセレクタの使い方を理解する必要があります。

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

子孫セレクタ

前回の演習では直接見た目を変更する要素名を記述しましたが、これはタイプセレクタと呼ばれる要素のタイプを直接指定する書き方です。

しかしこれでは例えば、順序つきの箇条書きの項目を赤文字、順序なしの箇条書きの項目を青文字、などという指定ができません。何故ならば、順序の有無に関わらず箇条書きの項目はli要素として記述するからです。

このような場合に使うのが子孫セレクタです。これは要素の親子関係をスペースで区切って記述する方法で、記載された親子関係を満たす部分に指定した見た目が適用されます。

先の例でいえば、箇条書きの項目li要素は、順序のある場合は親にolを、順序のない場合には親にulを持ちます。従って下記のように記述することができます。

ol li {
    color: red;
}

ul li {
    color: blue;
}

クラスセレクタと一意セレクタ

子孫セレクタでは同じ構造の要素に別の見た目を指定することはできません。こういう時に用いるのが、クラスセレクタと一意セレクタです。いずれの場合も、CSSで指定をする前に、HTMLの文書そのものを変更する必要があります。

例えば以下のような3つのp要素を持つHTMLを考えます。

•••
  <p class="pred" id="p01">1段落目</p>
  <p class="pblue" id="p02">2段落目</p>
  <p class="pred" id="p03">3段落目</p>
•••

これらのp要素はそれぞれ、class属性とid属性が指定されています。

classとは、p要素の中でグループを作り、そのグループにつけられる名前を指定します。文書中に同じclassの要素が複数あっても構いません。同じグループとして一括りに扱われます。

idとは、個別の要素につけられる一意の名前です。1つの文書内には同じidを持つ要素が複数あってはいけません。

CSSにおけるクラスセレクタは対象のHTML文書に含まれるクラスを選択し、一意セレクタは対象のHTML文書に含まれるidを選択します。記述方法は、クラスはクラス名の頭にピリオド、idはidの頭に#を付けて、要素名に繋げます。

p.pred {
    color:red;
}

要素名を記載しなければ、指定したクラス名やidを持つ全ての要素に適用されます。

.pblue {
    color: blue;
}

#p01 {
    font-size: large;
}

CSSはセレクタで選択した全ての要素に見た目が適用されます。例えば上記の例では、「1段落目」は赤く大きく、「2段落目」は青く、「3段落目」は赤く表示されます。記述が重複する場合には、前回の教材にあるカスケード処理が行われ優先順位が決定されます。

3｜ボックスモデル

CSS では、すべての要素はボックスと呼ばれる矩形領域を生成するものとして扱われます。個々のボックスは、テキストや画像といった要素の内容が含まれる内容領域（content area）を中心に、その周囲を空白領域（padding）、枠（border）、余白（margin）が順番に取り囲む階層構造になっています。

実際の文書の構造

作成中のカフェの告知ページの各要素が、どのようなボックスとして表現されているのかを確認してみよう。

box_model.css をダウンロードし、前回作成したファイルと同じ場所に保存します。

エディタでHTMLファイルを開き、head 要素内に以下のように追加します。

•••
  <head>
      <meta charset="UTF-8">
      <title>◯◯カフェ</title>
      <!-- link rel="stylesheet" type="text/css" href="./work04_2.css" -->
      <link rel="stylesheet" type="text/css" href="./box_model.css">
  </head>
  •••

Web ブラウザで確認してみよう。このスタイルシートでは、上位の要素ほど暗い色で、下位の要素ほど明るい色で表示されるように指定されています。要素間の親子関係に注意して、Web ページの構造を確認してください。

ブロックレベル要素とインラインレベル要素

いくつかの例外はあるものの、文書中で使用される要素は、ブロックレベル要素かインラインレベル要素のいずれかに分類することができます。ブロックレベル要素とインラインレベル要素は次のように分けられます。

ブロックレベル要素: それ自体が文書構造上のひとつの塊として意味を持つ要素のことです。たとえば、見出し（hn）、段落（p）、表（table）、リスト（ol, ul）などがこれに含まれます。つまり、文書の骨格となる要素群のことであり、文書本体をあらわす body 要素の直接の子要素になれるものです。
インラインレベル要素: ブロックレベル要素の一部分に意味づけを行うための要素です。それ自体は文書構造上の意味を持たないため、新しいボックスは生成されず、親要素の内容領域の一部分を占有するにとどまります。たとえば、リンクアンカー（a）や強調（em, strong）などがこれに含まれます。

※サンプルの構造の確認が終わったらCSSは元に戻しておく。

4｜ナビゲーションのあるページの作成

ボックスモデルを利用したレイアウトの練習として、2つのWeb ページを繋ぐ簡単なナビゲーションを作ってみよう。ここではCSSは一部書いてあるものを用いて、指定を追加していく形式をとります。

参考リンク：完成図例

データの準備とファイルの分割

作成中のカフェのページを複製し、work05_1.htmlとして保存しておきます。

work05_1.htmlを、ふたつのHTML ファイルに分割します。

お店のコンセプトを伝えるwork05_1.htmlというファイルと、メニューなどを切り抜いたwork05_2.htmlをそれぞれ別名で保存しておきます。（ページの切れ目は自由に行って構いません。可能であれば3つ以上に分割しても構いません。）

また、cssファイルも複製し、work05.cssと名前をつけ、各HTML文書から参照するように設定します。

リンクの追加

2つに分割したHTMLそれぞれに、メニューの元になるリンクを追加しよう。タイトル（h1 要素）のすぐ下あたりに、ul 要素を利用したメニューを作成するために以下のようなコードを追加します。本来はもう少しページ毎に掲載情報を整理し、適切なメニュー名称を付けるべきですが、ここでは便宜的に「カフェの紹介」「メニュー」の2つとしておきます。
```
•••
  <header>
    <h1>◯◯カフェ</h1>
  </header>

  <h2>見出し</h2>
  <ul>
    <li><a href="./work05_1.html">カフェの紹介</a></li>
    <li><a href="./work05_2.html">メニュー</a></li>
  </ul>
•••
```
ファイルを上書き保存し、ブラウザで開いて、リンクが機能することを確認しよう。

レイアウトの準備

「全体を入れるボックス」「メニューを入れるボックス」「メニュー以外の本文を入れるボックス」をそれぞれグループ化しておきます。以下のように nav 要素と div を追加しましょう。 nav 要素はHTML5から追加されたナビゲーションを示す際に使うタグです。div 要素は汎用のブロックレベル要素で、複数の要素をグループ化したい場合や、HTML に定義されていない構造を表現したい場合などに用います。あとでスタイルシートから参照できるように、id 属性に container、contents という値を指定しておきましょう。
```
•••
<body>
  <div id="container">
    <header>
      <h1>◯◯カフェ</h1>
    </header>

    <nav>
      <h2>目次</h2>
      <ul>
        <li><a href="./work05_1.html">カフェの紹介</a></li>
        <li><a href="./work05_2.html">メニュー</a></li>
      </ul>
    </nav>

    <div id="contents">
      <h2>はじめに</h2>
      <p>
        なんちゃらカフェではうんたらかんたら
        •••
      </p>
    </div>
  </div>
</body>
•••
```

containerに対する設定の記述

本文全体の幅を800pxに固定し、上下の余白を0、左右の余白を Web ブラウザに自動設定させるように指定します。以下のスタイル定義を追加しよう。これで、containerが中央揃えになり左右にスペースができるはずです。
```
body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
    margin:0;
    padding:0;
}
#container {
    width:800px;
    margin:0 auto;
} 
```

ページ上部に罫線を入れる。深緑色の7pxのベタなラインを引くように指定します。

body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
    margin:0;
    padding:0;
}
#container {
    width:800px;
    margin:0 auto;
    border-top:7px solid  #2f4f4f;
}

ナビゲーションメニューの作成

work05.cssの中に、nav要素に対して、以下のプロパティを指定します。menuの縦の長さを32pxと指定します。メニューの背景を深緑色に指定します。

•••
/*--------------------------------------
    MENU
---------------------------------------*/

nav {
    height: 32px;
    margin-bottom: 10px;
    padding: 0;
    background-color: #2f4f4f;
}

次に、「目次」という見出し（h2 要素）を非表示にします。 display プロパティを用いて以下のように指定しよう。 display プロパティは、要素のボックスの種類を指定するプロパティです。その要素のボックスを表示するかどうか、表示するならばどのように表示するのかを制御します。
```
nav h2 {
    display: none;
}
```
次にul要素の余白を消すために以下のスタイルを指定します。line-heightプロパティは行間設定です。list-style-typeプロパティは、初期設定では黒丸になっているリストの頭の部分を設定するものです。ここではnone（消す）という設定にしています。
```
nav h2 {
      display: none;
  }

  nav ul {
          height: auto;
          margin: 0;
          padding: 0;
          line-height: 100%;
          list-style-type: none;
  }
```
navの中の、ulの中の、li要素に対して以下のプロパティを指定します。floatプロパティは、次のブロックを回り込ませるための指定です。これを用いることで、初期設定では縦になっているリストを横並びにできます。通常、ウェブサイトのメニューは、こういったリストのスタイルを変えて作成します。
```
•••
  nav ul li {
               margin: 0;
               padding: 0;
               float: left;　
               width: 200px;
               text-align: center;
               font-size: 14px;
  }
```
このままでは文字が見にくいので、文字色、背景色とフチのライン、スペースを指定します。 navの中の、ulの中の、li要素の中の、a要素に対して以下を指定します。display:blockという指定をすることで、カーソルがテキストの部分だけではなく、面で反応するようになります。ここまで来るとだいぶメニューらしくなってきます。
```
•••

  nav ul li a {
              border-right: 1px solid #666;
              padding: 8px 20px;
              display: block;
              position: relative;
              color: #fff;
              background-color: #333;
              text-decoration: none;
  }
```

最後に、リンクの上にカーソルを重ねたときに反転するように、それぞれの色を指定する。以上で完成である。それぞれのプロパティを調整してどのように指定がかかっているかを確認してみよう。

•••
  nav ul li a:link {
      color:#fff;
      text-decoration:none;
  }

  nav ul li a:visited {
      color:#fff;
      text-decoration:none;
  }

  nav ul li a:hover {
      border-color: #699;
      color:#333;
      background-color: #699;
      text-decoration: none;
  }

menu3

CSSのValidation（検証）

以前HTMLのValidationサービスを紹介しましたが、CSSにも同様のサービスがあります。

W3C CSS 検証サービス

上記のCSSの検証サービスは日本語化されていますので、適宜確認してみましょう。

5｜課題：イベントの告知ページの分割、ナビゲーション

前回作成したカフェのページを2ページに分割し、相互に行き来できるナビゲーションメニューを作成してください。

次回（11/9 23:59）までの課題として、HTMLのソース（全体）、CSSのソース（全体）、それをブラウザで表示したスクリーンショット（各ページ）をレポートにまとめ、Classroomに提出してください。

今回の課題

カフェの告知をするWebページを2ページに分割し、相互に行き来できるナビゲーションメニューを作成する
レポートにまとめ、Classroomへ提出（11/9(木) 23:59まで）

※次週鳳祭、次々週文化の日のため、次回授業まで期間があります。次回の教材も先行して公開していますので、ゆとりがあれば先に参照して、課題に着手しておくと有効に時間が使えるかもしれません。

第5回：10月20日 CSS(2) より複雑なCSSの指定とボックスモデル