【display flexに対応】PCだけ、SPだけで表示したいときに使う方法

2024/02/29

パソコンだけ、スマホだけなどディバイスの横幅に応じて表示・非常時をしたいケースは多くあります。

過去の私の方法ではdislpay: flex;を使う場面でどうしてもうまくいきませんでした。

この記載方法にしてからは迷うことなく実装できてます！

この記事で身につく内容

ディバイスサイズに応じて表示・非表示にしたいときのCSS記載方法
display: flex;はもちろん、改行<br>のコントロールにも使えます

display: flexに対応したPCだけ、SPだけで表示したいときに使う方法

まずは結論です。
以下のCSSコードを使って私は実装しています。

コード

/* 769px以上のとき */
@media screen and (min-width: 769px) {
  .sp-only {
    display: none;
  }
}

/* 768px以下のとき */
@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
}

解説

769px以上であれば、クラス名.sp-onlyの要素は非表示に、
768px以下であれば、クラス名.pc-onlyの要素は非表示にしています。

HTMLで表示・非表示したい要素に対し.sp-only、.pc-onlyのクラス名を付与することによって、768pxを境界として表示・非表示する要素をコントロールすることができます。

動作イメージはこちらです。
ブログ内ではサイズ変更できないので、こちらからブラウザで表示して確認してみて下さい。

See the Pen pc-only html by 伊とう (@ito-the-typescripter) on CodePen.

【失敗例】過去の私の方法は何が良くなかったのか？

過去の私のコードでは何がうまくいかなかったのか、解説したいと思います。
当時、私は以下のように書いていました。

※以下のコードは使用しないて下さい

/* 769px以上のとき */
.sp-only {
  display: none;
}

/* 768px以下のとき */
@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }
}

一見問題なさそうに見えるコードですが、致命的な弱点があります。

それは、SPサイズで表示したい要素がdisplay: flex;の場合、表示が崩れてしまうことでした。

ウインドウサイズを変更した時の挙動はこちらから確認して下さい。

See the Pen Untitled by 伊とう (@ito-the-typescripter) on CodePen.

サイズを小さくした際、横並びにならず改行されてしまっています。

この原因は13行目のdisplay: block;です。
横並びのためにdisplay: flex;で定義した要素が、.sp-onlyのdisplay: block;で上書きされてしまった為です。

/* 769px以上のとき */
.sp-only {
  display: none;
}

/* 768px以下のとき */
@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;　//←⇐これが原因
  }
}

なので、今の私の改善コードでは表示するときにdisplay: block;を使わなくても良い様にdisplay: none;
で非表示にする条件だけ記載するようにしています。