１．見出し（h1～h6）

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

※：HTMLコード

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

２．文字装飾（Emphasis classes）

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

※：HTMLコード

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

３．ボタン

１）<button>タグの場合：

２）<a href=””>タグの場合：
Default Primary Success Info Warning Danger

※：HTMLコード(BOTTONタグの場合)

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger" style="border-radius: 5px !important;">Danger</button>

※：ボタンにリンク機能を付けるには、以下のようにしてください。
<button onClick=”location.href=’http://yahoo.co.jp'”>リンク先URL</button>
※：ボタンを角丸にするには、 style=”border-radius: 5px !important;”を付け加えます。

※：HTMLコード(A HREFタグの場合)

<a href="" class="btn btn-default">Default</a>
<a href="" class="btn btn-primary">Primary</a>
<a href="" class="btn btn-success">Success</a>
<a href="" class="btn btn-info">Info</a>
<a href="" class="btn btn-warning">Warning</a>
<a href="" class="btn btn-danger" style="border-radius: 5px !important;”>Danger</a>

４．テーブル（表）

#	Column heading	Column heading	Column heading
1	Column content	Column content	Column content
2	Column content	Column content	Column content
3	Column content	Column content	Column content
4	Column content	Column content	Column content
5	Column content	Column content	Column content
6	Column content	Column content	Column content
7	Column content	Column content	Column content

※：HTMLコード

<table class="table table-striped table-hover ">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>2</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="info">
<td>3</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="success">
<td>4</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="danger">
<td>5</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="warning">
<td>6</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<td>7</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>

５．コンテナ１（Containers）

Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

※：HTMLコード

<div class="bs-component">
  <div class="jumbotron">
    <h1>Jumbotron</h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p><a class="btn btn-primary btn-lg" href="飛び先URL">Learn more</a></p>
  </div>
</div>

注意：
このコンテナを使う際は、<div>と</div>の数が一致するようにしてください。
数が一致しないと、ページ表示が大きく崩れることがあります。

１．フォントサイズ１０ｐｘ

フォントサイズ１０ｐｘの文章です。

※：HTMLコード

<span class="font-size10px">フォントサイズ１０ｐｘの文章です。</span>

２．フォントサイズ１２ｐｘ

フォントサイズ１２ｐｘの文章です。

※：HTMLコード

<span class="font-size12px">フォントサイズ１２ｐｘの文章です。</span>

３．フォントサイズ１４ｐｘ

フォントサイズ１４ｐｘの文章です。

※：HTMLコード

<span class="font-size14px">フォントサイズ１４ｐｘの文章です。</span>

４．フォントサイズ１６ｐｘ

フォントサイズ１６ｐｘの文章です。

※：HTMLコード

<span class="font-size16px">フォントサイズ１６ｐｘの文章です。</span>

５．フォントサイズ１８ｐｘ

フォントサイズ１８ｐｘの文章です。

※：HTMLコード

<span class="font-size18px">フォントサイズ１８ｐｘの文章です。</span>

６．フォントサイズ２０ｐｘ

フォントサイズ２０ｐｘの文章です。

※：HTMLコード

<span class="font-size20px">フォントサイズ２０ｐｘの文章です。</span>

７．フォントサイズ２２ｐｘ

フォントサイズ２２ｐｘの文章です。

※：HTMLコード

<span class="font-size22px">フォントサイズ２２ｐｘの文章です。</span>

８．フォントサイズ２４ｐｘ

フォントサイズ２４ｐｘの文章です。

※：HTMLコード

<span class="font-size24px">フォントサイズ２４ｐｘの文章です。</span>

９．フォントサイズ２８ｐｘ

フォントサイズ２８ｐｘの文章です。

※：HTMLコード

<span class="font-size28px">フォントサイズ２８ｐｘの文章です。</span>

１０．フォントサイズ３２ｐｘ

フォントサイズ３２ｐｘの文章です。

※：HTMLコード

<span class="font-size32px">フォントサイズ３２ｐｘの文章です。</span>

１１．フォントサイズ４８ｐｘ

フォントサイズ４８ｐｘの文章です。

※：HTMLコード

<span class="font-size48px">フォントサイズ４８ｐｘの文章です。</span>

１２．イタリック＋フォントサイズ１４ｐｘの組み合わせ

イタリック＋フォントサイズ１４ｐｘの組み合わせの文章です。

※：HTMLコード

