CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。

サンプルコード

以下は、CSSでラベルのスタイルを設定する具体的なコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin: 20px;
    }
    span {
        font-size: 18px;
        font-weight: 600;
        color: white;
        padding: 8px;
    }
    .success {
        background-color: #4caf50;
    }
    .info {
        background-color: #2196f3;
    }
    .warning {
        background-color: #ff9800;
    }
    .danger {
        background-color: #f44336;
    }
    .other {
        background-color: #e7e7e7;
        color: black;
    }
</style>
</head>
<body>
<h1>Labels Example</h1>
<span class="success">Success</span>
<span class="info">Info</span>
<span class="warning">Warning</span>
<span class="danger">Danger</span>
<span class="other">Other</span>
</body>
</html>

コードのポイント

  • 共通スタイル：spanセレクターで文字サイズ・太さ・パディングなどの基本デザインを一括定義しています。
  • クラスごとの色分け：.success（緑）、.info（青）、.warning（オレンジ）、.danger（赤）、.other（グレー）といったクラスで背景色を切り替えています。
  • 拡張性：新しいラベルの種類を追加したい場合は、同様にクラスを1つ追加するだけで対応できます。

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSでヘッダーにスタイルを設定する方法をサンプルコード付きで解説

    CSSを使ってページのヘッダーにスタイルを設定する方法を、実際のコード例とともに紹介します。ヘッダーはウェブサイトの「顔」となる重要な要素です。背景色・文字色・余白・文字サイズなどを工夫することで、サイト全体の印象を大きく変えることができます。 サンプルコード <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta charset="UTF-8" /> <meta name="viewport" content