毎日暑い日が続き、そろそろ干からびそうな制作部のおかざきです。

今日は、先日使ってみてとても便利だったCSSを紹介したいと思います。

要素の表示順番を指定する

今回のテーマは…
ホームぺージ制作あるある！
『PC版とスマホ版で表示させる順番を変えたい』
こんな時。

順番を指定するには、
display:flex;
order:何番目か指定する数字;
を使います。
※flexやorderについてはこちらを参考にしました。
（ https://mamewaza.com/support/blog/howto-use-flex.html ）

例えば…
PCの場合に

このような順番で表示されるコンテンツがあったとすると、
スマホ版ではそのまま

このように表示されるので問題ないと思います。

一方、構成次第ではこのような場合もあると思います。

この場合スマホ版では

と表示され、おかしなことになってしまいます…。

HTMLをPC版とスマホ版で分ける方法もありますが、
後々のメンテナンスなども考慮するととても手間です。
そこでdisplay:flex;を使って、PC版とスマホ版で
表示の順番を切り替えるようにしてみましょう！
スマホサイズのメディアクエリ内に、スマホ版の時に表示させたい順番を指定してあげればOKです！

display: flex;を使って表示の順番を指定する

display:flex;を使えば、HTMLはそのままで、
PC版とスマホ版の表示順番の切り替えが可能です。
やり方を覚えればとても便利です！

:nth-of-type(X)を使わないとどうなるか？

<section> 
　　<div class="no_01">No.1のコンテンツ</div>
　　<div class="no_02">No.3のコンテンツ</div>
　　<div class="no_03">No.2のコンテンツ</div>
　　<div class="no_04">No.4のコンテンツ</div>
</section> 

<style> 
　　section{
    　　display: flex;
　　}
　　.no_02{
    　　order: 3;
　　}
　　.no_04{
    　　order: 4;
　　}
</style> 

こんな感じで一つ一つのdivにクラスをつけて、
さらにCSSでもクラスごとに指定する必要があります。
もちろんこれでも「順番を変える」という目的は達成できますが、
これでは、もっと要素が多いときや後々修正する時などに
「このdivはなんてクラス名だったっけ…？」
「要素が増えたから新しくクラス名を書かないと…」
などと手間も増えてしまって大変です！
HTML/CSSはなるべくスタイリッシュに！を心がけたいですね。

:nth-of-type(X)を使って解決！

:nth-of-type(X)は「ある要素のX番目」に対して指定することができます。

<section>
　　<div>No.1のコンテンツ</div>
　　<div>No.3のコンテンツ</div>
　　<div>No.2のコンテンツ</div>
　　<div>No.4のコンテンツ</div>
　　</section>
 
<style> 
　　section{
    　　display: flex;
　　}
　　div:nth-of-type(2){
    　　order: 3;
　　}
　　div:nth-of-type(4){
    　　order: 4;
　　}
</style> 

HTMLがとてもスッキリ書けたと思います。
今回は4つの要素で例を挙げましたが、もっと複雑な構成になるときや、要素の追加修正時には、
HTMLでクラスを探したり再度指定しなおしたりという手間を省くことができます。

まとめ

★:nth-of-type（X）を使うメリット
・ひとつひとつの要素にクラスをつける必要がない
・任意の要素に指定できる
・要素が増えたり減ったりの修正が容易

今回は:nth-of-type（X）について簡単でしたが紹介させて頂きました。
このような「X番目の要素に対して個別に指定する」などといった疑似クラスは、
他にもいろいろありますし、使い方も豊富でとても便利だと思うので、
今後のスキルアップの為にもどんどん習得していきたいと思います！

使い方をしっかり抑えることで便利且つスタイリッシュなHTML/CSSになること間違いなしです！

以上、今にも干からびそうなおかざきでした！