画面幅で改行位置をコントロールしたい時のハック

ひとつのhtmlでさまざまな画面幅に対応できるレスポンシブデザイン。最高ですね。

出始めた時は「超画期的じゃん」という気持ちと「CSS実装コスト高いかも…」という気持ちとがせめぎ合っていましたが、気づいたらすっかり業界スタンダードになってました。

当時はPCオンリーサイト・SPオンリーサイトも提供メニューとして残してましたが、もうやってないです

そんなレスポンシブサイトならではの需要に、htmlに書いた要素の中で「PC幅でだけ表示させたい」「SP幅でだけ表示させたい」というのがあります。

例えばヘッダーなんかでよくありますよね。PCでは下層ページへのリンクを横並びに表示しておきたいけど、SPではメニューアイコンを表示してナビはしまっておきたいとか。

今はもう当たり前に使ってますが「そういえば初心者の頃つまづいたなあ」と思い出したのと、今回新発見があったので(タイトル参照)これを機会に記事にしておきます。

要素を画面幅によって表示/非表示させたい時は

「メディアクエリ」を使います。

<p class="pcOnly">この要素はPCでだけ表示されるよ</p>
<p class="spOnly">この要素はSPでだけ表示されるよ</p>

@media only screen and (max-width: 767px) {
  .pcOnly {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  .spOnly {
    display: none;
  }
}

@media only screen ～ というのがメディアクエリです。
これを使うと特定の画面幅だけに作用するcssを書くことができます。
「画面幅が767px以下の時はpcOnlyというクラスがついた要素をdisplay:noneにする」
「画面幅が768px以上の時はspOnlyというクラスがついた要素をdisplay:noneにする」
という制御をしてます。

デモも用意したので、画面幅を変えて見てみてください。

このcssだけ用意しておけば、あとは表示をON/OFFしたいhtml要素にclassをつけるだけ。簡単です。

実はbrタグにもclassがつけられる

最近気づいた(お世話になっているクライアントのエンジニアさんに教えてもらった)のですが、実はclassはbr(改行タグ)にもつけられます。

<p>このテキストは、スマホ幅の時だけ<br class="spOnly">改行されるよ</p>

こうすると、なんとbrタグがスマホ幅の時だけ発動します。
下のデモでぜひお試しください。

盲点。。。。。。。！！！！！

Sass環境ならぜひメディアクエリはmixin化しよう!!!!!

ところで、「@media only screen and (min-width: xxxpx) {」って長くないですか？
only とか and とか、minとmax両方指定したい時にどう区切ればいいんだっけとか、微妙な悩みポイントが多い。
開発中に何度も何度も書かなくちゃいけないことを考えるとちょっとタイムロスが気になります。

「えーとPC幅の時に適応させたいわけだから…最小幅を指定すればよくて…」みたいなのもめんどい

エディタにスニペット機能があれば登録するのもいいのですが、私はSass環境で開発してるのでこんな.scssを使ってます。

$media-narrow: 350px;
$media-spMax: 767px;
$media-tabletMin: $media-spMax + 1;
$media-tabletMax: 1000px;
$media-pc: $media-tabletMax + 1;

@mixin media-narrow {
  @media only screen and (max-width: $media-narrow) {
    @content;
  }
}

@mixin media-sp {
  @media only screen and (max-width: $media-spMax) {
    @content;
  }
}

@mixin media-sptb {
  @media only screen and (max-width: $media-tabletMax) {
    @content;
  }
}

@mixin media-tablet {
  @media only screen and (min-width: $media-tabletMin ) and (max-width: $media-tabletMax) {
    @content;
  }
}

@mixin media-pctb {
  @media only screen and (min-width: $media-tabletMin) {
    @content;
  }
}

@mixin media-pc {
  @media only screen and (min-width: $media-pc ) {
    @content;
  }
}

@mixin media-custom($min:0, $max:10000) {
  @media only screen and (min-width: $min + px) and (max-width: $max + px) {
    @content;
  }
}

@mixin media-ie {
  @media all and (-ms-high-contrast: none) {
    @content;
  }
}

これを最初に定義しておくことで、実際の開発中にこういう書き方ができます。

.selector {
  @include media-pc {
    // ここに書いたcssはpc幅でだけ効く
  }
}

これ、マジでめっっっちゃくちゃ便利なのでぜひ使ってください。
メディアクエリ使う時の「ふう。。。書くかあ。。。」というどんよりした気持ちがいっさいなくなります。超ラクですよ。
一度作っちゃえば使いまわせるので、持っておいて損はありません。

書いたコードを後で見返した時に可読性が高いのもいい！

というわけで、レスポンシブデザインに欠かせないメディアクエリに関するハックでした。
それでは、お互いハッピーweb制作体験を。