HTML 入門

スタイルシートでデザインを作ろう

width と height を使う

ここでは <div> 要素にクラスを設定し，要素の幅や高さを指定する方法を確認します．なお，<div> 要素を利用していますが，<h1> や<p> などにも利用できます．

まず，.box11 から .box15 までのクラスをつけた <div> 要素を5つ配置します．現時点ではスタイルを指定していないので，次の通り縦に5つ並んで表示されるはずです．

index.html（抜粋）コピー
<div class="box11">.box11 あいうえお</div>
<div class="box12">.box12 あいうえお</div>
<div class="box13">.box13 あいうえお</div>
<div class="box14">.box14 あいうえお</div>
<div class="box15">.box15 あいうえお</div>

.box11 クラスには背景色だけを指定します．すると，親要素の幅をすべて確保していることが確認できます．

style.css（抜粋）コピー
.box11 {
  background-color: pink;
}

.box12 クラスは幅を160pxに設定します．確保した領域が確認できるようにこれにも背景色を指定します．

style.css（抜粋）コピー
.box12 {
  width: 160px;
  background-color: skyblue;
}

.box13 クラスは幅を160pxに，高さを48pxに設定します．

style.css（抜粋）コピー
.box13 {
  width: 160px;
  height: 48px;
  background-color: yellowgreen;
}

.box14 クラスについては高さを指定せず幅を96pxに設定します．このとき，文字列が96pxの幅には収まらなかったため，高さが下方向に拡大されたことに注意してください．

style.css（抜粋）コピー
.box14 {
  width: 96px;
  background-color: lightcoral;
}

.box15 クラスについては幅を96pxに，高さを24pxに設定しています．このとき，文字列が要素の中に収まらなかったため，文字列が溢れてしまっていることに注意してください．

style.css（抜粋）コピー
.box15 {
  width: 96px;
  height: 24px;
  background-color: lightgray;
}

すべての要素を並べてその結果を確認しましょう．（HTMLのサンプルを見る ／ CSSのサンプルを見る）

index.html（抜粋）コピー
<div class="box11">.box11 あいうえお</div>
<div class="box12">.box12 あいうえお</div>
<div class="box13">.box13 あいうえお</div>
<div class="box14">.box14 あいうえお</div>
<div class="box15">.box15 あいうえお</div>

style.cssコピー
@charset "utf-8";

.box11 {
  background-color: pink;
}
.box12 {
  width: 160px;
  background-color: skyblue;
}
.box13 {
  width: 160px;
  height: 48px;
  background-color: yellowgreen;
}
.box14 {
  width: 96px;
  background-color: lightcoral;
}
.box15 {
  width: 96px;
  height: 24px;
  background-color: lightgray;
}

目次に戻る