Font Awesome のアイコンを使って、紹介カードを作成する方法

この記事では、Font Awesome のアイコンを使って、紹介カードを作成する方法を紹介します。
ここでは、犬・猫・小動物などを紹介するカードをレイアウトしてみましょう。

1 実装のポイント

• Flexboxを使って横並びレイアウトを実現
• カードごとにアイコン・名前・説明文をセット
• スマホ対応で1列、タブレットでは2列に変化
• Font Awesomeを使ってペットに合ったアイコンを表示

2 HTMLに貼り付け（Font Awesome 4.7.0（v6 以降）の最新バージョン）

<h2 class="section-heading fade-in">わたしたちの大切な仲間たち</h2>
<div class="card-wrap">

  <div class="card">
    <h4><i class="fa-solid fa-dog"></i> ココ（柴犬）</h4>
    <p>元気いっぱいで人懐っこい性格。毎朝の散歩が大好きです。</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample01.jpg" alt="柴犬のココ" class="pet-photo">
  </div>

  <div class="card">
    <h4><i class="fa-solid fa-cat"></i> ミミ（スコティッシュフォールド）</h4>
    <p>静かでおっとりした性格。お気に入りの場所で丸くなって寝ています。</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample02.jpg" alt="スコティッシュフォールドのミミ" class="pet-photo">
  </div>

  <div class="card">
    <h4><i class="fa-solid fa-fish"></i> ブルー（ベタ）</h4>
    <p>水槽の中を優雅に泳ぐ姿が人気。光に反射して輝くヒレが美しい。</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample03.jpg" alt="熱帯魚のブルー" class="pet-photo">
  </div>

  <div class="card">
    <h4><i class="fa-solid fa-paw"></i> チョコ（トイプードル）</h4>
    <p>甘えん坊で好奇心旺盛。ふわふわの毛が自慢です。</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample04.jpg" alt="トイプードルのチョコ" class="pet-photo">
  </div>

  <div class="card">
    <h4><i class="fa-solid fa-dove"></i> ピーちゃん（セキセイインコ）</h4>
    <p>おしゃべり上手で明るいムードメーカー。家族の声をまねることも！</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample05.jpg" alt="セキセイインコのピーちゃん" class="pet-photo">
  </div>

  <div class="card">
    <h4><i class="fa-solid fa-bone"></i> モモ（チワワ）</h4>
    <p>小さな体でもとても勇敢。誰よりも飼い主さんが大好きです。</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample06.jpg" alt="チワワのモモちゃん" class="pet-photo">
  </div>

  <div class="card">
    <h4><i class="fa-solid fa-rabbit"></i> ラビィ（うさぎ）</h4>
    <p>ふわふわの毛と可愛い耳。静かに寄り添う癒し系の存在です。</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample07.jpg" alt="うさぎのラビィちゃん" class="pet-photo">
  </div>

  <div class="card">
    <h4><i class="fa-solid fa-spider"></i> スパイク（タランチュラ）</h4>
    <p>珍しいペットの一員。夜行性で静かな観察が楽しめます。</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample08.jpg" alt="タランチュラのスパイクちゃん" class="pet-photo">
  </div>

</div>

<!-- Font Awesome 読み込み（必要） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

2.1 Font Awesome

▶ Font Awesome（v6 以降の最新バージョン）

3 HTMLに貼り付け（Font Awesome 旧バージョン）

