BootstrapのTypographyとCodeの使い方

BootstrapのTypographyとCodeについて見てみます。

Typography

Headings

hXの見出しタグです。.hXでhXと同じスタイルが用意されています。
また、smallタグか.smallでタイトルの補足的なテキストを作成できます。

HTML

<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>

<p class="h1">p.h1 タイトル<span class="small">サブタイトル</span></p>
<p class="h2">p.h2 タイトル<span class="small">サブタイトル</span></p>
<p class="h3">p.h3 タイトル<span class="small">サブタイトル</span></p>
<p class="h4">p.h4 タイトル<span class="small">サブタイトル</span></p>
<p class="h5">p.h5 タイトル<span class="small">サブタイトル</span></p>
<p class="h6">p.h6 タイトル<span class="small">サブタイトル</span></p>

Headingsのデモページ1
　

Body copy

Bootstrapではfont-size: 14px;、line-height: 1.428;がデフォルトで設定されています。
pタグには下側に10pxのマージンがとられています。

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

HTML

<p class="lead">今にはできるだけしがなれででですないて、あたかもようやく申し上げて利用はなるべくないなのう。</p>
<p>あなたは九月余計その応用学というののためへありですだっ。大分今に評方はいくらこの料理でだかもを勧めとかねますがも盲動なくなっべきなかっが、ちょっとともえたでないです。</p>
<p>主義に根ざしますのはもし結果がいくらでもべきたます。毫も嘉納君の入会兵隊ちょっと仕事を出来ます寒暖計そのがた何か賞翫にとかいう今開始だますんでて、この十月はどこか人肴のなりて、三宅さんののに時分のこれがまあ今料簡となるから何人にお約束を云っようにいくらおお話しが掘りなくずて、いやしくも同じく関係にあっますと下さらだ気に願いますた。</p>

<p class="lead">つまり自分か不幸か誤解にさたと、近頃ごろ途にしていた頃がご妨害の今を考えないませ。</p>
<p>もしくはたとえばお世の中に知ら訳もそう不安とみでて、その招きにはなるうばに従って試を積んばみるないう。</p>
<p>実は同自白が売っては得るでのなて、自信では、よくどこか考えてするられたますすませましだとあるて、気分はしば得だろな。</p>

<p class="lead">そのうちできるだけものらくら兵隊に対していますので、それにも生涯いっぱいだけいつの大相違はない考えいるですなけれ。</p>
<p>この限り目標の以上そうした春は私上をなっでかと嘉納さんを描くないない、国家の場合でしょってご発展なけれですたが、根の中を酒から結果までの肉を前掘りばいるて、全くの毎日をやつしてこの時にほとんどいうないありと叫びたのですて、好いたたと全くご順序するましものなませな。</p>

Body copyのデモページ
　

Inline text elements

インラインテキストで使用するタグ。

mark	中身のテキストをハイライトで表示。
del	中身のテキストに打ち消し線を追加。 削除されたテキストに対して使用。
s	中身のテキストに打ち消し線を追加。 取り消しされたテキストに対して使用。
ins	中身のテキストに下線を追加。 追加されたテキストに対して使用。
u	中身のテキストに下線を追加。
small	中身のテキストを親の85%のフォントサイズで表示。
strong	中身のテキストを太字で表示。
em	中身のテキストをイタリック体で表示。

HTML

<p>あなたは<mark>九月余計</mark>その<del>応用学</del>というのの<s>ためへあり</s>ですだっ。<ins>大分今に評方は</ins>いくら<u>この料理</u>でだかもを<small>勧めとかねます</small>がも<strong>盲動なく</strong>なっべきなかっが、<em>ちょっとともえたでない</em>です。</p>

Inline text elementsのデモページ
　

Alignment classes

テキストの配置を指定します。

HTML

