派手過ぎず文章を読む際に邪魔にならない演出が素敵なパララックス効果。今ではたくさんのjQueryプラグインがあり、実装も簡単になってきています。javascriptはほとんどのブラウザが対応しており、現在のWeb業界では無くてはならない存在ですが、読み込みすぎるとページのロードが遅くなったり、他プラグインとの競合など管理が大変になってきますので使わなくて済むならそれに越したことはありません。そこでCSSだけでパララックス風の効果を実装してしまおうというのが本題です。CSSなら重くないし、動きもサクサク快適です。この記事の目次この記事の目次HTMLCSS管理人「よら」はこう思うHTMLHTMLは至ってシンプルです。視差を出したい背景画像を表示するためのボックスを1つ作り、その中でも外でも良いので通常通りテキストを置きます。今回は背景画像を表示するボックスはdivタグで、その中に表示するテキストはh1タグで用意しました。class="title01">タイトルが入ります</h1></div>CSS先程マークアップした要素をスタイリングします。上でマークアップしたdivタグには「parallax」というクラスと「image01」という2つのクラスを付けました。「parallax」では表示する背景画像のサイズや位置、動作を指定し、「image01」ではどの画像を表示するかというパスだけを指定しています。することで1ページ中にいくつもパララックス効果を使いたい場合に「parallax」というクラスの使い回しがしやすくなります。「title」は画像の真ん中辺りにタイトルを持ってきたかったので「line-height」の値をdivの高さと同じ値にしています。url(/images/image01.jpg);}注意点としてはCSSの最後の.image01の部分でbackground-imageで画像を指定している部分ですが、ここをbackgroundで指定するとちゃんと動作しません。理由はbackgroundという指定はbackground関係を一気に指定するショートハンドであるため、記載していない項目は規定値に指定されてしまうためです。そのため、先に「parallax」でbackground-positionやbackground-attachmentを指定していても、CSS的に後で指定された規定値に上書きされていることになります。ここは横着せずに画像のパスだけを指定するbackground-imageで指定してあげれば、ちゃんと「parallax」で指定してあげた項目が生きてきます。デモを見る管理人「よら」はこう思う個人的にはCSSで出来るところはCSSで表現したいところです。Webの技術が発達していくことで、どんどんリッチな表現が出来るようになってきましたが、何でも出来るからといって何でもしてしまうと予想外にサイトが重くなってしまいます。そのサイトを見てもらうことが大切なのに、読み込みに非常に時間が掛かってストレスとなり、閲覧者が離脱してしまっては元も子もありません。あとはIEさんの鉄壁のブロックをどこまで回避できるかですね。古いIEの使用率はだいぶ少なくなったものの、IEさんはやはり鉄壁。広範囲に枝を張っており、大事な場面で絡めとってくるので油断はできません。いう場合は諦めてjavascriptを使うと楽になれます。全て(64)Web制作(7)よらのつながり(3)よらの価値観(10)よらの生き様(22)イベント(5)デザイン(3)水野会議室(2)素材(3)絵本構想(1)黒門カルチャーファクトリー(8)新着記事2020.2.13暇人感謝祭2020の会場までの道案内と出展者配置案内2020.2.4【#佐賀ハレノヒ応援】あれから2年。はれのひ騒動を今振り返る2020.2.3里親制度の基礎研修初日を受けて思ったこととやりたいこと2020.1.26初脚本に挑戦して感じた共3つのこと2020.1.22020年の水野嘉彦の目標を宣言します一覧を見る筆者プロフィールアニメの制作進行、リクルート代理店の営業を経てWeb・DTPの業界に入門。