スポンサーサイト

ボックスの幅、高さを指定する

書式
width: 値
height: 値
widthでボックスの内容領域の幅、heightで高さを指定します。それぞれ値には数値(px,em,%など)を入れます。
スタイルシート部分
.boxsample1 {
width: 80%;
border-width: 10px;
background-color: #ffffcc;
border-style: solid;
border-color: #ffcc00
}
.boxsample2 {
width: 40%;
height: 50px;

border-width: 10px;
background-color: #ffffcc;
border-style: solid;
border-color: #ffcc00
}
boxsample1では幅を80%(記事幅を100%として)、boxsample2では幅を40%、高さを50pxに指定しました。

記事部分
<p class = "boxsample1">このボックス領域の幅は80%です。</p>
<p class = "boxsample2">このボックス領域の幅は40%、高さは50pxです。</p>

表示

このボックス領域の幅は80%です


このボックス領域の幅は40%、高さは50pxです。

記事を飾ろう!トップ
マージン、パディング基礎
背景色を指定する
背景画像を指定する
枠線幅を指定する
枠線色を指定する
枠線の種類を指定する
枠線ごとに一括指定する
幅、高さを指定する
ボックスサンプル集

次のキーワードを検索:[スタイルシート]

前後の記事

最近の記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。