横幅を指定する

要素の横幅を指定するために、汎用クラスを用意しています。
クラス名は「wXX」で、あらかじめ以下のように設定しています。
（※XXには数字が入ります）

.w05{ width: 5%; }
.w10{ width: 10%; }
.w15{ width: 15%; }
.w20{ width: 20%; }
.w25{ width: 25%; }
.w30{ width: 30%; }
.w35{ width: 35%; }
.w40{ width: 40%; }
.w45{ width: 45%; }
.w50{ width: 50%; }
.w55{ width: 55%; }
.w60{ width: 60%; }
.w65{ width: 65%; }
.w70{ width: 70%; }
.w75{ width: 75%; }
.w80{ width: 80%; }
.w85{ width: 85%; }
.w90{ width: 90%; }
.w95{ width: 95%; }
.w100{ width: 100%; }

.w05{ width: 5%; }

.w10{ width: 10%; }

.w15{ width: 15%; }

.w20{ width: 20%; }

.w25{ width: 25%; }

.w30{ width: 30%; }

.w35{ width: 35%; }

.w40{ width: 40%; }

.w45{ width: 45%; }

.w50{ width: 50%; }

.w55{ width: 55%; }

.w60{ width: 60%; }

.w65{ width: 65%; }

.w70{ width: 70%; }

.w75{ width: 75%; }

.w80{ width: 80%; }

.w85{ width: 85%; }

.w90{ width: 90%; }

.w95{ width: 95%; }

.w100{ width: 100%; }

このCSSは、たとえば、テーブルの幅をある程度決めたい場合や、ふたつ横並びにしたボックスの幅を調整する場合などに便利です。

以下は「float」を使って横並びにしたボックスのサイズを調整したものです。

左のボックスのサイズを30％にしています。

真ん中のボックスのサイズを40％にしています。

右のボックスのサイズを30％にしています。

<div class="show-sample">
<div class="clearfix">
<div class="left m0 p10 bdr_pink w30">左のボックスのサイズを30％にしています。</div>
<div class="left m0 p10 bdr_lime w40">真ん中のボックスのサイズを40％にしています。</div>
<div class="right m0 p10 bdr_aqua w30">右のボックスのサイズを30％にしています。</div>
</div>