背景を固定、コンテンツだけをスクロール

<img>タグを固定する [position: fixed; と height: 100vh;]

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

解説

html

画像を#MV、テキストコンテンツを#mainとする

CSS

#MV

  • position: fixed; = 画像の位置を固定。スクロールしなくなる。次の要素が重なる。
  • z-index: -1; = 重なった要素の優先度。テキストを全面に出したいので、-1 とする。
  • left: clac(50% – 1000px/2); = MVの位置を中央寄せ。position: fixed; を使用してるので、text-align は効かない。1000px は画像の横幅のサイズ。

#main

  • text-align: center; = テキストの中央寄せ。
  • text-shadow: 2px 2px 5px white; = テキストの影。背景が黒っぽい時に、白い影をつけておくと可読性が上がる。逆に白文字の場合は black; をつけると良い。
    数値は、横, 縦, ぼやけ具合, 色。
  • padding: 4em; = 上下の空白を作る。4文字分の余白。

background-image の場合は background-attachment: fixed; (非推奨)

非推奨と書かせて頂いた理由は iOS に対応していないからです。
background-image 使われている方は残念ですが、背景固定は上記の img タグの方法を推奨します。

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

-広告-

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)
css.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。