CSSのmax-heightプロパティとは？使い方と実例をわかりやすく解説
max-heightプロパティとは？
CSSのmax-heightプロパティを使用すると、要素のコンテンツボックスに固定の最大高さを定義できます。このプロパティが適用された要素は、実際の高さがmax-heightの値よりも大きい場合でも、コンテンツボックスがそれ以上高くなることはありません。
特にoverflow: hidden;と組み合わせることで、はみ出したコンテンツを非表示にし、レイアウトをすっきりと整えることができます。
構文
CSS max-heightプロパティの構文は以下のとおりです。
Selector {
max-height: /*値*/
}max-heightで指定できる主な値
- none：高さの上限を設けません（初期値）。
- length：px、em、remなどの単位で最大高さを指定します。
- %：包含ブロックの高さに対する割合で指定します。
- initial：プロパティを初期値に戻します。
- inherit：親要素の値を継承します。
サンプルコード1：ボタンでmax-heightを変更する
以下の例では、ボタンをクリックするとJavaScriptによってmax-heightの値が50pxから100pxへと動的に変更されます。
<!DOCTYPE html>
<html>
<head>
<title>CSS max-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{
max-height:50px;
overflow: hidden;
}
</style>
<body>
<div id="containerDiv">
<div id="contentDiv">
これはダミーテキストを含む段落1です。これはダミーテキストを含む段落1です。これはダミーテキストを含む段落1です。これはダミーテキストを含む段落1です。これはダミーテキストを含む段落1です。これはダミーテキストを含む段落1です。
</div>
<button onclick="add()" class="btn">maxHeightを設定</button>
</div>
<script>
function add() {
document.querySelector('#contentDiv').style.maxHeight = "100px";
}
</script>
</body>
</html>実行結果
「maxHeightを設定」ボタンをクリックする前：
「maxHeightを設定」ボタンをクリックした後：
サンプルコード2：画像にmax-heightを適用する
次の例では、画像を囲むコンテナにmax-height: 150px;を指定しています。max-heightの定義の有無によって、表示がどのように変わるかを確認できます。
<!DOCTYPE html>
<html>
<head>
<title>CSS max-height</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
#containerDiv {
margin: 0 auto;
max-height: 150px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS max-height</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/openshift/images/openshift-mini-logo.jpg">
</div>
</fieldset>
</form>
</body>
</html>実行結果
max-heightを定義する前：
max-heightを定義した後：
まとめ
max-heightプロパティを使えば、要素が一定以上の高さにならないよう簡単に制御できます。可変コンテンツのレイアウト調整やレスポンシブデザインにおいて非常に便利なプロパティなので、overflowプロパティとの組み合わせもあわせて覚えておきましょう。
-
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