ムラゴン ホーム
画像がつぶれる・切れるのはなぜ？Web制作で理解したい縦横比とobject-fit
Webサイトへ画像を配置したとき、人物の顔が横に伸びたり、画像の端が切れたり、カードごとに高さがそろわなかったりすることがあります。 このような問題を、とりあえず幅や高さを変更して直していると、パソコンでは整ってもスマートフォンで再び崩れることがあります。 原因を正しく理解するには、画像の縦横比と、... 続きをみる
縦横のムラゴンブログ
-
-
画像が表示されるたびに画面が動くのはなぜ？レイアウト崩れを防ぐ基本
Webページを開いた直後、読もうとしていた文章が突然下へ移動したり、押そうとしていたボタンの位置がずれたりすることがあります。 ページの読み込み途中で要素の位置が変わる現象を、レイアウトシフトと呼びます。 特に画像の多いWebサイトでは、画像が表示されるたびに周囲の文章やボタンが押し出され、ページ全... 続きをみる
-
CSSの「gap」とは？初心者でも理解できる使い方
CSSでレイアウトを作っていると、要素同士の余白をどう作るかで悩むことがあります。 そのときによく使われるのが gap というプロパティです。 この記事では、CSSの gapとは何か、そして marginとの違い、実際の使い方まで整理して解説します。 gapとは gapは、要素と要素の間の余白をまと... 続きをみる
-
#
縦横
-
#
田舎暮らし
- # 違和感
