2014年11月26日
HTML の行間を調節する方法
こんばんわ。もんじです。
本日はサイトの行間を調節する方法をご紹介します。
行間を調節するには 【line-height】 を使用します。
これは行間を指定する命令ではなく、あくまでも、「行の高さ」 を指定する命令です。
例えば、文字のフォントサイズを 14px に設定している場合は、行の高さは 14px になります。
そこに、 【line-height】 を使用して、行の高さを2倍にしたとします。
そうすると行の高さは 28px になります。ここまではいいですよね？
文字のフォントサイズは 14px に対し、行の高さは 28px になったので、
残りの 14px が行間に割り当てられることになります。
割り当てられ方は、上下均等に 7px ずつ割り当てられます。
このようにして行間を調節していきます。
それでは実際の指定方法です。
スポンサードリンク
指定方法がいくつかあります。
代表的な指定方法をご紹介します。
１．【%】 で指定
元々の行の高さを 100% ととして、それを目安にどのくらい広げるかを設定します。
例えば、150% に指定した場合、
フォントサイズが 14px の行に対しては、21px が行の高さになります。
２．【em】 で指定
文字の大きさで指定する方法です。元々の文字の大きさを 1em とします。
フォントサイズが 14px であれば、1em は 14px となります。
例えば、1.5em で指定した場合は、
フォントサイズが 14px の行に対しては、21px が行の高さになります。
３．【px】 で指定
ダイレクトに行の高さをピクセル単位で指定します。わかりやすいですね。
例えば、21px で指定した場合は、
フォントサイズが 14px の行に対しては、150% で指定したのと同じ結果になります。
フォントサイズが 12px の行に対しては、175% で指定したことになります。
４．単位を指定しない
何も単位を指定せずに、数値だけを指定します。
例えば、1.5 と指定した場合は、
フォントサイズが 14px の行に対しては、21px となり、
150%、1.5em と同じ結果になります。
同じ結果にはなりますが、この指定方法を私は強くオススメします！
実は%指定やem指定には継承問題というものがあり、
予期せぬトラブルに発展しやすいのです。
簡単に説明しますが、興味ない人は読み飛ばしてください。
% や em で指定した場合、親要素で決定した行の高さの px 値が子要素にまで適用されてしまいます。
親要素と子要素のフォントサイズが同じであれば、問題はないですが、
子要素のフォントサイズが大きい場合は、行をはみ出してしまうんですね。
単位を指定しない場合は、子要素には子要素で比率を計算するため、
行がはみ出したりしません。
それでは実際の導入方法です。
HTML に直接設定する方法と、外部スタイルシート（CSS）に設定する方法があります。
どちらも同じ命令を書くだけですけどね (^▽^;)
それぞれについて、ご紹介します。
サイト全体に導入したい方は、HTML の<head>と</head> の間に
以下を追記して下さい。
ある要素にだけ適用したい場合
スタイルシートを適用されている方は、もちろんこっちの方がスマートです。
設定方法は以上となります。
行間を広げると、文字がかなり読みやすくなり、
読み手に優しくなるため、たいへんオススメですが、
あまりに広くしすぎると、改行あければいいじゃんってことになりますので、
ほどほどにしておきましょう (ﾟ∀ﾟ)
でわでわ ( ´Д｀)ﾉ~
本日はサイトの行間を調節する方法をご紹介します。
行間を調節するには 【line-height】 を使用します。
これは行間を指定する命令ではなく、あくまでも、「行の高さ」 を指定する命令です。
例えば、文字のフォントサイズを 14px に設定している場合は、行の高さは 14px になります。
そこに、 【line-height】 を使用して、行の高さを2倍にしたとします。
そうすると行の高さは 28px になります。ここまではいいですよね？
文字のフォントサイズは 14px に対し、行の高さは 28px になったので、
残りの 14px が行間に割り当てられることになります。
割り当てられ方は、上下均等に 7px ずつ割り当てられます。
このようにして行間を調節していきます。
それでは実際の指定方法です。
スポンサードリンク
指定方法がいくつかあります。
代表的な指定方法をご紹介します。
１．【%】 で指定
元々の行の高さを 100% ととして、それを目安にどのくらい広げるかを設定します。
例えば、150% に指定した場合、
フォントサイズが 14px の行に対しては、21px が行の高さになります。
２．【em】 で指定
文字の大きさで指定する方法です。元々の文字の大きさを 1em とします。
フォントサイズが 14px であれば、1em は 14px となります。
例えば、1.5em で指定した場合は、
フォントサイズが 14px の行に対しては、21px が行の高さになります。
３．【px】 で指定
ダイレクトに行の高さをピクセル単位で指定します。わかりやすいですね。
例えば、21px で指定した場合は、
フォントサイズが 14px の行に対しては、150% で指定したのと同じ結果になります。
フォントサイズが 12px の行に対しては、175% で指定したことになります。
４．単位を指定しない
何も単位を指定せずに、数値だけを指定します。
例えば、1.5 と指定した場合は、
フォントサイズが 14px の行に対しては、21px となり、
150%、1.5em と同じ結果になります。
同じ結果にはなりますが、この指定方法を私は強くオススメします！
実は%指定やem指定には継承問題というものがあり、
予期せぬトラブルに発展しやすいのです。
簡単に説明しますが、興味ない人は読み飛ばしてください。
% や em で指定した場合、親要素で決定した行の高さの px 値が子要素にまで適用されてしまいます。
親要素と子要素のフォントサイズが同じであれば、問題はないですが、
子要素のフォントサイズが大きい場合は、行をはみ出してしまうんですね。
単位を指定しない場合は、子要素には子要素で比率を計算するため、
行がはみ出したりしません。
それでは実際の導入方法です。
HTML に直接設定する方法と、外部スタイルシート（CSS）に設定する方法があります。
どちらも同じ命令を書くだけですけどね (^▽^;)
それぞれについて、ご紹介します。
HTML に直接記入するパターン
サイト全体に導入したい方は、HTML の<head>と</head> の間に
以下を追記して下さい。
<style type="text/css">
<!--
body {line-height : 150% ; }
-->
</style>
ある要素にだけ適用したい場合
<div style="line-height: 1.5;">
<H1>行間サンプル１</H1>
行間サンプル２
</div>
スタイルシート（CSS） に記入するパターン
スタイルシートを適用されている方は、もちろんこっちの方がスマートです。
/* 行の高さ指定 */
.text {line-height : 1.5;}
設定方法は以上となります。
行間を広げると、文字がかなり読みやすくなり、
読み手に優しくなるため、たいへんオススメですが、
あまりに広くしすぎると、改行あければいいじゃんってことになりますので、
ほどほどにしておきましょう (ﾟ∀ﾟ)
でわでわ ( ´Д｀)ﾉ~
スポンサードリンク
【このカテゴリーの最新記事】
-
no image
-
-
-
-
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
https://fanblogs.jp/tb/3015906
※ブログオーナーが承認したトラックバックのみ表示されます。
この記事へのトラックバック
Impress Watch Headline
GIGAZINE
ものテク
