LINEで現役エンジニアに直接質問してみよう!登録無料

CSS widthとheightで幅と高さを設定する方法解説!auto、px、%も解説

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

CSSのwidth heightとは?

width heightとは、「HTML上の文字や画像などの幅や高さ」の事です。更にCSSにはwidth heightという設定項目があって、これの大きさを変更することで、サイズを調節出来ます。

例えば、下記のように1行の文章があったとします。

幅と高さがわかりやすいように背景に色付けしています。

ここで、幅を「200px」というサイズに調節すれば、下記のように文章が表示される幅が制限されます。

幅と高さがわかりやすいように背景に色付けしています。

高さも同じように、「〇〇px」という書き方でサイズを変更可能です。

width height理解ためのの前提知識

width heightをもっと詳しく理解する前に、HTMLのことについて少し復習しましょう!HTMLについて知っていると、この後の話が理解しやすくなりますよ!

HTMLは、「開始タグ」と「終了タグ」があって、この1つのまとまりを「要素」と言います。

HTMLでは、この「開始タグ」と「終了タグ」の中に別のタグが入れ子の構造で入っています。

このような構造の場合、<div>タグは<p>タグの親要素<p>タグは<div>タグの子要素と言います。

この基本を覚えておいてください!

CSSのwidthとheightの設定方法(基本)

CSSにwidthheightを設定するには、CSSで下記のように書きます。

これで、幅が100px、高さが100pxサイズの領域を作ることが出来ました。

今まで何気なく「px」という単位を使っていました。pxとは、画面上で表示される実際の長さの事です。その他にも、「%」という単位を使って親要素を基準にした割合の長さを設定したり、「em」を使ってフォントサイズを基準にした長さも使うことが出来ます。

使える単位には、下記のようなものがあります。

width、heightでつかえる単位
  • auto: 要素の幅が自動的に決まります。
    要素にはblock inline table flexなど様々なタイプがあり、その種類や中身のコンテンツサイズによってサイズが自動的に調節されます。
  • px: 画面のピクセル値の大きさで指定
    画面上で見える実際の大きさを指定できます。どのデバイスでも見える実際の長さは同じです。
  • em: 親要素のfont-sizeの倍率で指定
    親要素での文字サイズが基準に大きさが変わります。例えば、親要素のfont-sizeが16pxなら、1em=16pxとなります。
  • %: 親要素の大きさを基準にした割合で指定
    親要素の幅を100%として、サイズを決められます。例えば、親要素の幅は300pxの場合で50%を指定すると、marginのサイズは150pxになります。
  • rem: <body>でのfont-sizeの倍率で指定
    emと似ていますが、基準にする文字の大きさが<body>で指定された大きさのみを見る点が異なります。つまり、親要素がどんなfont-sizeであろうと、<body>のfont-sizeが一定なら変わりません。
MEMO

「px」は本来画面上のドット数を表す単位で「1px=1ドット」だったのですが、iPhoneのRetinaディスプレイの登場で画面上のドット数を複数の画素で表す方式に変わって「1px=2又は3ドット」になってしまいました。この辺の詳しい話は、「いまさら聞けないRetina対応のための「ピクセル」の話」で詳しく解説しているので、参考にしてみてください。

CSSのwidth設定と使い方(応用)

ここでは、widthに絞ってもっと深い内容を解説していきます。

先程、widthに設定出来る値について解説しました。その中でも最も多く使われる3種類について細かく解説していきます。

  • auto: 要素の長さに合わせて自動的にサイズを変更
  • 〇〇px: 画面上の実際の長さが基準
  • 〇〇%: 親要素を基準に長さが決まる

autoとは? 要素の長さに合わせて自動的にサイズを変更

widthに何も値を設定していない場合、デフォルトではautoという設定で、親要素の幅いっぱい使われるようになっています。

autoにすると実際の画面上の横幅は下記のように決まります。

  1. 特徴その1: その要素の横幅は幅いっぱいに広がる
  2. 特徴その2: /親要素以上に多くなり幅がはみ出ることは無い

順番に解説していきます。

特徴その1: 基本的に横幅はその要素の幅いっぱいに広がる

widthを指定しない場合、autoが設定されているものとして処理されます。この時の横いっぱいに広がれる限界はdisplayの種類によって異なります。

