擬似要素

CSS

レイアウトシフト(ページ読み込み後のずれ)を回避する方法

レスポンシブ対応で縦横比を維持して要素を可変させる方法を使って、レイアウトシフト(ページ読み込み後のずれ)を回避してユーザーのストレスを軽減するテクニックを紹介します。
CSS

レスポンシブ対応必須テクニック!比率を維持して可変させる方法

レスポンシブ対応にて必須のCSSで縦横比を維持して要素を可変させる方法を紹介します。基本の画像を可変させる方法や高さが固定できない要素の縦横比を維持して可変させる方法を知ると、CSSで高さ方向にpaddingを%で指定した場合の性質が理解できます。