widthとheightの使い方横幅と高さの指定方法

CSS

【CSS widthとheightの使い方】横幅と高さの指定方法

2022年6月25日

今回はCSSのwidthプロパティ・heightプロパティの使い方をご紹介します。

widthやheightを指定することで、要素の横幅や高さを指定・変更することができます。

width・heightの意味を表した図。
 

 

width・heightプロパティの意味

width・heightは、要素の横幅や高さを変更する際に使用されるCSSプロパティです。

width・heightの意味を表した図。

 

width・heightプロパティの使い方

width・heightプロパティを使って横幅・高さを指定するには、変更したい要素を選択し、以下のように記述してあげればOKです。

横幅を300px、高さを200pxと指定しているデモ。

上の例では横幅を300px、高さを200pxと指定している為、その通りに変更されていることが分かると思います。

  • width:要素の横幅を指定するCSSプロパティ
  • height:要素の高さを指定するCSSプロパティ

 

width・heightはインライン要素には指定できない点に注意

width・heightは、aタグやspanタグなどのインライン要素には指定できない点に注意です。
HTML ブロックレベル要素とインライン要素の違いと特徴
 

下記はaタグにwidthやheightを指定した例です。widthとheightの指定が効いていないことがわかります。

width・heightはインライン要素に対しては効かないデモ。
 

インライン要素に対してwidth・heightを指定したい場合は、まずCSSでdisplayを指定してブロックレベルやインラインブロック要素に変更してから、横幅と高さの指定する必要がああります。

インライン要素をブロックレベル要素に変換してあげるとwidth・heightの指定が効いているデモ。
 

(併せて読みたい関連記事)

インライン要素とブロックレベル要素については以下のブログ記事で詳しく解説しています。ご興味ある方はこちらも併せてご覧頂くと良いかと思います。

インライン要素・ブロックレベル要素とCSS「display」の使い方

 

 

width・heightで使用する主な単位

ここまででwidth・heightの基本的な使い方を紹介しましたが、次にwidth・heightで使用される値について紹介します。

他にも指定できる値はありますが、よく使用される値は以下の3つです。

■width・heightで使用される値

  • px:絶対単位による指定
  • %:親要素を基準とした相対単位による指定
  • auto(初期値):コンテンツにあわせて自動で幅が変更

 

px:絶対単位による指定

1つ目の値はpx(ピクセル)です。

相対的な値の%と違ってpxは、環境によって変化しない絶対値を指定することができます。

pxを使って横幅を指定しているデモ。
 

%:親要素を基準とした相対単位による指定

2つ目の値は%(パーセント)です。

%を使ってwidthやheight(※注)を指定すると、親要素の横幅を基準として相対的に幅を指定することができます。

%を使って横幅・高さを指定しているデモ

(※注)なお、heightについては、親要素でpx指定をしていないと基本的に%指定が効きません。後述の注意点をご参照ください。
 

auto(初期値):コンテンツにあわせて自動で幅が変更

3つ目の値はauto(初期値)で、コンテンツにあわせて自動で幅が調整されます。

初期値のためautoを指定する機会は少ないですが、レスポンシブデザインなどでpxや%を打ち消すために、autoを指定する場合があります。

widthとheightの場合で挙動が異なります。

 

width: auto

width: autoでは、pタグやdivタグといったブロックレベル要素の場合はウィンドウ幅いっぱいまで広がります。widthを指定しない場合もこの形になります。

ブロックレベル要素の場合は「width: auto」を指定するとウィンドウ幅いっぱいまで要素が広がる。
 

ただし、aタグやspanタグといったインライン要素、あるいはインラインブロック要素の場合は、要素の中身(テキスト)にあわせて横幅が決定されます。

インライン要素やインラインブロック要素の場合は、「width: auto」を指定すると、要素の中身(テキスト)にあわせて横幅が決定される。
 

height: auto

height: autoでは、インライン要素やブロックレベル要素に関わらず要素の中身にあわせた高さになります。heightを指定しない場合もこの形になります。

height: autoを指定すると、インライン要素やブロックレベル要素に関わらず要素の中身にあわせた高さになる。

 

widthとheightを使う上での注意点

padding・borderがあるときのwidth指定に注意

ブロックレベル要素において、「width: 100%」など指定した時にpaddingやborderを指定すると親要素をはみ出てしまう場合があることに注意しましょう。
width設定時の注意点
 

