https://b.hatena.ne.jp/threegravity/CSS/ CSSに関するthreegravityのはてなブックマーク (1) https://coliss.com/articles/build-websites/operation/css/full-bleed-layout-with-modern-css.html threegravity 2025-02-13T20:34:37Z CSS <blockquote cite="https://coliss.com/articles/build-websites/operation/css/full-bleed-layout-with-modern-css.html" title="これは覚えておきたい！ モダンCSSで実装する、記事は中央に画像は幅いっぱいにフルブリードレイアウトを実装するテクニック"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Ffull-bleed-layout-with-modern-css.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/full-bleed-layout-with-modern-css.html">これは覚えておきたい！ モダンCSSで実装する、記事は中央に画像は幅いっぱいにフルブリードレイアウトを実装するテクニック</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/full-bleed-layout-with-modern-css.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/dbcc9d1f45eca964aa648467ab76af3673f55edc/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202501%2F2025020801%402x.png" alt="これは覚えておきたい！ モダンCSSで実装する、記事は中央に画像は幅いっぱいにフルブリードレイアウトを実装するテクニック" title="これは覚えておきたい！ モダンCSSで実装する、記事は中央に画像は幅いっぱいにフルブリードレイアウトを実装するテクニック" class="entry-image" /></a></p><p>フルブリードレイアウトとは最近のWebサイトのUIでもよく見かける、記事は中央配置に、画像や動画などは幅いっぱいに表示されるレイアウトのことです。これまではCSS Gridなどで実装されていたと思いますが、今回紹介するのはモダンCSSで実装できるテクニック。 CSSはわずか4行ですが、モダンCSSのテクニックがたくさん...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/full-bleed-layout-with-modern-css.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/full-bleed-layout-with-modern-css.html" alt="はてなブックマーク - これは覚えておきたい！ モダンCSSで実装する、記事は中央に画像は幅いっぱいにフルブリードレイアウトを実装するテクニック" title="はてなブックマーク - これは覚えておきたい！ モダンCSSで実装する、記事は中央に画像は幅いっぱいにフルブリードレイアウトを実装するテクニック" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/full-bleed-layout-with-modern-css.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 56