課題3　表と箇条書き

課題3-1

  1. Terapadを起動する。
  2. タブの幅を4文字分にし、タブと空白文字を表示する設定に変更する (方法を忘れた場合はWebページ制作初回の資料を参照)。
    3. (自宅で作業したことがある場合は設定が残っているはずなのでこの工程は飛ばしてよい)
  3. デスクトップに「課題3」フォルダーを作り、さらにその中に「1」フォルダーを作る。
  4. Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「index.html」という名前で保存する。

  5. 以下のコードを記入して上書き保存する。
    6. (赤枠以外の部分はこれまでの課題と共通。適宜コピーして再利用するとよい)


  6. index.htmlをChromeで開く。
    7. tableタグで囲んだ部分に表のデータを記述する。
    trタグで囲んだ部分に表の1行分のデータを記述する。
    thタグかtdタグで囲んだ部分にセル (マス) 1つ分のデータを記述する。
    (thタグは表の見出し専用、tdは通常のデータ専用。見出しは自動的に太字になる)
    alignを指定すると、セルの中での文字の位置を変えられる。leftで左寄せ、rightで右寄せ、centerで中央合わせになる。
    (なにも指定しないとthタグでは中央合わせ、tdタグでは左寄せになる)
    (Webページに限らず、表の見出しは中央合わせにするのがお約束なので、特別な意図がないかぎりthタグにalignを指定しないほうがよい)
    (普通のセルでは、数値の場合は右寄せ、それ以外は左寄せにするのが一般的)
    colspanを指定すると、複数列にわたるセルを作れる。

    rowspanを指定すると、複数行にわたるセルを作れる。
    (そのセルがある列のうち一番上の行のところにtdタグのデータを書き、その下の行では対応セルの記述を飛ばす)

    borderで枠の太さを指定できる。何も指定しないと枠線が表示されなくなる。
    これを応用すると、普通ならどうしても段差ができてしまうこのようなリストもきれいに表示させられる。

  7. 赤枠の部分を追加して上書きし、Chromeのページを更新する。
    8. (最初に書いたコードは消さずに、</table>のあとに追記する。行番号を参照)


    このような表示になっていれば課題3-1は完了。
    ulタグで囲んだ部分は番号なしの箇条書き、olタグで囲んだ部分は番号つきの箇条書きになる。
    どちらの場合も、liタグで囲んだ部分が箇条書きの1つの項目になる。
    手動の「・」とulによる箇条書きの違い
    普通に文の先頭に「・」を書いても、ulで箇条書きを作ったときと見た目はあまり変わらないが、文が長いと折り返された部分が「・」の左に来てしまう。


    箇条書きにすると、折り返された文はきれいに揃う。
    (余談だが、WordやPopwerPointでも手動で「・」を入れるよりも箇条書きの機能を使った方がきれいな文書がつくれる)
    今回の例のように、箇条書きの中に箇条書きを入れ子にすることができる。
    「子の箇条書き」は親よりも深い位置 (右にずれた位置) になる。
    ulタグでtypeを指定すると先頭の記号のタイプを変えられる。
    (discで黒丸、circleで白丸、squareで黒い四角になる)



    typeを指定しなければ1段階目で黒丸、入れ子でその中にあるものが白丸、さらにその中のものが黒い四角になる。
    olタグでtypeを指定すると先頭のカウント記号のタイプを変えられる。



    typeに入れる値によって、カウント記号は次のように変わる。
    1 → 1, 2, 3...
    a → a, b, c...
    A → A, B, C...
    i → i, ii, iii...
    I → I, II, III...

課題3-2

  1. 課題3-1の結果表示用のChromeのタブ、TeraPadを閉じる。
  2. 「課題3」フォルダの中に「2」フォルダを作る。
  3. 「2」フォルダの中にindex.htmlを作る (新しく作ってもよいし、課題3-1で作ったものをコピーしてもよい)。
  4. そのindex.htmlを編集し、オリジナルのページを作る。
課題の条件
注意 (この課題限定ではなく、Webページ全般について)

提出

inserted by FC2 system