【CSS】かわいいタグをつくる

デザオ
タグのデザインどんなのがいいですかー
デザコト
いろいろ作ってみますねー

サンプル

コードを見る（HTML・CSS）

HTML

<section class="tag_area01">
  <ul>
    <li><a href="#">design</a></li>
    <li><a href="#">web Design</a></li>
    <li><a href="#">goods</a></li>
    <li><a href="#">photo</a></li>
    <li><a href="#">video</a></li>
    <li><a href="#">illustration</a></li>
    <li><a href="#">solo</a></li>
    <li><a href="#">web</a></li>
    <li><a href="#">WordPress</a></li>
    <li><a href="#">Javascript</a></li>
    <li><a href="#">note</a></li>
    <li><a href="#">news</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">sns</a></li>
    <li><a href="#">store</a></li>
    <li><a href="#">CMS</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">animation</a></li>
  </ul>
</section>

<section class="tag_area02">
  <ul>
    <li><a href="#">design</a></li>
    <li><a href="#">web Design</a></li>
    <li><a href="#">goods</a></li>
    <li><a href="#">photo</a></li>
    <li><a href="#">video</a></li>
    <li><a href="#">illustration</a></li>
    <li><a href="#">solo</a></li>
    <li><a href="#">web</a></li>
    <li><a href="#">WordPress</a></li>
    <li><a href="#">Javascript</a></li>
    <li><a href="#">note</a></li>
    <li><a href="#">news</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">sns</a></li>
    <li><a href="#">store</a></li>
    <li><a href="#">CMS</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">animation</a></li>
  </ul>
</section>

<section class="tag_area03">
  <ul>
    <li><a href="#">design<span>1</span></a></li>
    <li><a href="#">web Design<span>2</span></a></li>
    <li><a href="#">goods<span>3</span></a></li>
    <li><a href="#">photo<span>4</span></a></li>
    <li><a href="#">video<span>5</span></a></li>
    <li><a href="#">illustration<span>6</span></a></li>
    <li><a href="#">solo<span>7</span></a></li>
    <li><a href="#">web<span>8</span></a></li>
    <li><a href="#">WordPress<span>9</span></a></li>
    <li><a href="#">Javascript<span>10</span></a></li>
    <li><a href="#">note<span>11</span></a></li>
    <li><a href="#">news<span>12</span></a></li>
    <li><a href="#">about<span>13</span></a></li>
    <li><a href="#">contact<span>14</span></a></li>
    <li><a href="#">sns<span>15</span></a></li>
    <li><a href="#">store<span>16</span></a></li>
    <li><a href="#">CMS<span>17</span></a></li>
    <li><a href="#">CSS<span>18</span></a></li>
    <li><a href="#">HTML5<span>19</span></a></li>
    <li><a href="#">animation<span>20</span></a></li>
  </ul>
</section>

<section class="tag_area04">
  <ul>
    <li><a href="#">design</a><span>1</span></li>
    <li><a href="#">web Design</a><span>2</span></li>
    <li><a href="#">goods</a><span>3</span></li>
    <li><a href="#">photo</a><span>4</span></li>
    <li><a href="#">video</a><span>5</span></li>
    <li><a href="#">illustration</a><span>6</span></li>
    <li><a href="#">solo</a><span>7</span></li>
    <li><a href="#">web</a><span>8</span></li>
    <li><a href="#">WordPress</a><span>9</span></li>
    <li><a href="#">Javascript</a><span>10</span></li>
    <li><a href="#">note</a><span>11</span></li>
    <li><a href="#">news</a><span>12</span></li>
    <li><a href="#">about</a><span>13</span></li>
    <li><a href="#">contact</a><span>14</span></li>
    <li><a href="#">sns</a><span>15</span></li>
    <li><a href="#">store</a><span>16</span></li>
    <li><a href="#">CMS</a><span>17</span></li>
    <li><a href="#">CSS</a><span>18</span></li>
    <li><a href="#">HTML5</a><span>19</span></li>
    <li><a href="#">animation</a><span>20</span></li>
  </ul>
</section>

<section class="tag_area05">
  <ul>
    <li><a href="#"><span>design</span></a></li>
    <li><a href="#"><span>web Design</span></a></li>
    <li><a href="#"><span>goods</span></a></li>
    <li><a href="#"><span>photo</span></a></li>
    <li><a href="#"><span>video</span></a></li>
    <li><a href="#"><span>illustration</span></a></li>
    <li><a href="#"><span>solo</span></a></li>
    <li><a href="#"><span>web</span></a></li>
    <li><a href="#"><span>WordPress</span></a></li>
    <li><a href="#"><span>Javascript</span></a></li>
    <li><a href="#"><span>note</span></a></li>
    <li><a href="#"><span>news</span></a></li>
    <li><a href="#"><span>about</span></a></li>
    <li><a href="#"><span>contact</span></a></li>
    <li><a href="#"><span>sns</span></a></li>
    <li><a href="#"><span>store</span></a></li>
    <li><a href="#"><span>CMS</span></a></li>
    <li><a href="#"><span>CSS</span></a></li>
    <li><a href="#"><span>HTML5</span></a></li>
    <li><a href="#"><span>animation</span></a></li>
  </ul>
