【HTML】基本だけど意外と奥深いwidthについて徹底解説。

TOP
> 言語・スキル
> html
> 【HTML】基本だけど意外と奥深いwidthについて徹底解説。

1 widthの基本
2 widthの指定はブロックレベル要素のみ可能
3 width: autoの意味
4 まとめ

HTML+CSSで幅を指定する際にはWidthでを使いますが、Widthには指定方法が意外にもたくさんあります。

そこで今回は色々なWidthについて解説してみたいと思います。

widthの基本

Widthは要素の横幅を指定する際に使うもので、「ウィズ」もしくは「ワイズ」と読みます。

CSSでの記述方法は次のようにします。

要素 {
	width: 数値もしくはパーセント;
}

要素 {

width: 数値もしくはパーセント;

}

数値の場合には単位を付けてください。

パーセント指定をする場合には親要素の横幅を基準としたパーセンテージとなります。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
	div {
		width: 500px;
		height: 200px;
		background-color:coral;
	}
	P {
		width: 50%;
		height: 50%;
		background-color:aqua;
	}
</style>
<title>sample</title>
</head>

<body>
	<h1>Sample</h1>
	<!-- 親要素 -->
	<div>
		<!-- 子要素 -->
		<p>パーセント指定の場合には親要素が基準となる</p>
	</div>
</body>
</html>

<!doctype html>

<html>

<head>

<style>

div {

width: 500px;

height: 200px;

background-color:coral;

}

P {

width: 50%;

height: 50%;

background-color:aqua;

}

</style>

<title>sample</title>

</head>

<body>

<h1>Sample</h1>

<div>

<p>パーセント指定の場合には親要素が基準となる</p>

</div>

</body>

</html>

表示結果

上のコードの場合、<p>の親要素である<div>のwidthが500pxですから、<p>のwidthは500pxに対しての50%にあたる250pxとなります。

パーセント指定でネストした場合

widthをパーセント指定でネストした場合にはどうなるでしょうか。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
	body {
		width: 800px;
	}
	div {
		width: 50%;
	}
	.parent {
		background-color:coral;
	}
	.child {
		background-color: darkkhaki;
	}
	.grandChild {
		width :50%;
		background-color:aqua;
		margin: 0;
		padding: 0;
	}
</style>
<title>sample</title>
</head>
<!-- 最上位要素 -->
<body>
	<h1>Sample</h1>
	<!-- 親要素 -->
	<div class="parent">
		<!-- 子要素 -->
		<div class="child">
			<!-- 孫要素 -->
			<p class="grandChild">孫要素は子要素が親要素にあたるため、そこを基準とする大きさとなる</p>
		</div>
	</div>
</body>
</html>

<!doctype html>

<html>

<head>

<style>

body {

width: 800px;

}

div {

width: 50%;

}

.parent {

background-color:coral;

}

.child {

background-color: darkkhaki;

}

.grandChild {

width :50%;

background-color:aqua;

margin: 0;

padding: 0;

}

</style>

<title>sample</title>

</head>

<body>

<h1>Sample</h1>

<p class="grandChild">孫要素は子要素が親要素にあたるため、そこを基準とする大きさとなる</p>

</div>

</body>

</html>

表示結果

HTML全体で見た場合3階層目にあたる[孫要素]の横幅は、その親要素である[全体から見た子要素]が画面幅に対し25%(50%分の50%)となるため、更にその25%である[全体幅の12.5%]となります。

このようにパーセント指定でネストすればするほど、横幅は更に小さくなります。

widthの指定はブロックレベル要素のみ可能

横幅を指定するためのwidthですが、インライン要素に対しては指定することが出来ません。

ただし例外として、inline-blockに対しては指定することが出来ます。

これはinline-blockが「インライン要素をブロック要素として扱う」という定義付けられているためです。

もしどうしてもインライン要素に対して指定したい場合には「display: block」とする必要があります。

※display: tableの場合にもwidthを指定することはできます。

width: autoの意味

widthには「auto」という指定方法があります。

これは初期値でもあり、CSSでwidthを指定しない場合にはこのautoが適用されることとなります。

