テキストを装飾する方法 [HTML/CSS]

テキスト装飾

参考：

基本的なテキストとフォントの装飾 | MDN

強調／太字／斜体

太字

テキストを太字で表示する。

.bold {
    font-weight: bold;
}Code language: CSS (css)

斜体／イタリック体

テキストを斜体で表示する。

.italic {
    font-style: italic;
}Code language: CSS (css)

タグ

• em： タグ付けされた単語、あるいは文章の内容を純粋に強調する。
• strong： 文章内でタグ付けされた単語、あるいは文章の内容の重要、緊急、深刻であることを示す。
• mark： 引用した文章で引用者が注目させたい言葉を提示する。また、検索結果で検索対象のキーワードに目印を追加するために用いる。
• cite： 引用元の表題や媒体、文献固有番号などを示す。
• dfn： 定義の項目や文章中で、定義、あるいは定義に付随する説明や解説の対象となっている用語を示す。
• i： 外来語、セリフ、専門用語など、文章内で通常ではない単語、文章を示す。慣例的にイタリック体で表示される。

CSS

• fot-weight
• font-style

参考：

i – 慣用的なテキスト要素 | MDN

取り消し線を引く (del)

参考：

del タグ – 削除されたテキストを表す | コードキッチン

DEL | HTML クイックリファレンス

del – 削除済み文字列要素 | MDN

text-decoration

• text-decoration： テキスト装飾を一括で指定する。
• text-decoration-line： 装飾の種類を指定する。
• text-decoration-color： 装飾の色を指定する。
• text-decoration-style： 装飾の線種を指定する。
• text-decoration-thickness： 装飾の太さを指定する。
• text-underline-offset： 下線のオフセットを指定する。

下線

テキストに下線を引く。

.underline {
    text-decoration: underline;
}Code language: CSS (css)

参考：

文字に色々なデザインの下線を引く – 点線／波線／二重線／蛍光ペン風など | サルワカ

HTML／CSSで下線！ 3分でわかるテキスト際立たせテクニック | SEOラボ

text-decoration | コーディングのプロが作る CSS 辞典

text-decoration | MDN

text-decoration Property | W3Schools

i タグ

参考：

えっ、i タグって icon の i じゃないんですか？ – Qiita

i タグとは | コーディングのプロが作る HTML タグ辞典

i | HTML クイックリファレンス

i – 慣用的なテキスト要素 | MDN

まとめ

文字装飾の基本を総まとめ！初心者向けに解説 | サルワカ

コピペで簡単！テキスト／文字装飾デザイン記事まとめ | さかぽんブログ

初歩的な文字装飾 基本まとめ | マリアジョイ

文字／テキストを装飾する | ホームページマスター

サンプル

参考：

CSS でテキストを彩る装飾サンプル集 | ONE NOTES