Update!!近年のウェブデザインのトレンドに、あえてグリッドラインに沿わせずに不規則に崩したようなレイアウトがよくみられます。このレイアウトは「ブロークングリッド」と呼ばれるレイアウトで、余白を活かした抜け感のあるデザインであったり、ダイナミックなレイアウトでアニメーションを際立たせるなどの効果があります。レスポンシブ対応が必要となる中でこのようなレイアウトのコーディングは少しコツがいります。今回はこのようなブロークングリッドのレイアウトをコーディングするときに使えるCSSのテクニックをサンプルと合わせてみていきたいと思います。不揃いにずらして重ね合わせるまずは比較的簡単に実装できる、グリッド上に並んでいるところから不揃いになるようにずらして重ね合わせるレイアウトです。画像とテキストコンテンツを2カラムで並べるようなケースでよく見かけますね。利用される場面も多いのではないでしょうか。このレイアウトは基本的にまずはきっちりとグリッド状に揃えてレイアウトを組んでから、表示位置の移動や幅を調整することで実現していきます。実際にコードを見ていきます。HTMLはこのような形で、各要素を囲むように入れ子で用意します。CSSでFlexboxやGridなどで、しっかりとグリッドレイアウトを完成させます。その上で、ずらして表示させる要素に対して、transformで表示位置をずらすように移動させ、ネガティブマージンを適用することで、背面要素に重なるよう要素の幅を調整すると完成です。60px);}こういったレイアウトは、Flexboxなどでグリッドレイアウトにしてから、transfromとマイナス値のマージンで重なるようにずらしていくと覚えておくと良いですね。ベースがグリッドレイアウトで組まれているため、レスポンシブにも柔軟に対応することが可能です。出来るだけ絶対位置指定で実装するのは避けましょう。このレイアウトのサンプルはこちらに用意しています。続いてこちらもよく見かける、コンテンツ幅を持つ親要素に収まる子要素をその親要素の領域を超えて画面幅いっぱいまで広げて表示させるレイアウトです。画面幅用のセクションとコンテンツ用のセクションを分けるとそのまま簡単に実装できますが、どうしてもHTMLが複雑になってしまうため、できれば1つの要素にまとめたいですね。HTMLはこのような形で、祖先要素から画面幅に広がるラッパー要素の配下に、コンテンツ幅を持つコンテナ要素、その中にコンテンツ要素という構成です。コンテンツ要素はコンテンツ幅の要素内に含まれるため、このままですと画面幅まで広げることができません。そこでCSS側で親要素を超える幅になるように調整していきます。50vw);}今回のレイアウトではコンテンツ幅が重要になるので、変数として値を保持しておくと便利です。コンテナ要素には最大幅がコンテンツ幅になるように設定していきます。中身となるコンテンツ要素で画面幅に広がるものに対して、画面幅と等しくなるように幅を設定します。そのままですと、コンテンツ幅の左端位置が基準となるので、画面左端になるように左右のmarginを調整することで実現できます。最後に、vwを使って画面幅になるよう指定した場合には、スクロールバーの幅を考慮しておく必要があるため、その分だけ画面外にはみ出して横スクロールが発生してしまうことがあります。hidden;を設定しておくことが重要です。このレイアウトのサンプルはこちらに用意しています。最後は少し複雑になりますが、コンテンツ幅の境界を基準に2つの要素をずらして重ねるように配置して、かつ画面サイズに対応した幅になるレイアウトです。説明ではなかなか伝わりにくいと思いますので、ぜひサンプルも合わせてご覧ください。画面全体に広がるように見せつつも、ブロークングリッドのバランスを活かしたいというときに効果的なレイアウトです。実装方法としては、先ほどの応用となります。今回も幅指定の単位にvwを使うので、横スクロールを防ぐためにラッパー要素で全体を囲むようにしておきます。配置場所の基準となるコンテンツ幅を持つコンテナ要素に、実際のコンテンツを並べる要素が入ります。デザインにもよりますが、絶対位置指定でレイアウトを行うので、並べる要素をグルーピングできるようにしておくと良いですね。-50%);}CSSでは同じくコンテンツ幅を変数として管理するのに加えて、コンテンツ要素を絶対位置指定で配置させる際に表示領域を決める下限の高さも設定できるようにしておくと便利です。そこからは先ほどと同じ要領でレイアウトを作っていきますが、今回はコンテンツ要素を絶対位置指定で配置させる点が大きな違いです。各要素をコンテンツ幅の左右両端を起点となるように配置します。すると、画面幅からコンテンツ幅を引いた残りの幅分だけ画面幅から引いたサイズの幅が必要となるのがわかりますので、これらを算出していき幅を指定します。絶対位置指定を行なっていますが、コンテンツ幅に合わせて配置場所が決まっているのと、単位にvwを採用しているのでレスポンシブにも強いレイアウトになります。このレイアウトのサンプルはこちらに用意しています。今回はブロークングリッドのレイアウトをコーディングするときに使えるCSSのテクニックをまとめてみました。してみるとvwでの幅指定はとても便利ですね。いったレイアウトはアニメーションとも相性が良いので、動かす時の変化の際にアニメーションを適用したりしてもいいですね。参考にしてみてくださいね。topこのウェブサイトはCookieを使用します当ウェブサイトではCookieを使用してアクセス解析や広告を行なっており、ウェブサイトの運用やコンテンツ制作に役立てています。サイトの利用を続けることで、Cookie使用に同意したことになります。