CSSのfixedを使用してメニューや画像を固定するには、どのようにすればできるのか試しました。
今まで「CSSのfixedは要素を固定することができる」ということくらいの知識しかないままで「なんとなく」要素を固定していたので、他のサイトでよく見ることも多く、実用性も高い「メニューや画像の固定」をサンプルにしながらfixedの試し書きをしてみました。
CSSのfixedで固定する要素を作る
何はともあれ、先にCSSのfixedで固定する要素をHTMLでマークアップします。
<header>
<div id="header-contents">
<nav>
<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>
</nav>
</div>
</header>
HTMLはサイトのヘッダーになる要素にulタグとliタグでマークアップしたメニュー要素にしておきます。
メニューはヘッダー要素の全てと一緒にfixedで固定するようにするため、idでheader-contentsをつけたdivタグをヘッダーのスタイルをするための親要素にします。CSSで固定するのはメニューを含んでいるヘッダー要素が固定できるイメージです。
メニューしかないですが、色々なサイトのヘッダーで見かけるサイトロゴの横にメニューがあるのをイメージしてfixedで固定するのを試したいのです。
そしてfixedで固定するのが画像の場合のHTMLです。
<main>
<div class="fixed-bg bg01"></div>
<div class="scroll-bg bg-color01">
<p>First Contents</p>
</div>
<div class="fixed-bg bg02"></div>
<div class="scroll-bg bg-color02">
<p>Second Contents</p>
</div>
</main>
メインコンテンツの中にでも画像を配置してfixedで固定するイメージにしたいと思います。
画像⇒コンテンツ⇒画像⇒コンテンツの順番にした要素をdivでマークアップして、その中に固定する画像のスタイルができるようにクラス分けします。
このときの要素でimgタグを使わないのは、固定する画像を「背景画像」にしてfixedで固定するのを試したいからなのですねぇ。
fixedでメニューや画像を固定するプロパティ
HTMLでマークアップしたメニューや画像の要素を固定するために使うfixedは値ですが、値として指定できるfixedのプロパティについて少し覚えておくようにします。
- メニューをfixedで固定する場合には、CSSの「positionプロパティ」を指定します。
- 背景画像をfixedで固定する場合には、cssの「background-attachmentプロパティ」を指定します。
CSSでfixedと聞くとpositionプロパティで指定して固定する、というイメージが強いのですがfixedを指定して固定できるプロパティは、positionプロパティだけではないのですね。
CSSでメニューを固定する
先にCSSでメニューを固定するのを試してみようと思います。
メニューを固定するCSS記述の流れ
- メニュー要素が含まれているヘッダーにposition fixedの指定
- fixedで固定した位置の調整をする
というシンプルな流れです。
position fixedで固定する
fixedでメニューを固定するCSSを記述していきます。メニュー要素が含まれているヘッダーにCSSでposition fixedの指定をします。
具体的には以下のCSSコードです。
#header-contents{
background: #fff;
height: 50px;
position: fixed;
top: 0;
left: 0;
width: 100%;
opacity:0.9;
display: flex;
justify-content: space-around;
align-items: center;
}
メニューの固定をする指定をしているのは「position:fixed」の記述です。position:fixedの指定により、メニューを固定できます。
position:fixedの指定だけでメニューは固定にできるので簡単ですが、固定したポジションの位置調整をしたいと思うことがほとんどの場合です。
上のコードの場合、メニューを固定するポジションの調整をしている記述が「top:0;」と「left:0;」です。
も少しfixedで固定した要素の固定位置を調整することについて知っておこうと思います。
メニューの固定位置を調整する
position fixedで指定したメニューの固定位置を調整する場合は「top」「right」「bottom」「left」で値を指定して調整できます。
固定位置の指定を試してみると分かりやすいのですが、position fixedは基本的にブラウザのウィンドウが起点になるのですね。
たとえば「top:0;」と「left:0;」なら、ブラウザのウィンドウが起点になった左上で固定位置にできるのです。値が0ではなくても10とか20とかの値にすることで、固定位置の調整ができます。
ヘッダーのメニューの場合には、position fixedの指定をして「top:0;」と「left:0;」そしてwidth:100%も指定してヘッダーをサイトの幅に合わせることで、お馴染みの固定したヘッダーメニューが出来上がります。
See the Pen
abzdRdY by @shu (@-shu-)
on CodePen.
固定位置の調整はposition fixedと同じ値が取れるposition absoluteやposition relativeと同じですね。
CSSで画像を固定する
CSSのfixedで画像を固定するのもやってみたいと思います。
HTMLのimgタグでマークアップした画像をfixedで固定する場合は、メニューを固定したときと同じように、CSSのposition fixedを画像の要素にあてているidやクラスで指定します。
画像の固定位置を調整する場合も「top」「right」「bottom」「left」で値を指定して調整です。
しかし画像が背景画像の場合になるとfixedを指定するプロパティはpositionプロパティではないプロパティで指定することになります。
背景画像をfixedで固定する
CSSで背景画像を表示したい場合は、background-imgeプロパティの値に画像のパス指定をして要素に背景画像を適用しますね。
このときの背景画像を固定するには、CSSの「background-attachment」プロパティを使います。そしてbackground-attachmentの値をfixedで指定することで背景画像が固定されてカーテンをあげるようなエフェクトになります。
See the Pen
eYmZmXB by @shu (@-shu-)
on CodePen.
背景固定のパララックス風のページデザインにするときに使うことが多いのではと思います。かっこいいですよね。
かっこいいのですが、なんだかiosではうまく動かないようなんです。上のCodePenのResultをiPhoneで見た方は背景画像が固定されていないのが分かるかと思います。background-attachment:fixedを試して見て知ることができました。
固定した画像の位置を指定する
background-attachmentの値をfixedで指定して固定された背景画像の位置を指定するときは、background-positionの以下のような値を指定できます。
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;
なんだか固定した画像の位置調整の値はいっぱいありますが、適用する要素や画像によって位置調整の値に違いがあるかと思うので適宜で試してみてください。
大きな画像の場合は、そんなに画像位置の調整は苦戦しなそうですが、ワンポイントな画像の位置の場合には、細かい位置調整が求められるのでは？と試してみた限りでは思いました。
まとめ
CSSのfixedでメニューや画像を固定するのを試しながらアウトプットしてみましたが、fixedで固定するのがメニューでも画像でも背景画像でも固定するまでは簡単なCSSの記述方法で適用できます。
難しく思えるのは固定位置の調整をするときだと思えました。fixedで要素を固定したあとの位置調整は、もう数をこなして経験あるのみなのかなぁと思うのであります。
