未経験のwebサイト制作の勉強

未経験からwebサイト制作の勉強をし、現在制作会社で働いております。

定義型リストとテーブル

定義型リスト

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

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

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

2019-03-20 ゴールデンウィークの営業について

2019-03-11 今週の日替わりメニュー(3/11 - 3/17)

2019-03-04 今週の日替わりメニュー(3/04 - 3/10)

2019-03-01 春限定のおやつがスタートしました!



テーブル

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:study-aaa:20191001222215p:plain