スマホサイトで要素を横並びに並べるときに絶対使うべきCSS3(box-sizing)

こんばんは!最近スマホサイトを持つことが当たり前になってきていますが、みなさまいかがですか?

スマホサイトを構築する際、要素を横並びにしたりする場合があると思うのですが、 なんか意図しない感じで隙間ができてしまう。 横幅ピッタリで4個要素を入れたい! なんていう場合が想定出来ると思います。

そんな時に便利なCSS「box-sizing」についてご紹介したいとおもいます。

box-sizingとは?

box-sizingはボックスサイズの算定方法を指定できるCSS3のプロパティです。比較的新しい要素ですね。

  • content-box パディングとボーダーを幅と高さに含めない(初期値)
  • border-box パディングとボーダーを幅と高さに含める
  • inherit 親要素の値を継承する

例えばどんな感じでつかうか?

具体的にどういうことかというと、 例えば

  • リストタグを横に4つ並べたい
  • 横幅ピッタリにしたい
  • 余白を少し加えたい(1%ほど)

この条件の場合通常だとどのように書くかというと

<ul>
<li>①</li>
<li>②</li>
<li>③</li>
<li>④</li>
</ul>

 

li{
     width:23%;
     padding:1%;
     float:left;
}

01-box-sizing

(CSSの細かい指定は今回省きます。) と書くかと思います。width:23%;、padding:1%;この2つの部分がポイントで、本当は横幅25%で指定したいのですが、余白もつけたいので余白のpadding分を差し引いてwidthを23%とします。 23% + 1% + 1% = 25% これで合計25%となり、うまく横に4つ並べることができます。 まあこの書き方だったら全然問題ないのですが・・・ こうなるとどうでしょう?

boaderをつける

上記要素に1pxのboaderを付けたいとします。 するとboaderの1px(左右で2px)が横幅に加わるようになり、一気にややこしくなります。

li{
     width:23%;
     padding:1%;
     float:left;
     border:1px solid #ddd;
}
02-box-sizing

25% + 2px !! こうなると横のサイズが25%よりも大きくなってしまうので、横に4つ並べることができなくなってしまいます。

そんな時に便利なのがbox-sizing

冒頭でも話したとおり、box-sizingは要素のサイズ構成を指定する要素。具体的にはどのようなことが出来るかというと、

box-sizing :border-box;
03-box-sizing

border-boxを記述することによって、パディングとボーダーを幅と高さに含めることができるようになります! ですので具体的にコードを書くと

li{
     width:25%;
     padding:1%;
     float:left;
     border:1px solid #ddd;
     box-sizing :border-box;
}
04-box-sizing

こんな感じ!boaderの太さを10pxにしようと横に4つ並べることが出来るようになります。

そんなこんなでまとめ

足早にみていきましたが、box-sizing、CSS3の要素となるのですべてのブラウザで使うことはできませんが、スマホサイトなら積極的に使っていけると思いますので、知らなかった方はぜひお試し下さい。

SPONSORLINK

\インスタグラムでワンダーデバイス生活の写真を公開中!/

シェアしてくれたらうれしー。

ABOUTこの記事をかいた人

矢野キチ

フリーランスのWEB屋です。このブログでは「自由に生きる」をテーマに生活の中で思ったことをザクザク書いていきます。身体的特徴としては目が細いので、ゴミがあまり目に入らないので人生得しています。