<span class="font-size14px font-italic"イタリック ＋ フォントサイズ１４ｐｘの組み合わせの文章です。</span>

１３．ゴシック体＋フォントサイズ２２ｐｘの組み合わせ

ゴシック体＋フォントサイズ２２ｐｘの組み合わせの文章です。

※：HTMLコード

<span class="font-size22px font-gothic">ゴシック体 ＋ フォントサイズ２２ｐｘの組み合わせの文章です。</span>

※：上記サンプルでははSPANタグの例ですが、Ｐタグなど他のＨＴＭＬタグとの組み合わせも試してみてください。
※：また、カラー指定やフォントアイコンなどを組み合わせると素敵な演出が出来ます。
※：太文字や強調したい場合は、style=”font-weight: bold !important;” を追加してみてください。
※：下線を付けたい場合は、style=”text-decoration: underline;” を追加してみてください。
※：取り消し線を付けたい場合は、style=”text-decoration: line-through;” を追加してみてください。
※：点滅させたい場合は、style=”text-decoration: blink;” を追加してみてください。
※：上付き文字としたい場合は、style=”vertical-align: super;” を追加してみてください。
※：下付き文字としたい場合は、style=”vertical-align: sub;” を追加してみてください。
※：その文字だけ大きな文字としたい場合は、<span style=”font-size: 22px;”>大きな文字</span> のように指定文字列を囲ってみてください。
※：同じように、その文字だけ何かの演出をしたい場合は、この例を参考に色指定や様々な演出をしてみてください。

１．下にボーダー

シンプルにタイトル下にボーダーを引いたものです。

※：HTMLコード

<h2 class="h1style1">シンプルにタイトル下にボーダーを引いたものです。</h2>

３．左ボーダー

シンプルにタイトル左にボーダーを引いたものです。

※：HTMLコード

<h2 class="h1style3">シンプルにタイトル左にボーダーを引いたものです。</h2>

４．左ボーダー × 下ボーダー

先ほどのものに加えて、下にもボーダーを引いたものです。

※：HTMLコード

<h2 class="h1style4">先ほどのものに加えて、下にもボーダーを引いたものです。</h2>

５．左ボーダー × 下ボーダー（擬似要素使用）

先ほどのものに加えて、カラーが異なるボーダーを組み合わせて使用

※：HTMLコード

<h2 class="h1style5">先ほどのものに加えて、カラーが異なるボーダーを組み合わせて使用</h2>

※左ボーダー色を変えたい場合は、style=”border-left: 6px solid #3498db !important;”　の　＃******のカラーコードを変更して、<h2 タグの中に追加してみてください。

６．ボーダーで囲む

タイトル全体をボーダーで囲ったものです。

※：HTMLコード

<h2 class="h1style6">タイトル全体をボーダーで囲ったものです。</h2>

７．ボーダーで囲む × 角丸

先ほどのものに加えて、角丸になるよう指定したものです。

※：HTMLコード

<h2 class="h1style7">先ほどのものに加えて、角丸になるよう指定したものです。</h2>

８．ボーダーで囲む × アクセント

タイトル全体をボーダーで囲ったものに、少しアクセントを入れたもの

※：HTMLコード

<h2 class="h1style8">タイトル全体をボーダーで囲ったものに、少しアクセントを入れたもの</h2>

９．背景色

シンプルにタイトル全体に背景色を指定したものです。

※：HTMLコード

<h2 class="h1style9">シンプルにタイトル全体に背景色を指定したものです。</h2>

※：背景色を変える場合は、 background-color: #f6f6f6 !important; の　＃******のカラーコードを変更して、<h2 タグの中に追加してみてください。

１０．背景色 × 角丸

先ほどのものに加えて、角丸になるよう指定したものです。

※：HTMLコード

<h2 class="h1style10">先ほどのものに加えて、角丸になるよう指定したものです。</h2>

１１．背景色 × 下ボーダー

背景色を指定したものに、下ボーダーを引いたものです。

※：HTMLコード

<h2 class="h1style11">背景色を指定したものに、下ボーダーを引いたものです。</h2>

１２．背景色 × 上下にボーダー

背景色を指定したものに、上下でボーダーを引いたものです。

※：HTMLコード

<h2 class="h1style12">背景色を指定したものに、上下でボーダーを引いたものです。</h2>

記事：背景色無にしたい場合は、”h1style12a”にしてください。

１４．紙を切り取ったようなデザイン

紙を途中で切り取ったようなデザインを再現したもの

