サイズを指定しよう

ボックスモデルと単位を学んだところで、要素の大きさを指定する練習をしてみましょう。

幅と高さを指定する

まず基本となるのが、幅を指定するプロパティであるwidth,高さを指定するプロパティであるheightです。

使い方の例

<p>サイズ指定の例文</p>

上記のHTMLに下記のCSSを反映させると次のような結果になります。

p {
  width: 100px;
  height: 100px;
  border:1px solid #666666;
}

widthとheightに100pxをそれぞれ指定しました。すると要素の大きさは100px角の正方形となります。

親要素に対して相対値で指定する

CSSで使用できる単位について学んだ際に、相対単位というものが出てきました。これを使用すると、レスポンシブデザインの時に非常に役立ちます。

使い方の例

<div>
  <p>サイズ指定</p><p>サイズ指定</p><p>サイズ指定</p>
</div>

上記の要素pに対して、相対値でサイズ指定をかけてみます。使用するCSSは以下のものです。

div{
width:50vw;
max-width:100%;
background:#fcfcfc;
}
div p{
 display:inline-block;
 width:33%;
 height: 100px;
 border:1px solid #666666;
}

上記のように,相対値を使うとブラウザの幅や親要素の大きさに合わせて要素の大きさを変えることが可能です。ブラウザのサイズを変更して確かめてみてください。

計算ミス！？改行される場合

横並びのコンテンツでサイズを指定する際に、widthの数値をしっかり計算しても改行されてしまう場合があります。その原因について紹介していきます。

border,paddingを指定している

ボックスモデルを思い出してください。※ボックスモデルってという方はこちら

widthやheightが効いているのはconntent領域です。したがって、paddingやborderまたは、marginなどの余白や線があると計算が合っていたとしても改行されてしまいます。

ちなみに本記事の見出し「 親要素に対して相対値で指定する」の例も1240px以下のブラウザ幅になると改行されてしまいます。

これを防ぐための手法を紹介します。

box-sizingプロパティを使用

widthとpaddingとborderをそれぞれ分けて計算しなければならない…正直に言うと「面倒」ですよね。そんなときはbox-sizingプロパティを使用しましょう。

.box-sizing{
  box-sizing: border-box;
}

先ほどの例に上記のプロパティを加えてあげます。

ウィンドウ幅を小さくしてみてください。ひとつ前の例と比べて改行されなくなっているのがわかるかと思います。

border-boxプロパティを使用することによって、widthやheightの対象範囲を変えることができます。

デフォルトではコンテンツ領域のみ必要に応じて、 border-box を使用しましょう。

余計なスペースが存在する

HTMLの書き方などなど、コーディングを行っているうえで意図していないスペースが起こることがあります。特に、displayプロパティでinline-blockを指定しているときに余計な余白が生まれがちです。

ケアレスミスをしていないか確認

クラスなどを併用している場合に起こりがちですが、ほかの要素にmarginをかけようと設定したら、意図していない部分にもかかることがあります。

サイズ指定を行って意図しない挙動が起きた時に今回挙げたような項目を思い出せるようにしておいてください。