【初心者向け】widthの使い方やheightとの違いを徹底解説

CSSで要素の幅を指定するためのwidthですが、正しい使い方を知らない人も多いのではないでしょうか？

・widthの正しい使い方がいまいちわからない。
・heightとの違いは？
・widthを指定する方法を知りたい･･･。

こんな悩みを抱えている人もいるでしょう。

今回は、widthの

・基本的な使い方
・heightとの違い
・widthを指定する様々な方法

について説明します。

1 widthとは
2 widthの基本的な使い方
- 2.1 widthの使い方
- 2.2 widthとheightとの違い
3 widthを指定する様々な方法
- 3.1 幅をpxで指定する方法
- 3.2 幅を%で指定する方法
4 まとめ

widthとは

widthとはどういったプロパティなのか、詳しく知らない人も多いでしょう。

なのでここでは、widthの意味や役割について解説していきます。

widthの読み方

widthは「ウィズ」と読みます。

「width」は「幅・広さ」という意味があり、CSSでも同じ意味として使われています。

例えば、サイト内にある要素の幅を調整したいときに、使われることが多いです。

widthは要素の幅を指定するプロパティ

widthは「要素の幅を指定するプロパティ」です。

CSSで要素にwidthを指定すると、幅を調整することができます。

ちなみに、widthを指定できる要素は、display: blockとinline-blockのみです。

例えば、ブロック要素であるdivタグやpタグ、ulタグなどはwidthを指定することができます。

しかし、インライン要素であるaタグやinputタグ、labelタグなどはwidthを指定することができません。

widthで利用できる値

widthでは以下の値を使うことができます。

値	説明
auto	指定された要素の高さをブラウザーが計算して決めます。
length	絶対値で高さを定義します。
percentage	包含ブロックの高さのパーセントで高さを定義します。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ	対応状況
Chrome	完全対応
Edge	完全対応
Firefox	完全対応
Internet Explorer	完全対応
Opera	完全対応
Safari	完全対応
スマートフォン用ブラウザ	対応状況
Android webview	完全対応
Android版Chrome	完全対応
Android版Firefox	完全対応
Android 版 Opera	完全対応
iOS版Safari	完全対応
Samsung Internet	完全対応

widthの基本的な使い方

ここまでで、widthの意味や役割についてわかりました。

なのでここからは、widthの具体的な使い方を解説していきます。

widthの使い方

widthの使い方をコードを用いて見ていきます。

実際のコードは次の通り。

<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <style media="screen">
    div {
      background-color: lightblue;
      width: 500px;
    }
  </style>
  <body>

    <div>
      <p>要素</p>
    </div>

  </body>
</html>

<head>

<title>サンプルページ</title>

</head>

div {

background-color: lightblue;

width: 500px;

}

</style>

<body>

<div>

</div>

</body>

</html>

CSSで要素の幅を調整するには、「width: 〇〇;」と記述します。

widthでは主に、auto、px、%を使って幅を指定することが可能です。

今回の例では、要素の幅を500pxにしたいので、「width: 500px;」となります。

結果を表示すると、次のようになるでしょう。

※見やすいように、要素に背景色をつけています。

要素の幅が500pxになっていますね。

このようにwidthを使えば、簡単に幅を調整することができます。

なので、使い方を覚えておきましょう。

widthとheightとの違い

widthとよくセットで使われるプロパティで、heightというものがあります。

heightとは、要素の高さを指定するプロパティです。

・width：要素の幅を指定するプロパティ
・height：要素の高さを指定するプロパティ

要素の幅を調整したいときはwidthを、高さを調整したいときはheightを指定します。

またheightも、指定できる要素はdisplay: blockかinline-blockのみなので、気をつけましょう。

実際の使い方をコードで見ていきます。

<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <style media="screen">
    div {
      background-color: lightblue;
      width: 500px;
      height: 100px;
    }
  </style>
  <body>

    <div>
      <p>要素</p>
    </div>

  </body>
</html>

<head>

<title>サンプルページ</title>

</head>

div {

background-color: lightblue;

width: 500px;

height: 100px;

}

</style>

<body>

<div>

</div>

</body>

</html>

heightで高さを調整するときも、auto、px、%などで指定することができます。

今回は要素の高さを、100pxとしたいので、「height: 100px;」と記述します。

結果を表示してみると、次のようになるでしょう。

高さが100pxになっていますね。

このようにwidthとheightを使って幅や高さを調整する場面がたくさんあるので、使い方を覚えておきましょう。

widthを指定する様々な方法

widthの基本的な使い方についてわかりました。

なのでここでは、widthを指定する様々な方法について解説していきます。

幅をpxで指定する方法

まずは、幅をpxで指定する方法です。

実際のコードで使い方を見てみましょう。

<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <style media="screen">
    div {
      background-color: lightblue;
      width: 200px;
    }
  </style>
  <body>

    <div>
      <p>要素</p>
    </div>

  </body>
</html>

<head>

<title>サンプルページ</title>

</head>

div {

background-color: lightblue;

width: 200px;

}

</style>

<body>

<div>

</div>

</body>

</html>

指定方法は先ほどと同様で、 「width: 200px;」というように指定します。

ただ、widthをpxで指定するときに、気をつけるべきことがあります。

例えば、画像を要素の中に入れるときなどです。

<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <style media="screen">
    div {
      background-color: lightblue;
      width: 200px;
    }
  </style>
  <body>

    <div>
      <p>要素</p>
      <img src="example.jpg" alt="">
    </div>

  </body>
</html>

<head>

<title>サンプルページ</title>

</head>

div {

background-color: lightblue;

width: 200px;

}

</style>

<body>

<div>

</div>

</body>

</html>

上記では、要素の中に画像を入れています。

しかし、要素に指定した幅「width: 200px;」は画像より小さいので、画像が要素からはみ出てしまっています。

普段スマホでサイトを見ていると、一部分だけ要素からはみ出てしまっているのを見たことがあるのではないでしょうか？

そうならないために、widthにpxを指定するときは気をつけましょう。

幅を%で指定する方法

今度は、幅を%で指定する方法です。

%で幅を指定する場合は、親要素に対して何％なのかを表します。

例えば、幅が500pxの親要素に対して、子要素の幅を50%に指定すると、250pxになります。

コードの書き方は、pxのときと同じで「width: 50%;」と書くことができます。

<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <style media="screen">
    div {
      background-color: lightblue;
      width: 500px;
    }
    p {
      background-color: lightyellow;
      width: 50%;
    }
  </style>
  <body>

    <div>
      <p>要素</p>
    </div>

  </body>
</html>

<head>

<title>サンプルページ</title>

</head>

div {

background-color: lightblue;

width: 500px;

}

p {

background-color: lightyellow;

width: 50%;

}

</style>

<body>

<div>

</div>

</body>

</html>

このように要素の幅は、widthの%を指定して調整することができるので、やり方を覚えておくといいでしょう。

まとめ

今回は、widthの意味や使い方について徹底解説しました。

widthは要素の幅を指定するための要素です。

レイアウトを整えるために幅を調整する場面はたくさんあるので、使い方を覚えておきましょう。

また、heightとセットで使われることも多いので、それもセットで覚えておくといいです。

この記事がwidthの学習に役立つと幸いです。

参考文献：MDN web docs｜width – CSS：カスケーディングスタイルシート

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。