Webデザイン・マーケティング課 授業13日目

1〜3時間目 HTML5・CSS演習

使用教科書

初心者からちゃんとしたプロになる HTML+CSS標準入門〈モバイルファースト、レスポンシブ、Flexbox〉

■1時間目

P100-P101

・tableに対してのCSS

昨日書いたtableタグに対するCSSを書いていく。

@charset "UTF-8";
table {
   border-spacing: 0;
   border-collapse: collapse;
   width: 100%;
}

table,th,td {
   border: 1px solid #ccc;
   padding: 0.5em;
}

table caption {
   font-size: 0.8em;
   color: #666;
}

.col-1 {width: 20%;}
.col-2 {width: 40%;}
.col-3 {width: 40%;}

th {
   background: #a50;
   color: #fff;
}

tableタグは、通常ボーダーをつけると、二重の線になるので、

border-spacing: 0;
border-collapse: collapse;

この記述を入れて、二重じゃない線にしている。

また、中の文字数に応じて、横幅が勝手に決まるので、横幅を100%にしている。

width: 100%;

tableにボーダーをつけ、各セルに余白をつけている。

table,th,td {
border: 1px solid #ccc;
padding: 0.5em;
}

captionの文字の色と大きさを変えている

table caption {
font-size: 0.8em;
color: #666;
}

昨日の3時間目に書いた記述の、クラスcol-1、2、3に横幅を入れている。横幅を入れないと、文字の多さに応じて、思い思いに各列の幅が決まってしまう。

.col-1 {width: 20%;}
.col-2 {width: 40%;}
.col-3 {width: 40%;}

thに背景色と、文字の色を入れている。

th {
background: #a50;
color: #fff;
}

・セルの結合

p101-p102で、セルの結合に関して紹介しているので、別途htmlとcssを用意して書いてみる。cssの記述は、テキストには書かれていないが、キャプチャを元に書いてみる。

html

<table>
   <tr>
       <th colspan="2">横に結合</th>
   </tr>
   <tr>
       <td>コーヒー</td>
       <td>紅茶</td>
   </tr>
</table>
<table>
   <tr>
       <th rowspan="2">縦に結合</th>
       <td>コーヒー</td>
   </tr>
   <tr>
       <td>紅茶</td>
   </tr>
</table>

css

@charset "UTF-8";

table {
   border-collapse: collapse;
   margin-bottom: 30px;
}

th,
td {
   border: 1px solid #000;
   padding: 0.5em;
}

th {
   background-color: aqua;
}

1個目のtableのcolspanは、横にセルをくっつける。

<th colspan="2">横に結合</th>

colspan="2"は、「このセルは、横に2個分」という意味。なので、colspanの書いてあるthをくくっているtrの中にはtrが一個しかない。（その一個が2個分だから）

2個目のtableのrowspanは、縦にセルをくっつける。

<table>
   <tr>
       <th rowspan="2">縦に結合</th>
       <td>コーヒー</td>
   </tr>
   <tr>
       <td>紅茶</td>
   </tr>
</table>

rowspan="2"は、「このセルは、縦に2個分」という意味。
なので、その下のtrの中には、

<tr>
    <td>紅茶</td>
</tr>

こんな感じで、セルが一個しか書かれていない。
<th rowspan="2">縦に結合</th>が、下に2個分という意味だから。

これで、とりあえず教科書は終了。次からはオリジナル教材。

■2時間目

梨を販売するLP?的なものを作る。

以下のようなファイル構成

index.html
css
    ┗reset.css
    ┗style.css
img
    ┗各画像ファイル

ひとまず、上記のようにフォルダを作ってVSCodeにセット。

まずは、どのように組んでいくか枠組みを考えた。

こんな感じで、（若干無駄な部分もあるが）

<外側のタグ>
    <内側のタグ>
        ー内容ー
    </内側のタグ>
</外側のタグ>

こんな感じで、二重構造になることを意識しつつ組んでいくと、大体うまくいく。
最終的に、内側のタグに横幅とマージンの左右にautoを入れて、中央揃えにする。
必要があれば、外側のタグに背景の色などを入れる。

■3時間目

まずは、headerの部分を作った。

index.html

<header>
   <h1>
       <img src="img/gra_top.jpg" alt="八千代梨農園">
   </h1>
</header>

style.cssを書く前に、reset.cssの説明をして、まずresetを書いた。

reset.css

@charset "UTF-8";

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6 {
   font-size: 100%;
   font-weight: normal;
}

li {
   list-style: none;
}

table {
   border-collapse: collapse;
}

th {
   font-weight: normal;
   text-align: left;
}

img {
   vertical-align: bottom;
}

今回は、一番最初だし最低限のリセットで。

また、ノーマライズの説明はしたが、ひとまず今回は全部の余白をとり、hタグの文字の大きさを揃える。

imgに付いているvertical-align: bottom;は、画像の下にできる隙間を消すためにある。

reset.cssとstyle.cssを読み込むが、reset.cssが先でstyle.cssを後に読み込む。

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

この順番。

上書きを防ぐためだが、その説明はまた次の日に。

■まとめ

今日からオンライン授業開始。とりあえずオンライン初日はまぁまぁうまくいったと思われる。

教科書は今日で終わりにして、オリジナル教材に入る。

より実践的になるので、暗黙の了解的な部分もしっかり言葉で説明するよう心がけよう。