« Glyphicons | Home | Responsive Navbar »

Responsive Web

Windows, Android, iPhoneなどの端末の仕様に対応するようにWebページを設計することをレスポンシブ・ウェブ・デザインという。MTテンプレートでは、これを実現するのは困難である。ページレイアウトで横幅が固定されたテンプレートが標準になっているからである。MT6テンプレート数が最小のPicoテーマをベースに改変を試みたが、上手くいかない。

container > container-inner > content > content-inner > alpha > alpha-inner > ・・・と深い階層構造になっており、margin, padding, borderがやたらにあり、inputの横幅が203pxに固定されていたりして、レイアウトを調整するのが非常に厄介である。このため、Windowsでレイアウトが整えられたと思っても、スマホでは乱れるということになる。

MT標準テンプレートでは実際の横幅調整が厄介

CSS3には、box-sizing:border-box という属性がある。これを上手く使うことを知らなかったためもあって、横幅の調整が難航した。たとえば横幅940pxの二段組にしたとき、左に記事を配置(この領域のIDをalpha)、右側にサイドバー(id="beta")を配置するレイアウトを考える。alphaの幅を720px, betaの幅を220pxにすれば、ちょうど親ボックスの幅940pxに一致する。

ところが標準テンプレートでは、container-inner, content-inner, alpha-innerというのがあって、marginとpaddingが設定されている。alphaとbetaの間に隙間をつくって見やすくしたり、本文やサイドバーのリストをインデントしたりするわけだ。じつはこれが曲者だ。

width + margin + padding が実際の横幅になる

たとえば、alphaとbetaの間に20pxの隙間を作るために、betaにmargin-left:20px; と指定する。すると、betaの横幅は220pxではなく、このマージン分を足した240pxになる。1024pxとか1280pxのパソコン画面では問題にならなくても、スマホではwidth=device-width, scale=1で表示させると右側に20px分だけはみでて見えなくなる。

試行錯誤であれこれ値を替えて調整するのがたいへんで、どうしてピタッと横幅が揃わないのかと納得がいかなかった。beta { width:220px; margin-left:20px;} ではなく、beta { width:200px; margin-left:20px; }と書かないといけない。ボックスの内側ののり代だと思っていたpaddingを使っても同じだった。このことに気がつくまでずいぶんと試行したものだ。

box-sizing:border-boxを指定するとwidthが実際の横幅になる

説明が長くなったが、それほど苦労したということだ。これがCSS3で、box-sizing:border-boxを使えば、marginやpaddingを設定しても、横幅は220pxになる。つまり、marginやpaddingの値は220pxの領域の中に確保されるというわけだ。box-sizingを指定しないときのデフォールトは、content-box になり横幅はwidth+margin+paddingになる。

幅400px マージン0 パディング0
padding-left:20px;border:5px;box-sizing:content-box
padding-left:20px;border:5px;box-sizing:border-box