課題3 表

課題3-1

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


  3. デスクトップに「課題3」フォルダーを作る。
  4. Visual Studio Codeで「File」→「Open Folder」で「課題3」フォルダーを開く。
  5. 「課題3」フォルダーの中に「1」「2」フォルダーを作る。
  6. 「1」フォルダーの中に「index.html」というファイルを作る。
  7. 以下のコードをコピー&ペーストして上書き保存する。
  8. <!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">
            .big {
                font-size: 2.0em;
            }
    
            .futoji {
                font-weight: bold;
            }
        </style>
        <title>課題3-1. 表</title>
    </head>
    
    <body>
        <span class="big futoji">青森市の天気</span>
        <div class="jisage">
            11/2の3時間天気
            <table>
                <thead>
                    <tr>
                        <th>時刻</th>
                        <th>天気</th>
                        <th>気温(℃)</th>
                        <th>降水確率(%)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>03</td>
                        <td>小雨</td>
                        <td>11.5</td>
                        <td>30</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    
    </html>

  9. index.htmlをFireFoxで開く。
    「時刻」以降が表だが、この時点では枠線は表示されていない。
    tableタグで囲んだ部分に表のデータを記述する。
    見出し部分は theadタグ、データ項目部分は tbodyタグで囲む。
    trタグで囲んだ部分に表の1行分のデータを記述する。
    thタグかtdタグで囲んだ部分にセル (マス) 1つ分のデータを記述する。
    (thタグは表の見出し専用、tdは通常のデータ専用。見出しは自動的に太字になる)


  10. CSSの部分に以下のものを追加し、ブラウザを更新する。


    このように「青森市の天気」以外の部分が以前より右に20ピクセル右にずれていればOK。
    「margin」は要素の外側の隙間の設定。ここで「margin-left」つまり左側の隙間を20ピクセルにすることで、これを設定した部分が右に20ピクセルずれる。
    本文側では、あらかじめ「青森市の天気」以外の部分を <div class="jisage"> と </div> で囲んである。

  11. CSSの部分に以下のものを追加し、ブラウザを更新する。
    (22行目は「border: 1px solid black;」と書けば「black」の前の黒い四角は自動的に表示される)


    このように表のそれぞれのセル (マス) の周りに枠が表示されればOK。
    CSS側で「.futoji」のように先頭にドットをつけた書き方では、すべての項目に対しての設定が行われるのに対し、「th, td」のように書くとth (見出しのセル) とtd (データ項目のセル) に対して設定が行われる。
    結果としてそれぞれのセルに枠が表示される。
    「solid」は実線のこと。ほかにも dashed(破線)、dotted(点線)、double(二重線) などがある。

  12. CSSの部分に以下のものを追加し、ブラウザを更新する。


    このようにセルのあいだの隙間がなくなればOK。
    これは table、つまり表そのものに対する設定。プロパティ「border-collapse」に「collapse」を入れることで枠線がくっつく。

  13. CSSの「th, td」に対する設定の部分に以下のものを追加し、ブラウザを更新する。


    このようにセルの文字の上下左右の余白が広がっていればOK。
    結果として変更前より表が大きくなっているはず。
    プロパティ「padding」に数値を入れることで文字と上下左右の隙間の幅を設定している。
    数値を「4px 10px」のように2つ書くと、上下は4px, 左右は10px開くようになる。
    数値を「4px 10px 8px」のように3つ書くと、上は4px, 左右は10px、下は8px開くようになる。
    数値を4つ書くと上、右、下、左の順に指定される。

  14. 本文とCSSの部分に以下のものを追加し、ブラウザを更新する。



    「時刻」「天気」の下の部分が中央合わせ、「天気」「降水確率」の下の部分が右寄せになっていればOK。
    FireFoxでの表示がこれと完全に同じになっていて、Ctrl+Uでソースを表示させてエラー (赤い点線のアンダーライン) がないことを確認したら課題3-1は完了。
    30~32行目は <td class="center">と</td>で囲んだデータ項目、34~36行目は <td class="right">と</td>で囲んだデータ項目に対する設定。
    プロパティ「text-align」に「center」「right」を入れるとセルの中の文字が中央合わせ、右寄せになる。
    (なにも設定しなければ td タグで囲んだデータ項目は左寄せになる)
    本文の方でこう書くことで1, 2列目のデータが「center」、3, 4列目のデータが「right」の設定が適用される。
    Webページに限らず、表の数値データは右寄せにして書くのが一般的。

  15. 06~24時の情報を追加する (情報自体は適当なものでもよい)。
    「03」の行の分のコードをすぐ下にコピー&ペーストして情報だけ書き換えれば楽。
    ただし、コピー元の書き方が間違っているとあとで修正が大変なので、13番目のステップの結果がちゃんとできているかの確認は慎重に。

課題3-2

  1. 「2」フォルダの中にindex.htmlを作る。
  2. そのindex.htmlを編集し、オリジナルのページを作る。

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

例1


(普通に表を作ると文字の長さによってセルの幅がバラバラになってしまうが、30~38行目でwidthを指定することで、講義名と部屋名のセルの幅が一定になるようにしている)


(51~55行目のセルは「colspan="2"」としたことで横2マス分になる)
(60行目のセルは「rowspan="2"」としたことで縦2マス分になる)



例2


(10行目で表に背景画像を指定している。「wood.jpg」は縦横の線がない木目だけの画像)
(13~19行目ではセルの縦横のサイズを指定し、中のものが中央にくるようにしている)
(23行目はセルの中の画像のサイズの設定)
(27行目はセルの中のものを180°回転して表示させるための設定)


(tdタグで「rot」を指定することで画像をさかさまに表示している)


(手前側の方はセルに普通に画像を入れるだけ)

提出

inserted by FC2 system