width、heightコンテンツ部


ホームページのコンテンツ(情報)を表示する領域を見てみましょう。
コンテンツ部の大きさはwidth(ウィズ)、height(ハイト)で表されます。

実際にやってみましょう。

コンテンツ部をwidth、heightで囲む

幅widthを50%、高さheightを160pxで  色で表示し、情報として下の文を入れてみます。

「竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立年は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。」

htmlソース

<!--====参考====-->
<body>
    <div id="container">
        <div class="sample_1">
            <p>竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立年は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。</p>
        </div>
    </div><!--container-->
</body>

cssソース

/*====参考====*/
.sample_1 {
    width: 50%;
    background: #fecfd8;
    text-align: left;
    margin: 0 auto;
}

このhtmlソースとスタイルソースで表示すると、

竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立年は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。

コンテンツはwidth,heightで設定した領域(寸法)の中に入れますが、文字を入れる場合はheight(高さ)がどれだけになるのかわかりません。
実は、高さheightを省略すると自動的に高さheightを決めてくれます。

heightは自動的に決まるので文字を表示する場合はheightを書かない場合が多いです。

次はpaddingコンテンツ周りの余白

  1. width、heightコンテンツ部
  2. paddingコンテンツ周りの余白
  3. border余白外回りの枠線
  4. margin枠線と表示領域の間隔