<h2 class="section-heading fade-in">わたしたちの大切な仲間たち</h2>
<div class="card-wrap">

  <div class="card">
    <h4><i class="fa fa-dog"></i> ココ（柴犬）</h4>
    <p>元気いっぱいで人懐っこい性格。毎朝の散歩が大好きです。</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample01.jpg" alt="柴犬のココ" class="pet-photo">
  </div>

  <div class="card">
    <h4><i class="fa fa-cat"></i> ミミ（スコティッシュフォールド）</h4>
    <p>静かでおっとりした性格。お気に入りの場所で丸くなって寝ています。</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample02.jpg" alt="スコティッシュフォールドのミミ" class="pet-photo">
  </div>

  <div class="card">
    <h4><i class="fa fa-fish"></i> ブルー（ベタ）</h4>
    <p>水槽の中を優雅に泳ぐ姿が人気。光に反射して輝くヒレが美しい。</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample03.jpg" alt="熱帯魚のブルー" class="pet-photo">
  </div>

  <div class="card">
    <h4><i class="fa fa-paw"></i> チョコ（トイプードル）</h4>
    <p>甘えん坊で好奇心旺盛。ふわふわの毛が自慢です。</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample04.jpg" alt="トイプードルのチョコ" class="pet-photo">
  </div>

  <div class="card">
    <h4><i class="fa fa-dove"></i> ピーちゃん（セキセイインコ）</h4>
    <p>おしゃべり上手で明るいムードメーカー。家族の声をまねることも！</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample05.jpg" alt="セキセイインコのピーちゃん" class="pet-photo">
  </div>

  <div class="card">
    <h4><i class="fa fa-bone"></i> モモ（チワワ）</h4>
    <p>小さな体でもとても勇敢。誰よりも飼い主さんが大好きです。</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample06.jpg" alt="チワワのモモちゃん" class="pet-photo">
  </div>

  <div class="card">
    <h4><i class="fa fa-rabbit"></i> ラビィ（うさぎ）</h4>
    <p>ふわふわの毛と可愛い耳。静かに寄り添う癒し系の存在です。</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample07.jpg" alt="うさぎのラビィちゃん" class="pet-photo">
  </div>

  <div class="card">
    <h4><i class="fa fa-spider"></i> スパイク（タランチュラ）</h4>
    <p>珍しいペットの一員。夜行性で静かな観察が楽しめます。</p>
    <img src="https://sample.com/wp-content/uploads/20××/××/sample08.jpg" alt="タランチュラのスパイクちゃん" class="pet-photo">
  </div>

</div>

<!-- Font Awesome v4 読み込み -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

2.1 Font Awesome

▶ Font Awesome（旧バージョン）

4 汎用CSS

/* ---------------------
 * 紹介カード
 * ------------------ */

/** セクション全体 **/
.mission-section { /** セクションの外枠設定 **/
  max-width: 1200px; /** コンテンツ幅の最大値 **/
  margin: 80px auto; /** 上下80px、左右中央寄せ **/
  padding: 60px 30px; /** 内側余白を広めに設定 **/
  box-sizing: border-box; /** paddingを幅計算に含める **/
  border-radius: 10px; /** 角を丸くして柔らかく **/
}
.gray-bg { /** グレー背景のバリエーション **/
  background: #fafafa; /** 薄いグレー背景色 **/
}

/** 見出しデザイン（青ライン＋フェードアニメ）**/
.section-heading { /** 見出し全体の基本設定 **/
  font-size: 1.6rem; /** 少し大きめの文字サイズ **/
  font-weight: bold; /** 太字で強調 **/
  border-bottom: 3px solid #0078ff; /** 下線に青ラインを追加 **/
  padding-bottom: 8px; /** 線との間に余白 **/
  margin-bottom: 35px; /** 下要素との間隔を確保 **/
  color: #222; /** 濃いグレー文字 **/
  letter-spacing: 0.05em; /** 文字間をわずかに広げる **/
  opacity: 0; /** 初期は非表示（アニメ前） **/
  transform: translateY(30px); /** 下からスライドさせる準備 **/
  transition: all 0.8s ease; /** アニメを滑らかに **/
}
.section-heading.show { /** フェードイン後に表示する状態 **/
  opacity: 1; /** 不透明にして表示 **/
  transform: translateY(0); /** 元の位置に戻す **/
}
.section-heading.second { /** 2つ目以降の見出し用 **/
  margin-top: 90px; /** 上に大きめの余白を追加 **/
}

