<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)