※：HTMLコード

<h2 class="h1style14">紙を途中で切り取ったようなデザインを再現したもの</h2>

１５．グラデーション

背景をグラデーションにしたタイプのデザイン

※：HTMLコード

<h2 class="h1style15">背景をグラデーションにしたタイプのデザイン</h2>

背景をグラデーションにしたタイプのデザイン２

※：HTMLコード

<h2 class="h1style15a">背景をグラデーションにしたタイプのデザイン２</h2>

背景をグラデーションにしたタイプのデザイン２

※：HTMLコード

<h2 class="h1style15b">背景をグラデーションにしたタイプのデザイン２</h2>

背景をグラデーションにしたタイプのデザイン３

※：HTMLコード

<h2 class="h1style15c">背景をグラデーションにしたタイプのデザイン３</h2>

背景をグラデーションにしたタイプのデザイン４

※：HTMLコード

<h2 class="h1style15d">背景をグラデーションにしたタイプのデザイン４</h2>

１６．ストライプ

ストライプ背景を実現してみたものです。

※：HTMLコード

<h2 class="h1style16">ストライプ背景を実現してみたものです。</h2>

ストライプ背景を実現してみたものです。２

※：HTMLコード

<h2 class="h1style16a">ストライプ背景を実現してみたものです。２</h2>

ストライプ背景を実現してみたものです。３

※：HTMLコード

<h2 class="h1style16b">ストライプ背景を実現してみたものです。３</h2>

ストライプ背景を実現してみたものです。４

※：HTMLコード

<h2 class="h1style16c">ストライプ背景を実現してみたものです。４</h2>

ストライプ背景を実現してみたものです。５

※：HTMLコード

<h2 class="h1style16d">ストライプ背景を実現してみたものです。５</h2>

ストライプ背景を実現してみたものです。６

※：HTMLコード

<h2 class="h1style16e">ストライプ背景を実現してみたものです。６</h2>

１７．グラデーション × ボーダー

グラデーションとボーダーを組み合わせた会社などで使うデザイン

※：HTMLコード

<h2 class="h1style17">グラデーションとボーダーを組み合わせた会社などで使うデザイン</h2>

※：上ボーダー色を変える場合は、 border-top: 3px solid #3498db !important; の　＃******のカラーコードを変更して、<h2> タグの中に追加してみてください。

※：見出しの使い方
記事の内容を大きく分類する際に、その文頭に使うとブロックを明確にする。
適宜、見出しをつかうことにより、ブロック毎の内容を視覚的に明確化できる

もっと鮮やかな見出しを作る方法とは？

ここでご説明した「見出し」に加えて、以下の要素を加えてみてください。
きっと、もっと鮮やかな演出ができると思いますよ。

カラーコード表
フォントアイコン

例えば、見出しのタイトルの頭にアイコンを入れてみたらいかがでしょうか？
きっと、素晴らしい演出ができると思いますよ。

おまけ：
アイコンとタイトルが密着して嫌だってことありますよね。
そんな時のオマジナイ！
&nbspって書けば半角のスペースが入ります。
複数入れて間隔を調整してみてください。

１．引用（blockquote）

タイポグラフィ（装飾デザインサンプル）です。タイポグラフィ（装飾デザインサンプル）です。

タイポグラフィ（装飾デザインサンプル）のコメント欄です。

※：HTMLコード

<blockquote>
<p>タイポグラフィ（装飾デザインサンプル）です。タイポグラフィ（装飾デザインサンプル）です。</p>
<p> <small>タイポグラフィ（装飾デザインサンプル）のコメント欄です。</small> </p>
</blockquote>

カラーコードを使って鮮やかなページを作りましょう。

W3C標準基本16色
カラー名	16進数	短縮系
black	#000000	#000
gray	#808080
silver	#C0C0C0
white	#FFFFFF	#FFF
blue	#0000FF	#00F
navy	#000080
teal	#008080
green	#008000
lime	#00FF00	#0F0
aqua	#00FFFF	#0FF
yellow	#FFFF00	#FF0
red	#FF0000	#F00
fuchsia	#FF00FF	#F0F
olive	#808000
purple	#800080
maroon	#800000

※：カラーコードの使い方
１．カラー名を使う場合：　style=”color: red;”
２．１６進数を使う場合：　style=”color: #ff0000;”
３．短縮形が使える場合：　style=”color: #f00;”;

