CSS max-widthプロパティとは？基本構文と実例つきでわかりやすく解説
CSS max-widthプロパティとは
CSSのmax-widthプロパティを使うと、要素のコンテンツボックスに「最大幅」を設定できます。このプロパティが指定されている場合、たとえwidthの値がmax-widthより大きくても、要素のコンテンツボックスがそれ以上広がることはありません。
レスポンシブデザインにおいて、レイアウトの崩れを防ぎながら柔軟な幅調整を行いたい場面で非常に役立つプロパティです。
指定できる主な値
- none：最大幅の制限なし（初期値）
- length：
pxやemなどの絶対値で指定 - %：親要素の幅に対する割合で指定
構文
CSS max-widthプロパティの基本的な書式は以下のとおりです。
Selector {
max-width: /* 値 */
}それでは、実際の使用例を見ていきましょう。
使用例1：max-widthでコンテンツの幅を制限する
次の例では、#contentDivにmax-width: 200px;を設定し、ボタンをクリックするとJavaScriptによってmax-widthが100%に切り替わる仕組みになっています。
<!DOCTYPE html>
<html>
<head>
<title>CSS max-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{
max-width:200px;
overflow: hidden;
}
</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 maxWidth</button>
</div>
<script>
function add() {
document.querySelector('#contentDiv').style.maxWidth = "100%";
}
</script>
</body>
</html>出力結果
「Set maxWidth」ボタンをクリックする前：
「Set maxWidth」ボタンをクリックした後：
クリック前はテキストが200pxの幅に収められていますが、クリック後はmax-widthが100%に変更され、コンテナいっぱいに広がっていることが確認できます。
続いて、別の例も見てみましょう。
使用例2：複数の要素で幅の挙動を比較する
次の例では、2つの異なる幅を持つ要素を用意し、ボタン操作によって片方のmax-widthを80%に動的に変更しています。
<!DOCTYPE html>
<html>
<head>
<title>CSS max-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;
}
#contentDiv1, #contentDiv2{
width:100%;
border: 1px solid black;
margin: 0 auto;
}
#contentDiv2{
width: 80%;
}
</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 maxWidth</button>
</div>
<script>
function add() {
document.querySelector('#contentDiv1').style.maxWidth = "80%";
}
</script></body></html>出力結果
「Set maxWidth」ボタンをクリックする前：
「Set maxWidth」ボタンをクリックした後：
クリック後は#contentDiv1にmax-width: 80%が適用され、#contentDiv2と同じ幅に制限されていることがわかります。このように、max-widthプロパティを活用すれば、画面幅に応じた柔軟かつ安全なレイアウト設計が可能になります。
-
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