閉じる

【CSS初心者向け】width・height指定方法徹底解説

CSS width・heightの指定方法を、初心者の方向けに紹介。 各方法サンプルコード付きで詳しく解説。サンプルコード付きなので実際に手を動かして学ぶ事ができ、ご自身のweb制作に活かす事ができます。

カテゴリ: HTML/CSS

こんにちは!

「横幅・高さを指定したい・・!」「width・heightの指定方法って何種類もあるの・・?」「 CSSではどうやって指定するの・・?」

そんな風に考えている、初心者WEB製作者の方も多いのではないでしょうか?

今回はそんな初心者のかた向けに「width・heightの基礎知識」「CSSでのwidth heightの指定方法」を中心に詳しく解説していきます。

width・heightとは

widthとは要素の「横幅」
heightとは要素の「高さ」を決めるプロパティです。
width(ウィドゥス)height(ハイト)と発音します。

width・height指定方法
●width
セレクタ{
width: 値;
}

●height
セレクタ{
height: 値;
}

●下記の赤四角形 横幅200px 高さ200pxを指定するには、
指定したい要素に、width: 100px; height: 100px;を指定します。

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

display:inlineには適用されない

display:inlineには、width(幅)・height(高さ)を指定できないルールになっています。
display:inlineとは,「aタグ」「span」「img」タグなどのデフォルト値であり、
display:inlineについて詳しく知りたい方は、下記を参考にしてみてください。

https://www.ameamelog.com/display-inline-block/

widthの指定方法

widthに指定できる単位
●auto
●px
●%
●vw
それぞれの単位を詳しくみていきます。

auto

autoは、初期値です。
widthに何も指定しない限り自動的に「auto」が指定いされます。
display:block;の場合は、親要素の横幅いっぱいに広がります。

display: inline・inline-blockの場合は、要素の中身によって広がり、親要素より子要素が大きく表示されることはありません。

pxで指定

pxで指定した値が指定されます。

下記のように画像の横幅を指定してみます。
表示結果

HTMLサンプルコード

CSSサンプルコード

pxで指定する注意点

親要素より大きい幅のpxを指定してしまうと、親要素をはみ出てしまい、webページを見る端末によってはレイアウトが崩れてしまい、見栄えが悪くなるので注意しましょう。

%で指定

%で指定した場合は、親要素の幅との割合で指定します。
親要素100pxで50%を指定したら50pxということです。
つまり親要素の幅により変化していきます。

実際に親要素500px(赤色)に
子要素(青色)50%、25%の子要素を指定してみます。

子要素50%指定サンプルコード表示結果

子要素25%指定サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

HTMLサンプルコード

CSSサンプルコード

%親に横幅が指定されていない場合

親要素に、横幅が設定されていなけえれば、その親の親を参照します、その親も指定されていなければ、さらに上の親、親となり、最終的にはwebページ一番の親bodyタグまでたどり着きます。
bodyでも横幅が指定されていなければ、body=ブラウザの幅ですので、ブラウザの横幅の割合を参照します。

%で横幅を均等割

%指定は自動で計算してくれ、親要素の中にある子要素を均等割りにしてくれます。
●3等分
width 33%指定
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

●4等分
width 25%指定
サンプルコード表示結果

vwで指定

vwとは、ブラウザ(ビューポート)の大きさに対する割合で幅の値を示します。
下記のようにブラウザを収縮させると、ブラウザ幅に合わせた大きさの要素が表示されます。

どの端末(デイバイス)でみてもブラウザの横幅を基準に自動で調整してくれる便利な単位です。100vw=ブラウザ幅100%です。
例えば10vwを指定した場合、ブラウザが1000pxであれば、10分の1の100pxの横幅で要素を常に表示してくれます。

●10vwを指定
サンプル動画

※解説
width: 10vw;を指定したことによりどのブラウザ幅に収縮しても、ブラウザ幅の10分の1のサイズの横幅を表示してくれます。

●vwで文字の大きさ指定
vwは文字の大きさも指定する事ができます。
例えば1vwを指定すると、ブラウザ幅100pxの時は1pxの文字が出力されます。
5vwを指定してみます。

5vw指定サンプルコード表示動画

※解説
ブラウザ幅の変化に合わせ文字の大きさを出力します。

heightの指定方法

