40代高卒者が製造業からIT転職する【カードレイアウト2】

programming
学習コースキャンペーンバナー

こんにちは、フローです。

今回もカードレイアウトについて書いていきます。

前回の記事はこちらです。

40代高卒者が製造業からIT転職する【カードレイアウト】

カードレイアウトを作ろう2

前回書けなかった、残りの部分を書いて行こうと思います。

前回の記事は上に貼り付けあるので、是非見てみて下さい。

HTMLの例は、こちらです。

<div class="menu">
  <div class="card">
    <img src="menu-item-1.jpg" alt="メニューアイテム 1">
    <h3>メニューアイテム 1</h3>
    <p>メニューアイテム 1 の説明文</p>
    <p class="price">¥ 1,000</p>
  </div>
  <div class="card">
    <img src="menu-item-2.jpg" alt="メニューアイテム 2">
    <h3>メニューアイテム 2</h3>
    <p>メニューアイテム 2 の説明文</p>
    <p class="price">¥ 1,500</p>
  </div>
  <div class="card">
    <img src="menu-item-3.jpg" alt="メニューアイテム 3">
    <h3>メニューアイテム 3</h3>
    <p>メニューアイテム 3 の説明文</p>
    <p class="price">¥ 800</p>
  </div>
  <!-- 他にもカードが続く -->
</div>

カード同士の間隔を均等にする

いくつかの方法があります。

以下に、いくつかの方法を紹介します。

flexとjustify-contentを使用する方法

カードを横並びに配置する場合、

flexとjustify-contentを使用することで、

カード同士の間隔を均等にすることができます。

例えば、以下のようにCSSを書くことで、カード同士の間隔を均等にすることができます。

.menu {
  display: flex;
  justify-content: space-between;
}

上記のCSSでは、

.menuクラスにdisplay: flex;を指定して、カードを横並びに配置しています。

そして、

justify-content: space-between;を指定することで、

カード同士の間隔を均等にしています。

gridを使用する方法

カードを縦並びに配置する場合、

gridを使用することで、カード同士の間隔を均等にすることができます。

例えば、以下のようにCSSを書くことで、カード同士の間隔を均等にすることができます。

.menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}

上記のCSSでは、

.menuクラスにdisplay: grid;を指定して、カードをグリッド形式で配置しています。

そして、

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));を指定することで、

カードの幅を300ピクセルに固定し、

カードの数に合わせてグリッドの列数を自動調整しています。

また、grid-gap: 20px;を指定することで、カード同士の間隔を20ピクセルにしています。

marginを使用する

flexやgridを使用しない場合、

marginを使用してカード同士の間隔を調整することもできます。

例えば、以下のようにCSSを書くことで、カード同士の間隔を均等にすることができます。

.card {
  margin-right: 20px;
}

.card:last-child {
  margin-right: 0;
}

上記のCSSでは、

.cardクラスにmargin-right: 20px;を指定して、カード同士の間隔を20ピクセルにしています。

そして、

.card:last-childセレクタを使用して、最後のカードの右側の余白を0にすることで、

右側に余白が残らないようにしています。

ユーザーがクリックすることで、詳細な情報が見られるようにする

JavaScriptを使用して、

クリックしたカードに対応する詳細情報を表示する方法があります。

例えば、以下のようなJavaScriptのコードを書くことで、

カードをクリックしたときに、そのカードに対応する詳細情報を表示することができます。

まずは、HTMLの例

<div class="menu">
  <div class="card" data-target="item1">
    <img src="menu-item-1.jpg" alt="メニューアイテム 1">
    <h3>メニューアイテム 1</h3>
    <p>メニューアイテム 1 の説明文</p>
    <p class="price">¥ 1,000</p>
  </div>
  <div class="card" data-target="item2">
    <img src="menu-item-2.jpg" alt="メニューアイテム 2">
    <h3>メニューアイテム 2</h3>
    <p>メニューアイテム 2 の説明文</p>
    <p class="price">¥ 1,500</p>
  </div>
  <div class="card" data-target="item3">
    <img src="menu-item-3.jpg" alt="メニューアイテム 3">
    <h3>メニューアイテム 3</h3>
    <p>メニューアイテム 3 の説明文</p>
    <p class="price">¥ 800</p>
  </div>
  <!-- 他にもカードが続く -->
</div>

<div class="details" id="item1">
  <h2>メニューアイテム 1 の詳細情報</h2>
  <p>メニューアイテム 1 の詳細な説明文</p>
  <p class="price">¥ 1,000</p>
</div>

<div class="details" id="item2">
  <h2>メニューアイテム 2 の詳細情報</h2>
  <p>メニューアイテム 2 の詳細な説明文</p>
  <p class="price">¥ 1,500</p>
</div>