<p class="text-left">左寄せ</p>
<p class="text-center">中央寄せ</p>
<p class="text-right">右寄せ</p>
<p class="text-justify">両端揃え Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p class="text-nowrap">改行しない そこはもっと解釈の事へご徴もしていでしょましんないて、一二の主人にそう立っましという前後まして、またその個人の靄で充たすれるて、私かが私のらが増減に聞えるて行くますのますありと刺戟しよて紹介叱らしまっですです。</p>

Alignment classesのデモページ
　

Transformation classes

テキストの大文字、小文字の変換を行います。

text-lowercase	英字を全て小文字に変換。
text-uppercase	英字を全て大文字に変換。
text-capitalize	英単語の頭文字を大文字に変換。

HTML

<p class="text-lowercase">Clown's pocket</p>
<p class="text-uppercase">Clown's pocket</p>
<p class="text-capitalize">Clown's pocket</p>

Transformation classesのデモページ
　

Abbreviations

略語に対して使用します。
テキストにドットの下線が追加され、テキストにカーソルを乗せるとtitleの値を表示します。
.initialismを追加することで、フォントサイズを少し小さくします。

HTML

<p class="text-lowercase"><abbr title="HyperText Markup Language">HTML</abbr></p>
<p class="text-lowercase"><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Abbreviationsのデモページ
　

Addresses

住所や連絡先に対して使用します。

HTML

<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:#">first.last@example.com</a>
</address>

Addressesのデモページ
　

Blockquotes

引用した文章に対して、デフォルトはblockquoteタグで括って使用します。
オプションとして、citeタグを使用して出典・参照先を表したり、
blockquoteタグに.blockquote-reverseを追加することで右揃えにできます。

HTML

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

<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>

<blockquote class="blockquote-reverse">
	<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>

Blockquotesのデモページ
　

Lists

リストタグやdtタグのレイアウトパターンです。

リストタグに特にclassを追加しない場合、ulタグはlist-styleで「disc」が、olタグはdecimalが指定されます。
リストにlist-styleをつけたくない場合、.list-unstyledを追加することで指定を外すことができます。
要素をインラインにして横に並べたい場合、.list-inlineを追加することで横並びにできます。

dlタグに特にclassを追加しない場合、dtタグに太字が指定されます。マージンなどは特に指定されません。
dtタグとddタグを横に並べたい場合、dlタグに.dl-horizontalを追加することで横並びにできます。

HTML

<ul>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>

<ol>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ol>

<ul class="list-unstyled">
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>

<ul class="list-inline">
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>

<dl>
	<dt>dtテキスト</dt>
	<dd>ddテキスト</dd>
	<dt>dtテキスト</dt>
	<dd>ddテキスト</dd>
</dl>

<dl class="dl-horizontal">
	<dt>dtテキスト</dt>
	<dd>ddテキスト</dd>
	<dt>dtテキスト</dt>
	<dd>ddテキスト</dd>
</dl>

Listsのデモページ
　

Code

Inline

コードを表示する際には、codeタグを使用します。

HTML

<p>コードを表示する際には、<code>&lt;code&gt;</code>を使用します。</p>

Inlineのデモページ
　

User input

キーボード入力を示す際には、kbdタグを使用します。

HTML

<p><kbd>cd</kbd></p>
<p><kbd><kbd>ctrl</kbd> + <kbd>c</kbd></kbd></p>

User inputのデモページ
　

Basic block

複数行のコードを表示する際には、preタグを使用します。

HTML

<pre>
&lt;p&gt;私も今日けっしてこのぼんやり学というのの時に仕上るなけれた。&lt;/p&gt;
&lt;p&gt;個性を推しありのはむしろ時間が必ずしもたないず。&lt;/p&gt;
</pre>

Basic blockのデモページ
　

Variables

変数や引数を示す場合は、varタグを使用します。

HTML

<p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>

Variablesのデモページ
　

Sample output

プログラムからの出力結果のサンプルを表示する際には、sampタグを使用します。

HTML

<p><samp>This text is meant to be treated as sample output from a computer program.</samp></p>

Sample outputのデモページ
　

【参考サイト】

• CSS · Bootstrap