heightに指定できる単位

autoは、初期値です。heightに何も指定しない限り自動的に「auto」が指定いされます。

高さいっぱいに広がるわけではなく、中の要素と同じ高さになります。

pxを指定

指定したpx値がそのままの高さになります。
200pxを指定してみます。

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

要素のはみ出注意

親用要素から子要素のはみ出しには、注意が必要です。

親要素にautoが指定されていれば、子要素の高さに応じて親要素も高さを合わせる事ができますが、親要素に200px、子要素に300pxを指定すると下記のようにはみ出てしまいます。

%での指定

高さの%指定は使い勝手が悪く、あまり使用されせんので、知識として知っておく程度で読み飛ばしても問題ありません。

高さを%で指定すると、親要素の高さに対する割合で表示されます。
親要素が高さ1000pxの時、height: 50%;を指定すると500pxが表示されます。
ちなみに、%で高さ指定するには親要素に高さが指定されていることが絶対条件になります。
高さが指定されていない、autoが指定されている場合では、基準がなく何に対して高さを指定して良いかわからないためです。

画面の高さ半分などの指定したい場合は、html、bodyタグに100%を指定し基準を作り、その直下の要素にheight: 50%;を指定します。

vhでの指定

vhとは、ブラウザ(ビューポート)の大きさに対する割合で高さの値を示します。
下記のようにブラウザの高さを収縮させると、ブラウザ高さに合わせた大きさの要素(赤色)が表示されます。

どの端末(デイバイス)でみてもブラウザの高さを基準に自動で調整してくれる単位です。100vh=ブラウザ高さ100%になり、
例えば10vhを指定した場合、ブラウザの高さが1000pxであれば、100pxの高さで表示してくれます。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
height: 10vh;を指定したことによりどのブラウザ高さに収縮しても、ブラウザ高さの10分の1のサイズの高さを表示してくれます。

●vhで文字の大きさ指定
vhは文字の大きさも指定する事ができます。
例えば1vhを指定すると、ブラウザ幅100pxの時は1pxの文字が出力されます。
5vhを指定してみます。

5vh指定サンプルコード表示動画

HTMLサンプルコード

CSSサンプルコード

min-width max-width
min-height max-height

●min-width

要素をこれ以上小さくしないという最小値を設定するプロパティです。

例えば、
セレクタ{
min-width: 100px;
}
と記述すると、指定されたセレクタは、横幅100pxよりも小さくならない指定がされます。

●max-width

要素をこれ以上大きくしないという最小値を設定するプロパティです。

例えば、
セレクタ{
max-width: 100px;
}
と記述すると、指定されたセレクタは、横幅100pxよりも大きくならない指定がされます。

min-height max-heightはあまり使用される事がありませんが、理屈は同じです。
幅も、高さも最大値、最小値に制限をかけることができます。

まとめ

今回は初心者のかた向けに「width・heightの基礎知識」「CSSでのwidth heightの指定方法」を中心に詳しく解説してきました。

最後にポイントをまとめます。

●width heightとは
width:要素の「横幅」を決めるプロパティ
height:要素の「高さ」を決めるプロパティ

●width指定方法は
セレクタ{
width: 値;
}

●height指定方法は
セレクタ{
height: 値;
}

●widthに指定できる単位
・auto
・px
・%
・vw

●heightに指定できる単位
・auto
・px
・%
・vh

●min-width・ min-heightは
幅、高さ要素の最小値を設定するプロパティ

●max-width・ max-heightは
幅、高さ要素の最小値を設定するプロパティ

いかがだったでしょうか?
CSSでの横幅・高さの指定は大切な概念となってきます。
本記事を参考にして頂けたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleアナリティクス使い倒し活用術  <AKAHON>

ダウンロード資料画像

「毎日、数値をみているけどどこをどうやって改善すれば良いのかわからない」

「Google analyticsを導入して、自社サイトのパフォーマンスを上げて欲しいといわれたけど、何をどうすればいいのかわからない」

「Web以外にも担当を兼任していて、アクセス解析に多くの時間をついやすことができない」

上記のような思いをお持ちのWeb担当者の方にはお役に立てる一冊です。

Googleアナリティクス初心者の方でも使いこなせるように、導入方法や用語、やっておきたい初期設定から具体的な活用方法まで丁寧に解説します。