Bootstrap3のLine-heightはいくつですか？

Bootstrap3の行間について

Bootstrap3は、Webサイトを効率的に作成するためのフレームワークとして広く利用されています。その使いやすさの一因として、デフォルトで設定された見やすいフォントサイズと行間が挙げられます。

デフォルトのフォントサイズと行間

Bootstrap3におけるデフォルトのフォントサイズは、14pxです。行間（line-height）は、1.428に設定されています。この行間は、およそ20pxに相当し、可読性を高める効果があります。

適切な行間は、以下のような効果をもたらします。

実際にBootstrap3の行間を確認してみましょう。下記のHTMLコードを記述し、ブラウザで表示してみてください。


<p>これはBootstrap3のデフォルトの行間で表示されたテキストです。</p>

Bootstrap3の行間は、CSSを使ってカスタマイズすることができます。例えば、行間を1.8に設定したい場合は、以下のように記述します。


<style>
p {
  line-height: 1.8;
}
</style>

行間は、フォントサイズとの組み合わせによって、見た目の印象や可読性が大きく変わります。以下の表は、フォントサイズと行間の組み合わせの例です。

A1: いいえ、Bootstrap3のデフォルトの行間は、

タグなどの主要なテキスト要素に適用されます。見出しタグ(<h1>,</h1>など)には、異なる行間が設定されています。

A2: はい、行間を変更すると、テキストの高さ方向のスペースが変化するため、レイアウトが崩れる可能性があります。変更後は、レイアウトが崩れていないか必ず確認しましょう。

A3: 行間の推奨値は、フォントサイズや文章の長さなどによって異なります。一般的には、フォントサイズの1.4倍〜1.6倍程度が適切な行間であると言われています。