CSS min-widthプロパティとは？使い方と実行例をわかりやすく解説
CSSのmin-widthプロパティを使用すると、要素のコンテンツボックスに対して固定の最小幅を定義できます。このプロパティが適用された要素は、widthプロパティにmin-widthよりも小さい値が指定されていたとしても、コンテンツボックスがmin-widthで指定した幅より狭くなることはありません。レスポンシブデザインにおいてレイアウト崩れを防ぐために非常に役立つプロパティです。
構文
CSS min-widthプロパティの構文は次のとおりです。
Selector {
min-width: /*value*/
}主な指定できる値
- <length>：px、em、remなどの単位で最小幅を指定します。
- <percentage>：親要素（包含ブロック）の幅に対する割合（%）で指定します。
- max-content / min-content / fit-content：コンテンツの内容に応じた幅を指定します。
- none：最小幅の制限を設けません（初期値）。
サンプルコード①：特定の要素だけmin-widthを変更する
それでは、CSS min-widthプロパティの具体的な使用例を見てみましょう。この例では、ボタンをクリックすると2番目のコンテンツ要素にmin-widthが適用されます。
<!DOCTYPE html>
<html>
<head>
<title>CSS min-width 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-width:200px;
border: 1px solid black;
}
</style>
<body>
<div id="containerDiv">
<div class="contentDiv">
This is paragraph 1 with some dummy text.
</div>
<div class="contentDiv">
This is paragraph 2 with some dummy text.
</div>
<div class="contentDiv">
This is paragraph 2 with some dummy text.
</div>
<button onclick="add()" class="btn">Set minWidth</button>
</div>
<script>
function add() {
document.querySelectorAll('.contentDiv')[1].style.minWidth = "100%";
}
</script>
</body>
</html>出力結果
上記コードの出力は以下の通りです。
「Set minWidth」ボタンをクリックする前：
「Set minWidth」ボタンをクリックした後：
サンプルコード②：すべての要素にmin-widthを適用する
続いて、別の例を見てみましょう。こちらの例では、ボタンをクリックするとすべてのコンテンツ要素に対してmin-widthが一括で適用されます。
<!DOCTYPE html>
<html>
<head>
<title>CSS min-width Property</title>
</head>
<style>
* {
padding: 2px;
margin:5px;
}
button {
border-radius: 10px;
}
#containerDiv {
width:70%;
margin: 0 auto;
padding:20px;
background-image: linear-gradient(62deg, #fbab7e 0%, #f7ce68 100%);
text-align: center;
border-radius: 10px;
}
.contentDiv{
min-width:200px;
border: 1px solid black;
}
</style>
<body>
<div id="containerDiv">
<div class="contentDiv">
This is paragraph 1 with some dummy text.
</div>
<div class="contentDiv">
Lorem Text
</div>
<div class="contentDiv">
This is paragraph 3 with some dummy text.
</div>
<button onclick="add()" class="btn">Set minWidth</button>
</div>
<script>
function add() {
var all = document.querySelectorAll('.contentDiv');
for(var i=0; i<all.length; i++)
all[i].style.minWidth = "100%";
}
</script>
</body>
</html>出力結果
上記コードの出力は以下の通りです。
「Set minWidth」ボタンをクリックする前：
「Set minWidth」ボタンをクリックした後：
まとめ
min-widthプロパティは、要素が一定の幅以下に縮小することを防ぎたい場合に便利です。特にフレキシブルなレイアウトやレスポンシブデザインでは、テキストの可読性を維持したり、ボタンやフォーム部品の操作性を確保したりするために活用されます。widthプロパティとの組み合わせはもちろん、FlexboxやGridレイアウトの中でも有効に機能するため、ぜひ使いこなしておきましょう。
-
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