1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
title: max-width
slug: Web/CSS/max-width
tags:
- CSS
- CSS Property
- CSS プロパティ
- Reference
translation_of: Web/CSS/max-width
---
<div>{{CSSRef}}</div>
<p><strong><code>max-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の最大幅を設定します。これは {{Cssxref("width")}} プロパティの<a href="/ja/docs/Web/CSS/used_value">使用値</a>が、 <code>max-width</code> で指定した値を上回ることを防ぎます。</p>
<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<p><code>max-width</code> は {{cssxref("width")}} を上書きしますが、 {{cssxref("min-width")}} は <code>max-width</code> を上書きします。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */
max-width: 3.5em;
/* <percentage> 値 */
max-width: 75%;
/* キーワード値 */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content(20em);
/* グローバル値 */
max-width: inherit;
max-width: initial;
max-width: unset;
</pre>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt>{{cssxref("<length>")}}</dt>
<dd><code>max-width</code> を絶対的な値で定義します。</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd><code>max-width</code> を包含ブロックの幅に対するパーセント値で定義します。</dd>
<dt><code>auto</code></dt>
<dd>ブラウザーは指定された要素の <code>max-width</code> を計算して選択します。</dd>
<dt><code>none</code></dt>
<dd>ボックスの寸法を制限しません。</dd>
<dt><code>max-content</code></dt>
<dd>内容物が推奨する <code>max-width</code> です。</dd>
<dt><code>min-content</code></dt>
<dd>内容物の最小の <code>max-width</code> です。</dd>
<dt><code>fit-content({{cssxref("<length-percentage>")}})</code></dt>
<dd>利用可能な空白を指定された引数で置き換えた <code>fit-content</code> 式を使用します。すなわち、 <code>min(max-content, max(min-content, <var>引数</var>))</code> です。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Examples" name="Examples">例</h2>
<p>この例では、 "child" の幅が150ピクセルか "parent" の幅のどちらか小さい方になります。</p>
<div id="basic-max-width-demo">
<pre class="brush: html notranslate"><div id="parent">
<div id="child">
Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
</div>
</div>
</pre>
<pre class="brush: css notranslate">#parent {
background: lightblue;
width: 300px;
}
#child {
background: gold;
width: 100%;
max-width: 150px;
}
</pre>
</div>
<p>{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}</p>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
<p>ページを拡大縮小して文字サイズを拡大した際に、 <code>max-width</code> を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。</p>
<ul>
<li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Sizing', '#width-height-keywords', 'max-width')}}</td>
<td>{{Spec2('CSS4 Sizing')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}}</td>
<td>{{Spec2('CSS3 Sizing')}}</td>
<td>キーワード <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, <code>fill-available</code> を追加。</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("css.properties.max-width")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box_model">The box model</a>, {{cssxref("box-sizing")}}</li>
<li>{{cssxref("width")}}, {{cssxref("min-width")}}</li>
</ul>
|
