BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

HTMLとCSSを使ったタグクラウド効果（デモあり）

2022-01-11 03:01:26

ブログやホームページで見かけるタグクラウド効果は、決して難しいものではありません。実際には、トピックを強調するために、特定のキーワードにハイパーリンクを張っているのです。通常、出現確率の高いタグや人気のあるタグは大きな文字で表示され、その逆は小さな文字で表示されます。

画像

出典：TagCrowd.com

タグクラウドがもたらす効率や使い勝手の良さについて詳しく説明するまでもなく、サイトや記事全体に与える美的魅力や高い俯瞰性だけでも見逃すわけにはいきません。

次に、HTMLとCSSを使ってタグクラウド効果を作る方法について説明します。なお、ここではタグの重み付けや人気度を計算する方法については触れず、このUI効果を実現する方法についてのみ説明します。

HTMLインフラ

前述したように、タグクラウドは連結されたリストである。ですから、セマンティックの観点からは、各タグをウェルカムで並べることを考えずに、アンオーダーリストを使って表現することは意味があり、そうでなければ意味がありません。

は、各リスト項目にハイパーリンクされたタグを含むので、一般的な構造は次のようになります。 

<ul>
  <li><a href="/tag/word1">Word1</a></li>
  <li><a href="/tag/word2">Word2</a></li>
  <li><a href="/tag/word3">Word3</a></li>
  <! -- ... -->
</ul>

每个标签的权重要提算前算好，然后把它加到。 {コード 上或者 

<a>

  • 上，我们就暂且把它加到链接上。

    权重大的标签对应显示的文字也大，代表了它的受欢迎程度大。 

    <li>

    注：ここではdata-weightはdata-countとdata-totalから計算されており、この2つの属性から直接表現を計算する方法はないので、data-weightのように1つの属性にターゲットを絞っています。

    というわけで、基本的なHTML構造のコードが書かれ、いくつかの属性があれば完璧です。

    • class: スタイルを追加する際に、どのタグクラウドを使用するかを決定するのに役立ちます。
    • の役割を果たします。これは、スクリーンリーダーを識別し、支援するためのナビゲーションコンポーネントです。
    • aria-label：ヘルパー機能にタイトルと説明を追加します。

    注意: もし、リストが <ul> <li><a href="/tag/word1" data-weight="3">Word1</a></li> <li><a href="/tag/word2" data-weight="7">Word2</a></li> <li><a href="/tag/word3" data-weight="4">Word3</a></li> <! -- ... --> </ul>

    • 関連

    最新

    おすすめ

    について
    /
    プライバシー・ポリシー
    /
    お問い合わせ
    © 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します