ゼロからはじめるホームページ作成 
HOME > スタイルシート講座 > 幅や高さを設定する

幅や高さを設定する

widthで幅、heightで高さを設定することができます。

設定値には「数値+単位」、「数値+%」、または「auto(自動調整)」を使用します。
初期値は「auto」です。

単位にはpx, pt, emなどがあります。
参考)【スタイルシート講座】スタイルシートの単位

<div style="width:auto; background-color:orange">width:autoの設定</div></br>
<div style="width:400px; background-color:orange">width:400px</div></br>
<div style="width:200px; background-color:orange">width:200px</div></br>
<div style="width:50%; background-color:orange">width:50%</div></br>
<div style="height:auto; background-color:orange">height:autoの設定</div></br>
<div style="height:80px; background-color:orange">height:80px</div></br>
<div style="height:50px; background-color:orange">height:50px</div></br>

結果

width:autoの設定

width:400pxの設定

width:200pxの設定

width:50%の設定

height:autoの設定

height:80pxの設定

height:50pxの設定


まとめ

  • 幅・高さはwidth、heightで設定する。
  • 「数値+単位」、「数値+%」、またはauto(自動調整)が設定できる。


スタイルシート講座

初心者講座

スポンサードリンク

スタイルシート辞典

テキスト
フォント
背景
ボックス
配置
リスト
テーブル
ユーザインタフェース
その他



Copyright© ゼロからはじめるホームページ作成講座 All Rights Reserved.  サイトマップ