Webプログラミング2023

今回の内容

少し複雑な要素の記述ルール
イベント告知ページの作成

1. 小テスト 2. 少し複雑な要素 3. 課題：イベントの告知ページの作成

1｜小テスト

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

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

作業

小テスト

2｜少し複雑な要素

前回は、HTMLによる文書のマークアップ方法を学びました。要素と呼ばれる文書の構成部品をタグと呼ばれる記法を用いて文書に埋め込んで記します。

<要素名 属性名="値">内容</要素名>

今回は、前回の課題の続きとして、もう少し複雑な要素の記述方法について学んでいきます。より具体的には、今回は表や箇条書きを扱います。

文書の入れ子構造

前回示した通り、HTMLは要素の中に要素が含まれる要素の入れ子構造により全体が表現されています。文書全体がひとつのhtml要素、その中にhead要素とbody要素がひとつずつ。前回扱ったのは、headやbodyの中で使う要素で、例えば見出しのh1要素や段落のp要素など、それぞれに要素としての意味がありました。

今回は、複数の要素の組み合わせからなる要素を取り上げます。

箇条書き： ul 要素、ol 要素

まずは箇条書きです。箇条書きには

あれ
これ
それ

というように順序のないものと、

あれ
これ
それ

というように順序のあるものがあります。順序のないものを例に、その記述法を説明します。上に示した例の順序のない箇条書きを実現するには、以下のようにタグを書きます。

<ul>
  <li>あれ</li>
  <li>これ</li>
  <li>それ</li>
</ul>

これまでの説明からわかるように、これはul要素の中に、3つのli要素が含まれています。

ulとはunordered listの略で、順序なしリストを表します。liはlist itemの略で、リストの項目を表します。このように、箇条書きとして並べられる各項目をli要素とし、それを含む箇条書き全体がひとつのul要素となっています。要素自体が、それを構成する要素の組み合わせによって成り立っていることがわかるでしょう。この要素の親子関係は大変重要で、リストの項目であるli要素は、順序なしの箇条書きであるul要素の下に含まれるから意味を持ちます。例えばbodyやpの中に直接にli要素を置いても、同じような意味を表しません。

ただしul以外にもliが働ける場所があります。それが順序のある箇条書きで、例えば以下のようなものです。

<ol>
  <li>あれ</li>
  <li>これ</li>
  <li>それ</li>
</ol>

olはordered listの略で、順序つきリストを表します。

olやulは必ずひとつ以上のliを子に持ち、liは親としてolまたはulを持ちます。このように各要素は組み合わせて使って初めて意味を持つものがあります。

表： table 要素

より複雑な要素として、表を表すtable要素を取り上げます。表とは例えば以下のようなものです。

あるお店のメニュー
メニュー	価格(円)
カレー	530
カツカレー	720
しょうが焼きライス	730

表は縦横に複数のマス目を区切って情報を整理しています。表を構成する要素を図示すると、下図のようになっています。

表を構成する要素の例

これをマークアップするには、次のように書きます。

<table>
  <caption>あるお店のメニュー</caption>
  <tr>
    <th>メニュー</th>
    <th>価格(円)</th>
  </tr>
  <tr>
    <td>カレー</td>
    <td>530</td>
  </tr>
  <tr>
    <td>カツカレー</td>
    <td>720</td>
  </tr>
  <tr>
    <td>しょうが焼きライス</td>
    <td>730</td>
  </tr>
</table>

table要素が表全体を表します。

table要素は子としてcaption要素（表の説明）をひとつ持つことができます。キャプションはない場合もあります。

表は行単位で考え、まずは行をtr要素で表します。trはtable rowの略です。

各行にはセルが並びます。セルには見出し項目を表すth（table header）要素と、データを記述するtd（table data〕要素があります。

※このまま記述すると表の罫線が表示されませんが、現在は気にしなくて構いません。次回以降学ぶCSSを用いることで枠線も制御します。

少し複雑になってきましたが、どの要素がどの要素の組み合わせで作られているかを丁寧に考えていきましょう。

もう少し難しい表の使い方として、以下のような例を考えてみます。

グループ	メンバー
1	小杉
1	沼
2	飯田

この表では、グループ1のところに縦にセルが繋がった部分があります。この表は以下のように書くことができます。

<table>
  <tr>
    <th>グループ</th>
    <th>メンバー</th>
  </tr>
  <tr>
    <td rowspan=2>1</td>
    <td>小杉</td>
  </tr>
  <tr>
    <td>沼</td>
  </tr>
  <tr>
    <td>2</td>
    <td>飯田</td>
  </tr>
</table>

rowspan属性には、縦方向に結合したいセルの個数を書きます。また、このセルの要素は上の行の位置に書きます。下の行のtrにはセル（td）がひとつしか書いてありませんが、上の行のセルが伸びて埋めるように表示されます。横方向に繋げたい場合にはcolspan属性を用います。

ブロック要素とインライン要素

HTML文書で画面に表示される要素（body要素の子となる要素）には、ブロック要素とインライン要素があります。

厳密にはこれは古いHTMLでの分類で、ブロック要素とインライン要素という考え方がありました、という表現が正確なのですが、理解しやすいようにまずこの考え方を説明します。

