CSSでコンテンツの順番を変える方法

kawa@noterです。

スマホとPCでコンテンツの順番を変えたいときがありますよね。そんな時はどうするのか解説します。

まずはHTMLからですね。

<article id="contents">

<aside id="left-contents">
<p>コンテンツ</p>
</aside><!--left-contents-->

<main id="main-contents">
<p>コンテンツ</p>
</main><!--main-contents-->
      
<aside id="right-contents">
<p>コンテンツ</p>
</aside><!--right-contents-->

</article><!-- contents -->

3カラムレイアウトになります。スマホでの表示は、「left-contents→main-contents→right-contents」になります。

このままで良いなら特に対応する必要はありません。

しかし、「main-contents」を一番先頭にして、次いで「left-contents→right-contents」する際はどうするかと言いますと・・・。

全部でコンテンツは3つありますね。

・#left-contents

・#main-contents

・#right-contents

これらの順番を変えます。

まずは、上の3つを囲んでいる「#contents」に対して以下を書きたします。

#contents {
 display: flex;
 flex-direction: column;
}

「display: flex;」でまず横並びにします。しかし、そうなると上の3つが横に並んでしまいます。

そこで、「flex-direction: column;」を書きたします。これで横並びにするのを阻止します。

あとは、こんな感じです。

#main-contents {
 order: 1;
}

#left-contents {
 order: 2;
}

#right-contents {
 order: 3;
}

1番上に「#main-contents」にしたいので、「order: 1;」にします。

「#left-contents」に対しては「order: 2;」にします。

最後に「#right-contents」に対して「order: 3;」にします。

要するに「order」の順番が早いほどコンテンツが上に表示される訳ですね。

しかし、僕が実際に対応したところ、PC表示でも上の順番が適用されています。

よって、ここはメディアクエリで逃げます。

こんな感じですね。

@media screen and (min-width: 768px) {
 #contents {
 display: grid;
 grid-template-columns:1fr  2fr 1fr;
 grid-gap: 20px;
 }

 #left-contents {
 order: 1;
 }

 #main-contents {
 order: 2;
 }

 #right-contents {
 order: 3;
}
}

「#contents」に関して、3カラムで表示させたいので以下を書きます。下のコードは上のコードの抜粋です。

#contents {
display: grid;
grid-template-columns:1fr  2fr 1fr;
grid-gap: 20px;
}

グリッドレイアウトに変更しています。これで上手くいくかと思いきや、やはり「order」を書く必要がありました。

今度は「left-contents→main-contents→right-contents」の順に表示させたいので、以下を書きます。

#left-contents {
 order: 1;
 }

 #main-contents {
 order: 2;
 }

 #right-contents {
 order: 3;
}

まとめるとこんな感じですね。

@media screen and (min-width: 768px) {

#contents {
display: grid;
grid-template-columns:1fr  2fr 1fr;
grid-gap: 20px;
}

#left-contents {
order: 1;
}

#main-contents {
order: 2;
}

#right-contents {
order: 3;
}
}

「(min-width: 768px)」に関しては、人によって異なりますので、デザインに応じて変更してください。

また、「grid-template-columns」や「grid-gap」に関しても人によって異なりますので、こちらもデザインに合わせて変更してください。

この対応により、スマホとPCで表示させたとき、コンテンツの順番を変えて表示させることができます。

ただ、全てのブラウザで対応しているかどうか分からないので、そこが難点だったりしますが・・・。

興味のある人はお試しください。

なお、注意点があります。

・僕の環境で出来ているモノ

・作業の際はバックアップを取ってから

・自己責任で

という感じです。CSSのカスタマイズはバックアップを取ってからするのが常識です。

サクッとバックアップを取ってから興味のある人はお試しください。