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

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

【保守運用】色だけ違うパーツをコーディングする方法

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

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

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

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

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

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

これまでリストの行頭を揃える際には、text-indentプロパティを使っていました。しかし数値がずれたり、CSSを調整するのが個人的に面倒だったので、今回はもっと簡単にリストの行頭を揃える方法をまとめました。行頭を…