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ボックス関連記事

CSSで幅と高さを設定する

横幅と高さ

CSSボックス 関連記事

CSSボックス関連記事