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 あいうえお