パーセンテージによる可変幅
パーセンテージベースの幅を使って、コンテナーに合わせて拡大縮小するレイアウトを作成します。
「パーセンテージによる可変幅」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
流動的な幅を使う理由
固定幅（ピクセル単位）のレイアウトは、固定値より狭い画面では崩れてしまいます。パーセントを使った流動的な幅なら、どのコンテナやビューポートのサイズにも比例してレイアウトを拡大・縮小できます。
パーセント幅の基本
パーセント幅は親コンテナの幅を基準にします。width: 50%を指定した子要素は、常に親の幅の半分になります。
<div style="width:300px;border:1px dashed #999;padding:4px;">
<div class="half-width" style="background:#4f8cff22;border:1px solid #4f8cff;">width: 50%</div>
<div class="third-width" style="background:#ffb84d22;border:1px solid #ffb84d;">width: 33.333%</div>
</div>パーセントとボックスサイズ
box-sizing: border-boxを指定すると、パーセント幅にパディングとボーダーが含まれます。これにより、パーセントで列を簡単に指定できます。パディングに関係なく、50%は正確に半分になります。
<div style="width:300px;border:1px dashed #999;">
<div class="col-half" style="background:#4f8cff22;border:1px solid #4f8cff;">50% including padding/border</div>
</div>流動的な2列レイアウト
floatを使ったシンプルな（レガシー方式の）流動的レイアウトです。
<div style="width:100%;overflow:auto;">
<div class="col" style="background:#4f8cff22;border:1px solid #4f8cff;">Column A</div>
<div class="col" style="background:#ffb84d22;border:1px solid #ffb84d;">Column B</div>
</div>流動的なFlexboxの列
流動的な列レイアウトには、Flexboxを使うほうがすっきり記述できます。
<div class="flex-row">
<div class="col-main" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Main (flex: 2)</div>
<div class="col-side" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Side (flex: 1)</div>
</div>パーセントのパディング
パーセントで指定したパディングは、上下のパディングであっても常に親の幅を基準にします（高さではありません）。これを利用してアスペクト比に関するテクニックを実現できます。
<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>現代的なアスペクト比の指定
aspect-ratioプロパティを使うと、アスペクト比を維持するためのパディングのテクニックを置き換えられます。
<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>流動的なレイアウトでのmax-width
パーセント幅とmax-widthを組み合わせると、大きな画面で行が広がりすぎるのを防げます。
<article class="article" style="background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">Article column — 90% wide, capped at 800px, centered</article>パーセントで高さを指定する際の注意点
パーセントで高さを指定するには、親要素に定義済みの高さが必要です。親要素のheight: autoが指定されている場合、子要素のパーセント指定の高さもautoとして計算されます。
固有サイズ指定キーワード
最新のCSSでは、より柔軟なサイズ指定が可能です：
min-content：コンテンツに収まる最小サイズmax-content：すべてのコンテンツを1行に収めるサイズfit-content：min-contentとmax-contentの中間のサイズ
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">Tag</span>可変グリッドパターン
inline-block（レガシー）または最新のCSSを使用した、一般的な可変グリッドです：
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;min-height:60px;">A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;min-height:60px;">B</div>
<div style="background:#7ee78722;border:1px solid #34c759;min-height:60px;">C</div>
</div>クイックチェック
親要素の幅が600pxです。子要素にwidth: 60%とpadding: 20px（box-sizing: border-box）が指定されています。子要素のコンテンツ幅はいくつですか？
まとめ
パーセント幅を指定すると、親コンテナに合わせて拡大縮小する可変レイアウトを作成できます。max-widthと組み合わせて、コンテンツが広がりすぎるのを防いでください。レスポンシブなメディアにはaspect-ratioを使用してください。可変の列には、パーセント指定のフロートよりもFlexboxとGridのほうが適しています。
AI チューターと学ぶ CSS — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「パーセンテージによる可変幅」レッスンは無料ですか？
はい。「パーセンテージによる可変幅」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「パーセンテージによる可変幅」で何を学びますか？
パーセンテージベースの幅を使って、コンテナーに合わせて拡大縮小するレイアウトを作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「パーセンテージによる可変幅」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。