記事を読みやすく。行間(行の高さ)の調整。 | 無責任な大人の自由研究

記事を読みやすく。行間(行の高さ)の調整。

≪アメブロちょい足しCSS-Indexへ戻る-≫

フォントを大きくしたり、色をつけたりして、文章を読みやすく魅力的に見せる事は多くの人がやっています。

しかし、もう一つ大事なことがあります。多分。
行間です。多分。

記事内の行間は、デフォルトではline-height:1.5;と指定されています。
デフォルトのままでも十分かも知れませんが、コレをちょっぴり大きくしてあげましょう。

【記述例】

/*-- ▼▼▼エントリー内の設定▼▼▼ --*/
.entry .contents{
line-height:1.75;
}

【line-height:1.5;の文章】

彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。人生の航路を捻じ曲げ、その獲物と共に立ち去ろうとしている、その丁度今。 彼のこの仕事への恐れを和らげるために、数多い仲間の中に同じ考えを抱き、彼を見守り、待っている者がいるというのか。

【line-height:1.75;の文章】

彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。人生の航路を捻じ曲げ、その獲物と共に立ち去ろうとしている、その丁度今。 彼のこの仕事への恐れを和らげるために、数多い仲間の中に同じ考えを抱き、彼を見守り、待っている者がいるというのか。

小さな事ですが、少しでも読みやすくすることは大事です。


おや?単位は?。
と思った方鋭いです。

試しに下に単位なし単位ありで例を書いてみました。

【単位なし】line-height:1.75;

これは
単位なし単位なし単位なし
の文章です。

【単位あり】line-height:1.75em;

これは
単位あり単位あり単位あり
の文章です。


このように文字が重なってしまう事がある為、line-heightを使用する際には、単位はつけないのがよろしいかと。
何故こうなってしまうかは、面倒なので説明しません( ´△`)


lineから線→1,000。

1000のバイオリン - EP /THE BLUE HEARTS

¥600
iTunes
※モバイル非対応

懐かしい曲です( *´エ`)

≪アメブロちょい足しCSS-Indexへ戻る-≫