CSS

2021.05.19

【CSS】英単語の間隔を調整できるword-spacing

今回は、Webサイトで英文を記載するときに役立つword-spacingについてご紹介します。

word-spacingとは

word-spacingは、単語の間隔を調整するプロパティです。
▼参考
https://developer.mozilla.org/ja/docs/Web/CSS/word-spacing

設定例

以下のようにword-spacingで単語と単語の間を指定することができました!

See the Pen word-spacing by spiqa design (@spiqa_design) on CodePen.

(失敗例)letter-spacingを設定

日本語の文章で文字間を調整する際、letter-spacingをよく使用しますね。
同じように、英語の文章にletter-spacingを設定すると以下のようになります。

See the Pen letter-spacing by spiqa design (@spiqa_design) on CodePen.

英語の場合は、単語と単語の間に間隔があると読みやすくなりますが、letter-spacingを指定すると1文字1文字の間隔が空いてしまい、読みにくくなってしまいました…。

(参考)日本語には設定できない

ちなみに、word-spacingを日本語の文章に指定しても見た目は何も変わりません。

See the Pen word-spacing by spiqa design (@spiqa_design) on CodePen.

日本語は、単語と単語の区切りで間隔が空くよりも、文字と文字の間が適度に離れていた方が読みやすいので、letter-spacingを設定するのが良さそうです。(上記の例は、わかりやすくするために少し大きめの値を設定しています。)

まとめ

いかがだったでしょうか。
言語に応じて、Webサイト上の文章が読みやすいように適切なコーディングができるようにしていきたいですね!みなさまの参考になれば幸いです!

こちらもおすすめ

0

関連記事

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.06.02

    【IEバグ】flex-direction: column;を指定した時に画像の下に余白ができるバグ解消【CSS1行……

    CSS

    HTML5

  • 2021.05.14

    【CSS】backgroundで行う背景画像の複数指定

    CSS

おすすめ記事

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!