CSSのみでパララックスするサイトデザインの作り方＆スマホ対応させる方法【コピペ用HTML＆CSS】

2019年10月14日2019年12月24日ページに使える機能・デザイン

パララックスデザインとは、背景と中身のコンテンツのスクロール動作をずらして視覚的な効果をつけるデザインのことです。

パララックス部分とパララックスしない部分を組み合わせると、スクロールすると次のコンテンツが被さってくるような不思議なデザインが作れます。

通常はスクロールを変更するためにjQueryなどを使用するのですが、CSSのみでもパララックス風デザインが簡単に導入できます！

CSSカスタマイズを少々いじれる人なら誰でもできる！簡単なパララックスのコピペコードを解説していきます。

パララックス＆透けるボックスのサンプル

CSSのみでパララックスを作る基本の方法

パララックスデザインを作るときは、最低でも３つのブロックに分かれたコンテンツが必要です。

全てのコンテンツの縦幅を大体同じくらいで作成します。

１画面分くらいの縦幅になるようにコンテンツを作成すると綺麗に見えます。

そしてパララックスとパララックスの間に入れるすべてのコンテンツを画面いっぱいの全幅ボックスで囲みます。

<div id="wide-block1" class="wide-wrap wide-block-wrap">
</div>

このコードで一つ一つのブロックを囲みましょう。

HTMLで作成した部分でも、ブロックコンテンツでもこのコードで囲んでください。

id部分は微調整や背景色の変更などに使うので、数字を変えて違うidを付けておきましょう。

そして全幅にするCSSを追加します。

/* 全幅の基本スタイル */
div.wide-wrap{
position:relative;
margin:0 calc(50% - 50vw);
overflow:hidden;
}
/* パララックスの間のブロック */
.wide-wrap.wide-block-wrap{
padding:3em 0;
background-color:#ffeaed;
}

背景色は一色でも、idによって違う色にしてもかまいません。

また、他と比べてコンテンツ量が少なく縦幅が出来ないようなブロックでは、paddingの3emを5emに変えるなどして調整すると良いです。

パララックスに透けるボックスが浮く！HTML

画像背景の上に透けるボックスを配置し、パララックスさせるためのHTMLをまずは用意します。

サンプルサイトの透けるボックスを使わない場合は、ブロックで作成したコンテンツをこのHTMLで囲います。

<div id="wide-wrap-about1" class="wide-wrap wide-fixed"></div>

idは一つ一つ変えてください。

１つめのパララックス 旗のような形のボックス

サンプルサイトで紹介した透けるボックスを使用する場合は、このように作成します。

<div id="wide-wrap-about1" class="wide-wrap wide-fixed">
<div class="column-color sankaku">
<div class="content-box">
<h2>全幅デザインに固定背景</h2>
<p>パララックス風のデザインが作れます。</p>
<p>中身のコンテンツの形やデザインは様々に変えられます。</p>
<p>コピペでそのまま使う場合、文字数があまり違うと上手く表示されないときがあるので注意。</p>
<p>背景画像は著作権フリーのものを使うように注意しましょう。</p>
</div>
</div>
</div>

h2タグとpタグの中身がコンテンツです。

中身の文の量によってCSSを調整していくので、あまり多くなりすぎないようにしましょう。

デザインを４種類用意したので、class名とid名が違うだけですがすべて載せておきます。

２つめのパララックス 斜めにボックスが入るデザイン

文章をブロックエディタで作成し、カスタムHTMLのブロックで囲んでも構いません。

<div id="wide-wrap-about2" class="wide-wrap wide-fixed">
<div class="column-color naname">
<div class="content-box">
</div>
</div>
</div>

３つめのパララックス 楕円形のボックス

<div id="wide-wrap-about3" class="wide-wrap wide-fixed">
<div class="column-color maru">
<div class="content-box">
<h2></h2>
</div>
</div>
</div>

４つめのパララックス ひし形のボックス

<div id="wide-wrap-about4" class="wide-wrap wide-fixed">
<div class="column-color cube">
<div class="content-box">
<h2></h2>
</div>
</div>
</div>

CSSのみで背景をパララックスさせるデザインのコード

パララックスは、背景をfixedにして画面上に固定させることでできます。

