【CSS】画像を無限横スクロールさせる方法

今回は、CSSで画像を無限横スクロールさせる方法についてまとめました。 Webページのfooter付近に配置されているスポンサー企業のアイコン画像でよく実装されています。【CSS】画像を無限横スクロールさせる方法デモ…

【CSS】headerの左にロゴタイトルを表示しタイトルは中央寄せするレイアウトを組む方法

headerでheaderロゴを左に配置して且つタイトルは中央寄せにする実装が実案件で出てきたので、今後のためにも備忘録としてまとめました。【CSS】headerの左にロゴタイトルを表示しタイトルは中央寄せするレイアウ…

今回は、色だけ違うパーツをコーディングする方法についてまとめました。デザインを忠実にコーディング出来るようになったら、次は保守運用を意識してコーディング出来るようになりましょう。これから赤色と青色と緑色のボタンを作成…

先日担当した運用案件で、本番サイトの一部表示が崩れてしまうミスが生じてしまったので、再発防止のために今回ブログにまとめることにしました。運用案件は既存サイトにコードを継ぎ足していくので、ミスが発生するとクライアントに損…

以下のコードを指定したらOK。これで背景画像だけ透過され、テキストは透過されないようになりました。 background-image: url(); background-color:rgba(255,255,255,…

インナー幅を共通クラスで管理すると保守性が上がることに気付いたので、備忘録としてまとめました。インナー幅を共通クラスで管理すると保守性が上がるデモサイトはこちら。スマホよりPCで見た方が分かりやすいです。 See …

今回は、「position: stickyを使ってボタンをfooterと被らずにスマホ下部に固定する方法」について紹介します。スマホの時にボタンを下部に固定してfooterと被らないようにする実装はよく出てくるので、是…

参考になった記事。【css】iPhoneX以降の機種のセーフエリア対策