みみぺんブログ

WEBデザイナー、エンジニア、プログラマー向けの記事を投稿します

指定しすぎは注意!widthとheightの使い方と注意点について【CSS初心者入門】

指定しすぎは注意!widthとheightの使い方と注意点について こんにちは、かなきち(@kanakichi0801)です

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

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

blog.mimipen.net

blog.mimipen.net



いつも通り、CSSの設定方法を序盤に紹介してから本題に入っていくので、すぐに記事を読みたい方は スキップ を押してね!

かなきち

これからの記事を読むと
width(幅)とheight(高さ)の基本的な使い方と使う上での注意点が分かるようになるよ


こんな人に読んで欲しい

・CSS初心者の方

・HTML初心者の方

・width(幅)とheight(高さ)の使い方を知りたい方

・width(幅)とheight(高さ)の注意点を先に知っておきたい方


先ずはCSSの復習

以下の記事でCSSについて詳しく説明しているので今回は触りを書きます。 blog.mimipen.net

CSSとは?

ホームページの見た目を指定するために使用します。CSSは、HTMLと組み合わせて使われます。

CSSの基本構造

h1タグにCSSを使って見た目を指定した場合。

[HTMLの中身]

<h1>たいとる</h1>

[CSSの指定]

h1{
 font-size: 32px;
}


CSS(スタイルシート)のセレクタ、プロパティ、値のイメージ

セレクタ:どこのデザインを変更するか(※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と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やheightの指定はしないのが望ましいです。その理由が単純で コードが長くなる ためです。

width: 100%の使いどころ

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

width: 100%;



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

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

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

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

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

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

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(高さ) が変わることを考えると、height(高さ)を指定するところは滅多にないことが分かるかと思います。

まとめ

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

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

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



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)