CSSの余白調整、余白指定法｜margin、padding

行間をコントロールして文章の見栄えをよくする

行間が少ない文章を読みにくいと感じたことはありませんか。CSSを使えば、ほんの少しのコード記述で文章を読みやすくできます。それでは、行間の調整についてご説明します。

行間の調整には、line-heightというプロパティを使用します。line-heightは、行間を指定した数値にできるのです。
以下の記述例は30pxの行間を指定しています。

line-height: 30px;

px（ピクセル）による指定のほか、%（パーセント）、em（エム）などを使えます。emは、%と似ていて、*1emが100%*に当たります。つまり、

ちなみにpxなどを指定せず数値のみの場合は文字のサイズに応じた比率になります。文字サイズに自動的に対応するので、デザインが崩れる心配がありません。

決して難しいものではありませんが、デザインにもユーザビリティにも大きく貢献できますので、ぜひご活用ください。また、少々変わり種として、exという単位も使えます。exはアルファベットの小文字の「x」の高さを1としています。小文字なので行間が少し詰まった印象になるでしょう。あまり使わないかもしれませんが、このような指定もできるということを覚えておいてもよいでしょう。

読みやすさがぐっと向上する文字間の調整について

行間の次は、文字間の指定についてご説明します。文字間は行間と同じように読みやすさを向上できます。使用するプロパティは、letter-spacingです。letter-spacingもpxやemを使って数値を指定できます。

数値が大きいことで文字間を広げられますが、数値にマイナスを指定することで、文字間を狭くすることができます。
それでは、記述例として以下に文字間を10pxにするケースをご紹介します。

letter-spacing:10px;

ちなみに、文字間を指定なしにした場合は、初期値として0が設定されています。もちろん、初期値で問題ない場合は無理に変更する必要はありません。コンテンツを閲覧するユーザーの立場になって考えて、最適な状態にするように心がけましょう。

自動的に改行をさせないようにして体裁をよくする

文章の折り返しが思うようにいかず見栄えが悪くなった経験はありますでしょうか。文章の表示スペースが少ないときに不自然なところに改行が入ってしまう場合などです。このような場合に利用できるのが自動的な改行を禁止できる*white-space:*というプロパティです。使い方は以下のようにnowrapを指定して記述するだけです。

white-space: nowrap;

まとめ

今回はCSSの余白をテーマに基本的な記述方法をご説明しました。書き方だけを読むと簡単に感じるかもしれませんが、実際のホームページの制作現場で使う場合、様々なケースがあり迷うことも多いかと思います。とくに文字間や行間とは違い、marginやpaddingを使った余白の調整に関しては経験を積まなければ、ソースコードの記述が実際の表示イメージと食い違ってしまうこともありがちです。何度も記述してみるのはもちろんですが、他のホームページでどのようにCSSを記述しているのか等、気になる場合は積極的にチェックしてみることをオススメします。できるだけCSSを読む機会を増やし、確実にスキルアップしていきましょう。

もっとCSSの使い方を知る

CSSで背景を作る。backgroundプロパティの使い方を解説

ホームページ制作を行う際、必要になるのが背景の設定です。背景は面積が広い分、全体の印象を大きく左右する重要な役割を果たします。背景の設定にはCSSを使うことが多いのですが、背景を設定することは決して難しい作業ではありません。背景に好きな色をつけたり、画像を配置することも簡単です。今回はCSSを使った背景の設定方法をご説明します。

CSSでpositionを使い要素を並べる｜static、relative、absolute、fixedを解説

今回のテーマはCSSの要素の並べ方です。static、relative、absolute、fixedを解説します。初心者のうちは、なかなか難しい位置決めですが、少しでもわかりやすく説明したいと思います。

▼画像加工で困ったら？手軽なツールを紹介

みんなが使えて導入しやすい！デザイン・動画・サイト制作の【簡単ツール特集】

専門職でなくても使いこなせるデザイン制作関連のツールを特集。弊社のマーケター・営業メンバーや総務・人事担当も実際に使えているツールを、1カテゴリにつき1つピックアップしてご紹介します。