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

タイポグラフィー

1.見出し(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>

2.文字装飾(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>

3.ボタン

1)<button>タグの場合:

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

4.テーブル(表)

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

5.コンテナ1(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>の数が一致するようにしてください。
数が一致しないと、ページ表示が大きく崩れることがあります。

 

 

1.フォントサイズ10px

フォントサイズ10pxの文章です。

※:HTMLコード

<span class="font-size10px">フォントサイズ10pxの文章です。</span>

 

 

2.フォントサイズ12px

フォントサイズ12pxの文章です。

※:HTMLコード

<span class="font-size12px">フォントサイズ12pxの文章です。</span>

 

 

3.フォントサイズ14px

フォントサイズ14pxの文章です。

※:HTMLコード

<span class="font-size14px">フォントサイズ14pxの文章です。</span>

 

 

4.フォントサイズ16px

フォントサイズ16pxの文章です。

※:HTMLコード

<span class="font-size16px">フォントサイズ16pxの文章です。</span>

 

 

5.フォントサイズ18px

フォントサイズ18pxの文章です。

※:HTMLコード

<span class="font-size18px">フォントサイズ18pxの文章です。</span>

 

 

6.フォントサイズ20px

フォントサイズ20pxの文章です。

※:HTMLコード

<span class="font-size20px">フォントサイズ20pxの文章です。</span>

 

 

7.フォントサイズ22px

フォントサイズ22pxの文章です。

※:HTMLコード

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

 

 

8.フォントサイズ24px

フォントサイズ24pxの文章です。

※:HTMLコード

<span class="font-size24px">フォントサイズ24pxの文章です。</span>

 

 

9.フォントサイズ28px

フォントサイズ28pxの文章です。

※:HTMLコード

<span class="font-size28px">フォントサイズ28pxの文章です。</span>

 

 

10.フォントサイズ32px

フォントサイズ32pxの文章です。

※:HTMLコード

<span class="font-size32px">フォントサイズ32pxの文章です。</span>

 

 

11.フォントサイズ48px

フォントサイズ48pxの文章です。

※:HTMLコード

<span class="font-size48px">フォントサイズ48pxの文章です。</span>

 

 

12.イタリック + フォントサイズ14pxの組み合わせ

イタリック + フォントサイズ14pxの組み合わせの文章です。

※:HTMLコード

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

 

 

13.ゴシック体 + フォントサイズ22pxの組み合わせ

ゴシック体 + フォントサイズ22pxの組み合わせの文章です。

※:HTMLコード

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

 

 

※:上記サンプルでははSPANタグの例ですが、Pタグなど他のHTMLタグとの組み合わせも試してみてください。
※:また、カラー指定やフォントアイコンなどを組み合わせると素敵な演出が出来ます。
※:太文字や強調したい場合は、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> のように指定文字列を囲ってみてください。
※:同じように、その文字だけ何かの演出をしたい場合は、この例を参考に色指定や様々な演出をしてみてください。

 

 

1.下にボーダー

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

※:HTMLコード

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

3.左ボーダー

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

※:HTMLコード

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

4.左ボーダー × 下ボーダー

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

※:HTMLコード

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

5.左ボーダー × 下ボーダー(擬似要素使用)

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

※:HTMLコード

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

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

6.ボーダーで囲む

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

※:HTMLコード

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

7.ボーダーで囲む × 角丸

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

※:HTMLコード

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

8.ボーダーで囲む × アクセント

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

※:HTMLコード

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

9.背景色

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

※:HTMLコード

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

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

10.背景色 × 角丸

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

※:HTMLコード

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

11.背景色 × 下ボーダー

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

※:HTMLコード

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

12.背景色 × 上下にボーダー

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

※:HTMLコード

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

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

14.紙を切り取ったようなデザイン

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

※:HTMLコード

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

15.グラデーション

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

※:HTMLコード

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

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

※:HTMLコード

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

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

※:HTMLコード

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

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

※:HTMLコード

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

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

※:HTMLコード

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

16.ストライプ

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

※:HTMLコード

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

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

※:HTMLコード

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

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

※:HTMLコード

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

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

※:HTMLコード

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

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

※:HTMLコード

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

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

※:HTMLコード

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

17.グラデーション × ボーダー

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

※:HTMLコード

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

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

 

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

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

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

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

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

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

 

 

 

1.引用(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

※:カラーコードの使い方
1.カラー名を使う場合: style=”color: red;”
2.16進数を使う場合: style=”color: #ff0000;”
3.短縮形が使える場合: style=”color: #f00;”;

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

 

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

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

1.Homeアイコン

 Home
※:使い方

 

2.Library(Book)アイコン

 Library
※:使い方

 

3.Applicationsアイコン

 Applications
※:使い方

 

4.Settingsアイコン

 Settings
※:使い方

 

5.応用例

※:使い方

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

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

 

 前のページに戻る