「width」「height」CSSで内容の幅と高さを指定する

ボックスモデルの中で、内容の入る「content」では、幅と高さを指定することが出来ます。contentの大きさを指定することで、キレイにレイアウトをまとめることが出来ますから覚えておきましょう。

CSSにおいて、「widthプロパティ」と「heightプロパティ」で指定します。値の記述方法は、「auto(初期値)」「パーセント」「数値と単位」の3つの方法があります。

たとえば、次のように使用しましょう。

【CSS】
p {width: 300px;
height: 100px;
background-color: #00FA9A;}


【HTML】
<p>ここにテキストが入ります。</p>

分かりやすいように色付けしましたが、以下のように自由に範囲を指定できます。

ここにテキストが入ります。

 

幅と高さの最小値と最大値を指定する

段落やdiv要素などにコンテンツを入れる場合、テキストの量によって幅や高さがバラバラになることがあります。これだと、デザイン的に不格好になってしまいますよね。なので、最小値や最大値を設定して、大きさをそろえるようにしましょう。

最大値の設定には「max-width」「max-height」、最小値の設定には「min-width」「min-height」を使用します。使い方は同じですから、場所によって使用するようにしてください。

 

以上、幅と高さの指定方法を紹介しました。思うようにWebサイトをデザインするなら、幅と高さの指定は必要不可欠です。なので、確実にマスターするようにしましょう。

サブコンテンツ

このページの先頭へ