My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

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

f:id:sntkk3:20140228225012g:plain
- カラムレイアウトの設計[CSS]

【見本】
今日の課題は以下のレイアウトを再現すること
f:id:sntkk3:20140322125405j:plain


【習作】
以下、自身の習作です。
f:id:sntkk3:20140322133802j:plain


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


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

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

f:id:sntkk3:20140228213532p:plainヘッダ内ビルボード写真とリード部分テキストの並べ方
【方法】

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


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