HTML STUDY

CSSで幅と高さを設定する

ここではCSSでコンテンツの幅と大きさを設定していく方法を解説していきます。CSSには「外部ファイルCSSを設定する方法」と「内部CSSを埋め込む方法」があります。

横幅と高さ

widthは横幅をheightは高さを設定するCSSです。今回はdiv要素に任意の名前とCSSで枠線をつけて大きさを設定していきます。枠線を表示する際はborderを使用します。

要素解説
<div>コンテンツをグループ化
CSSプロパティ解説
width横幅
height高さ
border枠線

HTMLコード記述例

<div class="w100-h100">
<p>横幅と高さを100pxに設定しています。</p>
</div>

<div class="w200-h200">
<p>横幅と高さを200pxに設定しています。</p>
</div>

外部ファイルCSS記述例

@charset "utf-8";

div.w100-h100 {
 border: solid 1px;
 width: 100px;
 height: 100px;
}

div.w200-h200 {
 border: solid 1px;
 width: 200px;
 height: 200px;
}

ブラウザ表示例

横幅と高さを100pxに設定しています。

横幅と高さを200pxに設定しています。

CSSボックス 関連記事

ページトップへ HTML STUDY TOPへ