レスポンシブでも使える！「clearfix」と「box-sizing」style.cssやcommon.css、reset.cssやnormalize.cssなどに追加したい初期設定

最近はレスポンシブデザインについて書いていましたね！！









今回はそんなレスポンシブデザインでも役立つ初期設定をご紹介します。

style.cssやcommon.css、reset.cssなどに追加したい初期設定

皆さんはreset.ssなどは使ってますか？
私は昔教えられてから、ずっと使っています・・・。
もう慣れてしまってこれが一番楽だからですが、今はnormalize.cssのほうが主流でしょうか。
渡しの場合はreset.cssとはいっても中身はnormalize.cssと似たような感じでカスタマイズしてしまっていて、流用しています。

reset.cssとは

それぞれのブラウザによってあらかじめ決められたデザインが違うので、それをリセットして全てを同じデザインに一掃するためのファイルかと思います。
ブラウザの差異をなくす、といった感じでしょうか。

normalize.cssとは

使えるスタイルは残して、一部のみリセットする、というファイルとなります。
デザインの補正、のような感じでしょうか。

共通の設定はそれぞれ

やり方はもちろんやりやすいものを使うのが一番ですが…全ページ共通で使っているファイルがもしありましたら、今回ご紹介する設定をぜひお試しください！
今回は個人的にわかりやすくこれらの設定を「初期設定」と表現します。全てに共通で使う最初に指示する設定、のような意味合いで使っています。

今回おすすめする初期設定「clearfix」「box-sizing」

初期設定として私は「clearfix」と「box-sizing」を指定しています！
今回はこれらがどういった設定か、どんなメリットがあるかをご紹介します。

float問題を解決する！？「clearfix」一例

新人が必ず躓くポイントではないでしょうか？
floatをかけると、親要素をはみ出てしまったり、要素が重なってしまったり、位置がずれたりなど、思わぬ表示がされてしまいます。
いわゆるカラム落ちというやつですかね。。。


それらをclearfixは解決してくれるのです！！

指定方法

.cf:after {
  content: "";
  clear: both;
  display: block;
}

調べるとclearfixの指定方法はたくさん出てきますが、私はこんな感じで使っています。
クラス名は「.cf」と短縮しています。
子要素にfloatをかけたら、それを囲っている親要素に指定しましょう。

例えばこんな感じです。

<div class="cf">
  <div style="float:left; width:50%;">
  </div>
  <div style="float:right; width:50%;">
  </div>
</div>

このようにfloatで左と右にそろえている要素があるとします。
これらの要素を囲うように親要素に「cf」というclearfixのclassを追加します。

使いづらい？floatのカラム落ち問題を解決する

floatはよく躓く問題ですが、使いこなせると本当に便利です。
カラム落ちしたり要素がはみ出たりなどありがちなfloatの問題を解決してくれるのがclearfixです。
これが使えれば安心です。

flex-boxはとっても便利…でもfloatも使いどころはある

flex-boxも出始め、こちらもとても便利ではありますが、対応端末が最新でなくてはいけないことが少しネックです。
あとは凝ったことをしようとすると計算した大きさや余白ではうまく並べられなかったり、displayプロパティなのでdisplay:noneをうまく併用できなかったりもあります。。。使い方しだいですが。。


理想の動きを実現するためには必ずしも「flex-boxが良い」「floatが良い」とは言い切れない時があります。
ですので、理想の動きを反映させるためにはfloatを使えるに越したことはありません！ぜひ挑戦してみてくださいね。

width内にpaddingやborderを含める！「box-sizing」一例

これは、知ったとき画期的すぎて泣けました。
いままで・・・それこそピクセル指定が当たり前だったころ（いつまでだったか知らないけど知識がなかったころ）、borderやpaddingが入ることを想定して、横幅や縦幅を計算していました。
指定したwidthに追加して、borderやpaddingが入ってきてwidthが膨らんでいくんですよね・・・。想定以上のwidthの値になってしまうことも多々。

レスポンシブ等の%指定では正直使い物にならなかったのに…

それに何より！
横幅を％指定したいときに、width:100%、border：5pxなんて指定してしまっては・・・
100％＋10px（borderは左右で5pxずつなので10px）となってしまい、要素がはみ出してしまいます。


計算もしなきゃいけないし、何よりパーセント指定が定番のレスポンシブには向いていないなあと思っていました。




それが、なんということでしょう！
この指示たった１つで、borderやpaddingをピクセル指定しても、全て横幅（width）の中に収まってくれるじゃありませんか！！


それがこちらです。

指定方法

* {
  -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 }

クラス指定ではなく「*」プロパティを利用しているので、全ての要素にbox-sizingが反映されます。
この楽さを知ってしまったらもう以前のようには戻れません。。。。


ぜひお試しくださいね。