position: absolute殲滅作戦

コード書いてるとぽかぽかする...どうも中田です。

突然ですが、皆さんはposition: absolute、よく使いますか？

ある程度使い慣れている人はともかく、コーディングが苦手な人や学びたての人の中には、このabsoluteが嫌いという人、結構多いんじゃないでしょうか？

そこで今回は、そんなabsoluteに取って代わる方法を、4つの例を挙げながら紹介していけたらと思います！

1.メインビジュアルの中央にテキストを置いたレイアウト

1つ目は、メインビジュアルの中央にサイトのタイトルやコピーを置いたレイアウトです。一時に比べたら少なくなった気がしますが、今でもたまに見かけるレイアウトですね。まずはよくやるabsoluteとtransformを使ったやり方でレイアウトしてみます。

この方法でも大丈夫ですが、実はもう少しスマートに↑と同じレイアウトを実現する方法があります。そこで使うのがflexとgridです。まずはflexを使った方法です。

flexだと、.mainvisual__copyの方には何も指定する必要なく、.mainvisualに指定したflex関連プロパティの3行のみで同じレイアウトが実現できています。flexというと横並びするのに使うイメージを持っている方が多いかもしれないですが、このようにフレックスアイテム(小要素)が1つしかない場合は、justify-contentとalign-itemsのcenterを使うことで水平方向・垂直方向の中央に配置できるのでこのようになります。次にgridを使った方法です。

flexと大きくは変わらないですが、gridにするとさらにcssの記述を1行減らせます。これもflexと同じように、グリッドアイテム(小要素)が1つしかない場合に、align-itemsとjustify-itemsを一括指定プロパティであるplace-itemsを使うことで水平方向・垂直方向の中央に配置できるのでこのようになります。

2.テキストと画像がズレて重なっているレイアウト

2つ目は、こちらもよく見るテキストと画像がズレて重なっているレイアウトです。ブロークングリッドレイアウトと呼ばれるレイアウトですね。これも最初にabsoluteを使った例から見ていきます。

absoluteした画像をtopとrightを使ってズラし、テキストに重ねています。実はこのズラしレイアウト、ネガティブマージンを使って実現することもできます！

absoluteでやっていた時は画像を一度レイアウトから外していたのに対し、ネガティブマージンを使った方法ではflexでテキストと画像を横並びにしたあとに画像を少しズラすだけなので、いつもの横並びと同じような感覚でレイアウトできます。直感的で良いですね👏

3.SPとPCで要素の順番が変わるレイアウト

3つ目は、SPとPCで要素の順番が変わるレイアウトです。これは説明するよりも実際に見た方が早いと思うので、まずはabsoluteを使った例から見ていきます。

768より小さい幅で見た時は見出し→画像→文章の順番になっているのに対して、768より大きい幅で見た時はテキスト(見出し＋文章)と画像が横並びになるので、flex等でそのまま横にしただけではレイアウトできません。なので、画像にabsoluteを指定してテキストの間から外し、横並びに見えるようにしています。これでもいいですが、ゴリ押ししてる感が否めません...そこでgridの出番です。

768より大きい幅で見た時のコードに注目してください。この例ではテキストと画像を囲んでいる.section__containerにgridとgrid-templateというプロパティを指定しています。このgrid-templateではグリッドアイテムの垂直方向のサイズ(column)、水平方向のサイズ(rows)、名前(ares)を一括指定しています。名前は予めそれぞれのグリッドアイテムにgrid-area: hogeのように指定しておくことで、grid-template内で指定した名前を使って視覚的にレイアウトを作ることができます。gridを使っているのでテキストと画像の間の余白もgapで付けられますし、コードを見ても何がどの位置にどのような幅や高さで並んでいるのかということが一目でわかりすくなりましたね。

4.サムネイルの上にカテゴリー名が重なっているレイアウト

最後は、主にニュースや制作実績等で見られる、サムネイルの上にカテゴリー名が重なっているレイアウトです。これもまずはabsoluteを使ってレイアウトしてみます。

全てのコンテンツを囲んでいる.article__linkにrelative、.article__categoryにabsoluteを指定してサムネイル上に重ねて配置しています。これは流石にabsoluteを使わないと無理なのでは...と思ったそこのアナタ☝️実はこれまたgridを使うことで同じレイアウトが実現できてしまいます！ということでgridを使った例です。

先ほどの例でrelativeを指定していた.article__linkにgridを指定します。そのあとで、.article__thumbnailと.article__categoryに同じgrid-columとgrid-rowの値を指定します。こうすることで、垂直 ・水平方向で見た時の1~2のエリアに2つのアイテムが配置され、その結果重なるようになるという仕組みです。また、この状態で2つの要素を重ねると、エリア全体を覆うようにカテゴリーが配置されてしまうので、カテゴリーにjustify-self: startとalign-self: startを指定してカテゴリーが広がらないようにしつつ、justify-selfのstartで左揃えにしています。gridの力恐るべしです...

まとめ

いかがだったでしょうか？

ここまでabsoluteに取って代わるレイアウトの方法について紹介してきましたが、absoluteを使うことが絶対的に悪い、ということではありませんのでその点は悪しからず...🙏

ただ、IEのサポートが来月の16日で活動限界になることもあり、今までより使えるCSSのプロパティもグッと増えると思いますので、今回紹介したようなモダンな方法も使いつつ、良きコーディングライフを送ってくださいね！

ではでは👋

参考サイト

• https://developer.mozilla.org/ja/docs/Web/CSS/grid-template
• https://coliss.com/articles/build-websites/operation/css/less-absolute-positioning-modern-css.html