ホーム プログラミング言語 Web関連 css3 CSS 幅と高さ (幅と高さ)






CSS 幅と高さ (幅と高さ)




 
 
CSS の size プロパティは、要素の幅と高さのプロパティを参照するもので、非常にシンプルですが、マスターしなければならないスキルです。 CSS には、要素の幅と高さを設定するために、幅、高さ、最大幅、最小幅、最大高さ、および最小高さなどのいくつかの属性が用意されています. これらの要素は非常に使いやすく、以下で簡単に紹介します. .

 

1.幅(width)

要素コンテンツ領域の幅は width 属性で設定でき、属性のオプション値は次のとおりです。

価値 説明
auto デフォルトでは、ブラウザーは要素の実際の幅を自動的に計算します。
length px、cm、その他の単位で特定の値を使用して幅を定義します
% 親要素の幅のパーセンテージに基づいて幅を定義します
inherit 親要素から width 属性の値を継承する

ヒント: <img>タグの場合、幅属性のみが指定されている場合、高さ属性は元の画像サイズに比例してスケーリングされます。

一般に、要素の幅と高さを同時に定義するには、width 属性を height 属性と組み合わせて使用​​する必要があります。これは、一部の要素にはデフォルトの幅または高さが設定されていない (またはデフォルトの幅と高さが 0px である)ためです。 )、幅または高さが定義されておらず、要素にコンテンツ (子、テキストなど) がない場合、この要素の幅または高さは 0px に設定されます。外。

【例】幅属性で要素の幅を設定する場合:

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            margin-top: 5px;
            margin-bottom: 5px;
        }
        div.box-one {
            /*結果をより明確に示すために、ここで要素に上枠線と背景色を設定しています*/
            border: 1px solid black;
            background: #CFF;
        }
        span {
            border: 1px solid red;
            background: #CCC;
        }
        div.box-two {
            border: 1px solid black;
            background: #CFF;
            width: 200px;
        }
        img.img-one {
            width: 100px;
        }
        img.img-two {
            width: 160px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="box-one"></div>
    <span></span>
    <div class="box-two">width 属性</div>
    <img src="./css.png" class="img-one">
    <img src="./css.png" class="img-two">
</body>
</html> 

実行結果は次の図のとおりです。

図: 幅属性のデモ
図: 幅属性のデモ

2.高さ(height)

height 属性は、要素のコンテンツ領域の高さを定義するために使用されます. 属性のオプションの値は次のとおりです:

価値 説明
auto デフォルトでは、ブラウザは要素の実際の高さを自動的に計算します
length 特定の値を使用して px、cm、その他の単位を一致させ、高さを定義します
% 親要素の高さのパーセンテージに基づいて高さを定義します
inherit 親要素から width 属性の値を継承する

ヒント: width 属性であれ、height 属性であれ、それらの値を負の数に設定することはできません。

デフォルトでは、ブラウザーは<div><p>などの一部の要素の幅を 100% に設定し、要素の高さは要素内のコンテンツに応じて決定されるため、場合によっては、要素の幅を設定する必要があります固定の幅または高さを設定します。

[例] width および height 属性を使用して、要素の幅と高さを設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            /*要素の上部線と背景色をより直感的に表示するため、ここでは要素に上部線と背景色を設定しています*/
            border: 1px solid black;
            background: #CFF;
            width: 300px;
            height: 100px;
        }
        p {
            border: 1px solid green;
            background: #CCC;
            width: 150px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <p></p>
</body>
</html> 

実行結果は次の図のとおりです。

図: 高さプロパティのデモ
図: 高さプロパティのデモ

3.max-width & max-height

max-width 属性と max-height 属性は、要素コンテンツ領域の最大幅と最大高さをそれぞれ設定するために使用されます。 max-width および max-height 属性が定義されている場合、width または height 属性の実際の値に関係なく、width および height 属性の実際の値は max-width および max-height の値以下になります。 -高さ属性。 max-width および max-height 属性のオプションの値は次のとおりです。

価値 説明
none 要素の最大幅または最大高さに制限がないことを意味するデフォルト値
length 要素の最大幅または高さを定義するには、px、cm、およびその他の単位で特定の値を使用します
% 親要素の幅と高さのパーセンテージに基づいて、最大の幅または高さを定義します
inherit 親要素から max-width または max-height 属性の値を継承する

例として max-width 属性を取り上げます: (max-height 属性の特性は似ています)

  • max-width 属性の値が width 属性より小さい場合、width 属性の値は max-width 属性と同じ値になるように再定義されます。
  • max-width 属性の値が width より大きい場合、max-width 属性は無視されます。
  • max-width 属性の値が min-width より小さい場合、max-width 属性は無視されます。

[例] max-width 属性と max-height 属性を使用して、要素の幅と高さの最大値を設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            /*効果をより鮮明に表示するため、上枠線と背景色を設定する*/
            border: 1px solid black;
            background: #CFF;
            max-width: 280px;
            max-height: 200px;
            width: 300px;
            height: 180px;
        }
    </style>
</head>
<body>
    <div>
        max-width: 280px;<br>
        max-height: 200px;<br>
        width: 300px;<br>
        height: 180px;
    </div>
</body>
</html> 

実行結果は次の図のとおりです。

図: max-width および max-height プロパティのデモ
図: max-width および max-height プロパティのデモ

 

4.最小幅と最小高さ

min-width 属性と min-height 属性は、要素のコンテンツ領域の最小幅と最小高さを設定するために使用されます. min-width 属性と min-height 属性が定義されている場合, width または height 属性の実際の値に関係なくつまり、width および height 属性です。実際の値は、min-width および min-height 属性の値以上になります。 min-width および min-height 属性の可能な値は次のとおりです。

価値 説明
length px、cm、その他の単位で特定の値を使用して、要素の最小幅または高さを定義します。デフォルト値はブラウザによって異なります
% 親要素の幅と高さのパーセンテージに基づいて、最小の幅または高さを定義します
inherit 親要素から min-width 属性と min-height 属性の値を継承する

例として min-width 属性を取り上げます: (min-height 属性の特性は似ています)

  • min-width 属性の値が width より小さい場合、min-width 属性は無視されます。
  • min-width 属性の値が width より大きい場合、min-width 属性の値は min-width 属性と同じ値として再定義されます。
  • min-width 属性の値が max-width より大きい場合、max-width 属性は無視されます。

[例] min-width 属性と min-height 属性を使用して、要素の最小の幅と高さを設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            /*効果がよく分かるように、上辺の線と背景色を設定する*/
            border: 1px solid black;
            background: #CFF;
            min-width: 280px;
            min-height: 200px;
            width: 300px;
            height: 180px;
        }
    </style>
</head>
<body>
    <div>
        min-width: 280px;<br>
        min-height: 200px;<br>
        width: 300px;<br>
        height: 180px;
    </div>
</body>
</html> 

実行結果は次の図のとおりです。

図: min-width および min-height プロパティのデモ
図: min-width および min-height プロパティのデモ
 

「CSS 幅と高さ (幅と高さ)」についてわかりやすく解説!絶対に観るべきベスト2動画

【超入門】何となく使ってない?ボックスモデル&box-sizingプロパティ完全理解への道!【HTML・CSS コーディング】
理屈っぽいCSS入門 #06:#f00はなぜ赤? カラーコードとサイズの単位