※：使用例
文字列に適用する場合：　style=”font-size: 16px; color; red;”
解説：　１６ｐｘサイズの文字で、文字色は赤を指定する

文字列の前後に、その文字列をビジュアル化する目的でフォントアイコンを使うことがあります。

ここでは代表的なフォントアイコンの使用例をご説明致します。
もっと詳しく知りたい方は、以下のサイトをご覧ください。
※：Font Awesome Icons

１．Homeアイコン

Home
※：使い方

２．Library(Book)アイコン

Library
※：使い方

３．Applicationsアイコン

Applications
※：使い方

４．Settingsアイコン

Settings
※：使い方

５．応用例

Home
Library
Applications
Settings

※：使い方

※：この応用例は、Wikiページの目次などで使われています。

ここでは代表的なフォントアイコンの使用例をご説明致しました。
もっと詳しく知りたい方は、以下のサイトをご覧ください。
※：Font Awesome Icons

前のページに戻る

ボディビルをもっと知って欲しい！ 選手とファンのコミュニティ

タイポグラフィー

１．見出し（h1～h6）

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

２．文字装飾（Emphasis classes）

３．ボタン

４．テーブル（表）

５．コンテナ１（Containers）

Jumbotron

１．フォントサイズ１０ｐｘ

２．フォントサイズ１２ｐｘ

３．フォントサイズ１４ｐｘ

４．フォントサイズ１６ｐｘ

５．フォントサイズ１８ｐｘ

６．フォントサイズ２０ｐｘ

７．フォントサイズ２２ｐｘ

８．フォントサイズ２４ｐｘ

９．フォントサイズ２８ｐｘ

１０．フォントサイズ３２ｐｘ

１１．フォントサイズ４８ｐｘ

１２．イタリック ＋ フォントサイズ１４ｐｘの組み合わせ

１３．ゴシック体 ＋ フォントサイズ２２ｐｘの組み合わせ

１．下にボーダー

シンプルにタイトル下にボーダーを引いたものです。

３．左ボーダー

シンプルにタイトル左にボーダーを引いたものです。

４．左ボーダー × 下ボーダー

先ほどのものに加えて、下にもボーダーを引いたものです。

５．左ボーダー × 下ボーダー（擬似要素使用）

先ほどのものに加えて、カラーが異なるボーダーを組み合わせて使用

６．ボーダーで囲む

タイトル全体をボーダーで囲ったものです。

７．ボーダーで囲む × 角丸

先ほどのものに加えて、角丸になるよう指定したものです。

８．ボーダーで囲む × アクセント

タイトル全体をボーダーで囲ったものに、少しアクセントを入れたもの

９．背景色

シンプルにタイトル全体に背景色を指定したものです。

１０．背景色 × 角丸

先ほどのものに加えて、角丸になるよう指定したものです。

１１．背景色 × 下ボーダー

背景色を指定したものに、下ボーダーを引いたものです。

１２．背景色 × 上下にボーダー

背景色を指定したものに、上下でボーダーを引いたものです。

１４．紙を切り取ったようなデザイン

紙を途中で切り取ったようなデザインを再現したもの

１５．グラデーション

背景をグラデーションにしたタイプのデザイン

背景をグラデーションにしたタイプのデザイン２

背景をグラデーションにしたタイプのデザイン２

背景をグラデーションにしたタイプのデザイン３

背景をグラデーションにしたタイプのデザイン４

１６．ストライプ

ストライプ背景を実現してみたものです。

ストライプ背景を実現してみたものです。２

ストライプ背景を実現してみたものです。３

ストライプ背景を実現してみたものです。４

ストライプ背景を実現してみたものです。５

ストライプ背景を実現してみたものです。６

１７．グラデーション × ボーダー

グラデーションとボーダーを組み合わせた会社などで使うデザイン

もっと鮮やかな見出しを作る方法とは？

１．引用（blockquote）

カラーコードを使って鮮やかなページを作りましょう。

W3C標準 基本16色

文字列の前後に、その文字列をビジュアル化する目的でフォントアイコンを使うことがあります。

１．Homeアイコン

２．Library(Book)アイコン

３．Applicationsアイコン

４．Settingsアイコン

５．応用例

ボディビルをもっと知って欲しい！　選手とファンのコミュニティ

１２．イタリック＋フォントサイズ１４ｐｘの組み合わせ

１３．ゴシック体＋フォントサイズ２２ｐｘの組み合わせ

W3C標準基本16色