auto指定された(もしくはwidthを指定しない)場合には親要素の横幅と同等の幅がとられます。

例えば次のような場合にはbodyが最上位要素となるため、画面幅＝autoの幅になります。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
	div {
		height: 200px;
		background-color:coral;
	}
	P {
		width: auto;
		height: 50%;
		background-color:aqua;
	}
</style>
<title>sample</title>
</head>
<!-- 最上位要素 -->
<body>
	<h1>Sample</h1>
	<!-- 親要素 -->
	<div>
		<!-- 子要素 -->
		<p>パーセント指定の場合には親要素が基準となる</p>
	</div>
</body>
</html>

<!doctype html>

<html>

<head>

<style>

div {

height: 200px;

background-color:coral;

}

P {

width: auto;

height: 50%;

background-color:aqua;

}

</style>

<title>sample</title>

</head>

<body>

<h1>Sample</h1>

<div>

<p>パーセント指定の場合には親要素が基準となる</p>

</div>

</body>

</html>

表示結果

また幅や高さを持たないインライン要素の場合には、テキスト幅がその要素の幅となるため、文字数によってautoの幅も変わってきます。

ただしいくらテキストが長文でもインライン要素の幅が親要素の幅を超えることはありません。

幅指定する際の注意

任意の横幅に指定する際に一つ注意しておかなければならないことがあります。

それは、「親要素を超える幅を子要素に指定しない」ということです。

もし親要素を超える幅指定を子要素にしている場合、レイアウトが崩れてしまいます。

HTML構築の際には必ず「親要素の幅 ≧ 子要素の幅」を厳守するようにしましょう。

autoとwidth: 100%の違い

autoの場合にはpadding及びborderが含まれます。

width: 100%の場合にはpaddingとborderは含まれない幅となります。

次のコードを見てください。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
	div {
		width: 500px;
		height: 100px;
		background-color: darkgoldenrod;
	}
	p {
		width: 100%;
		height: 100%;
		border: solid 5px #76A38C;
		padding: 20px;
	}
</style>
<title>sample</title>
</head>
<!-- 最上位要素 -->
<body>
	<h1>Sample</h1>
	<!-- 親要素 -->
	<div class="parent">
		<!-- 子要素 -->
		<p>width: 100%の場合には親要素からはみ出してしまう。</p>
	</div>
</body>
</html>

<!doctype html>

<html>

<head>

<style>

div {

width: 500px;

height: 100px;

background-color: darkgoldenrod;

}

p {

width: 100%;

height: 100%;

border: solid 5px #76A38C;

padding: 20px;

}

</style>

<title>sample</title>

</head>

<body>

<h1>Sample</h1>

<p>width: 100%の場合には親要素からはみ出してしまう。</p>

</div>

</body>

</html>

表示結果

上のコードでは<p>タグに「width: 100%」を指定しています。

ブラウザで確認してみたところ、親要素である<div>の幅及び高さを超えてしまっていることが確認できました。

このレイアウト崩れに対する最も簡単な対処法は「box-sizeing: border-box」プロパティの指定です。

今回の場合でいうと、<p>タグに”box-sizeing: border-box”を指定することでキッチリとdiv内に収めることが可能です。

width: 100%にしないと駄目なケース

display: inline-blockになっている要素の幅は中身によって変わります。

inlineと同じくautoが効かないため、inline-block要素を最大幅にしたい場合には「width: 100%」とする必要があります。

まとめ

いかがでしたか？

今回はwidthについて解説してみました。

初心者の方でも理解できる内容にしたつもりなので、これを見て基本的な部分をマスターしてもらえたら非常にうれしく思います。

「実際にプログラミングを使えるようになりたい」方におすすめ！

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 450名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか？

▶︎ プログラミングを学びたい方はこちら

卒業生の多くがWebエンジニアとして活躍

転職先企業の例

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

▶︎ 卒業生インタビューはこちら

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、
気になる方はぜひスクール詳細をのぞいてくださいませ。

ポテパンキャンプの詳細はこちら >>