レスポンシブコーディングで早めに知っておきたい便利な小技まとめ

コーディングを始めたての頃は、レスポンシブでかなり苦戦すると思います。僕がWeb制作をやりはじめたころは、まだレスポンシブはそこまで一般的というわけでもなく、同じく苦戦しました。

ただ、今はレスポンシブじゃないほうがおかしいというほどレスポンシブが当たり前の時代になっていて、それまで苦戦していたことが今では楽に実装できるようになっています。

この記事では、僕がレスポンシブの際、もっと早くこの技術を使うことができていれば…と思った小技たちを紹介していきます。

picture要素

picture要素とは、HTML5.1から追加されたタグの一つで、これを使うと画面の横幅に合わせ、画像の切り替えができるようになります。

以下のように書きます

オリジナルのimgをpictureタグで囲み、”source”要素でそれぞれの横幅に合わせた画像を指定。これだけで、各横幅に最適化された画像を自動で切り替えることができます。

今までは、imgを複数並べてclass=”sp”,class=”pc”とかつけて、cssでdisplayで切り替えて…とかめんどいことをやってましたが、これならhtml書くだけで済むので楽ですよね。

srcset

上記pictureを使用するのは、基本的に画面幅で画像そのものが切り替わる（縦横比が違ったりする）場合のみに推奨されています。

ただ単に、デバイスによって表示させる画像のサイズのみを切り替えたい場合、img要素にsrcsetを使うことで対応します。

picture要素、ぜひ覚えておきましょう。IE11では使えないことになってますが、スマホにIEはないので全く問題ないです。（未対応ブラウザではimg srcのみが表示される）

単位”vw”

cssで使う数値の単位として、px、%、em等いろいろありますが、その中でもレスポンシブのときとびきり便利なのがこの”vw”。

こいつはどういう単位かというと、

ということで、ウィンドウ幅に合わせて可変する単位です。

ほんなら%でよくない？と思われるかもしれませんが、まぁ聞いてください。まず、%だと「親要素の幅」に依存します。そして、だいたいはwidthであれば親要素のwidth、heightであれば親要素のheightに依存しますよね。

しかし、vwの場合は「ウィンドウ幅」なのです！ウィンドウ幅の言うことしか聞きません。（ウィンドウの高さに依存したい場合は、vhを使いますが、こっちはあまり使いません）

更にいうならこのvwの便利なところは、縦方向の指定とフォントサイズにあるのです。

縦方向の指定

いや横幅ちゃうんかい！

そう思われても無理はありません。しかしこのvw、縦方向の指定に真価を発揮するのです。

例えば、特定の要素にbackgroudを指定して、横：縦が4:3の比率を保ったままレスポンシブに対応させたい場合、今まではこんなめんどくさいことをしていました。

「heightを0にして、padding-topで横幅に対する比率を記述する」

めんどくさっ！しかもこれ、実質縦幅がゼロなので、この中に何か要素入れたいときはabsolute配置しなきゃいけないという…めんどくさっ！！

しかしvwを使えばこの通り。

要素の横幅は画面幅の100%だとすれば、縦幅は画面幅の75%、つまり75vwということになります。これであれば縦幅もちゃんとありますので、普通に使える。神だなー。

これを知らない時代は相当大変でした。しかもvwを知った当時、なぜかvwの使用は推奨されていませんでした。なんでかはわかりません。

これはiframeとかにも使えますので、Google Mapの表示調整にも便利。

フォントサイズ

例えば以下のように、画像の上にテキストを乗っけるパターン。

これを「縦横比そのまま、テキストの配置もサイズもそのままでレスポンシブ対応」って言われたらどうしますか？各画面幅に合わせて細かくメディアクエリを分けて調整します？「１枚の画像にしろや！」ってなりますよね。

しかしフォントサイズにvwを使えば、画面幅に依存するので、割と簡単に実装できます。

まぁそれでも「画像にしろや！」とはなりますけどね。いいじゃんこんなん画像で。偉い人はやたらテキストにしたがるんです。

注意点として、vwを使ったとことろで各ブラウザごとの最小フォントサイズ制限には逆らえないので、もしフォントサイズが小さすぎる場合は、そこは技術的に厳しいですと言ってあげましょう。

transform: scale(); を使えば…いや、聞かなかったことにしましょう。できないんです。いいね？

@media only screen and (min-width: )

レスポンシブというと、

と「ある横幅以下なら」という記述ばかり使いがちですが、その逆、「ある横幅以上なら」を記述する

もめっちゃ便利なんです。つい忘れがちですけどね。

例えば、以下のような場合によく使います。

• hoverのとき。スマホではhoverは使わない。むしろ使うとSafariでバグることがあるし。
• PCでは電話番号のリンクを無効にしたいとき。
• モバイルファーストのとき。
• PCの場合は３列並びの３つ目だけmargin-rightをなくしたい(:nth-childを使う)が、スマホの場合は２列なので３列目のmargin-rightをなくしたのを打ち消した上で２列目のmargin-rightをなくしたいとき

基本的に、max-widthばっかり使うと「PC用に書いたCSSを上書きしなきゃいけない」わけですが、min-widthもちゃんと使ってやれば、切り替えがよりスムーズになります。

おわり

いやー便利になりましたよね。難しいと思われていたレスポンシブコーディングも、今や当たり前の技術なわけで。

技術はどんどん新しく便利になっていってますので、できるだけ新しい技術を学んでいきたいところ。ネットでググるだけの独学でコーディングをやっていると、けっこう古い記事を参考にしちゃうことがよくあります。

僕も古い技術に縛られたおじさんの一人なので、新しい技術を吸収しようとがんばってる毎日です。まだまだ思いついたものがあればどんどん書き足していきますので、こんなんも紹介してくださいってのがあったら教えてくださいね！

ではでは、良いコーディングライフを。