- Terapadを起動する。
- 「表示」→「オプション」でタブの幅を4文字分にし、タブと空白文字を表示する設定に変更する。
- デスクトップに「課題2」フォルダーを作り、さらにその中に「1」フォルダーを作る。
- Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「index.html」という名前で保存する。
- 以下のコードをコピー&ペーストして上書き保存する。
- index.htmlをFireFoxで開く。
- CSSの部分に以下のものをコピー&ペーストする。 (ペーストすれば、もともとあったものと同じ字下げ状態になるはず。この字下げにも意味があるので、字下げは消さないこと)
- 以下のような表示になるように、必要なコードを本文に追加する。 (文字を大きく・小さくするためにどう書いたかを参考にする)
- CSSの部分に以下のものをコピー&ペーストする。
- 以下のような表示になるように、必要なコードを本文に追加する。
- CSSの部分に以下のものをコピー&ペーストする。
- 以下のような表示になるように、必要なコードを本文に追加する。 (アンダーラインを引きたい「ここを」と、取り消し線を入れたい「大きい」の文字列だけをそれぞれspanタグで囲む)
- CSSの部分に以下のものをコピー&ペーストする。
- 以下のような表示になるように、必要なコードを本文に追加する。 (上付き、下付きにしたい部分だけをspanタグで囲む)
- どうしてもうまくいかない場合は完成状態のコードと見比べて修正する。


<!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」はユーザーが勝手に設定できる名前。
「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倍の大きさになる。
本文 (<body>と</body>の間) 中で<span class="small">と</span>の間に書いた文字は通常の半分の大きさになる。
本文 (<body>と</body>の間) 中で<span class="big">と</span>の間に書いた文字は通常の2倍の大きさになる。

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

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

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

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