行間を調節するプロパティ line-height: 今回は「【CSS】white-spaceを解説！ スペース・タブ・改行の表示方法」についての解説になります。normal、nowrap、pre-line、pre、pre-wrap5つの指定方法について解説しております。 CSSでなので、フォントサイズを何も指定せず、高さ16px（height:16px;）で指定したボックスに文字を入れるとびったり収まります。■また、横幅16px（width:16px）で指定したボックスに入れてもぴったり収まることになります。■けれども、高さを半分の8pxに指定した場合、フォントサイズが16pxなので入り切りません。■また、ボックスの高さを倍の32pxに指定した場合、上に貼りついて余白が生じてしまいます。■これは以下のようにちょうど２行分の高さになります。■「上の例では１行の高さが16pxなので、ボックスの高さが32pxの場合は２行になって表示されています。これをline-heightで１行の高さをボックスの高さと同じ32pxに指定すると、次のように１行でぴったり収まります。■これをcssで書けば、次のようになります。.sample {このline-heightを指定すると、文字をボックスの高さの中央に配置する際、line-heightを使わず、そのような場合、このline-heightで１行の高さをボックスの高さと同じ値に設定すれば、自動的に上下に均等に配分されるため、ブラウザによる違いがなく中央に配置することができます。上の例でボックスの高さを倍の64pxにした場合、行と行の間に8pxづつ余白が生じるため、16px分の行間が空くことになります。■この場合、文字サイズ16pxに対して１行の高さが2倍の32pxのため、line-height:200%;と同じ意味になります。これでは行間が空きすぎるため、実際はline-height:150%;ぐらいで指定して適度な行間をとるのが一般的です。■■■実際にサイトのコンテンツ中で使用する際、このline-heightをCSSで指定する際、「％」でも「数値」でもどちらも同じ意味になります。①line-height:150%;けれども、子要素の継承のされ方に違いがあるので注意が必要です。例えば、以下のようになっていたとします。①パーセントでの指定body {font-size:14px;line-height:②数値での指定 body {font-size:14px;line-height:CSSでの違いは太字の部分だけになりますが、実際の表示のされ方は以下のように違ってきます。①パーセントでの実際の表示　→　h1の高さが「21px」②数値での指定　→　h1の高さが「36px」どちらも行の高さを1.5倍にしたいという意図で指定していますが、①のようにパーセントで指定した場合、bodyで指定している14pxの1.5倍の「21px」の高さがh1に継承されてしまいます。一方、②のように数値で指定した場合、1.5倍という倍率が継承されますので、h1の24pxの1.5倍で高さは「36px」になります。デフォルトの状態でのbodyのフォントサイズは16pxになりますので、14pxなどと指定していなかった場合でも、line-height:150%;とパーセントで指定するとh1の高さが「24px」になります。どちらがよいのかについては、ケースバイケースになるかと思いますが、一般的にはline-height:1.5;などと数値で指定されているケースが多いかもしれません。©2020 www.homepage-tukurikata.com line-heightプロパティ は， 行の高 さ を指定します。 指定できる値の形式は，以下のとおりです。 指定方法 説 明; キーワード で指定 normal. まず下のコードをstylesheetに追記します。 ... 高さ変更！slickスライダーで画像サイズがバラバラの時の2つの対処法！【jQuery】 渦巻き模様が簡単に作れる！スパイラルツールの使い方【Illustrator(イラストレーター)】 【HTML・CSS】見出しの左右両端に線を入れる方法 . 行の高さや行間を指定する line-height. なぜcssの文字の折り返しを複数覚えなければならないの？ 文字の折り返しは、 ブロック要素内では自動的に起こります (自動改行)。 それなのに なぜ敢えて折り返しのcssのプロパティを使うのか 、という疑問を持ったことがありませんか？. 行間の調節 CSS line-height: 文章の行間を調節する。長い文章が多い場合、行間が詰まっていると読みにくくなる。そんな場合は、このプロパティで行間の調節をする。 オマケ）文字サイズ・行間 確認ツール. ‚éBƒIƒ}ƒPjƒy[ƒW‘S‘̂̍sŠÔ‚ð•Ï‚¦‚éB’i—Ž