↑上へ
ホーム
特集・講座編
HTMLとCSSの基本と概要講座
5章:応用編

レスポンシブデザイン入門

ボックスモデルとレイアウトの基本

このページでは、ウェブページを構成する要素のレイアウトに関連する「ボックスモデル」とその基本的な考え方について学びます。ボックスモデルは、ウェブページの要素がどのように配置され、サイズが決まるかを理解する上で重要な概念です。

ボックスモデルとは

ボックスモデルは、ウェブページの要素を表現するための概念で、マージン、ボーダー、パディング、コンテンツの4つの領域で構成されます。

  1. コンテンツ: 要素の実際の内容 (テキストや画像)。
  2. パディング: コンテンツとボーダーの間のスペース。
  3. ボーダー: 要素の周囲を取り囲む線。
  4. マージン: 要素の外側にある空間で、他の要素との間隔を作ります。

CSSでは、これらのプロパティを使ってボックスモデルの各領域のサイズを指定できます。

<style>
  div {
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
  }
</style>

上記のコードでは、<div>要素のパディングを10px、ボーダーの幅を2px、マージンを20pxに設定しています。

表示形式

要素の表示形式は、ブロックレベル要素、インライン要素、インラインブロック要素の3つに分けられます。

  1. ブロックレベル要素: 縦方向に並ぶ要素で、一般的には幅が親要素全体を占めます。例: <div>、<h1>～<h6>、<p> など。
  2. インライン要素: 横方向に並ぶ要素で、内容の幅だけを占めます。例: <span>、<a>、<em> など。
  3. インラインブロック要素: インライン要素のように横方向に並び、ブロック要素のように幅と高さを指定できる要素です。例: 、

これらの表示形式は、CSSのdisplayプロパティを使って変更することができます。例えば、インライン要素をブロック要素に変更するには以下のように指定します。

<style>
  span {
    display: block;
  }
</style>

ポジショニング

CSSには、要素の配置方法を制御するためのポジショニングが用意されています。主なポジショニングは、以下の5つです。

  1. static: デフォルトのポジショニング。要素は通常の文書フローに従って配置されます。
  2. relative: 要素は通常の文書フローに従って配置された後、指定された相対位置に移動します。
  3. absolute: 要素は親要素に対して絶対位置で配置され、通常の文書フローから外れます。
  4. fixed: 要素はブラウザウィンドウに対して固定位置で配置され、スクロールに追従します。
  5. sticky: 要素は通常の文書フローに従って配置され、一定範囲でスクロールに追従するような挙動をします。

これらのポジショニングは、CSSのpositionプロパティを使って指定できます。

<style>
  div {
    position: relative;
    top: 20px;
    left: 10px;
  }
</style>

上記のコードでは、<div>要素のポジショニングをrelativeに設定し、通常の文書フローに従った配置から上に20px、左に10pxずらしています。

練習問題

  1. ボックスモデルの4つの要素を挙げてください。
  2. マージンを設定するCSSプロパティは何ですか？
  3. パディングを設定するCSSプロパティは何ですか？

解答と解説

  1. 要素の表示形式を変更するCSSプロパティは display です。
  2. ポジショニングを設定するCSSプロパティは position

レスポンシブデザイン入門

レスポンシブデザインとは、ウェブサイトのデザインが異なるデバイスや画面サイズに適応し、ユーザーが快適に閲覧できるようにするデザインの手法です。このページでは、レスポンシブデザインの基本要素であるビューポート、メディアクエリ、フレキシブルボックスレイアウト、グリッドレイアウトを解説します。

ビューポートの設定

ビューポートは、ウェブページが表示される画面領域のことです。まず、ビューポートを設定することで、ページが正しく表示されるようにします。以下のメタタグをHTMLの<head>タグ内に追加しましょう。

<meta name="viewport" content="width=device-width, initial-scale=1">

これにより、ページの幅がデバイスの画面幅に合わせられ、ズームが初期値1に設定されます。

メディアクエリの基本

メディアクエリは、画面の幅や高さなどの条件に応じて、異なるスタイルを適用するためのCSSの機能です。以下の例では、画面幅が600px以下の場合、背景色を青に設定しています。

<style>
  body {
    background-color: white;
  }
  @media (max-width: 600px) {
    body {
      background-color: blue;
    }
  }
</style>

このようにして、デバイスや画面サイズに合わせて異なるスタイルを適用することができます。

練習問題1

以下のコードで、画面幅が768px以下の場合に文字色を赤に設定するメディアクエリを追加してください。

<style>
  p {
    color: black;
  }
  /* ここにメディアクエリを追加してください */
</style>
<p>このテキストの色は、画面幅が768px以下の場合に赤になります。</p>

練習問題の解答と解説

以下のようにメディアクエリを追加すれば、画面幅が768px以下の場合に文字色が赤になります。

<style>

p {
color: black;
}
@media (max-width: 768px) {
p {
color: red;
}
}
</style> 
<p>このテキストの色は、画面幅が768px以下の場合に赤になります。</p>

フレキシブルボックスレイアウト（Flexbox）

フレキシブルボックスレイアウト（Flexbox）は、レスポンシブデザインに適したレイアウト方法の1つです。要素の大きさや順序を容易に変更できるため、様々な画面サイズに対応できます。Flexboxを使うには、親要素に対して display: flex; を適用します。

<style>
  .container {
    display: flex;
  }
</style>
<div class="container">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
</div>

この状態で、子要素の大きさや並び順などを指定することができます。

グリッドレイアウト

グリッドレイアウトは、2次元のレイアウトシステムで、行と列を使用してコンテンツを配置します。グリッドレイアウトを使用するには、親要素に対して display: grid; を適用します。

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
</style>
<div class="container">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
</div>

上記の例では、3つの等幅の列を作成して要素を配置しています。行と列のサイズや間隔などを指定することができます。

練習問題2

以下のコードにおいて、画面幅が480px以下の場合に2列のグリッドレイアウトになるようにメディアクエリを追加してください。

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  /* ここにメディアクエリを追加してください */
</style>
<div class="container">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
</div>

練習問題の解答と解説

以下のようにメディアクエリを追加すれば、画面幅が480px以下の場合に2列のグリッドレイアウトになります。

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  @media (max-width: 480px) {
    .container {
      grid-template-columns: repeat(2, 1fr);
    }
  }
</style>
<div class="container">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
</div>

これで、画面幅が480px以下の場合に2列のグリッドレイアウトに適応されます。レスポンシブデザインの基本要素を理解し、実際に練習問題を通して手を動かしてみることで、より理解を深めることができます。

↑ 5章:応用編