CSS size_html/css_WEB-ITnose

概要

CSS サイズプロパティを使用すると、要素の高さと幅を制御できます。

プロパティ	説明
高さ	要素の高さを設定します。
width	要素の幅を設定します。
max-height	要素の最大高さを設定します。
max-width	要素の最大幅を設定します。
min-height	要素の最小の高さを設定します。
min-width	要素の最小幅を設定します。

一般的に言う高さと幅は、下の図の赤い線で囲まれた領域を指します。

IE 5.X および 6 これらのブラウザの幅プロパティは、コンテンツの幅ではなく、コンテンツ、パディング、境界線の幅の合計です。それを知っておいてください。

height

height 属性は要素の高さを設定します。インラインの非置換要素 (高さが line-height 属性の影響を受ける 、 など) は、この属性を無視します。

オプションの値:

• auto デフォルト。ブラウザは実際の高さを計算します。

• length px、cm、mm、em などの単位を使用して高さを定義します。

• % 高さを含むブロックレベルのオブジェクトのパーセンテージに基づいて高さを定義します。

div.normal {    height: auto}div.big {    height: 160px}div.small {    height: 30px}

width

width 属性は要素の幅を設定します。インラインの非置換要素 (、 など) はこの属性を無視します。

オプションの値:

• auto デフォルト。ブラウザは実際の幅を計算します。

• length は、px、cm、mm、em などの単位を使用して幅を定義します。

• % 幅を含むブロックレベルのオブジェクトのパーセンテージに基づいて幅を定義します。

div.normal {    width: auto}div.big {    width: 160px}div.small {    width: 30px}

max-height

max-height 属性は、要素の最大の高さを設定します。

この属性値は、要素の高さの最大制限を設定します。したがって、要素は指定された値より短くてもかまいませんが、それより高くすることはできません。負の値は許可されません。

オプションの値:

• none デフォルト。要素の高さに制限はありません。

• length は、px、cm、mm、em などの単位を使用して要素の高さの最大値を定義します。

• % 最大の高さを、それを含むブロックレベルのオブジェクトのパーセンテージに基づいて定義します。

p {    padding: 0;    margin: 0;    max-height: 10px;    overflow: none;}

最大高さを設定した後、段落の高さは最大高さを超えることはありませんが、テキストがオーバーフローし、オーバーフローした部分を他の部分で覆うことができます。

max-width

max-width は要素の最大幅を定義します。

この属性値は、要素の幅の最大制限を設定します。したがって、要素は指定された値より狭くても構いませんが、幅を広くすることはできません。負の値は指定できません。

オプションの値:

• none デフォルト。要素の幅に制限はありません。

• length は、px、cm、mm、em などの単位を使用して要素の最大幅の値を定義します。

• % 最大幅を、それを含むブロックレベルのオブジェクトのパーセンテージに基づいて定義します。

p {    max-width:100px;}

min-height

min-height 属性は、要素の最小の高さを設定します。

この属性値は、要素の高さの最小制限を設定します。したがって、要素の高さは指定された値より大きくてもかまいませんが、それより短くすることはできません。負の値は許可されません。

オプションの値:

• length px、cm、mm、em およびその他の単位を使用して、要素の高さの最小値を定義します。デフォルト値は 0 です。

• % 最小の高さを、それを含むブロックレベルのオブジェクトのパーセンテージに基づいて定義します。

p {    min-height:100px;}

min-width

min-width 属性は、要素の最小幅を設定します。

この属性値は、要素の幅の最小制限を設定します。したがって、要素は指定された値より幅が広くても構いませんが、狭くすることはできません。負の値は指定できません。

オプションの値:

• length px、cm、mm、em およびその他の単位を使用して、要素の最小幅値を定義します。 デフォルト値: ブラウザーによって異なります。

• % 最小幅を、それを含むブロックレベルのオブジェクトのパーセンテージに基づいて定義します。

p {    min-width:100px;}

概要 CSS のサイズとは、要素の内容の高さと幅を指します。 非常に単純ですが、その意味は属性の文字通りの意味から理解できます。議論する深さ。

CSS サイズはボックスモデルに一部関係します。ボックスモデルに関する注意事項は後ほど追加します。