<div class="details" id="item3">
  <h2>メニューアイテム 3 の詳細情報</h2>
  <p>メニューアイテム 3 の詳細な説明文</p>
  <p class="price">¥ 800</p>
</div>

次に、

JavaScriptの例

const cards = document.querySelectorAll('.card');
cards.forEach(card => {
  const targetId = card.dataset.target;
  const target = document.getElementById(targetId);
  card.addEventListener('click', () => {
    target.classList.toggle('active');
  });
});

上記のHTMLでは、各カードに対応する詳細情報を、

<div>要素として用意しています。

各詳細情報の<div>には、idを付与して、カードのdata-targetと対応付けています。

JavaScriptのコードでは、各カードを取得して、

data-targetから詳細情報のidを取得し、詳細情報の<div>を取得しています。

そして、各カードにクリックイベントを設定し、

クリックされたカードに対応する詳細情報の

<div>要素に.activeクラスを付与することで、詳細情報を表示しています。

また、

.activeクラスには、詳細情報を表示するためのスタイルが定義されている必要があります。

例えば、以下のようなCSSを書くことで、詳細情報のスタイルを指定することができます。

details {
  display: none;
}

.details.active {
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  width: 300px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

上記のCSSでは、

.detailsクラスにdisplay: none;を指定して、詳細情報を初めは非表示にしています。

そして、

.details.activeセレクタを使用して、

.activeクラスが付与されたときに詳細情報を表示するようにしています。

詳細情報の表示方法やスタイルは、プロジェクトの要件やデザインに応じて変更することができます。

レスポンシブデザインに対応し、異なるデバイスで見栄えがよくなるように調整する

異なるデバイスや画面サイズに合わせて、

Webページのレイアウトやデザインを自動的に調整する技術です。

以下に、レスポンシブデザインに対応するための方法をいくつか紹介します。

メディアクエリを使用する方法

デバイスの画面サイズに応じて、

CSSのプロパティ値を変更する方法があります。

例えば、以下のようにCSSを書くことで、

デバイスの画面幅が768ピクセル以下の場合とそれ以上の場合で、

カードの表示方法を変えることができます。

/* デバイスの画面幅が768ピクセル以下の場合 */
@media screen and (max-width: 768px) {
  .menu {
    display: block;
  }

  .card {
    margin-bottom: 20px;
  }
}

/* デバイスの画面幅が768ピクセルより大きい場合 */
@media screen and (min-width: 769px) {
  .menu {
    display: flex;
    justify-content: space-between;
  }

  .card {
    margin-bottom: 0;
  }
}

上記のCSSでは、

@mediaルールを使用して、画面幅に応じて異なるスタイルを適用しています。

max-width: 768pxを指定しているメディアクエリでは、

カードを縦に並べるために、

.menuクラスにdisplay: block;を指定し、

.cardクラスにmargin-bottom: 20px;を指定して、

カード同士の間隔を20ピクセルにしています。

一方、min-width: 769pxを指定しているメディアクエリでは、

カードを横に並べるために、

.menuクラスにdisplay: flex;とjustify-content: space-between;を指定し、

.cardクラスにmargin-bottom: 0;を指定して、カード同士の間隔を0にしています。

フレキシブルボックスを使用する方法

コンテンツのレイアウトを自動的に調整する方法があります。

例えば、以下のようにCSSを書くことで、

カードをフレキシブルボックスで配置することができます。

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  width: calc(33.33% - 20px);
  margin-bottom: 20px;
}

上記のCSSでは、

.menuクラスにdisplay: flex;を指定して、

カードをフレキシブルボックスで配置しています。

また、

flex-wrap: wrap;を指定することで、カードが画面幅を超えた場合に改行して折り返すようにしています。

justify-content: space-between;を指定することで、カード同士の間隔を均等にするようにしています。

.cardクラスには、

カードの横幅を指定するwidthプロパティと、

カード同士の間隔を指定するmargin-bottomプロパティを指定しています。

widthプロパティには、

calc()関数を使用して、画面幅に応じたカードの横幅を計算することができます。

例えば、画面幅が1200ピクセルの場合、(33.33% – 20px)は360pxになります。

margin-bottomプロパティには、

カード同士の間隔を指定しています。

画面幅に応じてカードの横幅が自動的に調整されるため、

カード同士の間隔も自動的に調整されるようになります。

以上のように、フレキシブルボックスを使用することで、

画面幅に応じた自動的なレイアウト調整を行うことができます。

レスポンシブデザインに対応するためには、CSSのプロパティや値を画面幅に応じて変更することが重要です。

まとめ

今回はカードレイアウトについて書いてみました。

WEB制作で難しいのが、デザインに対して、どうHTMLとCSSを使って表現できるかです。

とにかく指を動かして、コードを書いてみて下さい。

コピペももちろんオッケーですが、最初は慣れるために書く事をオススメします。

レッツチャレンジ！