画像は一切使用せず、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 href="#">tag</a></li>
<li><a href="#">tag</a></li>
</ul>
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: inline-block;
margin: 0 .3em .3em 0;
padding: 0;
}
ul li a {
display: inline-block;
max-width: 100px;
height: 28px;
line-height: 28px;
padding: 0 1em;
background-color: #fff;
border: 1px solid #aaa;
border-radius: 3px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #333;
font-size: 13px;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
ul li a:hover {
background-color: #3498db;
border: 1px solid #3498db;
color: #fff;
}
タイプ #2
先ほどのものはテキストの長さによって幅にバラつきが出るタイプでしたが、こちらはテキスト量に関係なく全て均等に並べたタイプです。
1列に表示される数を調整したい場合は、li
要素に指定しているwidth
やul
要素(更に親要素でも可)の幅を調整してください。
<ul>
<li><a href="#">tag</a></li>
<li><a href="#">tag</a></li>
<li><a href="#">tag</a></li>
</ul>
ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
ul li {
float: left;
width: 150px;
margin: 0 10px 10px 0;
padding: 0;
}
ul li a {
display: block;
width: 100%;
height: 32px;
line-height: 32px;
padding: 0 1em;
background-color: #fff;
border: 1px solid #aaa;
border-radius: 3px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #333;
font-size: 13px;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul li a:hover {
background-color: #3498db;
border: 1px solid #3498db;
color: #fff;
}
タイプ #3
タグ数を表示しているタイプです。
ただ、このサンプルコードをそのまま使用した場合はタグ数が3桁以上のときに見た目が微妙になるので、3桁以上になる場合はa
要素のpadding
やspan
要素のwidth
を調整するなどしてください。
<ul>
<li><a href="#">tag<span>20</span></a></li>
<li><a href="#">tag<span>20</span></a></li>
<li><a href="#">tag<span>20</span></a></li>
</ul>
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: inline-block;
margin: 0 .3em .3em 0;
padding: 0;
}
ul li a {
position: relative;
display: inline-block;
max-width: 100px;
height: 28px;
line-height: 28px;
padding: 0 2.5em 0 1em;
background-color: #fff;
border: 1px solid #aaa;
border-radius: 3px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #333;
font-size: 13px;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
li span {
position: absolute;
top: 3px;
right: 3px;
z-index: 2;
width: 22px;
height: 22px;
line-height: 22px;
background-color: #3498db;
border-radius: 100%;
color: #fff;
font-size: 12px;
text-align: center;
-webkit-transition: .2s;
transition: .2s;
}
ul li a:hover {
background-color: #3498db;
border: 1px solid #3498db;
color: #fff;
}
ul li a:hover span {
background-color: #fff;
color: #3498db;
}
タイプ #4
同じくタグ数を表示するタイプですが、こちらはタグ数をはじめは非表示にしておき、ホバー時に吹き出し表示させるというものです。
<ul>
<li><a href="#">tag<span>20</span></a></li>
<li><a href="#">tag<span>20</span></a></li>
<li><a href="#">tag<span>20</span></a></li>
</ul>
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position: relative;
display: inline-block;
margin: 0 .75em .5em 0;
padding: 0;
}
ul li a {
position: relative;
display: inline-block;
max-width: 100px;
height: 28px;
line-height: 28px;
padding: 0 1em;
background: #fff;
border: 1px solid #aaa;
border-radius: 3px;
word-wrap: normal;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #555;
font-size: 13px;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
ul li span {
position: absolute;
top: 0;
right: -10px;
z-index: 2;
width: 28px;
height: 28px;
line-height: 28px;
background-color: #3498db;
border: 1px solid #3498db;
border-radius: 100%;
color: #fff;
font-size: 13px;
text-align: center;
opacity: 0;
-webkit-transition: .2s;
transition: .2s;
-webkit-transform: scale(.4);
transform: scale(.4);
}
ul li span::after {
position: absolute;
top: 50%;
left: -8px;
content: '';
width: 0;
height: 0;
margin-top: -7px;
border-color: transparent #3498db transparent transparent;
border-style: solid;
border-width: 7px 14px 7px 0;
}
ul li a:hover {
border: 1px solid #3498db;
color: #3498db;
}
ul li:hover span {
right: -26px;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
タイプ #5
よく見かける先端が尖っているタイプです。
尖っている部分は::before
擬似要素にborder
を使い、丸のアクセント部分は::after
擬似要素を使って実装しています。
<ul>
<li><a href="#"><span>tag</span></a></li>
<li><a href="#"><span>tag</span></a></li>
<li><a href="#"><span>tag</span></a></li>
</ul>
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: inline-block;
margin: 0 0 .3em 1em;
padding: 0;
}
ul li a {
position: relative;
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 1em;
background-color: #3498db;
border-radius: 0 3px 3px 0;
color: #fff;
font-size: 13px;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
ul li a::before {
position: absolute;
top: 0;
left: -15px;
content: '';
width: 0;
height: 0;
border-color: transparent #3498db transparent transparent;
border-style: solid;
border-width: 15px 15px 15px 0;
-webkit-transition: .2s;
transition: .2s;
}
ul li a::after {
position: absolute;
top: 50%;
left: 0;
z-index: 2;
display: block;
content: '';
width: 6px;
height: 6px;
margin-top: -3px;
background-color: #fff;
border-radius: 100%;
}
ul li span {
display: block;
max-width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
ul li a:hover {
background-color: #555;
color: #fff;
}
ul li a:hover::before {
border-right-color: #555;
}
タイプ #6
先ほど尖らせていた部分を丸くしたタイプのもので、丸みは::before
擬似要素、アクセント部分は::after
擬似要素を使って表現しています。
<ul>
<li><a href="#"><span>tag</span></a></li>
<li><a href="#"><span>tag</span></a></li>
<li><a href="#"><span>tag</span></a></li>
</ul>
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: inline-block;
margin: 0 0 .3em 1em;
padding: 0;
}
ul li a {
position: relative;
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 1em 0 .75em;
background-color: #3498db;
border-radius: 0 3px 3px 0;
color: #fff;
font-size: 13px;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
ul li a::before {
position: absolute;
top: 0;
left: -15px;
z-index: -1;
content: '';
width: 30px;
height: 30px;
background-color: #3498db;
border-radius: 50%;
-webkit-transition: .2s;
transition: .2s;
}
ul li a::after {
position: absolute;
top: 50%;
left: -6px;
z-index: 2;
display: block;
content: '';
width: 6px;
height: 6px;
margin-top: -3px;
background-color: #fff;
border-radius: 100%;
}
ul li span {
display: block;
max-width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
ul li a:hover {
background-color: #555;
color: #fff;
}
ul li a:hover::before {
background-color: #555;
}