</section>

<section class="tag_area06">
  <ul>
    <li><a href="#"><span>design</span></a></li>
    <li><a href="#"><span>web Design</span></a></li>
    <li><a href="#"><span>goods</span></a></li>
    <li><a href="#"><span>photo</span></a></li>
    <li><a href="#"><span>video</span></a></li>
    <li><a href="#"><span>illustration</span></a></li>
    <li><a href="#"><span>solo</span></a></li>
    <li><a href="#"><span>web</span></a></li>
    <li><a href="#"><span>WordPress</span></a></li>
    <li><a href="#"><span>Javascript</span></a></li>
    <li><a href="#"><span>note</span></a></li>
    <li><a href="#"><span>news</span></a></li>
    <li><a href="#"><span>about</span></a></li>
    <li><a href="#"><span>contact</span></a></li>
    <li><a href="#"><span>sns</span></a></li>
    <li><a href="#"><span>store</span></a></li>
    <li><a href="#"><span>CMS</span></a></li>
    <li><a href="#"><span>CSS</span></a></li>
    <li><a href="#"><span>HTML5</span></a></li>
    <li><a href="#"><span>animation</span></a></li>
  </ul>
</section>

<section class="tag_area07">
  <ul>
    <li><a href="#"><span>design</span></a></li>
    <li><a href="#"><span>web Design</span></a></li>
    <li><a href="#"><span>goods</span></a></li>
    <li><a href="#"><span>photo</span></a></li>
    <li><a href="#"><span>video</span></a></li>
    <li><a href="#"><span>illustration</span></a></li>
    <li><a href="#"><span>solo</span></a></li>
    <li><a href="#"><span>web</span></a></li>
    <li><a href="#"><span>WordPress</span></a></li>
    <li><a href="#"><span>Javascript</span></a></li>
    <li><a href="#"><span>note</span></a></li>
    <li><a href="#"><span>news</span></a></li>
    <li><a href="#"><span>about</span></a></li>
    <li><a href="#"><span>contact</span></a></li>
    <li><a href="#"><span>sns</span></a></li>
    <li><a href="#"><span>store</span></a></li>
    <li><a href="#"><span>CMS</span></a></li>
    <li><a href="#"><span>CSS</span></a></li>
    <li><a href="#"><span>HTML5</span></a></li>
    <li><a href="#"><span>animation</span></a></li>
  </ul>
</section>

CSS

/* ---------- 01 角丸のタグ ---------- */
.tag_area01 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag_area01 ul li {
  margin: 0 .3em .3em 0;
}
.tag_area01 ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100px;
  height: 34px;
  padding: 0 1em;
  background-color: #fff;
  border: 1px solid #6b675f;
  border-radius: 6px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #2b2a27;
  font-size: 12px;
  text-decoration: none;
  transition: .2s;
  box-sizing: border-box;
}
.tag_area01 ul li a:hover {
  background-color: #2b2a27;
  border: 1px solid #2b2a27;
  color: #fff;
}
.tag_area01 ul li a:before {
  content: "#";
  padding-right: 2px;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .tag_area01 *, .tag_area01 *::before { transition: none; }
}

/* ---------- 02 まるいタグ ---------- */
.tag_area02 ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}
.tag_area02 ul li {
  margin: .15em;
}
.tag_area02 ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
  width: 65px;
  background-color: #fff;
  border: 1px solid #6b675f;
  border-radius: 50%;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  overflow: hidden;
  color: #2b2a27;
  font-size: 11px;
  text-decoration: none;
  transition: .2s;
  box-sizing: border-box;
}
.tag_area02 ul li a:hover {
  background-color: #2b2a27;
  border: 1px solid #2b2a27;
  color: #fff;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .tag_area02 *, .tag_area02 *::before { transition: none; }
}

