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>
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>
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>
# | 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>
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
※: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>の数が一致するようにしてください。
数が一致しないと、ページ表示が大きく崩れることがあります。
フォントサイズ10pxの文章です。
※:HTMLコード
<span class="font-size10px">フォントサイズ10pxの文章です。</span>
フォントサイズ12pxの文章です。
※:HTMLコード
<span class="font-size12px">フォントサイズ12pxの文章です。</span>
フォントサイズ14pxの文章です。
※:HTMLコード
<span class="font-size14px">フォントサイズ14pxの文章です。</span>
フォントサイズ16pxの文章です。
※:HTMLコード
<span class="font-size16px">フォントサイズ16pxの文章です。</span>
フォントサイズ18pxの文章です。
※:HTMLコード
<span class="font-size18px">フォントサイズ18pxの文章です。</span>
フォントサイズ20pxの文章です。
※:HTMLコード
<span class="font-size20px">フォントサイズ20pxの文章です。</span>
フォントサイズ22pxの文章です。
※:HTMLコード
<span class="font-size22px">フォントサイズ22pxの文章です。</span>
フォントサイズ24pxの文章です。
※:HTMLコード
<span class="font-size24px">フォントサイズ24pxの文章です。</span>
フォントサイズ28pxの文章です。
※:HTMLコード
<span class="font-size28px">フォントサイズ28pxの文章です。</span>
フォントサイズ32pxの文章です。
※:HTMLコード
<span class="font-size32px">フォントサイズ32pxの文章です。</span>
フォントサイズ48pxの文章です。
※:HTMLコード
<span class="font-size48px">フォントサイズ48pxの文章です。</span>
イタリック + フォントサイズ14pxの組み合わせの文章です。
※:HTMLコード
<span class="font-size14px font-italic"イタリック + フォントサイズ14pxの組み合わせの文章です。</span>
ゴシック体 + フォントサイズ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> のように指定文字列を囲ってみてください。
※:同じように、その文字だけ何かの演出をしたい場合は、この例を参考に色指定や様々な演出をしてみてください。
※: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">背景をグラデーションにしたタイプのデザイン2</h2>
※:HTMLコード
<h2 class="h1style15b">背景をグラデーションにしたタイプのデザイン2</h2>
※:HTMLコード
<h2 class="h1style15c">背景をグラデーションにしたタイプのデザイン3</h2>
※:HTMLコード
<h2 class="h1style15d">背景をグラデーションにしたタイプのデザイン4</h2>
※:HTMLコード
<h2 class="h1style16">ストライプ背景を実現してみたものです。</h2>
※:HTMLコード
<h2 class="h1style16a">ストライプ背景を実現してみたものです。2</h2>
※:HTMLコード
<h2 class="h1style16b">ストライプ背景を実現してみたものです。3</h2>
※:HTMLコード
<h2 class="h1style16c">ストライプ背景を実現してみたものです。4</h2>
※:HTMLコード
<h2 class="h1style16d">ストライプ背景を実現してみたものです。5</h2>
※:HTMLコード
<h2 class="h1style16e">ストライプ背景を実現してみたものです。6</h2>
※:HTMLコード
<h2 class="h1style17">グラデーションとボーダーを組み合わせた会社などで使うデザイン</h2>
※:上ボーダー色を変える場合は、 border-top: 3px solid #3498db !important; の #******のカラーコードを変更して、<h2> タグの中に追加してみてください。
※:見出しの使い方
記事の内容を大きく分類する際に、その文頭に使うとブロックを明確にする。
適宜、見出しをつかうことにより、ブロック毎の内容を視覚的に明確化できる
ここでご説明した「見出し」に加えて、以下の要素を加えてみてください。
きっと、もっと鮮やかな演出ができると思いますよ。
カラーコード表
フォントアイコン
例えば、見出しのタイトルの頭にアイコンを入れてみたらいかがでしょうか?
きっと、素晴らしい演出ができると思いますよ。
おまけ:
アイコンとタイトルが密着して嫌だってことありますよね。
そんな時のオマジナイ!
 って書けば半角のスペースが入ります。
複数入れて間隔を調整してみてください。
タイポグラフィ(装飾デザインサンプル)です。タイポグラフィ(装飾デザインサンプル)です。
タイポグラフィ(装飾デザインサンプル)のコメント欄です。
※: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
Home
※:使い方
Library
※:使い方
Applications
※:使い方
Settings
※:使い方
※:使い方
※:この応用例は、Wikiページの目次などで使われています。
ここでは代表的なフォントアイコンの使用例をご説明致しました。
もっと詳しく知りたい方は、以下のサイトをご覧ください。
※:Font Awesome Icons