【CSS】幅100%と幅50%の比較｜w-100の使い方

このガイドでは、width: 100%; と width: 50%; の違いを比較し、どちらがどのような場合に役立つかを理解します。

🔹 部分コード

<div class="w-100">
  幅100%に設定された要素。
</div>

<style>
.w-100 {
  width: 100%;
}
</style>

💻 完全動作コード（※このコピペのみでHTMLで動作するコード）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>幅100%と幅50%の比較</title>
  <style>
    .w-100 {
      width: 100%;
      background-color: #90EE90;
      padding: 1rem;
    }
    .w-50 {
      width: 50%;
      background-color: #ADD8E6;
      padding: 1rem;
    }
  </style>
</head>
<body>
  <div class="w-100">幅100%に設定された要素。</div>
  <div class="w-50">幅50%に設定された要素。</div>
</body>
</html>

🧩 応用と活用方法

width: 100%; は、親要素の幅に合わせて要素を調整するための最も基本的な方法です。レスポンシブデザインに適しており、画面サイズに応じて柔軟に変化します。

一方で、width: 50%; は、要素を親要素の半分の幅に設定するために使用されます。これは、複数の要素を横並びに配置する際に便利です。

📚 widthプロパティの実践的な使い分け

CSSのwidthプロパティは、要素の横幅を制御する基本的なプロパティですが、%指定とpx指定では挙動が大きく異なります。%指定は親要素に対する相対的な幅を、px指定は絶対的な幅を表します。

🔍 レスポンシブデザインにおける%指定の利点

width: 100%;は特にレスポンシブデザインで重宝します。親要素（多くの場合はビューポート）の幅に合わせて伸縮するため、様々なデバイスサイズに対応できます。例えば、モバイルファーストデザインでは、基本をwidth: 100%に設定し、メディアクエリで段階的にレイアウトを調整するのが一般的です。

📊 複数列レイアウトでの活用

width: 50%;は2列レイアウトを作成する際に便利です。ただし、display: inline-blockやfloat、Flexbox/Gridと組み合わせないと、要素は縦に積まれてしまいます。例えばFlexboxを使う場合、親要素にdisplay: flex; flex-wrap: wrap;を設定することで、子要素をきれいに横並びにできます。

注意点として、%指定はパディングやボーダーを含まない「コンテンツボックス」の幅を指定します。ボックスモデルをbox-sizing: border-boxに変更すると、パディングやボーダーを含めた全体の幅を%指定できるようになり、レイアウト計算が楽になります。

コピーしました！