web録web録HOMEweb録PCハード・ソフトBlogブログ運営・WordPressmemoただのメモcssのremを使うとメディアクエリがすごく簡単になることが判明2019.6.13この記事では、cssのremを使ってフォントサイズや、マージン、パディングをまとめて切り替えるテクニックを紹介します。このサイトでもPCサイズとスマホサイズを切替えるときに使っているテクニックです。LESSなどを使わずにcssをすっきりとさせることができます。ウェブの上級者の方には大したことないテクニックですが、私のような初心者の方にはおすすめです。remremを使ったがなぜかレスポンシブしないちゃんとレスポンシブするようにcssを修正remをさらに合理的に使うまとめ個別にサイズ指定するのは大変さて、このサイトではPCとスマホで表示サイズを変えるため、550pxをブレイクポイントにしてフォントサイズや要素間のマージン・パディングをメディアクエリで切替えています。あなたがPCで閲覧しているのであれば、ブラウザの幅を変えて文字サイズやマージンが切り替わる様子を確認してみてください。最初にこのサイトのcssを作った時、私はpc用とスマホ用それぞれに対して、各要素のフォントサイズやマージンなどを設定していました。イメージでいうとこんな感じ(下図)。550px超と、550px以下の場合でそれぞれ値を個別に設定し、メディアクエリに切替える方法です。サイトをレスポンシブにする場合に一番最初に思いつく方法ですね。これでもちゃんとレスポンシブになるから機能的には問題ありませんでした。この方法はpc用とスマホ用にそれぞれ値を設定しなければならないので、めちゃくちゃめんどくさいです。要素の数が少ないうちはいいのですが、要素が増えてくるとcssがとてもごちゃごちゃして分かりにくくなります。「やっぱり全体的に値を変えたいな」という場合には、値を一個一個直していく必要があり、メンテナンス性も悪いです。作業中にミスも起きやすいです。そこで、レスポンシブでサイズを一括変更するのにもう少し良い方法はないものかと調べた結果、いくつか方法があることを知りました。サイズをまとめて変える方法3つcssでサイズをまとめて変更する方法は大きく分けて3つです。1.LESSなどはじめに目にとまったのがこの方法。LESSなどのcssプリプロセッサを使えば、変数を使って値を制御できます。(ウェブの上級者の方は当たり前のように使っているでしょうが、、、)「これだよー、これこれ。」そうはじめは思ったのですが、よく考えたら私には他に勉強中のプログラム言語が他にもたくさんあります(php、javascript、jQueryなど)。これ以上新しい文法を覚えるのは正直ツライ。いうことで、いったんこの方法はパスしました。私に時間と気持ちに余裕が出てきたらLESSにチャレンジしたいと思っています。css変数さらにググっているうちにcss変数とよばれるものがあると知りました。cssには変数を使う能力がもともと備わっているらしい。「なんだ、あるじゃん。何でもっと早く言ってくれないのよ。」と、css変数を使ってこのサイトのcssを全部書き直しました。その結果、ちゃんと狙った通りに表示されるし、レスポンシブの切替えもばっちり機能しました、、、IE以外はね。残念なことにIEでサイトを表示すると、css変数を使った箇所は全て表示が崩れてぐちゃぐちゃな状態。IEはcss変数に対応していないとその時に知りました。このサイトの訪問者割合はIEが10%ぐらい。割合としては少ないので、IEを切り捨てる覚悟でしばらく運用していましたが、やっぱり気持ち悪いです。このサイトに来てくれたIEユーザーに、残念な状態のサイトを見せてがっかりされたくないなと。remそしてようやくたどり着いたのが、この記事のタイトルにもあるremを使う方法です。remのもともとの用途はドキュメントのルート、つまりhtmlタグそのもののフォントサイズを定義する単位です。16pxと定義すればそのhtml文書のフォントサイズは16pxが基準となります。h1の見出しなどで、フォントサイズを倍の32pxにしたい場合には、h1タグのフォントサイズを2remと指定します。このように、remを使うとルートで決めた定義に対する相対値としてフォントサイズの指定ができるようになります。remの便利なところは、フォントサイズだけではなく、各種要素のサイズ指定にも使えるという点です。p要素のマージンを32pxにしたい場合にはp{padding:2rem;}と指定すればよいわけです。このremの特性を応用すれば、ルート要素のrem定義をメディアクエリで書き換えることで、remを使ってサイズを指定しているすべての要素にまとめてその新しい定義が反映されるということになります。これは便利な匂いがプンプンしますね。実際に私がremを使ってサイズの一括変更を試みたところ、少しコツが必要だとわかりました。remでハマりそうな注意点とうまく使うためのコツを私の体験談を交えて以下で説明します。10pxにすると直感的にわかりやすいと書いてあります。「なるほど確かにそのとおりだ」と思い、以下のようなcssにしてみました。5pxと再定義しています。することで、PC用(550px超)にマージンとパディングを指定すれば、スマホ用(550以下)は半分のサイズに勝手に再計算されるはずです。このcssをchromeで試しても「レスポンシブしない」のです。PCサイズでは意図通りのサイズで表示されますが、550px以下にしてもメディアクエリが全く効かず、サイズが変わらないのです。仕様に沿っているはずなのになぜ!?いろいろググってみてもなかなかそれらしい情報が見つかりません。5pxとした定義箇所が無効扱いになっていました。~!?煮詰まった私は、やけくそで上記のcssの値をいろいろ変えてみました。するとなぜかときどきメディアクエリが機能することがあります。「およ!?」何か条件があるのかな?いろいろパターンを変えて模索していった結果、1remの大きさは10px以上でないとChromeが値を無効としてしまうようでした。remはそもそも文字サイズの指定に使うものですから、Chromeはユーザビリティを重視して1remが10px未満の場合は無視するようです。賢い!(けどそういう独自処理をされると、私のような初心者には原因解明が困難になるのでツライ面もあります。)ちゃんとレスポンシブするようにcssを修正レスポンシブしない原因が分かったので、cssを以下のように修整しました。50pxのように、1remの値を最初のcssの10倍の値にしたことです。することで、Chromeの「1remは10px以上」という条件もクリアできます。いざChromeで動作をチェックすると、今度はちゃんと狙った通りにレスポンシブしました。念のため他のブラウザでもチェックします。FirefoxもOK!EdgeもOK!問題児のIEは、、、OK!いずれのブラウザも意図通りにレスポンシブしました。よし、remが使いこなせるようになった。これでマージンやパディングをPCとスマホでわざわざ指定し直す必要がなくなります!remをさらに合理的に使うようやくremが使いこなせるようになったので、今度はcssをもっと合理的に整理していきます。前述のcssは、マージンやパディングはメディアクエリで値を再指定する必要がなくなり、かなりスマートです。フォントサイズはPCとスマホで個別に値を設定していてあまり美しくありません。そこでフォントサイズもスマートに切替えられるようにします。フォントサイズの箇所を書き直したのが下のcssです。}}太字の部分、メディアクエリでfont-sizeの指定にcalcを使っているところがポイントです。50)を掛けることで、いったん元のフォントサイズ(16px)に戻します。その後に小さく表示したい割合(0.9)を掛けてることでフォントサイズを14pxにしています。h1のフォントサイズも同じ考え方で指定しています。このようにフォントサイズを指定するのは、一見まわりくどく見えます。後々cssを見たときに「これはスマホではPC用のフォントサイズの0.9掛けにしたいんだな」という設定意図を把握しやすい利点があります。フォントサイズを指定する要素が増えてきても、とりあえず元の値の0.9掛けを指定しておけば、文字サイズのバランスを保ったまま全体的に縮小することができます。一つ、このcssで強調したいポイントは、メディアクエリ内ではmarginやpaddingを一切指定する必要がないことです。50pxと再定義しているので、マージンやパディングはその再定義を元に自動計算されてサイズがPCの時の半分になるというわけです。スマホ用にマージンやパディングを指定し直す必要がありません。まとめこのサイトは、上記で説明した方法でcssを構築したおかげで、PC/スマホのレスポンシブ対応をかなり簡潔にすることができました。ほかにも使い方次第でいろいろ応用できると思います。ご自身でサイトやブログを作られている方は一度お試しください。読み返したらすごくダラダラの文章でした、、、ごめんなさい。このテクニックは本当に使えますよ。記事カテゴリー:Blog更新日:2019.6.13公開日:2019.3.10TwitterFacebookB!HatenaPocket↑よかったらシェアお願いします。関連する記事このあたりの記事が関連しそうです。(2TB)をレビューします!よく読まれている記事ASUSノートPCのメモリを4GB⇒8GBに増設してみた。RecodeでMOVからmp4へ変換する時のおすすめ設定5パターン100円で作るシンプルなノートPCスタンドWACOMのペンタブのカーソル位置がずれる。