課題4 箇条書き

課題4-1

  1. Terapadを起動する。
  2. 「表示」→「オプション」でタブの幅を4文字分にし、タブと空白文字を表示する設定に変更する。


  3. デスクトップに「課題4」フォルダーを作り、さらにその中に「1」フォルダーを作る。
  4. Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「index.html」という名前で保存する。

  5. 以下のコードをコピー&ペーストして上書き保存する。
  6. <!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>

  7. index.htmlをFireFoxで開く。
  8. <ul> と </ul> で囲んだものは「番号なしの箇条書き」、<ol> と </ol> で囲んだものは「番号つきの箇条書き」になる。
    箇条書きのそれぞれの項目は <li> と </li> で囲む。
    (こう書けば、材料の項目の「・」や手順の項目の数字が自動的につく)

    どちらのタイプの箇条書きも入れ子にすることができる。
    後半の「切る」「炒める」などの大項目は <ol class="procedure1"> と </ol> に囲まれていて、「野菜を切る」「肉を炒める」などの小項目は、さらにその中につくった <ol class="procedure2"> と </ol> の囲みの中にある。
    入れ子はいくらでも深くすることができる。
    プログラムのコードを書くときと同様に、タグで囲まれたもののインデントを1段階ずつ深くすることで、開始タグと終了タグの対応の間違いを避けられる。

    この段階では、「材料」と「ルウ 1/2箱」の間、「手順」と「1. 切る」の間が空きすぎている。
    また、「2. 炒める」の上はもうちょっと空けたい。

  9. CSSの「/* 上にスペースをあけない */」の左に「margin-top: 0;」を、「/* 下をあける */」の左に「margin-bottom: 12px;」を記入して上書きし、FireFoxのページを更新する。
  10. デフォルトでは箇条書き全体の上にマージンが設定されていて余計なスペースができてしまうが、こうすれば余計なスペースをなくせる。
    「玉ねぎは~します。」の文は、本文では <div class="inner"> で囲んである。これに下側のマージンを設定することで、文と次の項目の間に隙間を作っている。
    Webページに限らず、Wordで報告書を書くときにもこうして文と次の項目の間をあけると読みやすくなる。

  11. CSSの「/* 12ピクセル */」の左に「font-size: 12px;」を記入する。同様に「/* 16ピクセル */」「/* 14ピクセル */」の左にも「font-size: 16px;」「font-size: 14px;」を記入して上書きし、FireFoxのページを更新する。
  12. 大項目、小項目、中の説明文のサイズがそれぞれ16ポイント、14ポイント、12ポイントになる。
    Webページに限らず、こうして重要度ごとに文字サイズを使い分ければ全体の情報がつかみやすくなる。

  13. CSSの「/* 先頭のマークを■にする */」の左に「list-style-type: square;」を記入する。同様に「/* 漢数字にする */」「/* A, B, C,...にする */」の左に「list-style-type: cjk-decimal;」「list-style-type: upper-alpha;」を記入して上書きし、FireFoxのページを更新する。
  14. 番号なしの箇条書きの先頭のマークが■になり、番号付きの大項目は漢数字、小項目は大文字アルファベットになる。
    ほかにも、マークを○にしたり、ギリシャ文字などにする方法もある (参考)。

  15. CSSの「/* インデントを浅くする */」の左に「margin-left: -20px;」を記入して上書きし、FireFoxのページを更新する。
  16. A, B, C,...の項目と説明文が左にずれる。
    箇条書きを入れ子にすると先頭の位置が右よりになっていく。特にスマホで見ることを前提にすると無駄なスペースが多くなるので、階層の深いものを作るときはこうしてそれぞれのインデントを調整するとよい。

    FireFoxでの表示がこれと完全に同じになっていて、Ctrl+Uでソースを表示させてエラー (赤い点線のアンダーライン) がないことを確認したら課題4-1は完了。

課題4-2

  1. 課題4-1の結果表示用のFireFoxのタブ、TeraPadを閉じる。
  2. 「課題4」フォルダの中に「2」フォルダを作る。
  3. 「2」フォルダの中にindex.htmlを作る (新しく作ってもよいし、課題4-1で作ったものをコピーしてもよい)。
  4. そのindex.htmlを編集し、オリジナルのページを作る。

課題の条件
注意 (この課題限定ではなく、Webページ全般について)
以下に例を挙げるが、これらはあくまで参考用。全く同じものはNG。

例1
(新しいテクニックを使っている場所 : 24~26行目, 効果はコメント文に書いてある通り)



例2
(新しいテクニックを使っている場所 : 24~26行目, 効果はコメント文に書いてある通り)
(それぞれの項目「ul li」には上・下・右、箇条書きそのもの「ul」の左にそれぞれ枠線を描く設定を入れている。そのため、各項目が枠で囲まれる)



例3
(新しいテクニックを使っている場所 : 33, 34行目)
(基本的には例2のものから上下の枠、背景色を除いたもの)
(全体の左につく枠、最後の項目につく枠をなくしてこのように表示させている)
(「ul li:last-child」は「番号なし箇条書きの最後の要素」)

提出

inserted by FC2 system