課題2　フォント

課題2-1

  1. Visual Studio Codeを起動する。
  2. 「File」→「Preferences」→「Settings」で設定メニューを出し、「render whitespace」で検索して設定を「all」に変える。


  3. デスクトップに「課題2」フォルダーを作る。
  4. Visual Studio Codeで「File」→「Open Folder」で「課題2」フォルダーを開く。
  5. 「課題2」フォルダーの中に「1」「2」フォルダーを作る。


  6. 「1」フォルダーの中に「index.html」というファイルを作る。


  7. 以下のコードをコピー＆ペーストしてShift+Alt+Fで自動整形し、Ctrl+Sで上書き保存する。
    <!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;
        }
        .big {
            font-size: 2.0em;
        }
    </style>
    <title>課題2-1</title>
</head>

<body>
    普通
    <span class="small">小さい</span>
    <span class="big">大きい</span>
</body>

</html>
    赤字の部分はCSSと呼ばれるもので、ここにいろいろな設定の「お約束」を記述する。
    本文の方で青字のように書いたタグで囲むと、CSSで書いた設定がその中の文字に適用される。
    「img」に関わる1つ目の塊は、第1回にあったものと同様。2つ目、3つ目の塊で文字の大きさを変えるルールを決めている。
    「font-size」は文字の大きさを表すプロパティ (属性) で、その後の「em」の前の数値で文字の大きさを設定する。1.0がデフォルトの大きさ。
    「small」「big」はユーザーが勝手に設定できる名前。

  8. index.htmlをFireFoxで開き、このように表示されることを確認する。


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

  10. 以下のような表示になるように、必要なコードを本文 (「<span class="big">大きい</span>」の後) に追加する。
    11. (文字を大きく・小さくするためにどう書いたかを参考にする)


  11. CSSの部分に以下のものを追加する。
    赤・青の正方形は自動的に入力される。例えば33行目は「color: #ff0000;」と入力すればよい。
    「color」は文字の色、「background-color」は背景の色に関わるプロパティ。
    「ao_aka」ではこの2つのプロパティをまとめて設定しているので、文字色が青、背景色が赤になる。
    色は英語の色名かRGBの値で指定できる。課題2-2で自前で色を決めたいときはここやここが参考になる。

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


  13. CSSの部分に以下のものを追加する。
    「text-decoration-line」は文字につける線に関わるプロパティ。「underline」を入れるとアンダーラインがつき、「line-through」を入れると打ち消し線がつく。

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


  15. CSSの部分に以下のものを追加する。
    「vertical-align」に「super」「sub」を入れるとそれぞれ上付き、下付きの添え字になる。
    添え字の大きさが普通の文字と同じだと不自然になるので、ここでは大きさも変えて半分にしている。このように一つのクラスに複数の性質を書くこともできる。

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


  17. うまくいかない場合は完成状態のコード (1～39行目, 40～82行目)と見比べて修正する。ブラウザでの表示が上の図と違っている状態のまま次に進まないこと。

課題2-2

  1. 「2」フォルダの中にindex.htmlを作る。
  2. そのindex.htmlを編集し、オリジナルのページを作る。
    (headタグの中のmetaタグ、CSSのうち再利用したい部分は課題2-1の方のindex.htmlからコピーするとよい)
課題の条件
注意 (この課題限定ではなく、Webページ全般について)

提出

inserted by FC2 system