【CSS】テキストのスタイル設定を総まとめ！文字の装飾や行間の設定など。 │ Ugo

Ugo

Webエンジニアのためのプログラミング情報サイト

  • 【CSS】テキストのスタイル設定を総まとめ！文字の装飾や行間の設定など。

【CSS】テキストのスタイル設定を総まとめ！文字の装飾や行間の設定など。

    投稿日:2024.08.31 最終更新日:2024.08.31  
  • CSS3
【CSS】テキストのスタイル設定を総まとめ！文字の装飾や行間の設定など。

今回はHTML・CSSにおけるテキストの設定について初心者向けに解説したい。

この記事は以下のような人たちを対象としている。

  • EメールをHTML形式で書きたいが経験がない。
  • Wordなどで使用した文字装飾をHTMLページにて使用したい。
  • テキストは普段から使用しているが知識を深めたい。

では、見ていこう。

目次

文字の書式設定

まずは基本的な書式の設定から確認したい。

フォントの種類を指定する

テキストに使用するフォントの種類の選択方法を説明したい。

文字フォントを指定する場合はfont-familyプロパティを使用する。

font-family: Impact, "Dela Gothic One", sans-serif;

Google fontsなどのWebフォントを使用する場合はHTMLファイルのヘッダにフォントをインポートするためのコードを追記する。

<head>
  ...
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
  </style>
</head>

font-familyプロパティにはフォントファミリーと総統フォントファミリーを指定する。

総統フォントファミリーは指定したフォントが使用できかった場合に代替えとして使用される。

キーワードフォント系統
serifセリフ
sans-serifサンセリフ
monospace等幅
cursive筆記体
fantasy装飾
system-uiOSのUIフォント

文字のサイズ

文字のサイズはfont-sizeで指定する。

font-size: 24px;

CSSのサイズには数多くの単位が使用できるがもっともよく使われるのはピクセル（px）だ。

なお、font-sizeを指定しない場合はテキストのサイズは16ピクセルとなる。

文字の太さ

文字の太さを指定する場合はfont-weightプロパティを使用する。

使用できる値は100～900までの数値と、「normal」「bold」「bolder」「tighter」の4種類だ。

デフォルト値はnormalで400がnormal、700がboldと同じ太さとなる。

font-weight: bold;

文字を斜体にする

文字を斜体にする場合はfont-styleプロパティ”italic”または”oblique”を指定する。

Italicは美しくみえるようにデザインされた斜体であり、obliqueは通常の字体を斜めにして作成される。　

font-style: italic;

書式の設定をまとめて記述する

fontプロパティを使うとこれまでに紹介した書式の設定をひとつのプロパティに記述することができる。

font: 600 italic 36px Arial, "Dela Gothic One", sans-serif;

テキストを装飾する

次にテキストを文字色の変更やテキストを装飾する方法を確認していこう。

文字の色

文字の色を変更したい場合はcolorプロパティを使用する。

color: blue;

色の指定方法には、色の名前、RGB値、16進法などがある。

  • 色の名前
    （例）red, darkblue, Aqua
  • RGB値
    （例）rgb(255, 0, 0), rgb(65, 105, 225), rgba(255, 0, 0, 0.3)
  • 16進法
    （例）#FF0000, #00008B, #43ff64d9

背景色の色を変更する場合はbackgroundもしくはbackground-colorプロパティを使用する。

テキストに影を付ける

テキストに影を付けたい場合はtext-shadowプロパティを使用する。

値は左から順番に横オフセット、縦オフセット、ブラー、色となる。

text-shadow: 10px 10px 5px darkgray;

上線・下線・取り消し線

テキストに上線・下線・取り消し線をつけたい時はtext-decorationプロパティを使用する。

text-decoration: underline wavy;

位置・改行・タブなどの設定

次に文字を配置する位置や行間の調整方法などを確認しよう。

文字を配置する位置の設定

文字の配置の指定方法を水平方向・垂直方向に分けて説明したい。

水平方向の位置

水平方向の文字の位置を変更する場合はtext-alignプロパティを使用する。

text-align: right;

垂直方向の位置

文字の垂直方向の位置を調整するにはいくつかの方法があるが、一番わかりやすいのはフレックスボックスを使う方法だ。

文字が配置されている要素のdisplayプロパティをflexに変更したうえで、align-itemsプロパティで配置位置を指定する。

display: flex;
align-items: center;

行間の設定

行間を変更したい場合はline-heightプロパティを使用する。

line-height: 50px;

文字の間隔の設定

文字の間隔を変更したい場合はletter-spacingプロパティを使用する。

letter-spaceing: 15px;
MENU