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>で囲みます
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)
NATO・EU・ AFK
HTML・ HTML
機能
省略した名称などの正式名称を表示したりする場合に使用します
破線の下線が表示され、マウスオーバーすると正式名称がツールチップで表示されます
コーディング
・title正式名称を記述します
・.initialismを指定すると、頭文字がわずかに小さく表示されます
住所(Addresses)
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(順序のあるリストを表示)
- 見出し
- 本文
- インラインテキスト要素
- 文字配置
- 略語
- 住所
- 引用
- リスト表示
機能
・順序のあるリストを表示します
コーディング
・順序のあるリストを表示する場合<ol>で囲います
各項目は<li>で囲います
3.dl:description list(定義・説明リストを表示)
<その1>
- <ul>
- 順序のないリストを表示
- <ol>
- 順序のあるリストを表示
- <dl>
- 定義・説明リストを表示
機能
・定義や説明リストを表示します
コーディング
・定義や説明リストを表示する場合<dl>で囲います
説明される項目は<dt> 、説明項目は<dd>で囲います
<その2>
- <ul>
- 順序のないリストを表示
- <ol>
- 順序のあるリストを表示
- <dl>
- 定義・説明リストを表示
機能
・定義や説明リストを横並びで表示します
コーディング
・説明項目と内容を横並びで表示する場合.dl-horizontalを指定します