3/18 カラムレイアウトの設計B

- カラムレイアウトの設計[CSS]

【見本】
今日の課題は以下のレイアウトを再現すること

【習作】
以下、自身の習作です。

自己の感想：
見比べてみると、フォントの種類・サイズ、レイアウト内の間隔等、まだ修正の余地があることに気づきます。

なお、以下が今回課題作成にあたり講師から教わったポイントです。

【講師アドバイス】今回のポイント

ヘッダ内ビルボード写真とリード部分テキストの並べ方
【方法】

1. float left rightを使用する　→　どこでclearするか？
2. backgroundとして背景画像に読込、paddingで左端からの間隔を確保してリードテキストを表示

　hとpタグをa(アンカー)で囲う（HTML5のルール）
この方法で該当範囲に面を形成している（この方法が使えるのはHTML5だから）