/* 固定背景をつけてパララックスにする */
div.wide-wrap.wide-fixed{
background-attachment:fixed !important;
background-size: cover !important;
background-position:center;
background-repeat:no-repeat;
padding:3em 0;
}
@media screen and (max-width:698px){
/* 固定背景パララックスを縦長用に調整 */
div.wide-wrap.wide-fixed{
padding-top:200px;
}
}

これで背景画像がスクロールされず画面上に固定されるため、中身のボックスのみがスクロールされます。

この間に通常のブロックがスクロールされて背景が消えることによってパララックスになります。

/* 固定背景 */
.wide-wrap.wide-fixed#wide-wrap-about1{
background:url(https://create-homepage.saya-to.com/wp-content/uploads/2019/09/fdb861292dba32d92b3b7165344d6b8b_s-1.jpg);
}
.wide-wrap.wide-fixed#wide-wrap-about2{
background:url(https://create-homepage.saya-to.com/wp-content/uploads/2019/06/c5043648c485566424cbba60f4f2b3a5_l.jpg);
}
.wide-wrap.wide-fixed#wide-wrap-about3{
background:url(https://create-homepage.saya-to.com/wp-content/uploads/2019/06/a2c3ef22ac79510a0893289995e757df_m.jpg);
}
.wide-wrap.wide-fixed#wide-wrap-about4{
background:url(https://create-homepage.saya-to.com/wp-content/uploads/2019/09/497c90713c5195e12288dd68cf3cd89f_m-1.jpg);
}

このように、id名によって画像を指定します。

画像はメディアにアップロードし、URLをコピーして差し替えてください。

CSS fixedでのパララックスをスマホに対応させる方法

この方法で使われているfixedという方法は、スマートフォンのブラウザではほとんどサポートされていません。

画像が固定されず、通常の背景になってしまいます。

CSSのみでスマホでもパララックス風にしたい場合は、ページ全体に固定背景を付ける方法しかありません。

画像は１つしか表示させることが出来ないので、それぞれの画像が重要な場合は使えません

@media screen and (max-width:798px){
/* スマホではPCの背景を非表示 */
div.wide-wrap.wide-fixed{
background:none !important;
}
/* ページ全体に固定背景を付ける */
div.wide-wrap.wide-fixed:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background:url(https://create-homepage.saya-to.com/wp-content/uploads/2019/06/c5043648c485566424cbba60f4f2b3a5_l.jpg) center no-repeat;
background-size:cover;
}
/* パララックスじゃない部分に背景を付ける */
.wide-wrap.wide-block-wrap{
background-color:#fff;
}
}

疑似要素によって画面全体に固定される要素を作り、そこに背景を設定しています。

パララックスの背景と違って、ページ全体に常に表示されるため、背景画像ではなく背景色を表示したい部分では、背景色として指定する必要があります。

サンプルサイトでは、wide-wrap.wide-block-wrapで囲んでいない部分があるため、それぞれの要素に背景を付けています。

Lightningのデザインで出来るページトップの空白を消す

Lightningのテーマを使っていると、固定ページの一番上にはpaddingがあるため、全幅コンテンツで背景を付けるとページトップに不自然な空白が出来てしまいます。

それを消すCSSがこちら

/* ページトップの空白を消す */
div.wide-wrap:first-child {
margin-top:-1.5em;
}
@media (min-width: 768px){
div.wide-wrap:first-child {
margin-top:-2.5em;
}
}
@media (min-width: 992px){
div.wide-wrap:first-child {
margin-top:-3em;
}
}
@media (min-width: 1200px){
div.wide-wrap:first-child {
margin-top:-3.5em;
}
}

ページの一番上に配置した全幅コンテンツに対してこのCSSを適用させます。

Lightningでページ上の空白を消したい場合にはどんなデザインのページでも使うことが出来るので、覚えておきましょう。

パララックス風デザインは案外簡単！

これだけで要素をパララックスさせることが出来ます。

iQueryを使った方が様々な動きを加えられてスマホにもPCと同じようなデザインで対応できますが、サイトが重くなるというデメリットが大きいです。

デザインを重視したサイトでは多少動作が遅くても良いかもしれませんが、大抵のサイトでは表示スピードが遅いとユーザーが離脱してしまう確率が高まります。

CSSのみで実現できるパララックスデザインをぜひマスターして使ってみましょう！