■今後のスケジュール
| 11月17日（月）午前0時 | 企画書提出期限（@Teams > 企画書提出） |
| 第8回（11月17日） | 企画発表 |
| 第9回（11月24日） | 企画発表（時間が余れば制作） |
| 第10回（12月1日） | 制作 |
| 第11回（12月8日） | 講義：レイアウトについて |
| 第12回（12月15日） | 制作 |
| 第13回（12月22日） | 制作 |
| 第14回（1月5日） | 作品プレゼン |
| 第15回（1月19日） | 作品プレゼン |
■企画発表の準備と先行事例の調査
企画発表では、自分の考えた企画とサイトの概要を、3分程度で説明してもらいます。
提出いただいた企画書を中間モニターに映しながら行います。
発表の準備を進めながら、自分が作りたいサイトの先行事例を積極的に調べましょう。
業種やジャンルが同じサイト、配色やレイアウトを真似したいサイトなどを、たくさん見つけてブックマークしておきましょう。
業種やレイアウトなどから作例を探す
・SANKOU! Webデザイン制作の参考になる国内のステキなサイト集
https://sankoudesign.com
・WebDesignClip
https://webdesignclip.com
●表の作成
「index.html」を別名保存して、「class.html」という名称にする。保存場所は「index.html」等と同じフォルダ内。「class.html」内に表を作成する。
○HTMLでの表作成（テキストp.98-99）
表は<table>タグを使って作成します。
表の行を増やす場合には、<tr>〜</tr>を使います。
表の列を増やす場合には，見出しの列には<th>〜</th>を，その他には<td>〜</td>を使います。
今回の例では，3行×2列の表を作成します。
まず、<table>〜</table>と書いてから、その中に<tr>〜</tr>（1行目）のタグを書きます。
その中にさらに<th>〜</th>（見出しの列）、<td>〜</td>（見出し以外の列）と中身の列を書き込んでいくとよいでしょう。
「style.css」を使って、表の線の幅や背景色などの外見の設定をする。
CSSファイル内に，新たにtable{ }（表全体の見た目の設定）と，th{ }（見出しの列の外見の設定），td{ }（見出し以外の列の外見の設定）を書いていきます。
table {
font-size: 14px;
margin-bottom: 20px;
margin-left: 20px;
width: 600px;
border: none;
border-collapse: separate;
}
th {
padding: 8px;
width: 150px;
text-align: left;
vertical-align: top;
background-color: #ffefd5;
border: solid 1px #ffcc66;
}
td {
padding:8px;
border: solid 1px #ffcc66;
}
ソースコード
ファイル名：「class.html」
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
（中略）
<li><a href=”campus.html”>コンテンツ１</a></li>
<li><a href=”class.html”>コンテンツ２</a></li>
</ul>
<table summary=”表の説明文”>
<tr>
<th>表の見出し１</th>
<td>表の本文1</td>
</tr>
<tr>
<th>表の見出し２</th>
<td>表の本文2</td>
</tr>
<tr>
<th>表の見出し３</th>
<td>表の本文3</td>
</tr>
</table>
<p>本文</p>
（後略）
ファイル名：「style.css」
（中略）
h3 {
font-size: 18px;
font-family: sans-serif;
color: #4169e1;
border-bottom: solid 2px #4169e1;
padding-bottom: 3px;
background-image: url(images/mark.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 32px;
clear: both;
}
table {
font-size: 14px;
margin-bottom: 20px;
margin-left: 20px;
width: 600px;
border: none;
border-collapse: separate;
}
th {
padding: 8px;
width: 150px;
text-align: left;
vertical-align: top;
background-color: #ffefd5;
border: solid 1px #ffcc66;
}
td {
padding: 8px;
border: solid 1px #ffcc66;
}
/* 画像の配置位置を指定する */
/* 右寄せで配置する画像はclass photo-rにする */
（後略）
KOTERA Ryo 