【HTML/CSS】JavaScriptを使わないシンプルなパララックスの作り方 [IE7対応]

150828_001

動きのないシンプルなパララックスは、JavaScript無しで簡単に作ることができます。フルブラウザの1枚画像は見栄えがしますから、動きがなくても汎用性は高いです。

目次

検証済みブラウザとOS

  • IE 7~ ※一部CSSはIE8以下不可
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite
  • iOS 8
  • Android 4.1

 

要点とコード

code

  • 背景画像は横幅 2560px で用意する(これ以上のディスプレイサイズは一般的でない)
  • body に margin: 0; を指定して余白を削除
  • html と body に height: 100%; を指定
  • 背景を中央配置するための、center は1つでOK(center center は不要)
  • background の / で区切ったショートハンドは、IE8 と Android 4.1 で使えないため、background-size :cover; は普通に書く
  • iPad を横向きにした 1024px 以下では、background-attachment: scroll; で背景固定を解除

Sass用のメディアクエリは下記記事を参考。

 

問題点

IE8 以下で background-size :cover; が効かない
2016年1月にサポート終了なので、もういいでしょう。

 

現場のプロから学ぶXHTML+CSS
益子 貴寛 堀内 敬子 小林 信次 千貫 りこ 伊藤 学 山田 あかね 西畑 一馬
毎日コミュニケーションズ
売り上げランキング: 130,120
    • このエントリーをはてなブックマークに追加