Dreamweaverで学べるBootstrapの超基本！第9回「フォントの大きさや配置を指定」

Dreamweaverで学べるBootstrapの超基本！

9. フォントの大きさや配置を指定

Bootstrapの見出しのフォントサイズは、それぞれ、h1:36px, h2:30px, h3:24px, h4:18px, h5:14px, h6:12pxです。どの見出しもfont-weightは500（セミボールド）で、line-heightは1.1です。インラインで見出しと同じスタイルを適用できるように、.h1から.h6までのCSSクラスも用意されています。

見出しに続けてサブテキストも置くときには、<small>タグまたは.smallクラスを利用できます。

h1-small

<h1>h1の見出しテキストです <small>補足のテキストです</small></h1>

標準のテキストの属性は<body>タグに定義されています。font-sizeは14pxで、line-heightは1.42857143（20px）です。<p>タグにはmargin-bottomとして10pxが定義されているため、段落ごとに行高の半分の隙間ができます。

記事の導入文のように少し目立たせたい段落には、.leadクラスを使って見た目を差別化できます。フォントサイズが16pxとやや大きくなります。下の例を見てください。

paragraph-lead

<p class="lead">これはリード文です</p>
<p>これは本文です</p>

引用文は、<blockquote>タグで<p>タグを囲めば、テキストが一段右に移動して左にボーダーが引かれます。<blockquote>タグの内側に引用元を記述するための<footer>タグを配置したり、引用文を右揃えにするための.blockquote-reverseクラス（ボーダーも右側になります）が利用できます。

blockquote

<blockquote>
    <p>これは引用文です</p>
    <footer>引用元はここです</footer>
</blockquote>
<blockquote class="blockquote-reverse">
    <p>これは引用文です</p>
    <footer>引用元はここです</footer>
</blockquote>

段落内のテキストの配置を指定したり文字変換をするCSSクラスが提供されています。これらは、text-alignやtext-transformのショートカットとして使える便利なクラスです。

text-alignment

<p class="text-left">テキストを右揃えにする</p>
<p class="text-center">テキストを中央揃えにする</p>
<p class="text-right">テキストを左揃えにする</p>

上の例以外にもtext-justify、text-nowrap、text-lowercase、uppercase、text-capitalizeといったCSSクラスが利用できます。

DreamweaverのライブビューではCSSクラスをコードヒントを見ながら追加できます。要素を選択するとタグ名が表示されます。その右にある「＋」をクリックして新しく表示されたフィールドにtext-lのように入力するとクラス名の一部が一致する候補が表示されます。選択したクラスはコードに追加されます。

__
Dreamweaver体験版ダウンロード

__
チュートリアルビデオを視聴

Dreamweaverで学べるBootstrapの超基本！第9回 「フォントの大きさや配置を指定」