My Web道

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

3/20 カラムレイアウトの設計C

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


今日はこちらのレイアウトを作成しました。
上が見本、下が自身の習作です。

【見本】
f:id:sntkk3:20140322110432j:plain

【習作】
f:id:sntkk3:20140322112450j:plain

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

f:id:sntkk3:20140216111417p:plain不透明度の指定

rgba を使うと不透明度を指定できる
今回の場合、h1箇所のdiv要素に不透明度を適用

background: rgba(255, 255, 255, 0.5);


f:id:sntkk3:20140216111417p:plaindisplay: inline-blockの活用

display: inline-blockでh1の文字幅分に効果を適用

で、下図のマーカー部分に適用します。
f:id:sntkk3:20140322123847j:plain