2025年8月8日金曜日

w3.cssフレームワークを使用して、都道府県の名産品を紹介する、背景色が異なる名刺サイズのカードを作成

 承知いたしました。w3.cssフレームワークを使用して、都道府県の名産品を紹介する、背景色が異なる名刺サイズのカードを作成するHTMLコードを以下にご紹介します。

HTMLコード

以下のコードを.htmlファイルとして保存し、ブラウザで開いてみてください。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<title>都道府県の名産品カード</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
/* 名刺サイズを再現するためのカスタムCSS */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.w3-card-4 {
  width: 320px; /* 名刺の横幅に近いサイズ */
  height: 180px; /* 名刺の縦幅に近いサイズ */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
.card-content {
  padding: 16px;
}
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
</style>
</head>
<body>

<div class="w3-container w3-padding-32 w3-blue-grey">
  <h1 class="w3-center">日本の名産品紹介</h1>
  <p class="w3-center">各都道府県を代表する名産品をカード形式でご紹介します。</p>
</div>

<div class="w3-container w3-padding-32 card-container">

  <a href="https://example.com/hokkaido" class="card-link">
    <div class="w3-card-4 w3-hover-shadow w3-light-blue w3-animate-zoom">
      <div class="card-content">
        <h3>北海道</h3>
        <p>トップ名産品：ジャガイモ</p>
      </div>
    </div>
  </a>

  <a href="https://example.com/okinawa" class="card-link">
    <div class="w3-card-4 w3-hover-shadow w3-light-green w3-animate-zoom">
      <div class="card-content">
        <h3>沖縄県</h3>
        <p>トップ名産品：ゴーヤ</p>
      </div>
    </div>
  </a>

  <a href="https://example.com/fukuoka" class="card-link">
    <div class="w3-card-4 w3-hover-shadow w3-pale-yellow w3-animate-zoom">
      <div class="card-content">
        <h3>福岡県</h3>
        <p>トップ名産品：とんこつラーメン</p>
      </div>
    </div>
  </a>

  </div>

</body>
</html>

コードの解説

  • w3.cssの読み込み

    • <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">でw3.cssを読み込んでいます。これにより、クラス名だけでスタイルを適用できます。

  • カードのコンテナ

    • <div class="card-container">は、名刺サイズのカードを複数並べるためのラッパーです。display: flex;とflex-wrap: wrap;を使うことで、画面サイズに応じてカードが自動的に折り返されるようにしています。

  • カード本体

    • <div class="w3-card-4">がカードの基本となる要素です。

      • w3-card-4: w3.cssのクラスで、影付きのカードデザインを適用します。

      • w3-hover-shadow: カーソルを合わせると影が強くなるホバーエフェクトです。

      • w3-light-blue, w3-light-green, w3-pale-yellow: カードの背景色を個別に指定しています。w3.cssには他にも多数の色クラスがありますので、お好みで変更してください。

      • w3-animate-zoom: マウスオーバー時にカードが拡大するアニメーションです。

  • リンク

    • <a>タグをカード全体を囲むように配置することで、カードのどこをクリックしても指定のページへ遷移するようにしています。

  • カスタムCSS

    • <style>タグ内で、名刺サイズに近いサイズ（width: 320px;, height: 180px;）を再現するためのカスタムスタイルを定義しています。

    • card-linkクラスは、<a>タグのデフォルトのスタイル（下線や文字色）をなくし、親要素の色を継承するようにしています。

    • card-containerクラスは、カードの配置を調整するために使用しています。

このコードを基に、他の都道府県のカードを追加したり、背景色やリンク先を変更したりして、オリジナルのWebサイトを作成してみてください。

-

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)