2018年09月27日(木)
【CSS】line-heightを使った行間設定の方法
「line-heightの数値設定の仕組みがわからない」
「いつも適当に行間の数値を設定している。」という声を聞きます。確かに、行間の幅を設定する「line-height」の値は複数の種類があって、「曲者」という印象があります。ですが、CSSの初期設定で行間設定を行うことはありますし、見やすいサイトを目指す上で直感的な印象を与えます。行間が詰まったサイトよりも、適切な行間、文字の大きさのサイトを目指しましょう。
そのために今回は「line-height」を学習します。これはそれほど難しいCSSプロパティではありません。仕組みを理解できれば、簡単に使えるプロパティです。少し難しいと感じている方はぜひこの機会にマスターしましょう。
line-heightとは?
「line-height」は、行の高さを調整するプロパティで、文と文の間のスペースを調整できますが、以下のように文章(一行)の前後のスペースを作るのが「line-height」だと理解してください。つまり、皆さん...
0
50
4
27author:
creive（クリーブ）
クリエイティブを、アーカイブする。creive（クリーブ）は「クリエイティブ」をテーマに、デザインや制作、ライフハック等の情報を発信しているメディアです。
‹ PREV
Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut
NEXT ›
[ユーザー投稿] 「dfplus.io」を提供するフィードフォース、Instagramショッピングにおいて、 スマートシェアと共同してEC事業者支援を開始 ～カタログの作成・自動更新からストーリーズでのショッピング展開・社内運用の効率化まで支援可能に～
Ads
クリエイティブを、アーカイブする。creive（クリーブ）は「クリエイティブ」をテーマに、デザインや制作、ライフハック等の情報を発信しているメディアです。creive（クリーブ）の記事『【CSS】line-heightを使った行間設定の方法』についてまとめています。
この記事は特にフォント・Google・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のcreive（クリーブ）で全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとcreive（クリーブ）の記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
Ads
