解 説

1ページリニア構造ぺーじの例です。
ポートフォリオサイト用などにも活用できそうです。
*IE対策は別途必要になります。

1カラムのレイアウトのサンプル

HTMLのコード

CSSの設定

  • 一部のsectionにbackground-attachment: fixedを設定するのがポイントです。
  • 透明度はopacityを使用すると子要素やテキストまで透明化されますので、rgbaを活用しています。
  • sectionタグはdivで代用することも可能です。