CSS

CSSで文字と要素を装飾する｜色・サイズ・背景・枠線の使い方

CSSを使うと、文字の色やサイズ、背景色、枠線など、HTMLの要素を自由に装飾できます。この記事では、CSSでよく使われるプロパティを実際のコード例とともに解説します。classとidの使い分けも実践的に学べます。

文字の装飾

CSSで最もよく使うのが文字に関するプロパティです。色、サイズ、フォント、間隔などを自由に変更できます。

CSS 
/* 文字色の変更 */
.text-blue {
    color: blue;
}

/* 文字サイズの変更 */
.text-large {
    font-size: 40px;
}

/* フォントの変更 */
.text-gothic {
    font-family: 'Yu Gothic', 'Arial', sans-serif;
}

/* 斜体にする */
.text-italic {
    font-style: italic;
}

/* 文字間隔を広げる */
.text-wide {
    letter-spacing: 10px;
}
HTML 
<p class="text-blue">文字を青色にします</p>
<p class="text-large">文字を40pxにします</p>
<p class="text-gothic">文字をゴシック体にします</p>
<p class="text-italic">文字をitalic体にします</p>
<p class="text-wide">文字間を広くします</p>

colorプロパティでは、色名（blue, red等）、16進数（#0000ff）、RGB値（rgb(0, 0, 255)）のいずれでも指定できます。font-familyではカンマ区切りで複数のフォントを指定し、先頭のフォントが見つからない場合に次のフォントが使われる仕組みになっています。

テキストの配置と装飾

文字の位置や影、インデントなどを設定するプロパティも便利です。

CSS 
/* 中央揃え */
.text-center {
    text-align: center;
}

/* 左側に余白を追加 */
.text-padded {
    padding-left: 50px;
}

/* 字下げ（インデント） */
.text-indent {
    text-indent: 2em;
}

/* テキストに影をつける */
.text-shadow {
    text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.8);
}

text-alignはcenter（中央）、left（左）、right（右）、justify（両端揃え）を指定できます。text-shadowは「X方向のずれ Y方向のずれ ぼかし半径 色」の順に値を設定します。影を付けることで文字に立体感を持たせることができます。

背景色と透過

要素の背景色を変更したり、半透明にしたりすることで、視覚的にメリハリのあるデザインが作れます。

CSS 
/* 背景色を設定 */
.bg-blue {
    background-color: blue;
    color: white;
}

/* 幅を指定して背景色を設定 */
.bg-half {
    background-color: blue;
    color: white;
    width: 50%;
}

/* 半透明にする */
.bg-transparent {
    background-color: blue;
    color: white;
    opacity: 0.5;
}

opacityプロパティは0（完全に透明）から1（完全に不透明）の値を取ります。注意点として、opacityを設定すると要素内の文字も含めてすべてが半透明になります。背景色だけを半透明にしたい場合は、background-color: rgba(0, 0, 255, 0.5);のようにRGBA形式で色を指定しましょう。

枠線と角丸

要素に枠線をつけたり、角を丸めたりすることで、ボタンやカードのようなデザインが作れます。

CSS 
/* 基本的な枠線 */
.box-border {
    border: 1px solid #333;
    padding: 10px;
}

/* 角を丸める */
.box-rounded {
    border: 1px solid #333;
    border-radius: 5px;
    padding: 10px;
}

/* サイズ指定のボックス */
.box-sized {
    border: 1px solid #333;
    border-radius: 10px;
    width: 200px;
    height: 80px;
    padding: 10px;
}

/* カード風のデザイン */
.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

borderプロパティは「太さ スタイル 色」の3つを一括指定できます。スタイルにはsolid（実線）、dashed（破線）、dotted（点線）などがあります。border-radiusの値を大きくすると角がより丸くなり、50%にすると正円になります。

span要素で部分的にスタイルを適用

文章の一部分だけにスタイルを適用したい場合は、<span>タグを使います。

HTML 
<p><span class="text-blue">この部分だけ</span>青文字にします</p>
<p>通常のテキストに<span class="bg-blue">背景色</span>をつけます</p>

<span>は文章の流れを崩さずに一部分だけを装飾したい場合に使います。<div>はブロック要素（1行全体を占める）ですが、<span>はインライン要素（文章内に埋め込まれる）という違いがあります。

色の指定方法

CSSでは以下の形式で色を指定できます。用途に応じて使い分けましょう。

  • 色名: blue, red, white など（約140種類）
  • 16進数: #0000ff（青）、#ff0000（赤）
  • RGB: rgb(0, 0, 255) ※赤, 緑, 青を0〜255で指定
  • RGBA: rgba(0, 0, 255, 0.5) ※RGBに透過度を追加
よくある間違い
  • text-alignのスペルミス（text-aline等）に注意。プロパティ名が間違っていると無視されます
  • opacityは要素全体に適用されるため、背景だけ透過したい場合はrgba()を使いましょう
  • paddingとmarginの違い：paddingは要素の内側、marginは外側の余白です

まとめ

  • color, font-size, font-familyで文字の見た目を変更できる
  • text-alignで文字の配置、text-shadowで影を設定できる
  • background-colorで背景色、opacityで透過度を制御できる
  • borderで枠線、border-radiusで角丸を設定できる
  • <span>タグで文章の一部分だけにスタイルを適用できる
  • 色の指定は色名、16進数、RGB、RGBAの4つの方法がある