CSS STUDIO

タイポグラフィ

見出し

<h1>から<h6>の全てのHTMLの見出しが利用可能です。 また、.h1から.h6のクラスも利用可能で、 これは見出しのスタイルと同じにしたいが、インライン表示のテキストのままにしたい場合に使用します。

h1. 見出し

 やや太字 36px

h2. 見出し

 やや太字 30px

h3. 見出し

 やや太字 24px

h4. 見出し

 やや太字 18px
h5. 見出し
 やや太字 14px
h6. 見出し
 やや太字 12px 
<h1>h1. 見出し</h1>
<h2>h2. 見出し</h2>
<h3>h3. 見出し</h3>
<h4>h4. 見出し</h4>
<h5>h5. 見出し</h5>
<h6>h6. 見出し</h6>

一般的な<small>タグまたは.smallクラスを使用して、 控えめで副次的なテキストを見出し内に作ります。

h1. 見出し 副次的なテキスト

h2. 見出し 副次的なテキスト

h3. 見出し 副次的なテキスト

h4. 見出し 副次的なテキスト
h5. 見出し 副次的なテキスト
h6. 見出し 副次的なテキスト
 
<h1>h1. 見出し <small>副次的なテキスト</small></h1>
<h2>h2. 見出し <small>副次的なテキスト</small></h2>
<h3>h3. 見出し <small>副次的なテキスト</small></h3>
<h4>h4. 見出し <small>副次的なテキスト</small></h4>
<h5>h5. 見出し <small>副次的なテキスト</small></h5>
<h6>h6. 見出し <small>副次的なテキスト</small></h6>

BODYテキスト

Bootstrapの全体的なデフォルトのfont-sizeは14pxで、 line-heightの1.428と共に指定されています。 これは<body>と全ての段落に適用されています。 更に<p>(段落)は、それらline-heightの半分の値(デフォルトは10px)がbottom-marginに割り当てられます。

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

BODYのテキストを目立たせる

.leadを追加することで、段落を目立たせることができます。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Lessの構造

タイポグラフィの大きさや尺度は、variables.less内の@font-size-baseと@line-height-baseの2つのLess変数が基準になります。 始めにfont-sizeを基準にしつつ、そのまま次にline-heightを基準にします。 これら変数とシンプルな計算によって、全てのタイポグラフィとその他のmargin、padding、line-heihgtを作り出します。 これらをカスタマイズして、Bootstrapに適応させてください。

インライン・テキスト要素

印付テキスト

別の文脈との関連が分かるように、テキストを強調(ハイライト)させるには、<mark>タグを使用します。

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.

削除済みテキスト

テキストのブロックが削除されていることを示すには、<del>タグを使用します。

This line of text is meant to be treated as deleted text.

<del>This line of text is meant to be treated as deleted text.</del>

打ち消しテキスト

テキストのブロックがもはや適切ではないことを示すには、<s>タグを使用します。

This line of text is meant to be treated as no longer accurate.

<s>This line of text is meant to be treated as no longer accurate.</s>

追記テキスト

ドキュメントに追加されたことを示すには、<ins>タグを使用します。

This line of text is meant to be treated as an addition to the document.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

下線テキスト

テキストに下線を引くには、<u>タグを使用します。

This line of text will render as underlined

<u>This line of text will render as underlined</u>

HTMLのデフォルトの強調(emphasis)タグには、軽量のスタイルを使用しています。

スモールテキスト

強調させたくないインラインまたはブロックのテキストには、<small>タグを指定してテキストを親要素の85%のサイズにします。 見出し要素は入れ子になる<small>要素のために自身のfont-sizeを受け入れます。

インライン要素に<small>の代わりに.smallを使用しても構いません。

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

太字

font-weightの比重を増やして、テキストの一部を強調します。

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

イタリック体/斜体

テキストを斜体にして、テキストの一部を強調します。

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

代替要素
HTML5でご自由に<b>と<i>を使用してください。 <b>は特別重要であるという意味を持たずに単語または段落を強調し、 <i>は主に話し言葉、技術用語等を表します。

整列クラス

テキストの整列クラスを使用して、簡単にコンポーネントを整列させることができます。

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

変形クラス

テキストのキャピタライズ(capitalization)クラスを使用して、コンポーネントのテキストを変形させることができます。

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

略語

略語と頭文字語(acronyms)のためのHTMLの<abbr>要素に、 hover時に見せ方を拡張するスタイルを割り当てます。 title属性を持つ略語は、薄い点の下線とhover時にヘルプカーソルを持ち、 hover時の追加のコンテキストとユーザーへの支援技術を提供します。

基本的な略語

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

頭文字

.initialismを略語に追加すると、フォントサイズを少しだけ縮小します。

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

アドレス

連絡先情報を直近の親要素、またはBODY全体に提供します。 全ての行の終端に<br>を使用することで、フォーマットを保護します。

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
[email protected] 
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

引用・転載

あなたのドキュメント内に、別の情報源からのドキュメントを載せる引用ブロックのための要素です。

デフォルトのBlockquote

引用として、任意のHTMLを<blockquote>で囲みます。 純粋な引用(straight quotes)であれば、我々は<p>を推奨しています。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquoteのオプション

標準の<blockquote>にちょっとした変化を与えるために、スタイルと内容を変更します。

情報源の名前

情報源を指定するために<footer>を追加します。 情報源の名前を<cite>で囲みます。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Alternate displays

引用の内容を右寄せするには、.blockquote-reverseを追加します。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  ...
</blockquote>

リスト

順不同

順序を明確にしない項目のリストです。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

順序付き

明確に順序付けられた項目のリストです。

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

スタイル無し

デフォルトのlist-styleとリストの項目(直下の子要素のみ)の左マージンを削除します。 これは直下の子要素のリスト項目だけに適用されるため、 入れ子のリストがある場合は同様にクラスを追加する必要があります。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

インライン

リストの全ての項目をdisplay: inline-block;とある程度のpaddingを与えることで、1つの行にします。

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

説明

用語とそれに関連付けられた説明のリストです。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>
水平の説明リスト

<dl>内の用語と説明が、水平に並ぶように調整されます。 最初はデフォルトの<dl>のように積まれますが、 navbarが展開されるとこれらの事を行います。(翻訳に自信なし)

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

自動切り詰め
水平の説明リストは、用語が長すぎる場合は左の列に合わせてtext-overflowによる切り詰めをしてくれます。 狭いビューポート時にはデフォルトのスタック(積み)レイアウトを変更します。

 Back to top

docs CC BY 3.0

このページは、ページトップのリンク先のBootstrap公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。