CSS

CSSで文字スタイルを変えるパート2【行間・配置・装飾】

どうも、つよぽんです!

前回に続き今回もCSSで文字スタイルを変更する方法について解説します。前回の記事と今回の記事、全部で2部構成で文字スタイルを変更するプロパティを紹介していきます。

前回記事を先に読みたい方は以下から確認できます。

あわせて読みたい
CSSで文字スタイルを変えるパート1 【フォント・サイズ・太さ】今回はCSSで文字スタイルを変更する方法について解説します。2部構成で話を進め、今回は第1部となります。第1部では「フォントスタイル」「サイズ」「太さ」の変更方法について解説します。...

今回の記事は次のような方に向けて書きました。

想定読者
  • CSSで文字の行間の幅を変更したい
  • CSSで文字の配置を変更したい
  • CSSで文字に下線や打ち消し線などの装飾をつけたい

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
CSSでテキストのスタイルを変更するパート2CSSでテキストのスタイルを変更する方法を学びます。パート1とパート2の2部に分けて解説します。今回はパート2の内容で「line-height」「text-align」「text-decoration」の解説となります。...

CSSで文字スタイルを変更する」第2部で話していく内容は次のとおりです。

今回の内容
  1. CSSのline-heightで文字の行間の幅を変更する
  2. CSSのtext-alignを使って文字の配置を変更する
  3. CSSのtext-decorationを使って文字に下線や打ち消し線などの装飾をつける

 

CSSのline-heightで文字の行間の幅を変更する

CSSで文字の行間の幅を変更するには「line-height」プロパティを使います。

下の画像を確認すると、line-heightプロパティの値に応じて文字の行間の幅が変更しているのがわかるかと思います。

CSSのline-heightを使って行間の幅を変更するサンプルCSSのline-heightを使って行間の幅を変更するサンプル

上の画像で使っているコードは以下のリンク先からも確認ができます。

line-heightのサンプル

上の画像のサンプルでは、行間の幅の数値を指定する際に以下の単位を使っています。

各単位の意味
  • px : どんなブラウザ環境でも同じ大きさとなるように絶対値で指定できる
  • % : 親要素の文字サイズからの相対値で指定できる(例: 親要素の文字サイズが10pxの場合、150%を指定すると15pxとなる)
  • em : 親要素の文字サイズからの相対値で指定できる(例: 親要素の文字サイズが10pxの場合、1.5emを指定すると15pxとなる)

CSSのtext-alignを使って文字の配置を変更する

CSSで文字の配置を変更するには「text-align」プロパティを使います。

下の画像を確認すると、text-alignプロパティの値に応じて文字の位置が変更しているのがわかるかと思います。

CSSのtext-alignを使って文字の配置を変更するサンプルCSSのtext-alignを使って文字の配置を変更するサンプル

上の画像で使っているコードは以下のリンク先からも確認ができます。

text-alignのサンプル

上の画像では、文字の配置を指定する値として「left」「center」「right」を利用しています。

文字通り、「left」を使ったときは左ぞろいに、「center」では中央ぞろい、そして「right」では右ぞろいに文字がセットされるようになります。

left」「center」「right」以外にも利用できる値が用意されえいるので、どんな値を利用できるか知りたい方はMDNのドキュメントにまとめられている「text-align」を一度確認してみると良いでしょう。

CSSのtext-decorationを使って文字に下線や打ち消し線などの装飾をつける

CSSで文字に下線や打ち消し線をつけるには「text-decoration」プロパティを使います。

下の画像を確認すると、text-decorationプロパティの値に応じて文字に下線や打ち消し線などがつけられているのがわかるかと思います。

CSSのtext-decorationを使って文字に下線や打ち消し線などをつけるサンプルCSSのtext-decorationを使って文字に下線や打ち消し線などをつけるサンプル

上の画像で使っているコードは以下のリンク先からも確認ができます。

text-decorationのサンプル

上の画像のサンプルではtext-decorationプロパティに「underline」「overline」「line-through」を利用しておりそれぞれの意味は次のとおりです。

プロパティの値の意味
  1. underline : 文字に下線をつける
  2. overline : 文字の上に線をつける
  3. line-through : 文字に打ち消し線をつける

「underline」「overline」「line-through」以外にも利用できる値が複数あるため、どんな値が利用できるか知りたい方はMDNのドキュメントにまとめられている「text-decoration」を一度確認してみると良いでしょう。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. CSSで文字の行間の幅を変更する場合は「line-height」プロパティを使う
  2. CSSで文字の配置を変更する場合は「text-align」プロパティを使う
  3. CSSで文字に下線や打ち消し線などをつける場合は「text-decoration」プロパティを使う

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
CSSでテキストのスタイルを変更するパート2CSSでテキストのスタイルを変更する方法を学びます。パート1とパート2の2部に分けて解説します。今回はパート2の内容で「line-height」「text-align」「text-decoration」の解説となります。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です