Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケター・WEBコーダーとして日々従事しており、会社ではWindows、お家ではMacの両刀遣い。iPad Proは毎日持ち歩いています。PCデスク周りを快適にすることやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしているガジェットブロガーです。写真撮影が趣味になりました。
ルイログをGoogleニュースで読む
この記事の目次
CATEGORY

2次元のルイ

ブログやるなら SWELL × ConoHa WING がおすすめ!ルイログはこの構成で運営しています

ルイログ愛用ブログテーマSWELL

今選ぶBESTサーバー ConoHa WING

ルイログも愛用中!

YouTubeチャンネル開設しました!
ステマ規制への対応と記事内広告について

本サイト内のコンテンツはルイログが独自に制作しています。 メーカー等から商品提供を受けることもありますが、その場合は記事内にPR表記と提供を受けている旨を明記しています。 また、コンテンツの内容や評価に関する決定にも一切関与されていません。 アフィリエイトプログラムにより記事内で紹介する商品を購入することで当サイトに売り上げの一部が還元されることがあります。 詳しくはサイト運営ポリシーをご覧ください。

文章を読みやすくするための余白調整と行間の調整

コピペで簡単!cssで文章を読みやすくするための余白調整と行間の調整をする方法

文章の読みやすさって、ほとんどは文章の構成や作り方で決まりますが、それ以外のところでも読みやすくすることができます。

それが「文字と文字の余白や行間の調整」です。

今回はそんな文章の余白や行間の調整をcssで簡単に調整する方法を紹介します。

コピペで簡単に反映させた後、お好みの値に調整してみてください。

もくじ
この記事の著者
R.U.I

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。 プロフィール詳細やレビューガイドライン

コピペで簡単!文章を読みやすくするための余白調整と行間の調整

本文の余白調整(letter-spacing)

まずは本文の余白調整から紹介します。

cssはこちら。

 body{
letter-spacing: .1rem;
}

上記例だと body 指定にしているので、全体的な余白調整となります。

あまりしないかもしれませんが、pタグだけに対してもOKです。お好みでどうぞ。

行の高さ変更(line-height)

文章が少し長くなるとタグ内で折返しが発生し、2行になったり3行になったりします。

そんなときの行間調整を紹介します。

cssはこちら。

 body{
line-height:1.6;
}

こちらも body 指定にしたので、全体的な行間調整となります。

文字サイズが大きくなると行間指定が他と同じサイズだとすごいことになってしまったりするので、そういうときにも使えます。

全体は line-height:1.6; とかにしておいて、 h1,h2 とかだけを line-height:1; とかにしておくとか。そういった使い方もできます。

行間の余白(pタグ等の上下margin)

こちらは文章=pタグとして、その上下にmarginを指定しておき行間に余白を持たせる方法を紹介します。

cssはこちら。

 p{
margin:1.5rem 0 0 0;
}

上記例では、上下にmargin指定ではなく、上部だけにmarginを1.5rem指定する形にしました。

というのも、上下にmargin指定をすると上部と下部どちらも余白の計算をしなければならなくなり大変になりがち。

その他のところも基本ベースを上部に余白を持たせるとすれば計算が単純になっていくので作りやすくなっていきます。

見出し等は上下の余白を微調整したりしてあげたほうが良いですが、基本はこの形で良いかなと思います。

ちなみにmarginの指定は、

margin:上 右 左 下;

の順で指定となっています。

その他にも

margin:上 左右 下;

margin:上下 左右;

margin:上下左右;

と言った指定方法があります。半角スペースで区切ったもので、上から順に値を4つ指定3つ指定2つ指定1つ指定となっています。

まとめ

今回は「コピペで簡単!文章を読みやすくするための余白調整と行間の調整」ということで、文章を読みやすくするためにできることを紹介しました。

面倒なデザインのテクニックをコピペで簡単に、という紹介ではありませんが「文章を読んでもらうためにできること」として、文章の間隔や余白等もデザインの一部として考えたとき、これもデザインのうちだよね。ということで紹介しました。

WordPressならテンプレートを利用して、そのテンプレートの初期設定もあるかと思いますが、その初期設定が文字間隔が詰まっていてもう少し広げたいなぁとか、1からLPやサイトを作っていて初期設定として指定したりだとか、そういったときに利用してもらえればなと思います。

 

良きWEBデザインをっ!

▷WEBデザインカテゴリをチェック

コピペで簡単!cssで文章を読みやすくするための余白調整と行間の調整をする方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