デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅

modern.IEでは仮想PCを使用したIEの表示テストツールが提供されてます。これを使用するとWindows以外のOSでも複数バージョンのIEのテストが行えます。 追記：modern.IEの日本語版ページが開設されました。 ホーム | Internet Explorer の検証がより簡単に | modern.IE はじめに modern.IEのVirtual toolsページではIEのテストツールが提供されてます。 「Local virtualization」では各OS、各仮想化ソフトウェア用のWindows&IEファイルが用意されてます。OSはWindows、Mac、Linux、仮想化ソフトウェアはVirtualBox、VMWare Fusion、Parallels、Virtual PCなどに対応しています。 ここではMacでVirtualBoxを使用してIEを起動させる方法を紹介しま

tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