[CSS]レイアウトでテキストは幅一定で、画像だけ幅いっぱいに表示させるスタイルシートのテクニック

サイト構築 -CSS

112

Post on:2017年5月17日

sponsorsr

テキストはスマホでは両横にマージンを保持しつつ幅いっぱいに、デスクトップでは指定した幅で表示し、常に画像だけ幅いっぱいに表示させるレイアウトを実装するスタイルシートのテクニックを紹介します。

floatやflexboxだと難しいレイアウトですが、CSS Grid Layoutを使うと非常に簡単に実装できます。

Breaking Out With CSS Grid Layout
byTyler Sticka

CSSのレイアウトでありがちなバグ・仕様？

固定幅のコンテナ内からビューポートの幅いっぱいに配置するには、calc()を使うと簡単なコードで実現できます。
参考:Breaking Out With Viewport Units and Calc

CSS

.u-containProse {  max-width: 40em;  margin-left: auto;  margin-right: auto;}.u-release {  margin-left: calc(-50vw + 50%);  margin-right: calc(-50vw + 50%);}

.u-containProse{

max-width:40em;

margin-left:auto;

margin-right:auto;

}

.u-release{

margin-left:calc(-50vw+50%);

margin-right:calc(-50vw+50%);

}

このテクニックは非常に簡単ですが一つ難点があります。bodyに「overflow-x: hidden;」を指定しないと、水平スクロールバーが表示されてしまいます。

こういった問題に悩まされていたのは過去の話です。
CSS Grid Layoutの登場により、レイアウトにおけるさまざまな問題が解決します。
※CSS Grid Layoutは2017年3月に、すべてのモダンブラウザでサポートされました。

CSS Grid Layoutの基礎知識は、下記を参考にしてください。

CSS Grid Layoutの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説

実装のゴール

CSS Grid Layoutで何ができるかを解説した記事はよく見かけますが、複数のボックスをタイル状に配置するなど実際に使うことがないレイアウトで、役に立たないものばかりです。確かにそういったレイアウトもできますが、重要なのはレイアウトで今まで問題になっていたものを解決できることです。
デザインの観点から、私たちが望むものを見直しましょう。

読みやすさを向上させるため、テキストの幅は一定に。
写真のようなビジュアル要素は魅力的にするため、幅いっぱいに。

レイアウトの図

図にすると、両横にマージンを伴った固定幅のコンテナではなく、メインカラムの両横に2つの溝が配置された3カラムのレイアウトに見えます。ほとんどのコンテンツはメインカラムに配置されますが、写真画像のようなビジュアルコンテンツは3カラムにまたがります。

これらのポイントを念頭に置いて、CSSで実装してみましょう。

CSS Grid Layoutを使った実装

まずは、記事コンテンツを内包する要素をスタイルシートで定義してみましょう。

CSS

.Prose {  display: grid;  grid-template-columns:     [full-start] minmax(1em, 1fr)     [main-start] minmax(0, 40em) [main-end]    minmax(1em, 1fr) [full-end];}

.Prose{

display:grid;

grid-template-columns:

[full-start]minmax(1em,1fr)

[main-start]minmax(0,40em)[main-end]

minmax(1em,1fr)[full-end];

}

ここでは3つのカラムを定義しました。
1番目と3番目のカラムは溝です。幅の最小値は1emで、スペースが広ければ幅は伸びます。それらに挟まれた2番目のカラムはコンテンツで、40emの最大幅まで伸びることができます。

カラムの定義

上記の図にある通り、カラム間の境界線にも名前を割り当てました。これらは完全にオプションですが、スタイルの残りの部分を読みやすく記述し、管理しやすくなります。

次に、.Prose内のすべての子要素にmainカラムとなるように定義します。

CSS

.Prose > * {  grid-column: main;}

.Prose>*{

grid-column:main;

}

最後に、コンテナの幅全体にまたがる要素のクラスを作成します

CSS

.Prose-splash {  grid-column: full;}

.Prose-splash{

grid-column:full;

}

以上で終了です！
最終結果は次のとおりです。overflow-xや負のマージンは必要ありません。

デモページ

最終的なコードは、非常にシンプルです。

HTML

<div>  <p>パラグラフ</p>  <div>    <img src="image.png" alt="">  </div>  <p>パラグラフ</p>  <p>パラグラフ</p>  <p>パラグラフ</p></div>

<divclass="Prose">

<p>パラグラフ</p>

<divclass="Prose-splash">

<imgsrc="image.png"alt="">

</div>

<p>パラグラフ</p>

</div>

CSSもわずか4つのプロパティでOKです。

CSS

.Prose {  display: grid;  grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 40em) [main-end] minmax(1em, 1fr) [full-end];}.Prose > * {  grid-column: main;}.Prose-splash {  grid-column: full;}

.Prose{

display:grid;

grid-template-columns:[full-start]minmax(1em,1fr)[main-start]minmax(0,40em)[main-end]minmax(1em,1fr)[full-end];

}

.Prose>*{

grid-column:main;

}

.Prose-splash{

grid-column:full;

}

このテクニックの利点は、これだけではありません。

新しいテクニックの使い方

幅いっぱいの要素はビューポートではなく、コンテナに基づいているため、このテクニックは非対称レイアウトにも適しています。

非対称のレイアウト

コンテナに基づくということは、幅いっぱいの要素が上下のコンテンツと揃うことを意味し、ブロッククォートやコードブロックなどの特殊な要素でも美しく揃えて配置できます。

縦に配置が揃ったレイアウト

下記のようなレイアウトは、以前のテクニックでは溝スペースがたくさん必要でしたが、CSS Grid Layoutでは必要ありません。

縦に配置が揃った複雑なレイアウト

実装の注意点

このテクニックには魅力的なポイントがいくつかありますが、考慮すべき欠点もいくつかあります。

「display: grid;」を指定した要素の直下の子をフロートすることはできません。
CSS Grid Layoutは非常に急速にサポートされていますが、すべてのビジターが最新ブラウザを利用している訳ではありません。
前述の多くの利点は、代わりに「*:not() 」セレクタを使用する場合にも当てはまります。

参考:

CSS Grid Layoutを使う前に知っておきたい、floatやflexboxなど既存の実装にどのような影響を与えるか

これらの欠点は、多くの人にとって大きな問題になるかもしれませんが、CSS Grid Layoutが普及するにつれて、こういったテクニックがさらに魅力的になると私は予測しています。わたし達のインターフェイスの構成を向上することは、わたし達のコンテンツにとって当然のことです。

Movatterモバイル変換

[CSS]レイアウトでテキストは幅一定で、画像だけ幅いっぱいに表示させるスタイルシートのテクニック

CSSのレイアウトでありがちなバグ・仕様？

実装のゴール

CSS Grid Layoutを使った実装

新しいテクニックの使い方

実装の注意点

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info