HTML 入門

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

width と height を使う

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

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

index.html（抜粋）コピー
<div class="box1">.box1 あいうえお</div>
<div class="box2">.box2 あいうえお</div>
<div class="box3">.box3 あいうえお</div>
<div class="box4">.box4 あいうえお</div>
<div class="box5">.box5 あいうえお</div>

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

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

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

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

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

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

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

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

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

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

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

index.html（抜粋）コピー
<div class="box1">.box1 あいうえお</div>
<div class="box2">.box2 あいうえお</div>
<div class="box3">.box3 あいうえお</div>
<div class="box4">.box4 あいうえお</div>
<div class="box5">.box5 あいうえお</div>

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

.box1 {
  background-color: pink;
}
.box2 {
  width: 160px;
  background-color: skyblue;
}
.box3 {
  width: 160px;
  height: 48px;
  background-color: yellowgreen;
}
.box4 {
  width: 96px;
  background-color: lightcoral;
}
.box5 {
  width: 96px;
  height: 24px;
  background-color: lightgray;
}

目次に戻る