>CSSスクロールで背景画像が動くCSSの書き方!【簡単におしゃれLPが作成可能】2019-12-30誠太こんにちは、誠太です。今回は、背景画像がスクロールした際に背景画像をついてこさせるCSSを紹介したいと思います。Bootstrapを使用して簡単に作成していますが、通常のHTMLでコーディングしても作成可能な物となっているので、技術の一つとして自分の引き出しに入れてもらえたら幸いです。スクロールで背景画像が動くCSSの書き方!【簡単におしゃれLPが作成可能に】スクロールに背景画像が動くアニメーションを作成する際に必要なもの。HTMLファイル(phpファイルでも可)CSSファイル画像ファイルindex.htmlとstyle.cssとimgフォルダは同一ディレクトリの中にあるものとしてください。プロジェクトフォルダ『Sample』の中身imgフォルダindex.htmlstyle.cssBootstrapを使用して土台を作成コードサンプルは下記のコードを参考にしてみてください。</body></html>ちょっと長く見えますが、ブロック1~ブロック3は同一コードなので、ブロック1のみにするとそこまで長くありません。ちなみにこのままコピペしても使用できるので、自分の環境ではどのように表示されるかどうか確認してみてください。スクロールで背景画像を動かすCSSCSSに関しては、こちらのコードを参考にしてみてください。100%;}.bg_scroll_1~.bg_scroll_3は複製なので、使用するブロックの数に応じてコピーしてください。210px;』の数値を変更することで調節可能です。今回このアニメーションを実装するにあたって『アド・エータイプ』さんのコードを参考にさせていただきました。Bootstrapで作成時の注意点ここまでのコードをコピペして、画像ファイルの名称を変更することで実装可能となっています。Bootstrapを使用することでCSSの適応やJsの適応がうまく行かない場合があるので、注意が必要です。CSSの適応がうまく行かない場合があるBootstrapはCSSのフレームワークなので、ある程度CSSが固定で備わっていることが利点となっています。その利点ゆえにCSSで変更することが不可能な場合があるので、望んだ効果にならないこともしばしば。Bootstrapで自分で用意したCSSが適応されない場合について、こちらの記事で解説しているので興味のある人は一緒に確認してみてください。BootstrapでCSSを適応させようとしたのに、上手く指定した内容が反映されない。今回は、CSSでスクロールに追従する形で背景画像を表示させる方法について解説しました。注意ポイントここで注意が必要なのが、iOSではうまく動作しないということです。現在この状態を維持しつつ、iOS端末でも正常に動作するようにはどうしたら良いのかを製作中なので、うまく実装できたときにはブログにて紹介したいと思います。その方法を知っているという方がいれば、教えていただければ嬉しく思います。toを話題にブログで紹介しています。THORのアップデート方法は?【アップデート前には注意が必要!!】2020/02/13【規約違反注意】AFFINGER5でダブルレクタングルを設置する方法!誠太の記事をもっと見るよく読まれている記事1【最新版】AFFINGER5をレビュー!実用10特典をGETしてライバルに差をつけよう!AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。ご覧いただいてありがとうございます。ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。thorをレビュー!豪華10特典で競合に差をつけよう!誠太こんにちは、誠太です。誠太こんにちは、誠太です。WordPressのテーマはいまや沢山の種類がリリースされ、個人制作のものや企業がリリースしているものまで溢れかえるようになりました。コメントをキャンセルメールアドレスが公開されることはありません。BootstrapでCSSを適応させようとしたのに、上手く指定した内容が反映されない。したらいいのかわからなくて、手が止まってしまっている状況を解決します。こんにちは、誠太です。今回の話題は、Bootstrapに自作のCSSを適応させるための方法について解説します。HTMLとセットで扱われるもので、『CSS』というものがあります。ぼくが学んだときは、ザックリこんな感情を抱いていました。あなたも同じような疑問を抱いていることを想定し、本記事ではCSSの基礎知識と書き方を解説してみようと思います。以前にドットインストールでの基礎学習のポイントを記事にしましたが、どうせだったらProgateを体験してみようと思い、今回HTMLとCSSの基礎編を実践してみました。ドットインストールとProgateどっちで勉強した方がいいのかというプログラミング初学者の人は多いと思うので、本記事を参考にどちらをメインにして学習するかを決めていただければ嬉しく思います。プログラミング言語を学習しようと思って、HTML/CSSから学習するべきと良く聞くけど、どこまで勉強したらいいんだろう。こんな悩みにお答えしたいと思います。こんにちは、誠太です。プログラミング初心者は、まずHTML/CSSを学習するべきというのは良く聞く言葉だと思います。画像にマウスポインターを重ねたときに、画像を白の半透明にしたいんだけど、うまく行かない。このような疑問を解決します。こんにちは、誠太です。今回は画像の上にマウスポインターを乗せたときにhoverの擬似クラスを指定して、アンカーリンク画像を白の半透明にする方法についてお伝えします。プログラミングをこれから始めてみようと思っている。これから始めようと思っている方に向けて記事を作成してみようと思います。プログラミング初心者におすすめのプログラミング言語はフロントエンドのプログラミング言語がおすすめです。これは、いろんなサイトやサービスで紹介している無いようなので、耳タコかもしれませんが、『プログラミング初心者が実際に学習してみた上での解説』となれば、また話が違ってくるのではないかなと思っています。toを話題にブログで紹介しています。年間で1,600万を売り上げた実績を元にマーケティングにも触れ、プログラミングの学習方法やブログでの稼ぎ方について情報発信中!お問い合わせ当サイト使用テーマレビュー記事を見てみる有料noteアフィリエイト入門SEO対策の基本WordPress開設講座よく読まれている記事1【最新版】AFFINGER5をレビュー!実用10特典をGETしてライバルに差をつけよう!AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。ご覧いただいてありがとうございます。ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。thorをレビュー!豪華10特典で競合に差をつけよう!誠太こんにちは、誠太です。誠太こんにちは、誠太です。WordPressのテーマはいまや沢山の種類がリリースされ、個人制作のものや企業がリリースしているものまで溢れかえるようになりました。