CSSでwidthとheightプロパティを利用するとボックスの横幅と高さを指定することができます。
そしてボックスのサイズはwidthとheightの値の記述によってサイズコントロールできるのですが、親要素の関係性の理解だったり値に指定するピクセルやパーセントの使い方によっては、デザインを崩してしまうことがあります。
これは、もう一歩理解を深めるだけで誰でも解決できるようになるので、基本的な使い方から段階的に説明していくので理解が深まればと思います。
CSSでwidthとheightの使い方
まずはCSSでwidthとheightのかなり基本的な使い方からです。
widthはボックスの「幅」を指定するときに使い、heightはボックスの「高さ」を指定するときに使うCSSのプロパティです。
widthとheightでボックスのサイズをコントロールする記述方法はCSSのセレクタとプロパティと値を使用して以下のような使い方をします。
セレクタ {
width: 値(pxまたは%)
}
- HTMLのタグ名やクラス、idをCSSでセレクタに指定
- プロパティをwidthで指定
- 値は主に「px」または「%」で指定してボックスの横幅をコントロール
widthを指定しない場合は初期値でwidth: autoが指定されます。
そしてheightの使い方は以下のようにします。
セレクタ {
height: 値(pxまたは%)
}
- HTMLのタグ名やクラス、idをCSSでセレクタに指定
- プロパティをheightで指定
- 値は主に「px」または「%」で指定してボックスの高さをコントロール
heightを指定しない場合はwidthと同じく初期値でheight: autoが指定されます。
そしてdisplay: inlineの場合、widthとheightの指定をしても幅や高さが反映されずにCSSが効きません。display: inlineの要素にwidthやheightを指定したい場合には、display: blockやdisplay: inline-blockにボックスを変更して使います。
widthで横幅を指定する
CSSのwidthで横幅を指定する実際の使い方をHTMLとCSSのサンプルコードを見ながら理解して見てください。
<h2>幅をwidthで指定</h2>h2 {
background: #22c4b7
}
上記のHTMLは<h2>でマークアップした要素のボックスにCSSで背景をグリーン系の色で表示したものです。
まだwidthを指定していない<h2>が形成するボックスは、上記画像のように標準ではブラウザ画面または親要素の横幅いっぱいに表示されます。これはwidthプロパティを「auto」で指定したときの表示と同じです。
<h2>幅をwidthで指定</h2>h2 {
background: #22c4b7;
width: 300px;
}次にHTMLは同じですがCSSにはwidthプロパティを「300px」で指定します。
width: 300px;の指定により、h2のボックスは横幅いっぱいに表示されていたボックスを300ピクセルの横幅に変更して表示することができます。
heightで高さを指定する
次はheightでボックスの高さを指定する場合です。
<h2>高さをheightで指定</h2>h2 {
background: #22c4b7
}
<h2>が構成するボックスの高さは、標準ではマークアップした中身に合わせて決まります。ここでは文字の大きさに合わせた高さになります。これはheightプロパティを「auto」と指定したときの表示と同じです。
そしてheigthを指定していない状態からCSSでheightプロパティの値を「100px」で指定すると、ボックスの高さは100ピクセルに指定したサイズに変更することができます。
下の画像とCSSのサンプルがheightの値で100pxに指定したものです。
h2 {
background: #22c4b7;
height: 100px;
}
このとき文書を長めにしていくとheight: 100pxで指定した高さを突き抜けてボックスから文書がはみ出してしまうことがあるので注意が必要です。
うまくボックス内に文章を収めるのはpxではなく%指定するとボックスに収めることもできます。
CSSでwidthとheightの親要素との関係
次にCSSでwidthとheightの指定をした要素に親要素がある場合の関係です。
<div>
<h2>widthとheightの親要素との関係について</h2>
</div>
上のHTMLのように<div>要素を親要素にして、その中に<h2>が子要素でマークアップしてあるとします。
div {
border: 5px solid pink;
width: 600px;
height: 300px:
}
h2 {
background: #22c4b7;
width: 300px;
height: 100px;
}
そして親要素のdivのボックスのサイズをwidthは600pxでheightは300pxにして、子要素のh2のwidthは300pxにheightは100pxにしたボックスを作りました。
このとき子要素のh2のボックスのサイズは親要素のdivのボックスのwidthとheightで指定した値のサイズの中でボックスを表示しようとします。
ですが子要素のh2のwidthが親要素のwidth300pxより大きい値だと親要素内でボックスを表示しようとしているのに親要素を突き抜けてしまいます。それが以下の画像です。
それなので、目的の要素のボックスを作るときには、その目的の要素の親要素の幅と高さはwidthとheightでどのくらいの値でサイズ指定しているのか確認して表示が崩れないようにコントロールするようにします。
widthとheightにボーダーとパディングがある場合
CSSでwidthとheightプロパティが指定するのは、ボックスモデルのコンテンツエリアの横幅と高さで、ボーダーとパディングの大きさは含まれません。
たとえば下のサンプルのように横幅を300pxで高さ100pxとしたボックスに20pxのボーダーとパディングを指定して表示したとします。
div {
width: 300px;
height: 100px;
border: 20px;
padding: 20px;
}
この場合、ボーダーとパディングを含んだ横幅は300pxではなく380pxになり、高さは100pxではなく180pxになるので、ボックスの配置が崩れないためにもパディングとボーダー分のサイズも把握しておく必要があります。
ちなみにbox-sizingプロパティの値にborder-boxを使うとwidthとheightで指定した横幅と高さに、ボーダーとパディングの大きさを含めることもできるので時間があるときにでも調べてみてください。
widthとheightを可変にする指定方法
widtとheightでボックスを可変にする場合には値を%で指定してボックスのサイズをコントロールします。
<div class="a">
<p class="b">widthとheightを可変にする</p>
<img src="images/gazou.jpg" alt="">
</div>
HTMLはdivのボックスを親要素にして文章をpで画像をimgでマークアップしています。
.a {
margin: 0;
border: 5px solid skyblue;
width: 100%;
height: auto;
}
.b {
margin: 0 auto;
padding: 50px;
background: #c1c1c1;
}
img {
width: 100%;
vertical-align:bottom;
}
そしてCSSで親要素のdivにwidth:100%を指定します。HTMLコード載せていませんがdiv要素の上にはmax-widthの値を960pxで指定した要素がありdivボックスのwidth: 100%は、その960pxまでは可変して広がります。
p要素の文章部分にはwidthもheightも指定しないで親要素のサイズで可変します。
img画像はwidth: 100%を指定することによりdivのボックス内で960pxのマックス幅まで伸縮するようになります。
ちなみにpの文章やimgの画像をwidthの値で960pxで指定した場合にはサイズ指定が絶対値になってしまうので、960pxのサイズを維持してしまい可変されません。
widthとheightを使った要素を可変させるといっても、色々なパターンとボックス配置があるので難しいことが多いのですが、基本的にはwidthやheightの値には絶対値のpxではなく相対値の%で指定することで目的の要素の親要素に応じて可変できるので色んなパターンを試してみると理解が深まります。
私自信も可変するのは立ち止まることが多いです…今回はこの辺で…