ブロック要素とは、文書内でその要素自体が箱状に領域を占めるタイプの要素です。h1などの見出し要素や段落のp要素、表や箇条書きも、その要素自体が箱状にスペースを取ります。また例えばtable要素の中にtr要素が、またその中にtd要素がというように、要素の入れ子構造に沿って、画面上に表示される際の箱の入れ子を考えることができます。

一方インライン要素とは、行内に含まれる要素です。それ自体が大きな箱状の領域を確保するのではなく、親であるブロック要素の中に含まれて文字のように並んで表示されます。例えばハイパーリンクを示すa要素や、画像を貼る際に使うimg要素もそうです。

ただ現在では、こうした文書の見た目に関することは次回から扱うCSSによって制御することとなっており、個別の要素を表示する際にブロックにもインラインにも変更することができます。ですが、特段に指定し変更しない限りには上記のように解釈され表示されます。

より正確に要素と要素の関係を捉えるために、最新のHTMLのバージョンであるHTML5では、カテゴリーとコンテンツモデルという考え方で要素を整理しています。

HTML5

HTML は1993年に最初に定められたバージョン HTML 1.0 以来、改訂が重ねられてきました。HTML5 はその最新の仕様です。2008年に草案が出され、2014年に勧告されました。また、2016年にはHTML 5.1が勧告されています。1998年来長く用いられている HTML 4.01 や、その XML 準拠バージョンである XHTML では静的な文書の記述に主眼が置かれていましたが、Flash や Silverlight 等の多様なプラグイン類を活用したリッチインターネットアプリケーションを置き換えることを標榜し、インタラクティブなコンテンツの記述のための要素が拡充されています。

これまで embed 要素を用いてプラグインに任されていた動画や音声コンテンツに対応する video 要素や audio 要素が追加されました。また canvas 要素により図形が描画できるようになり、またそれをJavaScriptにより制御することで HTML 文書内で直接動的なコンテンツを記述することができるようになっています。

HTMLのValidation（検証）

Validatorと呼ばれるサービスがあります。これはHTMLなどの文書が文法的に適切に記述されているかを検証するサービスです。

The W3C Markup Validation Service

自分の書いたHTMLを上記の検証サービスに入力し、確認してみましょう。ウェブブラウザでは、文書に間違いがあってもなんとなくそれらしく表示してくれてしまうため、誤りに気付きにくくなってしまいます。検証サービスを用いてエラーや警告を確認することで、気付かなかった誤りを見つけることができるかもしれません。（上記の検証サービスは英語で表示されます。エラーや警告メッセージには定型文が多いため、もし読めなくても翻訳サイトなどを活用してみるとなんとなく意味はわかるのではないかと思います。）

3｜課題：イベントの告知ページの作成

前回から引き続き、ワンデーカフェのページを作成していきましょう。

内容を拡充させるとともに、今回導入した複雑な要素も利用してみましょう。

期間限定カフェ企画

カフェとは元々はコーヒーを主として提供する飲食店ですが、今日では様々なコンセプトや企画を伴った多岐にわたるカフェがあります。常設的なコンセプトカフェに加え、既存店が期間を区切って企画を展開したり、そもそもお店自体を期間限定で出店したり、多様な形態の「カフェ」が展開されています。

あなたは、スポンサーから十分な資金を得てカフェを開けることになったとします。さてあなたは、いつ、どこで、どんなカフェを開くでしょうか？　そのカフェの告知用サイトをつくってください。架空のものでかまいませんが、普通の大衆食堂やカフェではなく、ターゲットとなるお客さんがちゃんと来てくれるような魅力的な企画を考えてみましょう。

告知用として、

カフェの名前（オリジナルなもの）
キャッチコピー
どんなお店なのかの概要や魅力を伝えるテキスト200字程度
提供するメニュー（※自分でいくつ並べるかを考える。メインコンテンツであるので丁寧に解説する）
日時（いつ開くのか。時期や期間などを考え、自由に決めてよい）
アクセス（どのような場所で開くのか。架空の立地や、実在する店舗の貸切など含めて自由に決めてよい。）

の情報を考え、それを説明するWebページを作成してください。

指定するタグ：h1、p、a、ol、ul、table を必ず用いて作成してください。これらの要素を使う際に必要となる要素も適宜使ってください。また、指定されていない要素（h2やimgなど）も自由に使って構いません。

ページで利用する写真やイラストなどの画像については、自分で用意したもののほか、フリー素材であれば用いて構いません。ただし利用した自作ではない画像については、レポートに出典を記載してください。また外部の画像を素材として利用する場合には、img要素に外部画像のURIを直接記述するのではなく、一旦手元に保存したファイルを参照するようにしてください。文字色や文字サイズなどの見た目の装飾はCSSを使って行なうので、気にする必要はありません。

10/11(水) 23:59までの課題としてHTMLファイルを完成させ、HTMLのソースと、それをブラウザで表示したスクリーンショットをレポートにまとめ、Classroomに提出してください。

今回の課題

引き続きカフェの告知をするWebページを作成する（要件は上記参照）
ソース、スクリーンショット、説明などをレポートにまとめ、Classroomへ提出する（10/11(水) 23:59まで）

第3回：10月6日 HTML(2) 少し複雑な要素の記述