こんにちは、かなきち(@kanakichi0801)です

今回は、CSS初心者入門【第四回】ということで、width(幅)とheight(高さ)の使い方と注意点を紹介していくよ！

「width:100%と指定したら要素がはみ出てしまう。。。なんで？」とこの記事に辿り着いた方、そのもやもや解決できますよ！

以下の記事を読んでいる前提で話していきます。【まだ読んでいないという方！】【ブロックレベル要素とインライン要素をイマイチわかっていない】という方は先に以下の記事を読んでみてね！

display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です 今回は、CSS初心者入門【第二回】ということで、ブロックレベル…

display:inline、inline-blockの特徴を3分で理解し使いこ…

こんにちは、かなきち(@kanakichi0801)です 今回は、CSS初心者入門【第三回】ということで、インライン要素…

width(幅)とheight(高さ)とは？

なんとなく意味を理解している方も多いはず。

widthとは、「要素の横幅」のこと
heightとは、「要素の高さ」のこと

実際にwidthとheightを書いてみよう

width(幅)を100px、height(高さ)を100pxと指定しました。

See the Pen widthとheightの指定の基本 by かなきち (@kanakichi) on CodePen.

widthとheightが指定できない場合がある

width(幅)とheight(高さ)を指定するためには前提条件があります。

ブロックレベル要素とインライン要素の記事で紹介しました。 ブロック要素(display: block;)は、widthとheightの指定が反映されるけどインライン要素(display: inline)は反映されません。

実際のコードを見るのが早いですね。ブロックレベル要素のdivタグはwidthとheightの指定が反映されましたが、インライン要素のspanタグは指定が反映されません。

See the Pen Untitled by かなきち (@kanakichi) on CodePen.

widthとheightの初期値

width(幅)とheight(高さ)の初期値は auto になります。

基本的には autoとは、親の要素の設定に順ずるといった意味が近いです。

NGな使い方と副作用

width(幅)とheight(高さ)って、使い方が分かりやすいので簡単なプロパティと思われがちですが、実は width(幅)とheight(高さ)はあまり指定はしません。NGな使い方と、なぜ指定を減らすのかを以下で説明していきます。

親要素のwidthとheightを超えて指定してはいけない

原則として、親要素の大きさを超えて指定してはいけません。

副作用

先ほども書きましたが、あまりwidthやheightの指定はしないのが望ましいです。その理由が単純で コードが長くなる ためです。

width: 100%の使いどころ

よく見かける無駄コードが以下になります。

width: 100%;

width: 100%;とは、親要素の大きさまで幅をいっぱいに広げるという意味です。

ブロックレベル要素(display: block)は、親要素の大きさまで幅いっぱいに広がるのが特徴と以下の記事で説明しました。

display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です 今回は、CSS初心者入門【第二回】ということで、ブロックレベル…

そのため、基本的に ブロックレベル要素にwidth: 100%;の指定は必要ありません。

width: 100%を指定を減らす理由

もう一つ理由があります。それはpaddingの問題。

width: auto(初期値)の場合、paddingは幅に含まれますが、width: 100%をかけた場合はpaddingの分、親要素を超えてはみ出てしまいます。

width: 100%とコードを増やすと paddingも中に含まれなくなる上にコードの量も増えます。

※はみ出てしまった場合の回避コードがbox-sizing: border-boxです。このプロパティと値により幅の中にpaddingやborderを含めることができます。

heightは基本的に指定しない

ホームページを作成していて、高さが出ないって時(floatやpositionなど)ありますよね。ただ、HTML、CSSはブラウザのバグでない限り嘘はつきません。

必ず高さは出ますし、出ないのには何かしらの理由があります。

そのため、高さが出ないからといって height(高さ) を指定して高さを出すのはNG行為です。

また、このブログでは紹介していませんが、レスポンシブという手法がコーディングでは必須不可欠となってきました。

レスポンシブとは？

ワンソース(同じソースコード)でマルチデバイス(PC、タブレット、スマホ)に対応させることです。

こんなサイト見かけたことありませんか？ スマホでホームページを開いた時にPC画面が小さくなって表示されていること。

これは対応できていないサイトです。

ホームページは、PC、タブレット、スマホユーザーに最適な形で表示してあげることが大切です。単純なことですが、見づらいサイトはサイトを見ている人(ユーザー)が離脱してしまいます。

豆知識
PCとスマホのみ対応するコーディングをすることがあります。つまり、タブレットは未対応のパターンです。厳密に言うと、これはレスポンシブコーディングではありません。それはなぜかというと、マルチデバイスに対応していないからです。

heightは可変する

レスポンシブについて説明しました。レスポンシブは width(幅) に合わせて見え方が変わります。そして、要素の height(高さ) も変わります。

要素の height(高さ) が変わるとして、height(高さ)を固定したらどうなるでしょうか？想像してみましょう。

要素の height(高さ) が、固定した高さを越えてはみ出てしまう場合や余白があまってしまう場合があります。

要素の height(高さ) が変わることを考えると、height(高さ)を指定するところは滅多にないことが分かるかと思います。

まとめ

今回は、width(幅)とheight(高さ)の指定方法と使う上での注意点を説明しました。指定方法を説明する記事は多くあるので、今回は使う上での注意点を多めで書いてみました。

注意点の復習になりますが、width(幅)とheight(高さ)は使いすぎないのがコツです。使いどころを間違うと指定が増える場合があるので、使う必要がない箇所は使わないようにしましょう。

↓痒いところに手がとどくCSSプロパティの記事を他にも書いてます！

CSSで横並びにする方法 〜初心者はどれを選択すればいい？〜 Inline-bl…

こんにちは、かなきち(@kanakichi0801)です 今回は、CSS初心者入門【第五回】ということで、CSSで横並び…

display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です 今回は、CSS初心者入門【第二回】ということで、ブロックレベル…

position プロパティまとめ！基本から応用まで徹底解説！(relative…

こんにちは、かなきち(@kanakichi0801)です。今回は、CSSプロパティpositionについて解説していきま…

↓コーディング初心者向けに作りながら学べる記事を日々更新してます！

練習用デザイン無料配布！WEBコーディング初心者がすべき事前準備とは？

こんにちは、かなきち(@kanakichi0801)です 今後、簡単なサイトを1サイト作っていきます！お金をかけずに、コ…

この記事がいいなっと思ったら読者登録をお願いいたします！