お知らせ
PICK UP
おすすめ
widthとheightの使い方まとめと注意点について【CSS初心者入門】
![widthとheightの使い方まとめと注意点について【CSS初心者入門】](https://y-tc.net/wp-content/uploads/2019/09/width__height.jpg)
こんにちは、かなきち(@kanakichi0801)です
今回は、CSS初心者入門【第四回】ということで、width(幅)とheight(高さ)の使い方と注意点を紹介していくよ!
「width:100%
と指定したら要素がはみ出てしまう。。。なんで?」とこの記事に辿り着いた方、そのもやもや解決できますよ!
以下の記事を読んでいる前提で話していきます。【まだ読んでいないという方!】【ブロックレベル要素とインライン要素をイマイチわかっていない】という方は先に以下の記事を読んでみてね!
![display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】](https://y-tc.net/wp-content/uploads/2023/09/displayblock.jpg)
display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】
![display:inline、inline-blockの特徴を3分で理解し使いこなそう【CSS初心者入門】](https://y-tc.net/wp-content/uploads/2019/08/css__display__inlineblock.jpg)
display:inline、inline-blockの特徴を3分で理解し使いこ…
![](/img/talk__woman__happyLeft.png)
これからの記事を読むと
width(幅)とheight(高さ)の基本的な使い方と使う上での注意点が分かるようになるよ
こんな人に読んで欲しい
・CSS初心者の方
・HTML初心者の方
・width(幅)とheight(高さ)の使い方を知りたい方
・width(幅)とheight(高さ)の注意点を先に知っておきたい方
・width:100%と指定して要素がはみ出てしまった方
width(幅)とheight(高さ)とは?
なんとなく意味を理解している方も多いはず。
widthとは、「要素の横幅」のこと
heightとは、「要素の高さ」のこと
![f:id:mimipen:20190914215009j:plain widthとは要素の幅とheightとは要素の高さを表した図](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mimipen/20190914/20190914215009.jpg)
実際に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を超えて指定してはいけない
原則として、親要素の大きさを超えて指定してはいけません。
![f:id:mimipen:20190914215014j:plain widthやheightは親要素の大きさを超えて指定してはいけない](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mimipen/20190914/20190914215014.jpg)
副作用
先ほども書きましたが、あまりwidthやheightの指定はしないのが望ましいです。その理由が単純で コードが長くなる ためです。
width: 100%の使いどころ
よく見かける無駄コードが以下になります。
width: 100%;
width: 100%;
とは、親要素の大きさまで幅をいっぱいに広げるという意味です。
![f:id:mimipen:20190914215016j:plain width: 100%とは](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mimipen/20190914/20190914215016.jpg)
ブロックレベル要素(display: block)は、親要素の大きさまで幅いっぱいに広がるのが特徴と以下の記事で説明しました。
![display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】](https://y-tc.net/wp-content/uploads/2023/09/displayblock.jpg)
display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】
そのため、基本的に ブロックレベル要素にwidth: 100%;
の指定は必要ありません。
width: 100%を指定を減らす理由
もう一つ理由があります。それはpaddingの問題。
width: auto(初期値)
の場合、paddingは幅に含まれますが、width: 100%
をかけた場合はpaddingの分、親要素を超えてはみ出てしまいます。
![f:id:mimipen:20190914215020j:plain width:autoとwidth:100%の指定の違い](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mimipen/20190914/20190914215020.jpg)
width: 100%
とコードを増やすと paddingも中に含まれなくなる上にコードの量も増えます。
※はみ出てしまった場合の回避コードがbox-sizing: border-box
です。このプロパティと値により幅の中にpaddingやborderを含めることができます。
heightは基本的に指定しない
ホームページを作成していて、高さが出ないって時(floatやpositionなど)ありますよね。ただ、HTML、CSSはブラウザのバグでない限り嘘はつきません。
必ず高さは出ますし、出ないのには何かしらの理由があります。
そのため、高さが出ないからといって height(高さ) を指定して高さを出すのはNG行為です。
また、このブログでは紹介していませんが、レスポンシブという手法がコーディングでは必須不可欠となってきました。
レスポンシブとは?
ワンソース(同じソースコード)でマルチデバイス(PC、タブレット、スマホ)に対応させることです。
こんなサイト見かけたことありませんか? スマホでホームページを開いた時にPC画面が小さくなって表示されていること。
これは対応できていないサイトです。
![f:id:mimipen:20190914215024j:plain レスポンシブされていないサイト](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mimipen/20190914/20190914215024.jpg)
ホームページは、PC、タブレット、スマホユーザーに最適な形で表示してあげることが大切です。単純なことですが、見づらいサイトはサイトを見ている人(ユーザー)が離脱してしまいます。
豆知識
PCとスマホのみ対応するコーディングをすることがあります。つまり、タブレットは未対応のパターンです。厳密に言うと、これはレスポンシブコーディングではありません。それはなぜかというと、マルチデバイスに対応していないからです。
heightは可変する
レスポンシブについて説明しました。レスポンシブは width(幅) に合わせて見え方が変わります。そして、要素の height(高さ) も変わります。
要素の height(高さ) が変わるとして、height(高さ)を固定したらどうなるでしょうか?想像してみましょう。
要素の height(高さ) が、固定した高さを越えてはみ出てしまう場合や余白があまってしまう場合があります。
![f:id:mimipen:20190914215027j:plain height(高さ)を固定することで起こること](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mimipen/20190914/20190914215027.jpg)
要素の height(高さ) が変わることを考えると、height(高さ)を指定するところは滅多にないことが分かるかと思います。
まとめ
今回は、width(幅)とheight(高さ)の指定方法と使う上での注意点を説明しました。指定方法を説明する記事は多くあるので、今回は使う上での注意点を多めで書いてみました。
注意点の復習になりますが、width(幅)とheight(高さ)は使いすぎないのがコツです。使いどころを間違うと指定が増える場合があるので、使う必要がない箇所は使わないようにしましょう。
↓痒いところに手がとどくCSSプロパティの記事を他にも書いてます!
![CSSで横並びにする方法 〜初心者はどれを選択すればいい?〜 Inline-block・Float・Flexbox〜 【CSS初心者入門】](https://y-tc.net/wp-content/uploads/2019/10/Inline-block・Float・Flexbox.jpg)
CSSで横並びにする方法 〜初心者はどれを選択すればいい?〜 Inline-bl…
![display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】](https://y-tc.net/wp-content/uploads/2023/09/displayblock.jpg)
display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】
![position プロパティまとめ!基本から応用まで徹底解説!(relative・absolute・fixed・static)【CSS初心者入門】](https://y-tc.net/wp-content/uploads/2023/10/relative・absolute・fixed・static.jpg)
position プロパティまとめ!基本から応用まで徹底解説!(relative…
↓コーディング初心者向けに作りながら学べる記事を日々更新してます!
![非公開: 練習用デザイン無料配布!WEBコーディング初心者がすべき事前準備とは?](https://y-tc.net/wp-content/uploads/2023/11/コーディング準備.jpg)
練習用デザイン無料配布!WEBコーディング初心者がすべき事前準備とは?
この記事がいいなっと思ったら読者登録をお願いいたします!