SAPICORU備忘録

スマホサイトの需要が近年伸びてきて、今はアクセス解析すると大半がスマホからのアクセスだったりします。
いまや50-60％はどのサイトもスマホやらの閲覧だと実感しています。
なのでPCサイトの制作依頼が来たときはスマホサイトの制作の重要性についてお話しています。

スマホサイト制作はPCサイトをレスポンシブ化することが多く、数値がpx指定から％指定になることが多いです。
なので％は全部あわせて100％なのにborderが1pxあってオーバーしちゃう…なんて困ったときに頼れるのがpaddingやborderなどの内側の要素を含めて計算してくれるCSS「box-sizing」です。

box-sizing: border-box;

これを要素に入れるだけでpaddingとborderを幅と高さに含んでくれます。

値

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

初期値・適用対象・値の継承

初期値：content-box
適用対象：幅、または、高さを持つすべての要素
値の継承：しない

サンプル

ちなみにこちらの画像並びのリスト。CSSとHTMLはこんな風になっています。

HTML

<ul id=”clinic_photo”>
<li><a href=”01shomen.jpg” tit=”外観”><img src=”photo01.jpg”><br>外観</a></li>
<li><a href=”02ukestuke.jpg” tit=”受付”><img src=”photo02.jpg”><br>受付</a></li>
<li><a href=”03machiai01.jpg” tit=”待合室”><img src=”photo03.jpg”><br>待合室</a></li>
<li><a href=”04machiai02.jpg” tit=”待合室”><img src=”photo04.jpg”><br>待合室</a></li>
<li><a href=”05shisastu01.jpg” tit=”第１診察室”><img src=”photo05.jpg”><br>第１診察室</a></li>
<li><a href=”06shinsatsu02.jpg” tit=”第２診察室”><img src=”photo06.jpg”><br>第２診察室</a></li>
<li><a href=”07kensashochi.jpg” tit=”検査・処置室”><img src=”photo07.jpg”><br>検査・処置室</a></li>
<li><a href=”08shujutsu.jpg” tit=”手術室”><img src=”photo08.jpg”><br>手術室</a></li>
<li><a href=”09nyuin.jpg” tit=”入院施設”><img src=”photo09.jpg”><br>入院施設</a></li>
</ul>

CSS

#clinic_photo li {
padding: 2%;
border: 1px solid #ccc;
width: 48%;
display:inline-block;
margin: 1%;
box-sizing: border-box;
}

50％で横並びさせたいと思って設定しています。赤字のpaddingとborderを数値として考えなくていいので横幅48％＋margin(1％+1％)=50%で計算上も非常に楽です。