1月27日（木）2コマ目

今日、やったこと

枠線、余白その他

今日のホワイトボード

枠線、余白の指定

border、padding、marginなら上下左右をまとめて指定。

上だけとか右だけのように1か所だけを指定する方法もあり。

図　枠線、余白の指定法（4か所まとめて、1か所だけ）

練習問題「ふぐ」

解答例をあげておきます。

演習１

とくにややこしいことはないと思います。

演習２

毒フグの<h2>タグにはdangerクラスが設定されているので、dangerクラスの背景色を設定すればOK。

演習３

説明、写真は<div class="inner"></div>の中にある。

innerクラスの背景色と上下の余白を設定すればOK。

演習４

説明文は<div class="comment"></div>の中にある。

commentクラスの余白を設定すればOK。

演習５

〇説明文の幅を500px

説明文は<div class="comment"></div>の中。commentクラスの幅を500pxに。

〇説明文と写真が横並び

横並びの要素にはfloat:leftを設定。説明文は<div class="comment"></div>の中、写真は<div class="image"></div>の中。commentクラスとimageクラスに float : left を設定。

横並びを解除する要素には clear : left を設定。<h2>タグで横並びを解除するため、clear : left を設定。

演習６

左側だけ枠線をつけるには　border-left で設定。

演習７

とくにややこしいことはないかと。

予告

近日中に実技テストをします。