画像要素はオーバーフローしうる

CSS HTML 画像 オーバーフロー 画像要素について誰も教えてくれなかったこと（オーバーフローしうる！） Temani Afif 2026年8月3日 ウェブサイトに画像を追加するのは、かなり簡単な作業です。リンクを取得し、以下のように画像要素を呼び出します。 <img src="your_link" alt="image content"> コード言語: HTML, XML (xml) その後、お気に入りのCSSを追加すれば、見栄えの良い画像が完成します！ しかし、もし私が最も一般的な要素がいくつかの秘密を隠していると言ったらどうでしょうか？画像と長年付き合ってきても、ここで紹介するちょっとした癖に気づいたことはないかもしれません。大げさだと思いますか？ついてきてください、そうすればわかります！ 画像はオーバーフローしうる 画像要素のCSSコードを調べると、ブラウザによって適用されるデフォルトのスタイルに気づくでしょう。その一つが `overflow: clip` です。これは、デフォルトではオーバーフローはクリップ/非表示されることを意味します。もちろん、これを変更してオーバーフローを可視にすることもできます。 ìmg { overflow: visible; } コード言語: CSS (css) しかし、何が画像をオーバーフローさせるのでしょうか？他の要素を何も含められない単一の要素を扱っています。オーバーフローについて語れるコンテナとコンテンツの関係はありません！ 実際、画像要素にはコンテンツがあり、そのコンテンツは画像リソースです。混乱しますよね？より理解を深めるために図を作成しましょう。 <img>要素（HTML要素）は「コンテナ」であり、画像リソース（実際の画像）はその「コンテナ」内に読み込まれ、「コンテンツ」となります。これでコンテナとコンテンツの関係ができたので、オーバーフローについて語ることができます。 この説明があっても、画像コンテンツがどのようにオーバーフローするかを想像するのは難しいですが、これが起こりうる非常に一般的な状況があります。 あなたが確実に知っているCSSの1行です。 img { object-fit: cover; } コード言語: CSS (css) ここにデモがあります。画像にホバーするとオーバーフローの表示/非表示が切り替わります。 驚きですよね？ `object-fit: cover;` 宣言は、歪みを避けるために画像の固有のアスペクト比を維持しようとします。これは一般的に、画像のいくつかの部分がクリップされることを意味します。より正確には、画像「コンテンツ」が画像「コンテナ」よりも大きくなり、オーバーフローが発生します。そのオーバーフローはデフォルトではクリップされますが、それを変更できます。 画像は…それ自体をオーバーフローさせることができます！ 画像にオーバーフローを引き起こす、もう一つのよく知られたプロパティがあると言ったらどうでしょうか？考えてみてください。そうです、あなたはそれを非常によく知っています！わかりましたか？それは `border-radius` です！長方形である画像は、その丸みを帯びた角をオーバーフローさせることができます。 画像がオーバーフローするもう一つのあまり一般的でない状況は、`object-position` を使用する場合です。 img { object-position: 50px 0; } コード言語: CSS (css) 上記は、画像要素（コンテナ）に影響を与えることなく、画像コンテンツを左から50px移動させます。これは論理的にオーバーフローを引き起こします。さらに別のオーバーフローです！後ほど、この機能を使ってクールなデモを作成する方法を見ていきます。 object-fit: none `object-fit` プロパティについて話すとき、誰もが `cover` と `contain` の値を考えますが、仕様を確認すると、さらに多くの値が見つかり、そのうちの1つは興味深いです。それは `none` 値です。 none 置換コンテンツは、要素のコンテンツボックス内に収まるようにリサイズされません。 定義はかなり奇妙で、デフォルト値ではありません。それが何をするかをよりよく理解するために、次の設定を考えてみましょう。 img { width: 80vw; height: 80vh; object-fit: none; } コード言語: CSS (css) 何が起こっているかわかりますか？画像要素（コンテナ）はビューポートの寸法を使用してサイズ設定されます（可変サイズです）。しかし、画像リソース（コンテンツ）は固定寸法、つまり画像リソースの固有サイズ（この場合は300 x 300）を保持します。定義が示すように、コンテンツはリサイズされません。CSSで設定した画像寸法に関わらず、コンテンツは固定されたままです。これは、画像要素がコンテンツよりも小さい場合、`object-fit: none` を使用してもオーバーフローが発生する可能性があることを意味します。 では、`object-fit` のデフォルト値は何でしょうか？それは `fill` 値であり、`none` 値とは正反対の効果があります。 fill 置換コンテンツは、要素のコンテンツボックスを埋めるようにサイズ設定されます。 画像リソースのサイズ（その固有サイズ）が何であれ、常にCSSで設定された画像要素のサイズに合わせてサイズ設定されます。 前のデモを、`object-fit` の値を変更できる機能とともに示します。デモをフルスクリーンで開き、ページをリサイズして、各値の効果をよりよく理解してください。 もしあなたが少し迷っていて混乱しているなら、心配しないでください。あなたは画像要素を画像を表示する単純な要素として考えていましたが、それはそれ以上です。それはコンテナとコンテンツの両方であり、2つのサイズを別々に制御できます。さらに、それ自身のコンテンツをオーバーフローさせる能力も考慮に入れる必要があります。 正確に言うと、画像は「置換要素」です。あなたはきっとその奇妙な言葉を聞いたことがあるでしょうが、それが何を意味するのか理解していなかったでしょう。しかし、これまでの説明で、より明確になったはずです。 置換要素 CSSフォーマットモデルの範囲外のコンテンツを持つ要素。例えば、HTMLのimg要素のコンテンツは、src属性が指定する画像に置き換えられることがよくあります。置換要素はしばしば自然な寸法を持ちます。例えば、ビットマップ画像は、自然な幅と自然な高さ（明らかに自然なアスペクト比を決定できる）を絶対単位で指定しています。置換要素のコンテンツはCSSフォーマットモデルでは考慮されませんが、その自然な寸法はさまざまなレイアウト計算で使用されます。 十分な理論です。クールなデモを見てみましょう。 ここに、画像がフレーム内に配置され、美しいトランジションを持つ、おしゃれなホバー効果があります。 別のアイデア、3D効果です。 画像はどこ？ホバーして表示！ `@starting-style` と組み合わせて、美しいエントリーアニメーションを作成できる効果です。 そして、なぜこの有名なスクリーンローダーを単一の画像要素で作らないのでしょうか。 画像の固有寸法がCSS寸法よりも小さいことを確認し、`object-fit: none` を設定し、次に `object-position` をアニメートします。 img { object-fit: none; object-position: 0% 0%; animation: x 2.1s infinite linear alternate, y 3.3s infinite linear alternate; animation-composition: add; } @keyframes x { to { object-position: 100% 0 } } @keyframes y { to { object-position: 0 100% } } コード言語: CSS (css) `animation-composition: add` を使用すると、各軸を個別にアニメートし、両方の加算効果を得ることができます。これについては、ここでさらに詳しく学ぶことができます。「無限CSSアニメーションを制御する方法」 最後に、コーナー形状（現在はChromeのみ）で強化された、派手な装飾で締めくくりましょう。 すべてのデモは、より直感的な一般的なテクニックで作成できることに注意する価値があります。私はこれらの難解なテクニックの使用を推奨しているわけではありませんが、主な利点は、追加の要素や疑似要素に依存する必要がないことです。HTML構造を制御できない状況にある場合、これらのトリックは便利かもしれません。 結論 あなたはまだ画像が単純な要素だと思いますか？古くから知られているものでさえ、派手なCSSトリックに変えることができる奇妙なメカニズムを隠している可能性があります。さあ、これで同僚や友人を感心させましょう：「ねえ、画像がそれ自体をオーバーフローさせることができるって知ってる？見せてあげるよ！」 終わる前に、もう一つトリックを見たいですか？これをチェックしてください：壊れた画像をスタイルする方法。おそらく、あなたが画像について知らないもう一つの機能でしょう！