課題2　フォント

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

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

以下のコードをコピー＆ペーストして上書き保存する。

<!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倍の大きさになる。

index.htmlをFireFoxで開く。

CSSの部分に以下のものをコピー＆ペーストする。

		/* 明朝体 */
		.mincho {
			font-family: serif;
		}
		/* 太字 */
		.bold {
			font-weight: bold;
		}
		/* 斜字体 */
		.italic {
			font-style: italic;
		}

「font-family」はフォントに関わるプロパティ。「serif」を入れると明朝体になる。
「font-weight」は文字の太さに関わるプロパティ。「bold」を入れると太字になる。
「font-style」は通常体・筆記体・斜体に関わるプロパティ。「italic」を入れると半角英数は筆記体、日本語は傾いた形になる。

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

CSSの部分に以下のものをコピー＆ペーストする。

		/* 文字色(赤) */
		.red {
			color: #ff0000;
		}
		/* 文字色(青), 背景(赤) */
		.blue_red {
			color: #0000ff;
			background-color: #ff0000;
		}

「color」は文字の色、「background-color」は背景の色に関わるプロパティ。
「blue-red」ではこの2つのプロパティをまとめて設定している。
色は英語の色名かRGBの値で指定できる。課題2-2で自前で色を決めたいときはここやここが参考になる。

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

CSSの部分に以下のものをコピー＆ペーストする。

		/* アンダーライン */
		.underline {
			text-decoration-line: underline;
		}
		/* 打ち消し線 */
		.linethrough {
			text-decoration-line: line-through;
		}

「text-decoration-line」は文字につける線に関わるプロパティ。「underline」を入れるとアンダーラインがつき、「line-through」を入れると打ち消し線がつく。

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

CSSの部分に以下のものをコピー＆ペーストする。

		/* 上付き文字 */
		.super {
			font-size: 0.5em;
			vertical-align: super;
		}
		/* 下付き文字 */
		.sub {
			font-size: 0.5em;
			vertical-align: sub;
		}

「vertical-align」に「super」「sub」を入れるとそれぞれ上付き、下付きの添え字になる。
添え字の大きさが普通の文字と同じだと不自然になるので、ここでは大きさも変えて半分にしている。

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

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

課題2　フォント

課題2-1

課題2-2

提出

課題2 フォント

課題2-1

課題2-2

提出

課題2　フォント