【CSS】背景画像だけを透過させる方法

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

インナー幅を共通クラスで管理すると保守性が上がる件

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

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

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

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

aタグを以下のように書いたらOK。 <a href=”リンクが入ります” target=”_blank” rel=”noopener noreferrer”></a>

今回は、「ブロックを中央寄せにしてテキストだけ左寄せにする方法」についてまとめました。ブロックを中央寄せにしてテキストだけ左寄せにする方法完成形はこちら。 See the Pen Untitled by ゆーじろー …

今回は、「子要素を親要素から画面幅いっぱいにはみ出す方法」について紹介します。この方法を使うと、わざわざはみ出したいパーツを新しくコンテナで囲う必要がなくなるので便利です。【CSS】子要素を親要素から画面幅いっぱいに…