ISSEN 
はじめに
この記事の概要
こんにちは、たくまです！
みなさんサイトを制作する際、以下のようなレイアウトのフッターを作ることはありませんか？
画像のような3カラム以上の構成の場合、PC画面では横並びにできますが、SP画面などではそのまま横並びにすることは難しいと思います。
例えばこのようなSP画面では以下のようなレイアウトにする場合、どのように実装するでしょうか。
方法は様々あると思いますが、今回は「display: contents;」を活用して実装します。
display: contents;を使用した要素の並び替えについては、以前にも記事で解説していますので、そちらもご覧ください。
【css】display: contentsを使用した要素の並び替え
対象読者
- HTMLやCSSを勉強中の方
- フッターのレイアウトでお悩みの方
- CSSの引き出しを増やしたい方
display: contents;について
以前も記事で紹介しましたが、改めてdisplay: contents;についてご紹介します。
display: contents;は、親要素内の子要素を親要素自体のコンテキストなしで直接表示し、親要素を無視することができます。これにより柔軟なレイアウトを構築し、コンテンツの配置を容易に調整できます。
display: contents;を使用する利点は大きく以下の3つがあります。
- コンテナーの非表示:
親要素を非表示にすることなく、その内部のコンテンツを表示できます。これは、タブ切り替えやアコーディオンメニューなど、ユーザーインタラクションを改善するために便利です。 - シンプルなHTML構造:
HTMLのセマンティクスを維持しつつ、よりシンプルな構造でコードを管理できます。これは、アクセシビリティとメンテナンス性を向上させます。 - フレキシブルなレイアウト:
レイアウトの要素を独立して操作でき、レスポンシブデザインに適した柔軟な配置が可能です
個人的には3つ目のフレキシブルなレイアウトで使用することが多いです。
PC画面とSP画面でレイアウトが異なる際に、大掛かりなCSSの変更を行わなくて済むので重宝しています。
実装
それでは冒頭のフッターレイアウトを実装してきましょう！
冒頭のPC画面のHTMLとCSSは以下のようになっています。
<div class="c-footer>
<div class="c-footer__top">
<div class="c-footer__left-area">
ロゴや企業情報など
</div>
<div class="c-footer__navi-area">
<ul class="c-footer__navi">
<li>会社概要</li>
<li>事業案内</li>
<li>ラインナップ</li>
</ul>
<ul class="c-footer__navi">
<li>買取査定</li>
<li>お問合せ</li>
</ul>
</div>
<div class="c-footer__right-area">
SNSのリンクなど
</div>
</div>
<div class="c-footer__bottom">
<p class="c-footer__copy">Copyright Inc.</p>
</div>
</div>.c-footer {
width: 100%;
.c-footer__top {
padding: 60px 40px 40px;
display: flex;
justify-content: space-between;
align-items: flex-start;
@media screen and (max-width: 500px) {
flex-direction: column;
gap: 40px 0;
}
.c-footer__left-area {
display: flex;
flex-direction: column;
gap: 16px 0;
}
.c-footer__left-area {
display: flex;
flex-direction: column;
gap: 20px 0;
align-items: center;
}
.c-footer__navi-area {
display: flex;
gap: 0 80px;
.c-footer__navi {
display: flex;
flex-direction: column;
gap: 12px 0;
}
}
.c-footer__right-area {
display: flex;
flex-direction: column;
gap: 20px 0;
align-items: center;
}
.c-footer__text {
font-size: 20px;
font-weight: bold;
@include mq("tab") {
font-size: 16px;
}
}
.c-footer__border {
display: none;
}
}
.c-footer__bottom {
background-color: $main-color;
width: 100%;
text-align: center;
padding: 24px 0;
.c-footer__copy {
color: $white-color;
font-size: 14px;
}
}
}
今回のポイントはPC画面で表示されている3カラムをそれぞれleft-areaやnavi-area,right-areaのようにブロックに分けている点です。こうすることで、SP画面でのレイアウトがやりやすくなります。
また、500px以下では、3カラムが1カラムになるようになっています。
ここからSP画面のレイアウトを実現するために、display; contents;を使用します。
まず、上記のHTMLでハイライトされている6〜18行目、つまりnavi-areaからright-areaまでをc-footer__sp-bottomというクラスを付与したdivタグで囲います。
<div class="c-footer>
<div class="c-footer__top">
<div class="c-footer__left-area">
ロゴや企業情報など
</div>
<div class="c-footer__sp-bottom">
<div class="c-footer__navi-area">
<ul class="c-footer__navi">
<li>会社概要</li>
<li>事業案内</li>
<li>ラインナップ</li>
</ul>
<ul class="c-footer__navi">
<li>買取査定</li>
<li>お問合せ</li>
</ul>
</div>
<div class="c-footer__right-area">
SNSのリンクなど
</div>
</div>
</div>
<div class="c-footer__bottom">
<p class="c-footer__copy">Copyright Inc.</p>
</div>
</div>次に、c-footer__sp-bottomにCSSを当てます。
.c-footer__sp-bottom {
display: contents;
@media screen and (max-width: 500px) {
display: flex;
gap: 0 40px;
}
}
ここで、display: contents;をあてます。
上記のようにすることで、500px以下ではdisplay: contents;の枠組みが残り、navi-areaとright-areaをまとめてくれます。
さらにdisplay: flex;をあてることにより2つのブロックが横並びになります。
以上の記述で、PC画面とSP画面でレイアウトを切り替えることが出来ます。
さいごに
display: contents;を使用したフッターのレイアウトいかがでしたでしょうか。
分けたい要素をラップして、display: contents;を適用させるだけなので、簡単にPC画面とSP画面で異なったレイアウトを実現できます。
みなさんもdisplay: contents;を活用して、素晴らしいウェブデザインプロジェクトに挑戦しましょう。成功とクリエイティビティあふれるデザインを手に入れるために、そしてウェブの未来を創造するために、今日から始めましょう。
今回はdisplay: contents;について紹介しましたが、HTMLやCSSについてもっと詳しく知りたいという方は以下の書籍がおすすめです。
初学者の方にもわかり易い言葉で丁寧にせつめいがされているので、とても参考になります！
