【CSS】テキスト関連プロパティについて基本解説｜Webの基礎

selector {
    text-align: 値;
}

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

/* 右揃え */
.date {
    text-align: right;
}

/* 両端揃え（長文に有効） */
.article-body p {
    text-align: justify;
}

selector {
    text-decoration: 値;
}

/* リンクの下線を消す */
a {
    text-decoration: none;
}

/* 下線付きテキスト */
.important {
    text-decoration: underline;
}

/* 打ち消し線（値下げ表示などに） */
.old-price {
    text-decoration: line-through;
}

p {
    text-decoration: underline dotted red 2px;
    /*              種類       スタイル 色  太さ */
}

selector {
    letter-spacing: 値;
}

/* 見出しを広めの字間に */
h2 {
    letter-spacing: 0.1em;
}

/* ロゴ・タイトルの字間を広く */
.site-title {
    letter-spacing: 0.2em;
}

/* 字間を詰める（マイナスも指定可能） */
.tight-text {
    letter-spacing: -0.05em;
}

selector {
    text-indent: 値;
}

/* 段落の先頭を1文字分下げる */
p {
    text-indent: 1em;
}

/* マイナス値でぶら下げインデント */
.hanging {
    padding-left: 1.5em;
    text-indent: -1.5em;
}

/* ナビゲーションのリンクを大文字に */
nav a {
    text-transform: uppercase;
}

/* 名前の先頭文字を大文字に */
.name {
    text-transform: capitalize;
}

/* 1行に収める（折り返しなし） */
.label {
    white-space: nowrap;
}

/* コードブロックのように整形テキストをそのまま表示 */
.code-sample {
    white-space: pre-wrap;
}

selector {
    text-shadow: 水平offset 垂直offset ぼかし範囲 色;
}

/* 基本的なシャドウ */
h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* ネオン風グロウ効果 */
.neon {
    color: #fff;
    text-shadow:
        0 0 5px #0ff,
        0 0 10px #0ff,
        0 0 20px #0ff;
}

/* 白いシャドウでエンボス効果 */
.emboss {
    color: #888;
    text-shadow: 1px 1px 1px #fff;
}

selector {
    overflow: hidden;       /* はみ出しを非表示 */
    white-space: nowrap;    /* 折り返しなし */
    text-overflow: ellipsis; /* はみ出し部分を「...」で表示 */
}

/* 記事タイトルを1行に省略 */
.article-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 300px;
}

/* 長いURLや英単語をどこでも折り返す */
.url-text {
    word-break: break-all;
}

/* 縦書き見出し */
.vertical-heading {
    writing-mode: vertical-rl;
}

<article class="post">
    <h1 class="post-title">CSSテキストプロパティの解説</h1>
    <p class="post-date">2026年6月26日</p>
    <div class="post-body">
        <p>CSSのテキスト関連プロパティを学ぶと、Webページの文字表現が大幅に広がります。</p>
        <h2>まとめ</h2>
        <p>今回紹介したプロパティを活用して、読みやすいWebページを作りましょう。</p>
    </div>
</article>

/* 記事タイトル */
.post-title {
    text-align: center;
    letter-spacing: 0.05em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

/* 投稿日 */
.post-date {
    text-align: right;
    letter-spacing: 0.05em;
}

/* 本文 */
.post-body p {
    text-align: justify;
    text-indent: 1em;
    word-break: break-all;
}

/* 本文中の見出し */
.post-body h2 {
    letter-spacing: 0.1em;
    text-decoration: underline;
    text-underline-offset: 6px; /* 下線とテキストの距離 */
}

/* リンクの下線を消してホバーで表示 */
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}