- Terapadを起動する。
- 「表示」→「オプション」でタブの幅を4文字分にし、タブと空白文字を表示する設定に変更する。
- デスクトップに「課題4」フォルダーを作り、さらにその中に「1」フォルダーを作る。
- Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「index.html」という名前で保存する。
- 以下のコードをコピー＆ペーストして上書き保存する。
- index.htmlをFireFoxで開く。
- CSSの「/* 上にスペースをあけない */」の左に「margin-top: 0;」を、「/* 下をあける */」の左に「margin-bottom: 12px;」を記入して上書きし、FireFoxのページを更新する。
- CSSの「/* 12ピクセル */」の左に「font-size: 12px;」を記入する。同様に「/* 16ピクセル */」「/* 14ピクセル */」の左にも「font-size: 16px;」「font-size: 14px;」を記入して上書きし、FireFoxのページを更新する。
- CSSの「/* 先頭のマークを■にする */」の左に「list-style-type: square;」を記入する。同様に「/* 漢数字にする */」「/* A, B, C,...にする */」の左に「list-style-type: cjk-decimal;」「list-style-type: upper-alpha;」を記入して上書きし、FireFoxのページを更新する。
- CSSの「/* インデントを浅くする */」の左に「margin-left: -20px;」を記入して上書きし、FireFoxのページを更新する。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style type="text/css">
/* 画像 */
img {
max-width: 100%; /* 最大幅をブラウザの幅にする */
}
/* 見出し用 */
.header {
font-size: 2.0em;/* 2倍サイズ */
font-weight: bold;/* 太字 */
}
/* 小見出し用 */
.header2 {
font-size: 1.5em;/* 1.5倍サイズ */
font-weight: bold;/* 太字 */
}
/* 本文用字下げ */
div.main {
margin-left: 10px;/* 左をあける */
}
/* 項目中の文用設定 */
div.inner {
/* 12ピクセル */
/* 下をあける */
}
/* 箇条書きの設定 */
ul, ol {
/* 上にスペースをあけない */
/* 16ピクセル */
}
/* 番号なし箇条書き(材料用)の設定 */
ul.material {
/* 先頭のマークを■にする */
}
/* 番号あり箇条書き(手順・大項目)の設定 */
ol.procedure1 {
/* 漢数字にする */
}
/* 番号あり箇条書き(手順・小項目)の設定 */
ol.precedure2 {
/* インデントを浅くする */
/* A, B, C,...にする */
/* 14ピクセル */
}
</style>
<title>課題4. 箇条書き</title>
</head>
<body>
<span class="header">カレーのレシピ</span>
<div class="main">
<span class="header2">材料</span>
<ul class="material">
<li>ルウ 1/2箱</li>
<li>肉 200g</li>
<li>玉ねぎ 中1と1/2個</li>
<li>にんじん 小1本</li>
<li>ジャガイモ 中1個</li>
<li>サラダ油 大さじ1</li>
<li>水 700ml</li>
<li>クミンシード</li>
<li>ガラムマサラ</li>
<li>ローレル</li>
</ul>
<span class="header2">手順</span>
<ol class="procedure1">
<li>切る</li>
<ol class="precedure2">
<li>野菜を切る</li>
<div class="inner">
玉ねぎは皮をむき、たて半分に切ります。1/2個分はみじん切りに、1個分を小さめの乱切りにします。<br>
にんじん、じゃがいもは皮をむき、食べやすい大きさの乱切りにします。
</div>
</ol>
<li>炒める</li>
<ol class="precedure2">
<li>肉を炒める</li>
<li>クミンシードを炒める</li>
<li>野菜を炒める</li>
</ol>
<li>煮る</li>
<ol class="precedure2">
<li>ローレルを入れる</li>
<li>アクをとる</li>
</ol>
<li>ルウを入れる</li>
<ol class="precedure2">
<li>ルウを入れる</li>
</ol>
<li>仕上げ</li>
<ol class="precedure2">
<li>ガラムマサラを入れる</li>
<li>盛り付け</li>
</ol>
</ol>
</div>
</body>
</html> |
 |
<ul> と </ul> で囲んだものは「番号なしの箇条書き」、<ol> と </ol> で囲んだものは「番号つきの箇条書き」になる。 箇条書きのそれぞれの項目は <li> と </li> で囲む。 (こう書けば、材料の項目の「・」や手順の項目の数字が自動的につく) どちらのタイプの箇条書きも入れ子にすることができる。 後半の「切る」「炒める」などの大項目は <ol class="procedure1"> と </ol> に囲まれていて、「野菜を切る」「肉を炒める」などの小項目は、さらにその中につくった <ol class="procedure2"> と </ol> の囲みの中にある。 入れ子はいくらでも深くすることができる。 プログラムのコードを書くときと同様に、タグで囲まれたもののインデントを1段階ずつ深くすることで、開始タグと終了タグの対応の間違いを避けられる。 この段階では、「材料」と「ルウ 1/2箱」の間、「手順」と「1. 切る」の間が空きすぎている。 また、「2. 炒める」の上はもうちょっと空けたい。 |
 |
デフォルトでは箇条書き全体の上にマージンが設定されていて余計なスペースができてしまうが、こうすれば余計なスペースをなくせる。 「玉ねぎは～します。」の文は、本文では <div class="inner"> で囲んである。これに下側のマージンを設定することで、文と次の項目の間に隙間を作っている。 Webページに限らず、Wordで報告書を書くときにもこうして文と次の項目の間をあけると読みやすくなる。 |
 |
大項目、小項目、中の説明文のサイズがそれぞれ16ポイント、14ポイント、12ポイントになる。 Webページに限らず、こうして重要度ごとに文字サイズを使い分ければ全体の情報がつかみやすくなる。 |
 |
番号なしの箇条書きの先頭のマークが■になり、番号付きの大項目は漢数字、小項目は大文字アルファベットになる。 ほかにも、マークを○にしたり、ギリシャ文字などにする方法もある (参考)。 |
 |
A, B, C,...の項目と説明文が左にずれる。 箇条書きを入れ子にすると先頭の位置が右よりになっていく。特にスマホで見ることを前提にすると無駄なスペースが多くなるので、階層の深いものを作るときはこうしてそれぞれのインデントを調整するとよい。 |
FireFoxでの表示がこれと完全に同じになっていて、Ctrl+Uでソースを表示させてエラー (赤い点線のアンダーライン) がないことを確認したら課題4-1は完了。
