もくじ

テキスト周りのデザイン調整に使えるおすすめCSSプロパティ

ハウツー
蛙のicon

こんにちは、蛙です。
このブログもそうですが、テキストコンテンツがメインのサイトは読まれなければ意味がありませんよね。 文章の内容はもちろんのこと、読みやすくなるようにCSSでスタイル調整もするとより効果的です。
今回は私が普段よく使う項目を中心に、テキストの調整に使えるおすすめのプロパティ設定をいくつかご紹介いたします。

行の高さ - line-height

line-heightプロパティでは行の高さを設定することができます。 デフォルトでは1.2程度になっていますが、やや詰まった印象があるので適宜調整した方が良いと思います。
body { line-height: 1.5; } p { line-height: 2; }
line-height比較
line-heightはpxやemなどの単位をつけて指定することもできますが、単位なしの記述が一般的です。
私がサイトを作る場合には、サイト全体は1.25~1.5、文章は1.75~2程度に指定することが多いですね。 フォントの種類や文字サイズ、paddingmarginの取り方によっても適切な行間は変わってくると思うので、自分でしっくりくる値を探してみてくださいね。

有名メディアサイトのline-height

Copy of 有名メディアサイトの記事コンテンツのline-heightc
サイト名
PC版
スマホ版
Yahoo!ニュース
1.8em
1.5
朝日新聞デジタル
1.6
1.7
ナショナルジオグラフィック
2
1.8
BuzzFeed
1.5
1.5
参考として有名メディアサイトの記事部分のline-heightを調べてみました。 やはりデフォルトの行間は狭すぎるのか、どのサイトも1.5以上の広めの値を採用しています。

蛙の小ワザ

高さの決まっている要素の中にテキストを入れる場合、要素の高さと同じ値をline-heightにあてると、テキストが上下中央に綺麗に収まります。 ちなみに、ボタン右側に擬似要素として表示している「>」はfloat: right;を指定しているのですが、こちらにもしっかりline-heightが反映されているんですよね。
テキストを上下中央に揃える方法は他にもあるのですが、これだと記述が簡単に1行で済むのでよく利用しています。

文字の間隔 - letter-spacing

letter-spacingは左右の文字文字同士の間隔です。 デフォルトではletter-spacingは0に設定されており、文字は隙間なく並んだ状態になっています。
body { letter-spacing: 0.05em; }
letter-spacing比較
letter-spacingは特に指定しないことも多いのですが、ややゆとりのあるデザインにしたい場合には0.05emくらいにしています。 単位は要素の文字サイズをベースとするemを使うのがおすすめ。
文字間隔を広くしすぎるとまとまりがなくバラバラした印象になるので注意しましょう。 サイト名や見出しなど、あえて文字と文字の間隔を広くしたいのであればletter-spacingを大き目に設定しても良いかもしれません。
また、letter-spacingにマイナスの値を入れることで、文字の間隔をギュッと詰めることもできます。

テキストの両端揃え

p { text-align: justify; }
左揃えと両端揃え
テキストはデフォルトでは左揃えになっていますが、text-align: justify;と指定することで右端も綺麗に揃えることができます。 両端揃えにしても最後の行は右揃えにはならないため、見た目的に不自然になることはありません。
特に指定しなくても良いとは思いますが、デメリットもないため、見た目の美しさにこだわるのであれば書いておきましょう。

取り消し線を引く

.text { text-decoration: line-through; } .green { text-decoration: line-through green; }
取り消し線
取り消し線にはtext-decorationプロパティを使いましょう。 線の色はデフォルトでは文字色と同じになっていますが、こちらで指定すれば別の色に変えることもできます。
取り消し線はHTMLの<s>タグで付けることができると紹介されていることもありますが、<s>タグはHTML5では廃止されている古い要素です。 似たような効果をもつ<del>タグは健在ですが、こちらは「削除したテキスト」という意味をもつタグなので、単純に装飾として打消し線を引きたい場合には使えません。

文章のコピペ防止策

デザインというテーマからは少し逸れてしまいますが、テキスト周りで使えるテクニックとしてこちらも覚えておくと便利です
この記述を1行追加するだけで、ドラッグしても文章を選択することができなくなります。 自分の書いた記事が勝手にコピペ流用されるのが嫌だという人は、こちらの記述を追加しておくと良いです。
ただし、ソースコードを表示するなど、少し手間はかかるものの文章をコピーする方法は他にもあります。 これだけでは完璧なコピペ予防策とはならないため油断は禁物です。

まとめ

ブログやメディアサイトを作るのであれば、テキスト周りの調整も欠かせません。 特にline-heightの設定は必須と言っても良いでしょう。
まずは有名サイトの真似をしてみるところからはじめてみるのがおすすめでです。 サイトに適用されているスタイルはChromeのデベロッパーツールで確認することができるので、「これは読みやすい」「素敵!」と思うサイトがあれば、じゃんじゃんパクっていきましょう!
これからもサイトで使えるおすすめの設定などを紹介していきますので、サイト作りの参考にしていただけると嬉しいです。
蛙のicon
ひょんなことからIT業界に迷い込んだ1匹のカエル。知識ゼロからのスタートで四苦八苦。特にJavaScriptが怖い…。