See the Pen Untitled by ゆーじろー (@yuji64) on CodePen.

今回は、「PCとスマホ両方の端末で背景を固定にする方法」についてまとめました。 よく出る実装なので、是非理解しておきたいところですね。 background-attachment: fixedだとスマホの時に固定されない…

先日の案件でファーストビュー画像だけ中央に配置するレイアウトを実装をして今後も出てきそうだったので、今回ブログにまとめることにしました。 【CSS】ファーストビュー画像だけ中央に配置する方法 デモサイトはこちら。 See…

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

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

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

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

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