Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. CSS入門編 - 高さと幅を変えてみよう

高さと幅を変えてみよう

みなさまいかがお過ごしでしょうか。引き続きCSSについて色々やっていきましょう。

今回は要素の幅と高さを変更するプロパティ、『width』と『height』について勉強していきましょう。

『width』プロパティは横幅、『height』プロパティは高さを指定するプロパティです。

記述例は以下のような形になりますね。

p {
    width: 100px;
    height: auto;
}
div {
    width: 0;
}

読み方ですが『width』は「ウィドゥス」と読みます。ちょっと英語的な発音ですと単語の最後が『ス』ではなく『th』なので舌を上の歯にすりつけながら引き込みつつ息を吐き出すという超高難度の技が必要です。アメリカ英語圏の外人さんとお話するときは注意しましょう。

（´-`）.｡oO（アメリカ圏の外人さんは『th』を綺麗に発音しないと『？』となるのです……）

『height』の読み方は「ハイト」です。「ヘイト」ではございません。「ヘイト」だと『hate』(憎む)になってしまうのであらぬ誤解を受けてしまう可能性があります。こちらも注意しましょう。

『width』、『height』共に、値に記述するものは『単位付きの数値』、『0』、『auto』となっています。

数値を指定する場合の単位についてですが基本的に『px』か『%』しか使われません。『em』なども使うことができますが特殊な場合を除いて使用されることはまずありません。

単位に『%』を指定した場合は親要素の大きさに対する割合で幅を決定することができます。ここ要注意です。内包している子要素の横幅や自分自身の大きさに対する比率ではありませんので間違えないよう注意してくださいね。

そして値の数値が『0』の場合のみ単位を省略することができます。『0px』と記述しても挙動は同じですが『0』と記述する場合は単位を省略するのが一般的です。

横幅や高さを0にすると大きさが0になるので視覚的に全く見えなくなります。

「要素が見えなくなるのなら『0』って書く理由は存在しないんじゃね？要素の記述消せばいいじゃん」って思いがちかもしれませんが、見えない要素というのは実は色々な使い方ができます。見えない要素を利用してJavaScriptを組んだり、高さ0の見えない画像を用意してアクセスカウンター(アクセス数を集計、解析する処理)に使われたりといったところですね。

要素の大きさを0にして何か処理をさせることはよく使われるアルゴリズムのひとつとなっていますのでみなさんも覚えておきましょう。

値に『auto』と設定した場合はその要素の表示方式に合わせて幅が自動設定されます。例えばブロックレベル要素ならば親要素の横幅100%で表示され、img要素では読み込まれている画像サイズになったりという感じですね。『width』プロパティと『height』プロパティに何も設定しなかった場合はこの『auto』が値に収まっています。つまり初期値は『auto』ってことですね。

では実際に記述してみましょう。いつも通りHTMLファイルを用意してください。style属性に直書きでいきます。ついでに大きさがわかるように背景色も指定してしまいましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS 練習中！</title>
</head>
<body>

<p style="background-color: red; width: 200px; height: 200px;">横幅200px高さ200pxのp要素だよ</p>
<div style="background-color: blue; width: 300px; height: 200px;">横幅300px高さ200pxのdiv要素だよ</div>

</body>
</html>

このファイルをブラウザで表示させてみましょう。このような感じになったと思います。

サンプルをみてみる。

横幅と大きさがしっかり変更されていると思います。注意点ですが、今記述したp要素とdiv要素はブロックレベル要素です。つまり横幅を小さくしたところで横並びにはならず、前後に改行が入ってしまいますので注意しましょう。

それと、ブラウザによって少し差がありますがp要素の上下に少し隙間ができているかと思います。これは『user agent stylesheet』とか呼ばれるデフォルト値のひとつで、p要素には最初から上下に一文字分くらいの隙間が入ります。このデフォルトのスタイルはブラウザによってかなりの差があったりするので注意するようにしましょう。

では続いてspan要素で記述してみましょう。こちらもわかりやすいように背景色を指定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS 練習中！</title>
</head>
<body>

<span style="background-color: aqua; width: 200px; height: 200px;">横幅100px高さ200pxのspan要素だよ</span>

</body>
</html>

さてこれを表示するとこのようになったと思います。

サンプルをみてみる。

おや？ちょっと変ですね。どうやら縦と横で設定した値が反映されていないようにみえます。

実はspan要素には『width』と『height』は効かないのです。span要素に『width』等を設定するには『display』プロパティの値を変更したりする必要があります。

そしてちょっとやっかいなのですが、span要素のような全てのインラインレベル要素に『width』と『height』が効かない、という訳ではありません。img要素、input要素、object要素、select要素、button要素、textarea要素等には反映させることが可能です。

『width』プロパティと『height』プロパティが指定できるimg要素、input要素、object要素、select要素、button要素、textarea要素等の事を『置換要素』と呼びます。たまに参考書などで出てくるので覚えておきましょう。

「インラインレベル要素では『width』と『height』が効く要素と効かない要素がある(ｷﾘｯ」と覚えておくようにしてください。

では改めてimg要素を使って大きさを指定してみましょう。今度は『%』を使って指定してみますね。

写真素材ぱくたそ様から猫ちゃんの画像を拝借させていただきましたので以下のソースを記述してみてください。

<p><img src="https://wp-p.info/reps/css-beginner/img/18_01.jpg" style="width: 25%;"></p>
<p><img src="https://wp-p.info/reps/css-beginner/img/18_01.jpg" style="width: 50%;"></p>
<p><img src="https://wp-p.info/reps/css-beginner/img/18_01.jpg" style="width: 100%;"></p>

サンプルをみてみる。

さていかがでしょうか。

今度はしっかり画像の大きさが変更されていると思います。

ブラウザの大きさをグリグリ変えてみてください。今親要素のp要素はブロックレベル要素なので親要素であるbody要素と同じ大きさになっています。つまりブラウザいっぱいの大きさになっているということですね。その中にあるimg要素に『width』を『%』で指定しているのでブラウザの大きさに合わせてとimg要素の大きさも一緒に変更されていくと思います。

これがインラインレベル要素に対する横幅の指定と『%』を指定したときの挙動になりますね。

ではこのimg要素にちょっとおもしろいことをしてみます。『height』プロパティに『200px』と指定してみましょう。

<p><img src="https://wp-p.info/reps/css-beginner/img/18_01.jpg" style="width: 50%; height: 200px;"></p>

これをブラウザで表示させるとこうなります。

サンプルをみてみる。

なんと歪んでしまいました。

これは横幅が親要素の50%に指定しているにも関わらず高さに200pxと指定しているためにアスペクト比が変更されて画像が歪んでしまった感じです。

最初の画像が歪まなかった理由はimg要素に『width: 50%;』とだけ記述してあり『height』プロパティの値は初期値の『auto』だったからでした。img要素で片一方の大きさが『auto』となっていると片方の幅の変更に合わせてアスペクト比を維持しつつ自動で大きさを調整してくれます。

最初に解説した通り、『width』プロパティと『height』プロパティに『%』指定で値をとった場合の元となる比率は親要素の大きさとなります。img要素も然りです。画像ファイルそのものの大きさに対する割合ではないのでご注意ください。これ間違いやすいです。

画像ファイルの大きさの半分の横幅で表示させたい、といった場合は画像そのものの大きさをまず調べてその後に数値と『px』で値を記述する必要があります。アスペクト比を変更させたくない場合は『width』か『height』のどちらか一方だけ指定するようにすればOKです。

例 『1000px × 500px』の画像を『500px × 250px』で表示させたい場合

img {
    width: 500px;
    height: auto; /* ← これは初期値がautoなので書いても書かなくても良いです。 */
}

さて、というわけで『width』プロパティと『height』プロパティについての解説は以上となります。

『width』プロパティと『height』プロパティが効く要素と効かない要素があったりして少しややこしいところもありますが、やってることは大きさを変更しているだけなのでちょっと予想と違った挙動になったらその都度google先生に聞いてみればすぐ解決するかと思います。

次の記事では要素に背景画像を指定してみますので引き続き頑張っていきましょう。

ではではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類
桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。

シェア
このエントリーをはてなブックマークに追加