/** カードレイアウト **/
.card-wrap { /** カード全体の並びを定義 **/
  display: flex; /** 横方向に並べる **/
  flex-wrap: wrap; /** 折り返しを許可 **/
  gap: 24px; /** カード間の間隔を設定 **/
  margin-bottom: 60px; /** 下に余白を追加 **/
  justify-content: flex-start; /** 左詰め配置 **/
}

/** カードデザイン **/
.card { /** 各カード本体 **/
  background: #fff; /** 白背景で清潔感 **/
  border-radius: 8px; /** 角を丸くする **/

  width: calc(25% - 24px); /** 4列表示（カード幅を計算） **/

  /* width: calc(33.333% - 16px); 3列時用 **/

  /* width: calc(50% - 12px); 2列時用 **/

  box-shadow: 0 3px 10px rgba(0,0,0,0.06); /** 柔らかい影を付与 **/
  padding: 25px 20px; /** 内側余白を設定 **/
  box-sizing: border-box; /** paddingを含めた幅計算 **/
  transition: all 0.35s ease; /** ホバー時の動きを滑らかに **/
}
.card:hover { /** ホバー時の動作 **/
  transform: translateY(-6px); /** 上に少し浮かせる **/
  box-shadow: 0 8px 20px rgba(0,0,0,0.1); /** 影を濃くして立体感を出す **/
}

/** テキストとアイコン **/
.card h4 { /** カード内の見出し **/
  font-size: 1.1rem; /** 標準より少し大きく **/
  color: #111; /** 濃い文字色で読みやすく **/
  margin-bottom: 12px; /** 下に余白を確保 **/
  font-weight: 600; /** 少し太めの文字 **/
  display: flex; /** アイコンと横並びにする **/
  align-items: center; /** 縦中央揃え **/
  gap: 8px; /** アイコンとの間にスペース **/
}
.card h4 i { /** 見出し内のFont Awesomeアイコン **/
  color: #0078ff; /** 青色で統一感を出す **/
  font-size: 1.2rem; /** 少し大きめに調整 **/
}
.card p { /** 説明文 **/
  color: #555; /** 中間グレーで柔らかく **/
  font-size: 0.95rem; /** 少し小さめの本文サイズ **/
  line-height: 1.7; /** 読みやすい行間に調整 **/
}

/** カード内の画像調整 **/
.card img { /** 画像をカード幅に合わせて表示 **/
  display: block; /** インライン隙間を消す **/
  width: 100%; /** 親幅に合わせる **/
  height: auto; /** アスペクト比を維持 **/
}

/** 画像サイズ調整（PC・スマホ対応） **/
.pet-photo { /** 汎用的な画像クラス **/
  width: 100%; /** 幅を100%に設定 **/
  height: auto; /** 比率を保つ **/
  max-width: 640px; /** 最大幅を640pxまでに制限 **/
  border-radius: 6px; /** 角丸効果 **/
  margin-top: 12px; /** テキストとの間隔を追加 **/
  display: block; /** 不要な余白を防ぐ **/
}

/** レスポンシブ対応 **/
@media screen and (max-width: 1024px) { /** タブレット以下 **/
  .card {
    width: calc(50% - 12px); /** 2列表示に切り替え **/
  }
}
@media screen and (max-width: 600px) { /** スマホサイズ **/
  .card {
    width: 100%; /** 1列表示に変更 **/
  }
}

4.1 ポイント

列の個数を変えるときは、次のCSSで変えられます。

• 4列

  width: calc(25% - 24px);

• 3列

  width: calc(33.333% - 16px);

• 2列

  width: calc(50% - 12px);

5 完成イメージ

▶ ペット紹介カード

6 まとめ

この記事では、Font Awesome のアイコンと Flexbox を組み合わせてペット紹介カードを作る方法を紹介しました。写真も貼り付けると本格的なペット紹介カードになります。
また、テーマや雰囲気に合わせて色やアイコンを変えれば、プロフィール紹介やスタッフ紹介にも応用できます。