HTML&CSS 【CSS】背景画像の比率を保ったまま、レスポンシブ対応する方法 backgroundで表示した背景画像の比率を保ちながら、レスポンシブ対応をするには 答え aspect-ratioを使えば解決 これにより...
HTML&CSS 【CSS】 100％指定したdisplay: inline-block; の横幅を元に戻す方法 答え width:auto;にすれば元に戻る 例えば、下記のようなテキストリンクをborderで囲むデザインで、スマホでは横幅は100％にし...
HTML&CSS 【CSS】clip-pathを使って下向きの三角でセクションを区切る CSSで三角形を作る方法と言えば、borderを使った方法が一般的でしたが、今回はもっと簡単に三角形が作れるclip-pathを使って、セク...
HTML&CSS 【CSS】clip-pathを使って斜めにセクションを区切る clip-pathで要素を切り抜けば、セクションを斜めに区切ることも可能です。 三角形に切り抜く場合はこちらの記事を参考 clip-path...
HTML&CSS 【CSS】画像の上に文字や画像、イラストなどを重ねる 画像の上に文字を重ねる方法 画像の上にテキストを重ねたい場合は、div要素（親要素）の中に画像と文字を子要素として入れ、親要素にpositi...
