WordPressブログはじめてみる?

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

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

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

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

box-sizingとは?

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

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

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

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

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

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

[html]<ul>
<li>①</li>
<li>②</li>
<li>③</li>
<li>④</li>
</ul>[/html]

 

[css] li{
width:23%;
padding:1%;
float:left;
}
[/css]

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)が横幅に加わるようになり、一気にややこしくなります。

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

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

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

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

[css]box-sizing :border-box;[/css] 03-box-sizing

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

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

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

そんなこんなでまとめ

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

シェアしてくれたらうれしー。
ABOUT US
アバター画像
矢野キチ
フリーランスのWEB屋です。このブログでは「自由に生きる」をテーマに生活の中で思ったことをザクザク書いていきます。身体的特徴としては目が細いので、ゴミがあまり目に入らないので人生得しています。

このサイトで使っているWordPressテーマ
「STORK19」

当ブログはWordPressを使用して作られています。そしてデザインテンプレートはSTORK19を使用しています。