課題3-1

課題3-1

Terapadを起動する。
タブの幅を4文字分にし、タブと空白文字を表示する設定に変更する (方法を忘れた場合はWebページ制作第1回の資料を参照)。
デスクトップに「課題3」フォルダーを作り、さらにその中に「1」フォルダーを作る。
Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「課題3」の中の「1」フォルダーの中に「index.html」という名前で保存する。

以下の囲みのものをTerapadにコピー＆ペーストし、上書き保存する。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>箇条書き</title>
</head>
<body>
箇条書きの練習<br>
<ul>
	<li>SketchUp</li>
	<li>Onshape</li>
	<li>Webページ制作</li>
</ul>
</body>
</html>

「課題3」の「1」フォルダーにある「index.html」をブラウザで開く。すると、このようなものが表示される。「ワークショップのページ」をクリックすると、実際にワークショップのページにジャンプする (確認したら戻るボタンで元の画面に戻る)。

<ul>：番号無し箇条書きの開始タグ
</ul>：番号無し箇条書きの終了タグ
<li>：項目の開始タグ
</li>：項目の終了タグ

<ul>と</ul>で囲んだ部分が番号無し箇条書きになる。
<li>と</li>で囲んだ部分が項目になる。

<li>～</li>の部分は字下げしなくてもブラウザでは同じように表示されるが、「ここからここまでが箇条書き」ということがわかるように、こうしてタブ1つ分下げておくのがお約束。ちなみに、プログラムでif文やfor文を書くときも同じ考え方。

赤い囲みのコードを追加してブラウザをリロードする。すると、さっきの表示の下に1, 2, 3番号付きで箇条書きが表示される。
全部手入力してもよいが、次のようにすれば楽。
- <ul>から</ul>の部分を、そのすぐ下にコピー＆ペーストする
- ulをolに書き換える (2ヶ所)
<ol>：番号付き箇条書きの開始タグ
</ol>：番号付き箇条書きの終了タグ

<ol>と</ol>で囲んだ部分が番号付き箇条書きになる。

赤い囲みのコードを追加してブラウザをリロードする。すると、「・SketchUp」の下に1段下がった形で箇条書きが追加される。

このようにすれば「箇条書きの中の箇条書き」をつくることができる。
複雑な項目を整理して見せたいときはこういう書き方をするとわかりやすい。

9行目の<ul>のところを<ul type="circle">に変更し、ブラウザをリロードする。

いままで黒丸だったところが白丸に変わる。「type=」のあとに入れるもので、次のように箇条書きの前の記号を変えられる。

11行目と21行目の<ol>のところを、それぞれ<ol type="i">と<ol type="a">に変更し、ブラウザをリロードする。

いままで数字だったところがローマ数字(小文字)とアルファベットに変わる。「type=」のあとに入れるもので、次のように箇条書きの前の記号を変えられる。

課題2