CSSで実装するタグクラウドのサンプル - NxWorld

画像は一切使用せず、CSSのみで実装・デザインしたタグクラウドのサンプルです。 CSSのみで実装しているのでサイズやカラー変更も容易にできます。 ここでは見栄えをイメージで紹介しており、実際の見栄えは下記で確認できます。 タイプ #1 基本的にはli要素が並ぶだけなんですが、文字数が長いものは「…」と省略表示するように指定しているので、省略されるポイント（長さ）を調整したい時はCSSのul li aの箇所に記述しているmax-widthの値を任意で変更してください。 省略自体が必要ない場合はmax-width, text-overflow, overflowの3つを削除してください。 また、文字省略についてはこれ以降紹介するサンプルにも適用しているので、不要な場合は同じように調整・削除を行ってください。 <ul> <li><a href="#">tag</a></li> <li><a hr

[antennavoice]

“こちらはタグ数をはじめは非表示にしておき、ホバー時に吹き出し表示させるというものです。”

[mr7myself]

すごく参考になる

[hr07jp]

“CSSで実装するタグクラウドのサンプル”

[z1a2nh]

CSSで実装するタグクラウドのサンプル

[taks1]

CSSで実装するタグクラウドのサンプル

[katsuimami]

ええやん、

[kussun]

見た目がスマートで美しい。