Typography

文字の体裁に関しての説明です。
使い方は通常のHTMLとほぼ同じですが、Bootstrapのスタイルが適用され見かけが変更されていたりする物もあるので注意してください。

見出し(Headings)

見出し文文字サイズ

h1. Bootstrap heading small text

Semibold 36px

h2. Bootstrap heading small text

Semibold 30px

h3. Bootstrap heading small text

Semibold 24px

h4. Bootstrap heading small text

Semibold 18px
h5. Bootstrap heading small text
Semibold 14px
h6. Bootstrap heading small text
Semibold 12px
機能

見出しを表示します
指定された見出しレベルによりフォントサイズが変更されます

コーディング

・見出し部分を<h1> ~ <h6>で囲みます
・見出しのタグ内で<small>を使用すると小さめの見出しがグレー文字で表示します

本文(Body copy)

Bootstrap

Bootstrap3がリリースされました!!

今流行のフラットデザイン・レスポンシブデザインがデフォルト・旧ブラウザ(IE7以前・Firefox3.6)のサポート打ち切りなどなど。

コーディング

・中見出し等は<p>内で.leadを指定します
<p>で表示される文字のデフォルトサイズは14pxです

インラインテキスト要素(Inline text elements)

1.ハイライト表示

ハイライト表示するとこのような感じに表示されます
機能

ハイライトで表示します
ハイライト表示した部分は、背景が薄い黄色で表示されます

コーディング

・ハイライト表示したい部分を<mark>で囲みます


2.打ち消し線表示

この部分に打ち消し線が表示されます  <del>を使用
この部分に打ち消し線が表示されます  <s>を使用
機能

打ち消し線を表示します
どちらも打ち消し線を表示しますが、内容が違うので注意してください

コーディング

・削除された部分であることを示す部分を<del>で囲みます
・すでに正確ではなくなった内容を示す部分を<s>で囲みます


3.アンダーライン(下線)表示

この部分にアンダーラインが表示されます  <ins>を使用
この部分にアンダーラインが表示されます  <u>を使用
機能

アンダーラインを表示します
どちらもアンダーラインを表示しますが、内容が違うので注意してください
また<u>に関しては、HTML5では廃止予定のタグで非推奨となっています
<u>の代わりとして、CSSでtext-decoration: underlineを指定してください

コーディング

・追加された部分であることを示す部分を<ins>で囲みます
・アンダーライン表示する部分を<u>で囲みます


4.小さい文字

最初は通常サイズ / 小さいサイズ / 通常サイズに戻る
機能

小さいサイズで表示します

コーディング

・縮小表示する部分を<small>で囲みます


5.太文字

最初は通常文字 / 太文字 / 通常文字に戻る
機能

太文字で表示します

コーディング

・太文字表示する部分を<strong>で囲みます


6.斜体文字

最初は通常文字 / Italic / 通常文字に戻る
機能

文字を斜体表示します

コーディング

・斜体表示する部分を<em>で囲みます


文字配置(Alignment classes)

Bootstrap3 左寄せ

Bootstrap3 中央揃え

Bootstrap3 右寄せ

機能

指定された配置で文字を表示します

コーディング

.text-left左寄せする場合は .text-center中央揃えする場合は .text-right 右寄せする場合は

略語(Abbreviations)

何個か略語を記述
NATOEUAFK
HTMLHTML
機能

省略した名称などの正式名称を表示したりする場合に使用します
破線の下線が表示され、マウスオーバーすると正式名称がツールチップで表示されます

コーディング

title正式名称を記述します
.initialismを指定すると、頭文字がわずかに小さく表示されます

住所(Addresses)

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
機能

・住所や連絡先などを記述する場合 <address>タグ で囲みます

コーディング

<address>で囲みます

引用(Blockquotes)

引用されている箇所になります。指定がない場合、左寄せ表示で左端に縦線が表示されます

作者・作品名・ 作品タイトルなどを記述

引用されている箇所になります。反転指定の場合、右寄せ表示で右端に縦線が表示されます

作者・作品名・ 作品タイトルなどを記述
機能

・他の情報源からの引用・転載セクションであることを表す際に使用します

コーディング

 引用・転載箇所を<blockquote>で囲みます
・出典や参照先を記述する場合<footer>で囲みます
 また作品タイトルは<cite>で囲みます
・右寄せ表示する場合.blockquote-reverseを指定します

リスト表示(Lists)

1.ul:unordered list(順序のないリストを表示)

<その1>

  • 見出し
  • 本文
  • インラインテキスト要素
  • 文字配置
  • 略語
  • 住所
  • 引用
  • リスト表示
    • ul
    • ol
    • dl
機能

・順序のないリストを表示します

コーディング

・順序のないリストを表示する場合<ul>で囲います
 各項目は<li>で囲います


<その2>

  • 見出し
  • ・・・・・
  • 引用
  • リスト表示
    • ul
    • ol
    • dl
機能

・入れ子の部分のみリストマーカーを表示します

コーディング

.list-unstyledを指定します


<その3>

  • 見出し
  • 見出し
  • 本文
  • インラインテキスト要素
  • 文字配置
  • 略語
  • 住所
  • 引用
  • リスト表示
機能

・横に並べてリストを表示します

コーディング

・横に並べてリスト表示したい場合.list-inlineを指定します
 ホームページの最後の方にあるリンク等で使用されています
・リストをセンタリング表示したい場合.text-centerを指定します


2.ol:ordered list(順序のあるリストを表示)

  1. 見出し
  2. 本文
  3. インラインテキスト要素
  4. 文字配置
  5. 略語
  6. 住所
  7. 引用
  8. リスト表示
機能

・順序のあるリストを表示します

コーディング

 ・順序のあるリストを表示する場合<ol>で囲います
  各項目は<li>で囲います


3.dl:description list(定義・説明リストを表示)

<その1>

<ul>
順序のないリストを表示
<ol>
順序のあるリストを表示
<dl>
定義・説明リストを表示
機能

・定義や説明リストを表示します

コーディング

・定義や説明リストを表示する場合<dl>で囲います
 説明される項目は<dt> 、説明項目は<dd>で囲います

<その2>

<ul>
順序のないリストを表示
<ol>
順序のあるリストを表示
<dl>
定義・説明リストを表示
機能

・定義や説明リストを横並びで表示します

コーディング

・説明項目と内容を横並びで表示する場合.dl-horizontalを指定します