HTMLとCSSを使用してレスポンシブなアイコン表示レイアウトを作成する方法

HTML と CSS を使用してレスポンシブなアイコン表示レイアウトを作成する方法

モバイル デバイスの普及に伴い、レスポンシブ デザインは Web デザインの標準の 1 つになりました。 Web ページをデザインするときは、Web ページがさまざまなサイズのデバイスで適切に表示され、さまざまな画面サイズに適応できることを確認する必要があります。この記事では、HTML と CSS を使用してシンプルな応答性の高いアイコン表示レイアウトを作成する方法を紹介し、読者がそれを実装するのに役立つ具体的なコード例を示します。

まず、いくつかのアイコン画像を準備する必要があります。この例では、フォント アイコン ライブラリ Font Awesome を使用して、一般的に使用されるアイコンをいくつか取得します。 Font Awesome 公式 Web サイト (https://fontawesome.com/) で対応するフォント ファイルを登録してダウンロードするか、CDN リンクを使用してフォント ファイルをインポートできます。次のコードを HTML ファイルに追加して、Font Awesome を導入します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

次に、HTML 構造の記述を開始できます。順序なしリストを使用してアイコンを表示します。各アイコンにはアイコン コンテナとアイコンのテキスト説明が含まれます。サンプル コードは次のとおりです。

<ul class="icon-list">
  <li>
    <div class="icon-container">
      <i class="fas fa-heart"></i>
    </div>
    <div class="icon-description">喜欢</div>
  </li>
  <li>
    <div class="icon-container">
      <i class="fas fa-comment"></i>
    </div>
    <div class="icon-description">评论</div>
  </li>
  <li>
    <div class="icon-container">
      <i class="fas fa-share"></i>
    </div>
    <div class="icon-description">分享</div>
  </li>
  <!-- 继续添加其他图标 -->
</ul>

上記のコードでは、CSS クラス fa-heart、fa-comment、および fa-share を使用します。 ## FontAwesome が提供 ## 各アイコンのスタイルを設定します。

.icon-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  list-style: none;
}

.icon-list li {
  width: 25%;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

.icon-container {
  font-size: 48px; /* 控制图标的大小 */
}

.icon-description {
  margin-top: 10px;
}

display: flex と flex-wrap: Wrap を使用して、アイコンが自動的にラップされるようにしています。と一行で表示されます。各アイコン コンテナの幅を 25% に設定し、行ごとに 4 つのアイコンが表示されるようにします。実際のニーズに応じて、コンテナの幅のパーセンテージを調整できます。

icon-container クラスは、アイコンのサイズを制御します。この例では、アイコンのフォント サイズを 48 ピクセルに設定します。実際のニーズに応じてアイコンのサイズを調整できます。

以上がHTMLとCSSを使用してレスポンシブなアイコン表示レイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。