概要
CSSプロパティ｢width｣は、ブロックレベル要素や置換要素（<img>, <input>, <textarea>, <select>など）の領域の横幅を指定することができます。また高さを指定するプロパティに height があります。
<div class="width">この要素の幅に300pxを指定</div>
<style>
.width {
background-color: #ffc0cb;
width: 300px;
}
</style>値の指定方法
{ width: キーワード, 値, パーセント }実数値 + 以下のような単位で指定します。マイナス値は指定できませんので、注意しましょう。
| 値 | 説明 |
|---|---|
| auto | 初期値です。横いっぱいに広がります |
| 値 | px, em, %で指定。マイナス値は指定できません。 |
値の単位の詳細は以下の通りです。
| 単位 | 説明 |
|---|---|
| px | pxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。 |
| em | 親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。 |
| % | 親要素の幅を基準に割合を％値で指定した単位です。 |
実装における注意点
インライン要素への指定
このプロパティはインライン要素扱いのタグには指定することができません。例えば <a>タグや<span>タグなどが挙げられます。またはブロック要素扱いのタグでもCSSプロパティ display の値、｢inline｣を指定されている場合も同様です。では実際に指定するとどうなるか確認してみましょう。
<a href="#" class="width">この要素の幅に300pxを指定<br>
<span class="width">この要素の幅に300pxを指定</span>
<style>
.width {
background-color: #ffc0cb;
width: 300px;
}
</style>やはり指定しても、期待する表示にはなりませんでした。しかしこういったインライン要素扱いのタグにも幅を指定したいケースも考えられます。その場合は、先述したプロパテイ display の値｢block｣や｢inline-block｣ を指定することで、要素がブロック要素扱いとなるため、指定が可能になります。ではその例です。
<a href="#" class="width">この要素の幅に300pxを指定<br>
<span class="width">この要素の幅に300pxを指定</span>
<style>
.width {
background-color: #ffc0cb;
width: 300px;
display: block;
}
</style>使用例
クリックすると動きのでる横棒グラフを作成します。このアニメーションはCSSプロパティ transition を使います。そして、ボタンのクリック後の値に、任意の幅を指定することで実現することができます。
<div class="width"></div>
<button>クリックするとバーがのびます</button>
<ul>
<li class="width-20"></li>
<li class="width-50"></li>
<li class="width-100"></li>
</ul>
<style>
* {
padding: 0;
margin: 0;
}
button {
padding: 10px;
margin-bottom: 10px;
}
li {
background-color: #ffc0cb;
list-style: none;
margin-bottom: 5px;
height: 40px;
width: 5px;
}
button:active + ul li,
button:focus + ul li {
transition: 1s;
}
/* クリックされたときのwidthの値を指定 */
button:active + ul .width-20,
button:focus + ul .width-20 {
width: 20%;
}
button:active + ul .width-50,
button:focus + ul .width-50 {
width: 50%;
}
button:active + ul .width-100,
button:focus + ul .width-100 {
width: 100%;
}
</style>