width: auto(またはwidthの指定なし)の場合はpaddingやborderの指定がwidthの内側に含まれて調整されます。

一方、「width: 100%」などwidthを指定すると、widthの中にpaddingやborderは含まれていないため子要素が意図せず親要素をはみ出てしまう場合があります。

width:auto; width:100%;
border:〇〇pxの指定がある時 borderを含めて幅いっぱいになる width(幅いっぱい)+borderの幅が加算
padding:〇〇pxの指定がある時 paddingを含めて幅いっぱいになる width(幅いっぱい)+paddingの幅が加算

 
下記は、borderやpaddingのある子要素にwidth指定して親要素をはみ出てしまった例です。

paddingの分だけ子要素が親要素からはみ出てしまっているデモ。

border-box:border-boxを指定する

内部余白padding(や枠線border)を設定する際に、内部余白の大きさを横幅や高さに含めるかどうか、ボックスの算出方法に「border-box」を指定する方法があります。
 

CSS box-sizingを設定するときとしない時の違い
 

■box-sizingプロパティで使う設定値と意味

項目 内容
box-sizing:content-box 枠線「border」や内部余白「padding」を横幅と高さに含めない(初期値)
box-sizing:border-box 枠線「border」や内部余白「padding」を横幅と高さに含める

 

■表示例


 

■上記のソースコード

 

基本的に、box-sizing:border-boxの方がレイアウトの大きさの計算が楽になるので、ユニバーサルセレクタ*などで、box-sizing:border-boxを初期値として設定しておくことも多いです。
 
 

子要素(画像)が親要素がはみ出してしまう場合に注意

画像(imgタグ)を子要素にする場合、画像サイズが大きいと親要素の幅を超えてしまう場合がよくあります。

下記は、画像の横幅が親要素の横幅を超えてしまうといったケースです。

横幅や高さをpx指定する際の注意点を表した図。

上の例では元々の画像の横幅が500pxなのに対して、親要素の横幅が300pxとなっている為、画像が200px分はみ出てしまっていることが分かります。

解決策として、imgタグにmax-width:100%;などを指定することがよくあります。max-width:100%を指定することで、画像サイズが親要素より大きくても親要素をはみ出ない(最大100%)ようになります。
 

heightは%による指定が効かない点に注意

直近の親要素がbodyタグの場合は、heightの場合は%による指定が効かない点に注意です。

widthでは親要素(ウインドウ幅)を基準に%指定できますが、heightでは%指定しても効きません。
直近の親要素がbodyタグの場合のwidthとheightの%指定による挙動の違いを表した図。

直近の親要素がbodyタグの場合 %指定はwidthには効くが、heightには効かない。
 

ウィンドウの高さを基準にheightで%指定したい場合は、htmlタグとbodyタグに対して「height: 100%」を指定する必要があります。

heightでもウィンドウの高さを基準に%指定ができるようにしているデモ。
 

(補足) vh:デバイスの表示領域の高さを基準とした相対単位による指定

height(高さ)を指定する際に使用される値の1つにvhがよく使われます。

この値を使って高さを指定すると、デバイスの表示領域の高さを基準として相対的に高さを指定することができるようになります。

height: 50vh;と指定しているデモ

こちらもよく使う単位の1つなので覚えておくと良いでしょう。

 

min-width・max-widthおよびmin-height・max-height

ちなみにwidthやheightと似たようなプロパティで、最小幅と最大幅を指定できるmin-width・max-width、min-height・max-heightと呼ばれるプロパティもあります。

  • min-◯◯ : 横幅や高さの最小幅を指定することができるプロパティ
  • max-◯◯ : 横幅や高さの最大幅を指定することができるプロパティ

 

widthやheightと組み合わせて使うことが多く、下記の例では通常width100%ですが、その中でも最大幅1000pxと指定しています。

max-widthを指定して最大幅を指定しているデモ。

min-widthやmin-heightはレスポンシブデザインのサイトを作る際に非常に便利なプロパティですので、こちらも余裕がある方は覚えておかれると良いでしょう、

 

 

まとめ

まとめです。今回は横幅と高さを変更できるwidth・heightの使い方について紹介しました。

width・heightの意味を表した図。

  • width:要素の横幅を指定するCSSプロパティ
  • height:要素の高さを指定するCSSプロパティ

 

widthやheightはよく使うプロパティですが、前述したようにインラインブロックレベル要素の違いをはじめ注意点も多いため、ぜひ覚えておきましょう。

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS