CSSのmin-heightプロパティとは？基本構文と実用的なサンプルコードで解説
CSSのmin-heightプロパティを使うと、要素のコンテンツボックスに対して最小の高さを指定できます。このプロパティが設定された要素は、たとえheightの値がmin-heightより小さくても、コンテンツボックスがmin-heightよりも小さくなることはありません。
構文（シンタックス）
CSS min-heightプロパティの基本的な書き方は以下のとおりです。
Selector {
min-height: /*値*/
}
サンプルコード1：ボタンクリックでmin-heightを設定する
それでは、CSS min-heightプロパティの具体的な使用例を見てみましょう。次のコードでは、ボタンをクリックするとJavaScriptによって対象要素にmin-heightが適用されます。
<!DOCTYPE html>
<html>
<head>
<title>CSS min-height Property</title>
</head>
<style>
* {
padding: 2px;
margin:5px;
}
button {
border-radius: 10px;
}
#containerDiv {
width:70%;
margin: 0 auto;
padding:20px;
background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
text-align: center;
border-radius: 10px;
}
#contentDiv{
min-height:150px;
}
</style>
<body>
<div id="containerDiv">
<div id="contentDiv">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</div>
<button onclick="add()" class="btn">Set minHeight</button>
</div>
<script>
function add() {
document.querySelector('#contentDiv').style.minHeight = "100px";
}
</script>
</body>
</html>
実行結果
上記コードの出力結果は次のとおりです。
「Set minHeight」ボタンをクリックする前：
「Set minHeight」ボタンをクリックした後：
サンプルコード2：複数要素での高さ比較
続いて、min-heightプロパティのもう一つの使用例です。この例では、テキスト量の異なる2つのdiv要素を並べて表示し、片方だけにmin-heightを適用して挙動を確認します。
<!DOCTYPE html>
<html>
<head>
<title>CSS min-height Property</title>
</head>
<style>
* {
padding: 2px;
margin:5px;
}
button {
border-radius: 10px;
}
#containerDiv {
width:70%;
margin: 0 auto;
padding:20px;
background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
text-align: center;
border-radius: 10px;
}
#contentDiv1, #contentDiv2{
width:50%;
border: 2px solid black;
margin: 0 auto;
}
</style>
<body>
<div id="containerDiv">
<div id="contentDiv1">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</div>
<div id="contentDiv2">
This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy.
</div>
<button onclick="add()" class="btn">Set minHeight</button>
</div>
<script>
function add() {
document.querySelector('#contentDiv1').style.minHeight = "95px";
}
</script>
</body>
</html>
実行結果
上記コードの出力結果は次のとおりです。
「Set minHeight」ボタンをクリックする前：
「Set minHeight」ボタンをクリックした後：
まとめ
min-heightプロパティは、コンテンツ量が少ない場合でも要素の高さを一定以上に保ちたいときに便利です。カード型レイアウトやリスト表示など、複数の要素の高さを揃えたい場面で特に活躍します。heightとの違いを理解し、レスポンシブデザインにも柔軟に対応できるよう活用しましょう。
-
CSSのborder-colorプロパティの使い方を徹底解説
CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &
-
CSSのborder-styleプロパティの使い方！スタイル一覧とサンプルコード
CSSのborder-styleプロパティは、要素の枠線（ボーダー）の見た目を指定するためのプロパティです。実線・破線・点線など、さまざまなスタイルの枠線を簡単に描画できます。 また、border-top-style（上）、border-right-style（右）、border-bottom-style（下）、border-left-style（左）という個別のプロパティを使えば、各辺ごとに異なるスタイルを設定することも可能です。 border-styleで指定できる主な値 none / hidden … 枠線を表示しない solid … 1本の実線 double … 2本の二重線 da