【CSS】初心者がレスポンシブ対応で知っておきたいテクニック

liquid Web Design Tips
Web Design Tips
「メディアクエリの設定方法はわかったけど、それ以外が何もわからん!!」 そうです。レスポンシブコーディングはメディアクエリの設定を終わらせてからがスタートです。 「レスポンシブデザイン」と検索すると、メディアクエリの設定までは説明しているサイトが多いですが、それ以降のテクニックについて記載しているサイトは少ないという印象を持っています。 レスポンシブコーディングは初心者の心を折る要素をたくさん持っていると思います。 例:
  • とりあえずpcサイトを作る時と同じ要領でスマホレイアウトを作りはじめたけど、色々なデバイスの画面サイズに合わせようとするとデザイン通りにいかない。
  • コーディング中はメディアクエリごとにセレクタの行が離れていて、どこに何を指定しているかわからなくなる(例:謎のmargin、padding発生)。
  • 特定のwidth幅だとキレイだけど、少し狭める(または広げる)と途端にダサくなる。
などなど。。。 今回の記事では、初心者の方がレスポンシブコーディングを行うにあたり、知っておくべきテクニックを纏めていきたいと思います。

フォントサイズの指定はremで行うと効率的

PCレイアウトのデザインの時は「px」でフォントサイズを入力する事が多いと思います。しかしそれだと、ブレイクポイント毎に数値を指定しなくてはならず、工数が増えてしまいます。 そこで今回はrem(レム)を使った文字サイズの指定方法をご紹介します。

remってこんな単位

html(ルート要素と呼びます)に指定したフォントサイズが「1rem」になります。 こんな感じです。

See the Pen qBWVjwr by YAMAGUCHI (@yamab) on CodePen.

CodePenの見方はこちら ちなみにhtmlやその配下にフォントサイズを指定しない場合は、基本的に1rem=16pxになります。なぜなら、ほとんどのブラウザでデフォルトの文字サイズが16pxに設定されているからです ただし、ユーザーがブラウザの設定を変更している場合はそちらのサイズが優先されます。

単位をremにすると、何が便利なのか

html { @media screen and (max-width:767px){ font-size: 15px; /* widthが767px以下なら1rem=16px */ } @media screen and (min-width:768px) { font-size: 18px;  /* widthが768px以上なら1rem=px */ } }

上記の様に、ブレイクポイント毎にhtmlの文字サイズを指定することで、remで指定しているhtml内の全てのフォントサイズを一括で変更することが出来るのです。 これで何度も同じ数字を入力する作業とはおさらば!

同じ文章だけど、PCとスマホで改行の位置を変えたい

サイトのデザイン的に、パソコン用のレイアウトではここの文章で改行したい。 でもここれで<br>を使っちゃうとスマホで見たときにダサくなっちゃうんだよなぁ・・・。 そんな時は<br>にclass名を付けて、スマホレイアウトの時はdisplay: none;で非表示にすればOKです。

<p>PCレイアウトだけで改行したい時には、この様に<br class=”br_pc”> クラス付きの<br>を使用します。</p>

@media screen and (max-width:767px) /* メディアクエリ widthが767px以下の時のみ下の記述が有効 */ .br_pc { display: none; }

この様に入力するればオーケーです。

レスポンシブコーディングは悩むことがいっぱい

レスポンシブ対応のコーディングって難しいですよね。 流動的なデザインなだけに、実際にコーディングしてから「あれ?!」と焦る場面が多々あります。 本記事では主に初心者の方に向けて、レスポンシブコーディングで役に立つ知識をご紹介しました。 思いつきしだい順次追加していく予定です。 以上、ありがとうございました。