ズボラアラサーのweb備忘録

HTML/CSS

: 【CSS】画像や動画のアスペクト比(縦横比)を固定してレスポンシブに対応する方法aspect-ratio編
2023/11/14 pickup
アスペクト比(縦横比)を固定する方法の一つにaspect-ratioがある。固定したいコンテンツの親要素にaspect-ratio: width/height;を指定する。計算の手間がないが、古いブラウザで対応していない場合があるため確認が必要。
HTML/CSS WEB制作

: 【CSS】画像や地図のアスペクト比(縦横比)を固定する方法
2023/5/23
レイアウトを整えるためには、画像や動画のアスペクト比（縦横比）を指定することが大切です。imgタグの場合はコンテナ要素に、background-imageの場合は指定したい要素にpadding-top:○%を指定します。
HTML/CSS WEB制作

: 【CSS】画像の縁をぼやかす方法
2023/5/4
misaki 写真を使う時に、雰囲気を柔らかくしたい時ってありますよね。今回は挿入したいimgに一手間加えて、imgの縁をぼやかす方法を紹介します。 imgの親要素にdivタグを作成します。ぼかしの ...
HTML/CSS WEB制作

: 【CSS】画像にカーソルを乗せた時（hover）ズームさせる
2023/5/10
カーソルを乗せた時（hover）画像を拡大【img】イメージとしては 1_カーソルをのせた（hover）時にtransform: scale(1.1);で大きくする 2_枠を指定し、はみ出していると ...
HTML/CSS WEB制作