コーダーが運用案件でミスしないために出来ること
先日担当した運用案件で、本番サイトの一部表示が崩れてしまうミスが生じてしまったので、再発防止のために今回ブログにまとめることにしました。 運用案件は既存サイトにコードを継ぎ足していくので、ミスが発生するとクライアントに損…
コーダーコーダー2022年
コーダー
CSS【CSS】背景画像だけを透過させる方法
以下のコードを指定したらOK。 これで背景画像だけ透過され、テキストは透過されないようになりました。 background-image: url(); background-color:rgba(255,255,255,…
CSSインナー幅を共通クラスで管理すると保守性が上がる件
インナー幅を共通クラスで管理すると保守性が上がることに気付いたので、備忘録としてまとめました。 インナー幅を共通クラスで管理すると保守性が上がる デモサイトはこちら。 スマホよりPCで見た方が分かりやすいです。 See …
CSS【CSS】position: stickyを使ってボタンをfooterと被らずにスマホ下部に固定する方法
今回は、「position: stickyを使ってボタンをfooterと被らずにスマホ下部に固定する方法」について紹介します。 スマホの時にボタンを下部に固定してfooterと被らないようにする実装はよく出てくるので、是…
HTML【備忘録】iPhone X以降のセーフエリアの対策の参考になる記事
参考になった記事。 【css】iPhoneX以降の機種のセーフエリア対策
CSS【CSS】リストの行頭を揃える方法
これまでリストの行頭を揃える際には、text-indentプロパティを使っていました。 しかし数値がずれたり、CSSを調整するのが個人的に面倒だったので、今回はもっと簡単にリストの行頭を揃える方法をまとめました。 行頭を…
HTML【HTML】aタグをクリックしたら別タブを開くようにする
aタグを以下のように書いたらOK。 <a href=”リンクが入ります” target=”_blank” rel=”noopener noreferrer”></a>
CSSブロックを中央寄せにしてテキストだけ左寄せにする方法
今回は、「ブロックを中央寄せにしてテキストだけ左寄せにする方法」についてまとめました。 ブロックを中央寄せにしてテキストだけ左寄せにする方法 完成形はこちら。 See the Pen Untitled by ゆーじろー …