【CSS入門】要素の横幅を指定するには？widthプロパティを基礎から解説

「CSSで横幅の指定方法が分からない」「横幅が思い通りのレイアウトにならない」

そんな悩みはありませんか？

CSSを勉強し始めたばかりだと、いろんなプロパティを覚えなくてはいけなくて大変ですよね。

今回は、CSSを使って要素の横幅を設定する方法を覚えたい、という方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSのwidthプロパティを用いて横幅を指定する方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

横幅を決めるwidthプロパティとは？

CSSで要素の横幅を設定するには、widthプロパティを使用します。

要素というのはHTMLでタグで囲まれた部分を指します。

以下のタグで囲まれた部分はp要素といい、テキストの段落で、まとまった1つの文章であることを示します。

<p>widthプロパティで要素の横幅を指定します。</p>

この要素の横幅を指定するには、CSSでは以下のように記述します。

p {
  width: 150px;
}

これで、先ほどのp要素の横幅を150pxに指定することができました。

pxは単位です。単位については詳しく後述します。

インライン要素では指定できない

要素には、インライン要素とブロックレベル要素があります。

インライン要素では、横幅の指定ができません。要素の中身の幅が自動的に要素の横幅になります。

同時に高さを示すheightも指定できないので、覚えておきましょう。

p要素はブロックレベル要素なので、横幅や高さの指定が可能です。

インライン要素の場合、displayプロパティに、「block」または「inline-block」を指定することで、横幅と高さの指定ができるようになります。

インライン要素のspan要素を例にして書いてみますね。

<span>ブロックレベル要素にして横幅と高さを指定</span>

CSSで「display: block」を指定します。

span {
  display: block;
  width: 200px;
}

これで横幅を自由に指定できるようになりました。

widthプロパティの値について

widthプロパティの値には複数の指定方法があります。

ここでは、以下の5つの値について解説します。

それぞれ見ていきましょう。

auto

autoは初期値です。何も指定していない場合には、この値と同じ挙動をします。

「display:block」の場合、基本的には親要素の横幅いっぱいに要素が広がります。

「display:inline-block」で何も横幅を指定していない場合（初期値）には、要素の中身によって横幅が決まります。

親要素の横幅いっぱいにするには、「width:100%」にする必要があります。

px

pxはピクセルといい、スクリーン上の単位です。

画像ファイルのプロパティで「847×595」というような表示を見たことがあるかと思います。

これもpxの単位で書かれています。

横幅のサイズは、親要素の横幅より小さく指定しましょう。そうしないと親要素から飛び出て、レイアウトが崩れてしまいます。

%

100%、80%というように指定をします。

これは親要素の横幅に対しての比率です。

<div class="parent">
  <p>親要素の比率で決まります。</p>
</div>

CSSは以下のように記述します。

.parent {
  width: 250px;
  height: 250px;
  background: skyblue;
}
.parent p {
  width: 40%;
  height: 200px;
  background: #ccc;
}

上記のように親要素のサイズが250pxで、子要素が40%の場合、子要素のサイズは100pxになります。

また、「float: left」を使うと要素を左寄せにし、2つ目の要素を回り込みさせることができます。

子要素の比率を確認してみてください。

<div class="parent">
<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>
</div>

CSSは以下のように記述します。

.parent {
  width: 500px;
  height: 500px;
  background: skyblue;
}
.box1 {
  float: left;
  width: 50%;
  height: 500px;
  background: green;
}
.box2 {
  float: left;
  width: 30%;
  height: 500px;
  background: yellow;
}

親要素の中に2つの要素が並んで表示されます。

親要素の横幅を変化させると、それに応じて子要素のサイズも変わります。

ぜひ試してみてくださいね。

vw

vwは、画面のサイズに対しての横幅を指定する単位です。

100vwとすることで、画面いっぱいの表示になります。

<div class="sample">画面サイズにより横幅が変わります。</div>

CSSは以下のように記述します。

.sample {
  width: 100vw;
  height: 200px;
  background: #ccc;
}

100%との違いは、親要素の幅に関係なく画面いっぱいのサイズになることです。

vwは画面のサイズを基準としており、%は親要素の幅を基準とします。区別して覚えておきましょう。

calc()で計算

calc()関数は、CSS内で四則演算ができる関数です。

要素の横幅もこの関数で指定することができます。

<div class="sample">要素の幅を四則演算で求められる。</div>

CSSは以下のように記述します。

.sample {
  width: calc(100vw - 50px);
  height: 200px;
  background: #ccc;
}

計算式には、上記のように単位が異なるものを合わせることもできます。

画面いっぱいのサイズから20px引いた大きさで要素が表示されます。

min-widthとmax-widthについて

ここまで、widthプロパティについて紹介してきました。

要素の横幅を指定するCSSプロパティには、この他に「min-width」と「max-width」が存在します。

これらは、横幅の最小値と最大値を指定するプロパティです。

例えば、以下のように記述します。

.sample {
  width: 100%;
  max-width: 1000px;
  background: #ccc;
}

横幅は100%を指定していますが、最大値を1000pxにすることで横幅のサイズに上限を設けています。

これにより、スマホでは画面いっぱいの横幅に、PCモニターなど画面の横幅が大きい時には、1000pxのサイズで表示されます。

まとめ：CSSの基本、横幅を指定するwidthプロパティを覚えよう

今回は、CSSを使って要素の横幅を設定する方法を紹介してきました。

要素の横幅を指定するには、widthプロパティを使用します。

widthプロパティの値の記述方法が複数あることも説明しましたね。

Webサイトを作成する上で、widthプロパティの知識は必須となります。

今回の記事が参考になれば幸いです。