文字の装飾の基本

セレクター {
    font-family: フォント名;
}

/* 複数指定の例 */
セレクター {
    font-family: "フォント名1", "フォント名2", 汎用ファミリー;
}

/* Windows・Mac対応のゴシック体 */
.main-content {
  font-family: "Yu Gothic UI", "Meiryo", "Hiragino Sans", sans-serif;
}

<div class="main-content">
  <h1>ゴシック体の見出し</h1>
  <p>ゴシック体で表示される本文テキストです。Web画面での読みやすさが特徴です。</p>
</div>

/* Windows・Mac対応の明朝体 */
.main-content {
  font-family: "Yu Mincho", "MS PMincho", "Hiragino Mincho ProN", serif;
}

<div class="main-content">
  <h1>明朝体の見出し</h1>
  <p>明朝体で表示される本文テキストです。書籍のような落ち着いた雰囲気が特徴です。</p>
</div>

/* システムフォントの指定 */
.main-content {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

<div class="main-content">
  <h1>システムフォントの見出し</h1>
  <p>システムフォントで表示される本文テキストです。</p>
</div>

セレクター {
    font-size: サイズ値;
}

/* 様々なサイズの組み合わせ */
h1 {
  font-size: 2rem;        /* 見出し：大 */
}

h2 {
  font-size: 1.5rem;      /* 見出し：中 */
}

p {
  font-size: 1rem;        /* 本文：標準 */
}

.note {
  font-size: 0.875rem;    /* 補足：小 */
}

<h1>メインタイトル</h1>
<h2>セクション見出し</h2>
<p>本文テキストです。読みやすいサイズに設定されています。</p>
<p class="note">※ 補足情報や注釈用の小さなテキストです。</p>

セレクター {
    font-weight: 太さの値;
}

/* キーワードと数値を組み合わせた例 */
h1 {
  font-weight: bold;       /* 見出し：太字（キーワード） */
}

p {
  font-weight: normal;     /* 本文：標準（キーワード） */
}

.important {
  font-weight: 600;        /* 強調：中太（数値） */
}

.note {
  font-weight: 300;        /* 補足：細字（数値） */
}

<h1>重要な見出し</h1>
<p>通常の本文テキストです。<span class="important">重要な部分</span>は太字で強調されます。</p>
<p class="note">※ 補足情報は細字で表示されます。</p>

セレクター {
    text-align: 配置の値;
}

/* 様々な配置の使い分け */
h1 {
  text-align: center;      /* 見出し：中央 */
}

p {
  text-align: left;        /* 本文：左寄せ */
}

.price {
  text-align: right;       /* 価格：右寄せ */
}

.quote {
  text-align: center;      /* 引用：中央 */
}

.body {
  text-align: justify;     /* 長文：両端揃え */
}

<h1>商品ラインナップ</h1>
<p>当店では、厳選された高品質な商品を取り揃えております。</p>
<div class="price">価格：1,200円</div>
<p class="quote">「品質第一、お客様満足度向上を目指して」</p>
<p class="body">素材から検品まで一貫管理しています。安心してお選びください。</p>

セレクター {
    text-decoration: 装飾の種類;
}

/* 複数の装飾を組み合わせる例 */
セレクター {
    text-decoration: underline overline;
}

/* 様々な装飾線の使い分け */

.wavy-underline {
  text-decoration: blue underline wavy; /* 強調：青い波線の下線 */
}

.deleted {
  text-decoration: red line-through;   /* 削除：赤い取り消し線 */
}

.special {
  text-decoration: underline overline; /* 特別：上線+下線 */
}

a {
  text-decoration: underline;     /* リンク：下線 */
}

.button-link {
  text-decoration: none;          /* ボタン風リンク：線なし */
}

<div>
  <p><span class="wavy-underline">波線の装飾</span>でより目立たせることもできます。</p>
  <p>価格：<span class="deleted">1,000円</span> → 800円</p>
  <p><span class="special">特別な強調</span>には上線と下線の両方が付きます。</p>
  <p><a href="#">通常のリンク</a>には下線が表示されます。</p>
  <p><a href="#" class="button-link">ボタン風リンク</a></p>
</div>