神戸学院大学 経営学部 林坂ゼミ

HTML 入門トップページ

« 戻る 次へ »

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 あいうえお
.box12 あいうえお
.box13 あいうえお
.box14 あいうえお
.box15 あいうえお

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

style.css(抜粋)
.box11 {
  background-color: pink;
}

ブラウザでの表示結果

.box11 あいうえお

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

style.css(抜粋)
.box12 {
  width: 160px;
  background-color: skyblue;
}

ブラウザでの表示結果

.box12 あいうえお

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

style.css(抜粋)
.box13 {
  width: 160px;
  height: 48px;
  background-color: yellowgreen;
}

ブラウザでの表示結果

.box13 あいうえお

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

style.css(抜粋)
.box14 {
  width: 96px;
  background-color: lightcoral;
}

ブラウザでの表示結果

.box14 あいうえお

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

style.css(抜粋)
.box15 {
  width: 96px;
  height: 24px;
  background-color: lightgray;
}

ブラウザでの表示結果

.box15 あいうえお

すべての要素を並べてその結果を確認しましょう.(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;
}

ブラウザでの表示結果

.box11 あいうえお
.box12 あいうえお
.box13 あいうえお
.box14 あいうえお
.box15 あいうえお

目次に戻る