display:block;の場合

<p>タグ <div>タグ <section>等、display:block;が設定されている要素の時は、横幅が親要素のサイズまで横いっぱいまで広がります。

display:inline;の場合

<a>タグ <span>タグ <strong>タグ等、display:inline;display: inline-block;が設定されている要素の時は、横幅は中のテキストの幅になります。そして、このサイズは親要素のサイズより大きくなることはありません。

display:flex;の場合

display: flex;の場合、それが設定されている要素は親要素のサイズまで横いっぱいまで広がりますが、子要素は最小のサイズになるので、後で追加でwidthを設定してあげる必要があります。

実際にこれら比較してを表示してみると、このようになります。

autoの場合、親要素以上に多くなり幅がはみ出ることは無い

上の解説からわかるように、autoを設定すると、親要素の横幅以上に大きくなることはありません。

なので、「親要素のサイズ内で文字や画像等のコンテンツを収めたい」といった場合、autoを選択するのが良いでしょう。

実際に、子要素は親要素以上のサイズにならないか確かめてみます。

このように、親要素までになっています。

〇〇px: 画面上の実際の長さが基準

「px」を使うと、実際の画面上の長さでサイズを設定できます。pxは絶対値とも呼ばれ、親要素だったりフォントサイズだったりといった他の設定による影響を受けません。250pxと書けば、画面上の実際の長さで250px分の長さになります。

一般的な話ですが、「px」を使う時は2つのポイントを意識して使うと、デザインの崩れが少ないWebサイトが出来上がります。

  1. 親要素より子要素の幅を小さくしましょう
  2. height: autoを設定すると縦横比(アスペクト比)が維持されます

親要素より子要素の幅を小さくしましょう

このような状態だと、デザインが崩れてしまう可能性が高くなります。可能な限り、padding margin positionを使うようにしましょう。

特に、モバイルページだとデザインの崩れが目立ちます。

例えば、こんな感じです。みすぼらしいし、スマホでは見にくいと思います。

height: autoを設定すると縦横比(アスペクト比)が維持されます

widthが「px」指定の場合、同時にheightまで「px」でサイズを固定すると、その要素に入り切らなかったコンテンツや要素が溢れてしまいます。更に画像の場合、アスペクト比が崩れてしまいます。

〇〇%: 相対単位である%を使って幅を決めます

幅には`%`を指定できて、自由にサイズを調節できます。

MEMO

ここで、width:autoを使えば、親要素の幅いっぱい使うようにできることを解説しました。そうすると、width:100%とは、どう違うのでしょうか?

実は、「親要素に合わせる」という点で、この2つは似ていますが、paddingを使った場合、それを含んだ幅なのか、含まない幅なのかという違いがあります。


heightの使い方

heightもwidthのように auto 〇〇px 〇〇% のように長さを指定できます。

ここで注意なのが、widthautoが幅いっぱいになるように表示されていましたが、heightは幅が最小になるように表示されます。

また、%を使うと、親要素の高さを基準にして実際の高さが決まります。

  • auto: 要素の長さが最小になるように表示されます。つまり、子要素を基準に長さがきまります。
  • 〇〇px: 絶対単位であるpxを使って幅を決めます
  • 〇〇%: 相対単位である%を使って幅を決めます

順番に解説していきます。

auto: 要素の長さが最小になるように表示されます。

通常、heightはautoが指定されていて、子要素に合わせて最小の高さが適用されることになっています。

〇〇px: 絶対単位であるpxを使って幅を決めます

pxを使うと、子要素のサイズに関係なく、サイズを決めることができます

〇〇%: 相対単位である%を使って幅を決めます

`%`を使うと、親要素を基準にしてその割合の長さを設定することができます。

widthやheightが思ったように効かない!トラブ解決方法

display:inlineだと幅、高さの指定ができない

高さと幅が指定出来ない場合があります。それはdisplay: inlineになっている場合です。

display: inlineは、文の一部を装飾する時等に使われます。文中で使われるので、幅や高さといった概念がなく、widthheightで長さを指定しても、大きさ変わりません。

widthheightが使えるのは、display: block又はdisplay: inline-blockだとおぼえておきましょう。

どこまでを要素の幅とするのかはbox-sizingで決まっている

要素には、内側から要素 padding border marginという領域があります。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。