こんにちは、かなきち(@kanakichi0801)です
今回は、CSS初心者入門【第四回】ということで、width(幅)とheight(高さ)の使い方と注意点を紹介していくよ！
「width:100%と指定したら要素がはみ出てしまう。。。なんで？」とこの記事に辿り着いた方、そのもやもや解決できますよ！早速問題を解決したい方はスキップを押してね！
以下の記事を読んでいる前提で話していきます。【まだ読んでいないという方！】【ブロックレベル要素とインライン要素をイマイチわかっていない】という方は先に以下の記事を読んでみてね！
いつも通り、CSSの設定方法を序盤に紹介してから本題に入っていくので、すぐに記事を読みたい方は スキップ を押してね！
これからの記事を読むと
width(幅)とheight(高さ)の基本的な使い方と使う上での注意点が分かるようになるよ
こんな人に読んで欲しい
・CSS初心者の方
・HTML初心者の方
・width(幅)とheight(高さ)の使い方を知りたい方
・width(幅)とheight(高さ)の注意点を先に知っておきたい方
・width:100%と指定して要素がはみ出てしまった方
先ずはCSSの復習
以下の記事でCSSについて詳しく説明しているので今回は触りを書きます。 blog.mimipen.net
CSSとは？
ホームページの見た目を指定するために使用します。CSSは、HTMLと組み合わせて使われます。
CSSの基本構造
h1タグにCSSを使って見た目を指定した場合。
[HTMLの中身]
<h1>たいとる</h1>
[CSSの指定]
h1{ font-size: 32px; }
セレクタ：どこのデザインを変更するか(※h1タグ)
プロパティ：どの要素に変更を加えるか(※font-size=文字の大きさ)
値：どのように変えるか(※32pxという大きさに変える)
HTMLファイルにCSSファイルを読み込ませる方法
HTMLファイルのhead内に以下を記述します。
<link rel="stylesheet" type="text/css" href="[CSSファイル場所]">
CSSについて、もっと詳しく知りたい人は以下の記事を参考にしてください。
blog.mimipen.net
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 oNvoBVw 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)は、親要素の大きさまで幅いっぱいに広がるのが特徴と以下の記事で説明しました。
blog.mimipen.net
そのため、基本的に ブロックレベル要素に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プロパティの記事を他にも書いてます！
blog.mimipen.net
blog.mimipen.net
blog.mimipen.net
↓コーディング初心者向けに作りながら学べる記事を日々更新してます！
blog.mimipen.net
この記事がいいなっと思ったら読者登録をお願いいたします！
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)