takato（@n8takato）です！
cssで句読点やカッコの余白を詰めたい
この記事では上記の課題を解決します。
タイトルやキャッチコピーを綺麗に見せるために、文字の間隔を詰めます。その際句読点やカッコの余白も詰めたいですよね。
実は、句読点やカッコの余白もcssで簡単に詰めることが出来ます。
この記事では、cssで句読点やカッコの余白を詰める方法を紹介します。
この記事でわかること
- cssで句読点やカッコを詰める方法
- 文字の間隔を調整する方法
- 文字の行間を調整する方法
- 文字組みを綺麗にする方法
当ブログでは他にも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で句読点やカッコの余白を詰める方法と、文字間や行間の調整を行う方法を紹介しました。
文字間や行間の調整は、文字の読みやすさを向上させます。タイトルやキャッチコピーの文章は特に調整してみてください。