読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

定義型リストとテーブル

定義型リスト

定義型リストとは「ul」、「ol」リストと少し違い、
「dt」= 用語の指定
「dd」= dtで指定した用語の定義
「dl」= 「dt」「dd」を挟む

<dl>
<dt>レモン<dt><dd>酸っぱい黄色い果物</dd>
<dt>桃<dt><dd>水分が多く柔らかい赤みをおびた果物</dd>
</dl>


以下の文を定義型リストを使ってマークアップしてみましょう。

■ 2015-04-22 ゴールデンウィークの営業について

■ 2015-04-21 今週の日替わりメニュー(4/21 - 4/26)

■ 2015-04-14 今週の日替わりメニュー(414 - 4/19)

■ 2015-04-10 春限定のおやつがスタートしました!




テーブル

table要素を使うことで、表を作成することができます。
表内の行とセルは、table要素内に配置するtr要素とtd要素(th要素)で示します。
caption要素は、表のキャプション(タイトルや説明)を表します。

table要素=表全体を示す要素です。表の大きさや罫線などは、この要素に設定。
tr要素=表の行を示す要素。例えば3行の表を作成する場合はこの要素を3つ配置する。
th要素=見出し用のセルを示す要素です。
td要素=表のセル(データセル)を示す要素。例えば横に3つのセルを並べたい場合は、各tr要素の中にこの要素を3つ配置。
caption要素=表のキャプション(タイトルや説明)を表します。


<table>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
<th>見出しセル3</th>
</tr>
<tr>
<td>データセル1-1</td>
<td>データセル2-1</td>
<td>データセル3-1</td>
</tr>
<tr>
<td>データセル1-2</td>
<td>データセル2-2</td>
<td>データセル3-2</td>
</tr>
</table>
セルの結合

f:id:yachin29:20160713235449j:plain


f:id:yachin29:20160713235935j:plain

宿泊料金表
部屋タイプ ツイン シングル
グレード スタンダード エグゼクティブ スイート スタンダード エグゼクティブ
平日 15,800円 20,800円 58,000円 9,800円 14,800円
休前日 19,800円 25,800円 12,800円 17,800円

<table border="1" width="700px">
<caption>宿泊料金表</caption>
<tr><th>部屋タイプ</th><th colspan="3">ツイン</th><th colspan="2">シングル</th></tr>
<tr><th>グレード</th><td>スタンダード</td><td>エグゼクティブ</td><td>スイート</td><td>スタンダード</td><td>エグゼクティブ</td></tr>
<tr><th>平日</th><td>15,800円</td><td>20,800円</td><td rowspan="2">58,000円</td><td>9,800円</td><td>14,800円</td></tr>
<tr><th>休前日</th><td>19,800円</td><td>25,800円</td><td>12,800円</td><td>17,800円</td></tr>
</table>

マークアップの復習

以下の文章を正しくマークアップしましょう。


本日の授業内容
本日はHTMLとPhotoshopの授業を行います。

HTMLの授業内容
HTMLの授業では定義型リストとテーブル要素を使います。

定義型リスト
定義型リストはdl要素、dt要素、dd要素の3つの要素で成り立っています。

テーブル要素
table要素を使うことで、表を作成することができます。


Photoshopの授業
Photoshopの授業では、選択範囲の取り方の復習を行います。
使うツールの名前

  • 自動選択ツール
  • マグネットツール
  • なげなわツール


f:id:yachin29:20160714112950p:plain