自分だけのマイCSSフレームワークをつくる(ラベル編)

自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今回は、ラベルとバッジのパーツをつくります。

まずはラベルをつくります。

ラベルパーツの作成

ラベルパーツは、記事のタグの装飾に使うときなどに用いる予定です。

ラベルパーツのHTMLの設定

HTML
<a href="#" class="label">ラベル</a>

ラベルパーツのCSSの設定の設定

style.css
.label {
  display: inline-block;
  padding: 2.5px 15px;
  border-radius: 3px;
  background-color: #ddd;
  color: #000;
  font-size: 1.2rem;
  text-decoration: none;
}

.label:hover,
.label:focus {
  outline: none;
  opacity: 0.8;
}

次にバッジの部分を作成します。

バッジパーツの作成

バッジは、コメントやお知らせの件数などを表示するときに使えそうです。

バッジパーツのHTMLの設定

HTML
<span class="badge">3</span>

バッジパーツのCSSの設定

style.css
.badge {
  display: inline-block;
  padding: 0;
  border-radius: 50%;
  background-color: #ddd;
  color: #000;
  font-size: 1.2rem;
  width: 2em;
  line-height: 2rem;
  text-align: center;
  text-decoration: none;
}

ラベルとバッジを組み合わせることもできます。

ラベルとバッジを組み合わせたパーツ

ラベルとバッジを組み合わせたパーツのHTMLの設定

HTML
<a href="#" class="label">ラベル<span class="badge">3</span></a>

ラベルとバッジを組み合わせたパーツのCSSの設定

style.css
.label {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 3px;
  background-color: #ddd;
  color: #000;
  font-size: 1.2rem;
  line-height: 2rem;
  text-decoration: none;
}

.label .badge {
  display: inline-block;
  margin-left: 5px;
  padding: 0;
  border-radius: 50%;
  background-color: #fff;
  color: #333;
  font-size: 1.2rem;
  width: 2em;
  line-height: 2rem;
  text-align: center;
}

私の場合、あまり使うことはないかもしれませんが、何かあったときにパッと確認するときのために載せておきます。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です