課題2 フォント

課題2-1

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


  3. デスクトップに「課題2」フォルダーを作り、さらにその中に「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%;
    		}
    		/* 文字の大きさ(通常の半分) */
    		.small {
    			font-size: 0.5em;
    		}
    		/* 文字の大きさ(通常の2倍) */
    		.big {
    			font-size: 2.0em;
    		}
    	</style>
    	<title>課題2. 文字の見た目の変更</title>
    </head>
    <body>
    デフォルト設定の文字
    <br>
    <span class="small">ここだけ小さい文字になる</span>
    <br>
    <span class="big">ここだけ大きい文字になる</span>
    </body>
    </html>
    赤字の部分はCSSと呼ばれるもので、ここにいろいろな設定の「お約束」を記述する。
    「img」に関わる1つ目の塊は、第1回にあったものと同様。2つ目、3つ目の塊で文字の大きさを変えるルールを決めている。
    「font-size」は文字の大きさを表すプロパティ (属性) で、その後の「em」の前の数値で文字の大きさを設定する。1.0がデフォルトの大きさ。
    「small」「big」はユーザーが勝手に設定できる名前。
    CSSのところにこう書くことで、
    本文 (<body>と</body>の間) 中で<span class="small">と</span>の間に書いた文字は通常の半分の大きさになる。
    本文 (<body>と</body>の間) 中で<span class="big">と</span>の間に書いた文字は通常の2倍の大きさになる。

  7. index.htmlをFireFoxで開く。


  8. CSSの部分に以下のものをコピー&ペーストする。
  9. (ペーストすれば、もともとあったものと同じ字下げ状態になるはず。この字下げにも意味があるので、字下げは消さないこと)
    		/* 明朝体 */
    		.mincho {
    			font-family: serif;
    		}
    		/* 太字 */
    		.bold {
    			font-weight: bold;
    		}
    		/* 斜字体 */
    		.italic {
    			font-style: italic;
    		}
    「font-family」はフォントに関わるプロパティ。「serif」を入れると明朝体になる。
    「font-weight」は文字の太さに関わるプロパティ。「bold」を入れると太字になる。
    「font-style」は通常体・筆記体・斜体に関わるプロパティ。「italic」を入れると半角英数は筆記体、日本語は傾いた形になる。

  10. 以下のような表示になるように、必要なコードを本文に追加する。
  11. (文字を大きく・小さくするためにどう書いたかを参考にする)


  12. CSSの部分に以下のものをコピー&ペーストする。
  13. 		/* 文字色(赤) */
    		.red {
    			color: #ff0000;
    		}
    		/* 文字色(青), 背景(赤) */
    		.blue_red {
    			color: #0000ff;
    			background-color: #ff0000;
    		}
    「color」は文字の色、「background-color」は背景の色に関わるプロパティ。
    「blue-red」ではこの2つのプロパティをまとめて設定している。
    色は英語の色名かRGBの値で指定できる。課題2-2で自前で色を決めたいときはここここが参考になる。

  14. 以下のような表示になるように、必要なコードを本文に追加する。


  15. CSSの部分に以下のものをコピー&ペーストする。
  16. 		/* アンダーライン */
    		.underline {
    			text-decoration-line: underline;
    		}
    		/* 打ち消し線 */
    		.linethrough {
    			text-decoration-line: line-through;
    		}
    「text-decoration-line」は文字につける線に関わるプロパティ。「underline」を入れるとアンダーラインがつき、「line-through」を入れると打ち消し線がつく。

  17. 以下のような表示になるように、必要なコードを本文に追加する。
  18. (アンダーラインを引きたい「ここを」と、取り消し線を入れたい「大きい」の文字列だけをそれぞれspanタグで囲む)


  19. CSSの部分に以下のものをコピー&ペーストする。
  20. 		/* 上付き文字 */
    		.super {
    			font-size: 0.5em;
    			vertical-align: super;
    		}
    		/* 下付き文字 */
    		.sub {
    			font-size: 0.5em;
    			vertical-align: sub;
    		}
    「vertical-align」に「super」「sub」を入れるとそれぞれ上付き、下付きの添え字になる。
    添え字の大きさが普通の文字と同じだと不自然になるので、ここでは大きさも変えて半分にしている。

  21. 以下のような表示になるように、必要なコードを本文に追加する。
  22. (上付き、下付きにしたい部分だけをspanタグで囲む)


  23. どうしてもうまくいかない場合は完成状態のコードと見比べて修正する。

課題2-2

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

課題の条件
注意 (この課題限定ではなく、Webページ全般について)

提出

inserted by FC2 system