cssで句読点やカッコなどの約物を詰めて文字間を調整する方法!

cssで句読点やカッコなどの約物を詰めて文字間を調整する方法!

takato(@n8takato)です!

cssで句読点やカッコの余白を詰めたい

この記事では上記の課題を解決します。

タイトルやキャッチコピーを綺麗に見せるために、文字の間隔を詰めます。その際句読点やカッコの余白も詰めたいですよね。

実は、句読点やカッコの余白もcssで簡単に詰めることが出来ます。

この記事では、cssで句読点やカッコの余白を詰める方法を紹介します。

この記事でわかること

  • cssで句読点やカッコを詰める方法
  • 文字の間隔を調整する方法
  • 文字の行間を調整する方法
  • 文字組みを綺麗にする方法

当ブログでは他にもcssに関する内容の記事を書いています。

cssに関する記事はこちら

あわせて読みたい
【css】幅固定の中で横幅100%に表示する簡単な方法を紹介します! 幅固定の中にある要素を横幅100%表示したい この記事では上記の課題を解決します。 LPの制作をしていると、1つの要素だけ横幅100%で表示するようなコーディングに遭遇...
あわせて読みたい
【簡単】cssで文字がキラッと光るアニメーションの作り方を紹介! cssで文字をキラッと光らせるアニメーションを作りたい この記事は上記の悩みに向けて作成しています。 一定の間隔で文字をキラッと光らせるアニメーションがあります。...
目次

cssで句読点を詰める方法

cssで句読点を詰める方法を紹介します。

句読点を詰める方法

句読点やカッコの余白を詰める方法は、下記のコードを追加することで実装できます。

font-feature-settings: "palt";

該当するクラスに上記のコードを追加することで、句読点やカッコの余白を詰めることが出来ます。

句読点を詰める前と後の違い

句読点を詰める前と後でどのくらい違うのかを紹介します。

下記の2つの文章を見比べてください。

See the Pen 句読点やカッコを詰める by takato (@ttakkatto) on CodePen.

句読点とカッコの余白を詰めることで、文章が綺麗にまとまります。

文字の間隔を調整する方法

先ほどは、句読点やカッコの余白を詰める方法を紹介しました。

次は、文字間の余白を調整する方法を紹介します。

文字間を調整する方法

文字間を調整するには、下記のコードを追加することで実装出来ます。

letter-spacing:○○px;

該当するクラスに上記のコードを追加することで、文字の間隔を調整することが出来ます。

ピクセル数が増えるほど文字間も広くなります。

文字間を調整する前と後の違い

文字間を調整する前と後の違いを紹介します。

1は文字間の調整をしていませんが、2は文字間を少し広げました。

See the Pen 文字間を調整する by takato (@ttakkatto) on CodePen.

文字間を少し広げることで、文字の読みやすさが高まります。

文字の行間を調整する方法

これまでは文字間の調整方法を紹介しました。続いては文字の行間を調整する方法を紹介します。

行間を調整する方法

行間を調整する方法は下記のコードを追加することで実装出来ます。

line-height:〇〇px;

該当するクラスに上記のコードを追加することで、行間を調整することが出来ます。

ピクセル数が多いほど行間が広くなります。

行間を調整する前と後の違い

行間を調整する前と後の違いを紹介します。

下記の下の文章は行間を調整しました。行間が少し空いていますよね。

See the Pen 行間を調整する方法 by takato (@ttakkatto) on CodePen.

タイトルやキャッチコピーは行間の調整も必要になるので、コーディングで調整しましょう。

文字組みを綺麗にする方法

文字組みを綺麗にする方法を紹介します。

文字組みを綺麗にする方法

文字組みを綺麗にするには、下記のコードを追加することで実装出来ます。

text-align:justify;

該当のクラスに上記のコードを追加することで、文字組みを綺麗にすることが出来ます。

See the Pen 行間を調整する方法 by takato (@ttakkatto) on CodePen.

上下の文字組みを比較すると、下は文章の右側も揃っており、文字組みが綺麗に見えます。

文字組みを綺麗にする場合は、上記のコードを使用してください。

最後に | 文字間と行間を調整しよう

この記事では、cssで句読点やカッコの余白を詰める方法と、文字間や行間の調整を行う方法を紹介しました。

文字間や行間の調整は、文字の読みやすさを向上させます。タイトルやキャッチコピーの文章は特に調整してみてください。

神は細部に宿る

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次