/* ---------- 03 右に数字のバッジ ---------- */
.tag_area03 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag_area03 ul li {
  margin: 0 .3em .3em 0;
}
.tag_area03 ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 34px;
  padding: 0 2.5em 0 1em;
  background-color: #fff;
  border: 1px solid #6b675f;
  border-radius: 6px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #2b2a27;
  font-size: 12px;
  text-decoration: none;
  transition: .2s;
  box-sizing: border-box;
}
.tag_area03 li span {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background-color: #e8dc6a;
  border-radius: 100%;
  color: #2b2a27;
  font-size: 11px;
  transition: .2s;
}
.tag_area03 ul li a:hover {
  background-color: #2b2a27;
  border: 1px solid #2b2a27;
  color: #fff;
}
.tag_area03 ul li a:hover span {
  background-color: #fff;
  color: #2b2a27;
}
.tag_area03 ul li a:before {
  content: "#";
  padding-right: 2px;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .tag_area03 *, .tag_area03 *::before { transition: none; }
}

/* ---------- 04 マウスを乗せると数字が出る ---------- */
.tag_area04 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag_area04 ul li {
  position: relative;
  margin: 0 .3em .3em 0;
}
.tag_area04 ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 34px;
  padding: 0 1em;
  background-color: #fff;
  border: 1px solid #6b675f;
  border-radius: 6px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #2b2a27;
  font-size: 12px;
  text-decoration: none;
  transition: .2s;
  box-sizing: border-box;
}
.tag_area04 ul li span {
  position: absolute;
  top: 0;
  right: -10px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  background-color: #2b2a27;
  border: 1px solid #2b2a27;
  border-radius: 100%;
  color: #fff;
  font-size: 11px;
  opacity: 0;
  transition: .2s;
  transform: scale(.4);
}
.tag_area04 ul li span::after {
  position: absolute;
  top: 50%;
  left: -8px;
  content: '';
  width: 0;
  height: 0;
  margin-top: -7px;
  border-color: transparent #2b2a27 transparent transparent;
  border-style: solid;
  border-width: 7px 14px 7px 0;
}
.tag_area04 ul li a:hover {
  border: 1px solid #2b2a27;
  color: #2b2a27;
}
.tag_area04 ul li:hover span {
  right: -26px;
  opacity: 1;
  transform: scale(1);
}
.tag_area04 ul li a:before {
  content: "#";
  padding-right: 2px;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .tag_area04 *, .tag_area04 *::before { transition: none; }
}

/* ---------- 05 札のタグ（文字数で切る） ---------- */
.tag_area05 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag_area05 ul li {
  display: inline-block;
  margin: 0 .5em .3em 1em;
  padding: 0;
}
.tag_area05 ul li a {
  position: relative;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 1em;
  background-color: #2b2a27;
  border-radius: 0 3px 3px 0;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  transition: .2s;
}
.tag_area05 ul li a::before {
  position: absolute;
  top: 0;
  left: -15px;
  content: '';
  width: 0;
  height: 0;
  border-color: transparent #2b2a27 transparent transparent;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  transition: .2s;
}
.tag_area05 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%;
}
.tag_area05 ul li span {
  display: block;
  max-width: 60px;
  min-width: 60px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.tag_area05 ul li a:hover {
  background-color: #6b675f;
  color: #fff;
}
.tag_area05 ul li a:hover::before {
  border-right-color: #6b675f;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .tag_area05 *, .tag_area05 *::before { transition: none; }
}

/* ---------- 06 札のタグ ---------- */
.tag_area06 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag_area06 ul li {
  display: inline-block;
  margin: 0 .5em .3em 1em;
  padding: 0;
}
.tag_area06 ul li a {
  position: relative;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 1em;
  background-color: #2b2a27;
  border-radius: 0 3px 3px 0;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  transition: .2s;
}
.tag_area06 ul li a::before {
  position: absolute;
  top: 0;
  left: -15px;
  content: '';
  width: 0;
  height: 0;
  border-color: transparent #2b2a27 transparent transparent;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  transition: .2s;
}
.tag_area06 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%;
}
.tag_area06 ul li a:hover {
  background-color: #6b675f;
  color: #fff;
}
.tag_area06 ul li a:hover::before {
  border-right-color: #6b675f;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .tag_area06 *, .tag_area06 *::before { transition: none; }
}

/* ---------- 07 まるい札のタグ ---------- */
.tag_area07 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag_area07 ul li {
  display: inline-block;
  margin: 0 .3em .3em 0;
  padding: 0;
}
.tag_area07 ul li a {
  position: relative;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 1em 0 .75em;
  background-color: #2b2a27;
  border-radius: 30px;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  transition: .2s;
}
.tag_area07 ul li a:hover {
  background-color: #6b675f;
  color: #fff;
}
.tag_area07 ul li a:before {
  content: "#";
  padding-right: 2px;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .tag_area07 *, .tag_area07 *::before { transition: none; }
}
見本ページをひらく（かわいいタグ 7種）

さいごに

デザオ
おー
デザコト
また追加しますねー

ふたりの小言

デザインのメモ 2019.4.15

デザコトauthor

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。