- とりあえずpcサイトを作る時と同じ要領でスマホレイアウトを作りはじめたけど、色々なデバイスの画面サイズに合わせようとするとデザイン通りにいかない。
- コーディング中はメディアクエリごとにセレクタの行が離れていて、どこに何を指定しているかわからなくなる（例：謎のmargin、padding発生）。
- 特定のwidth幅だとキレイだけど、少し狭める（または広げる）と途端にダサくなる。
Contents
フォントサイズの指定は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; }
この様に入力するればオーケーです。