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

１、２時間目 Webデザイン基本知識
3時間目 HTML5・CSS3演習

使用テキスト

Webデザイン良質見本帳[第2版] 目的別に探せて、すぐに使えるアイデア集

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

■1時間目

p84-p140（ただしp85-p118は割愛）

グリッドデザイン、2カラムなどのよく使いそうなところは少し時間をかけて解説。それ以外は、サイトを一通り眺めるように説明していく。

■2時間目

p142-p182

こちらも1時間目同様、あまり時間がないので、一通り説明する感じ。

■3時間目

そろそろオンラインが始まるので、live shareの使い方をおさらい。明日以降も使っていこう。

・box-sizingについて

以下の図を使いつつ説明。

width:300pxとは、緑のところではなく、青のところが300pxになると説明。

box-sizingプロパティを使うことで、widthプロパティで横幅の指定ができる場所が、変わると説明。デフォルトは、文字の部分（content-box）

よって、paddingやborderを増やしていくと、見た目（背景の色とボーダー）はどんどん増えていく。

box-sizing:border-box;

これを設定することで、左のボーダーから右のボーダーまでがwidthで指定できる様になる。

つまり、見た目（背景の色とボーダー）が、ぴったりwidthで指定できる様になる。

・padding等のショートハンド

引き続き同じデータでpaddingとボーダーのショートハンドを説明。

値をいくつ書くかで意味が変わることを説明。

padding:50px;（上下左右が50px）
padding:50px 20px（上下が50px、左右が20px）
padding:50px 20px 10px（上が50px、左右が20px、下が10px）
padding:50px 20px 10px 0（上が50px、右が20px、下が10px、左が10px）

また、ショートハンドだけじゃなく、各々の向きごとに値を入れられると説明。

padding:50px 20px 10px 0;
と
padding-top:50px;
padding-right:20px:
padding-bottom:10px;
padding-left:0;
とは、同じと説明。

borderについてもショートハンドの説明はしたが、こちらは一方向だけボーダーをつけられると説明。（border-top、border-rightなど）

・画像を表示する

新しくフォルダを作り、その中にindex.htmlとimagesフォルダを入れる。さらにimagesフォルダの中に、cat.jpgを入れる。

index.html
┗images
    ┗cat.jpg

こんな感じになっている。そこからhtmlに、

<img src="images/cat.jpg" alt="猫">

これを書くと、画像が表示されることを説明。

altの意味も軽く説明。

こちらに関しては、明日もう一回パスの練習をする予定。

■まとめ

ひとまず学科の授業が終わって、明日から3時間HTMLになる。パソコン苦手の方が多いので、少ししっかり目に説明しなくては。

オンラインの準備もしないとな。