メディア

＠IT
アジャイル/DevOps
HTML5 + UX
デザインハック
Webデザイン初心者でもできる、Bootstrapの使い方超...

Webデザイン初心者でもできる、Bootstrapの使い方超入門（4/4 ページ）

» 2016年04月11日 05時00分公開

[山崎大助，デジタルハリウッド大学院非常勤講師／INOP／U-SYS]

印刷

通知

鬯ｯ�ｯ�ｽ�ｮ�ｽ�ｽ�ｽ�ｫ鬯ｩ蛹�ｽｽ�ｨ驛｢�ｧ隰�∞�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｹ鬮ｫ�ｴ髮懶ｽ｣�ｽ�ｽ�ｽ�｢�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽPost

Shareシェア

はてなブックマーク

SharePocket Button

前のページへ 1|2|3|4 　　　　　　

レスポンシブに画像ファイルを自動で縮小／拡大させる

　自動で縮小／拡大させたい画像のimg要素のclassに「img-responsive」を指定すると、該当画像ファイルが画面サイズに応じて自動で縮小／拡大します。

<div class="container">
        <img src="img/html5b.png" class="img-responsive" alt="Responsive image">
</div>

sample4.htmlより抜粋

sample4.html

Bootstrapデフォルトのp要素スタイル

　p要素のclassに「bg-***」（***はプロパティ名）を指定すると、スタイルを変更できます。指定できるプロパティ名は前述の「表1　スタイルのプロパティ名と概要」を参照してください。

        <div>
            <p class="bg-primary">HTML5</p>
            <p class="bg-success">CSS3</p>
            <p class="bg-info">JavaScript</p>
            <p class="bg-warning">jQuery</p>
            <p class="bg-danger">Bootstrap</p>
        </div>

sample5.htmlより抜粋

sample5.html

Bootstrapデフォルトのナビゲーションスタイル

　Bootstrapには、さまざまなナビゲーションのスタイルが用意されています。

sample6.html

　以下基本ルール内で使用しましょう。

ルール： ul要素にclass="nav"を記載

Tabs

　ul要素のclassに対して「nav-tabs」を追加します。

                  <ul class="nav nav-tabs">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Profile</a></li>
                    <li><a href="#">Messages</a></li>
                  </ul>

sample6.htmlより抜粋

Pills

　ul要素のclassに対して「nav-pills」を追加します。

                    <ul class="nav nav-pills">
                      <li class="active"><a href="#">Home</a></li>
                      <li><a href="#">Profile</a></li>
                      <li><a href="#">Messages</a></li>
                    </ul>

sample6.htmlより抜粋

stacked

　ul要素のclassに対して「nav-stacked」を追加します。

                    <ul class="nav nav-pills nav-stacked">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Messages</a></li>
                    </ul>

sample6.htmlより抜粋

Justified-tab

　ul要素の「class="nav nav-tabs"」に対して「nav-justified」を追加します。

                <ul class="nav nav-tabs nav-justified">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Profile</a></li>
                  <li><a href="#">Messages</a></li>
                </ul>

sample6.htmlより抜粋

Justified-pills

　ul要素の「class="nav nav-pills"」に対して「nav-justified」を追加します。

                <ul class="nav nav-pills nav-justified">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Profile</a></li>
                  <li><a href="#">Messages</a></li>
                </ul>

sample6.htmlより抜粋

Bootstrapが気になったら公式サイトを活用しよう

　Bootstrapを利用すると既にスタイルが作成されているため、class名を指定するだけでシンプルですが、統一感のあるページが作成できます。また冒頭でも説明していますが「テーマ」を無料で配っているサイトが多数ありますので、CSSを入れ替えるだけで違うスタイルを適用可能です。使用方法を理解し、適切にご使用いただければと思います。

　Bootstrap公式サイト内のメニュー「CSS」「Components」には、いままで説明してきた内容が事細かに記載されています。また、各要素に適用されるスタイル表示内容も確認できます。ある程度の基礎ができれば、サイトを見るだけでも使い方が分かってくると思います。

　Bootstrapの使用開始に、この記事が活用されれば幸いです。この記事を読んだ方は、公式サイトの情報も、ぜひ読んでみてください。

著者紹介

山崎大助（デジタルハリウッド大学院非常勤講師／INOP／U-SYS

著書『レスポンシブWebデザイン「超」実践デザイン集中講義』（ソフトバンククリエイティブ）

受賞歴：Microsoft MVP

デジタルハリウッド講師を務めるほか＠IT、日経ソフトウエア、SoftwareDesign、ITProなどへ寄稿。HTML5ビギナーズ（html5jビギナー部）で勉強会を毎月or隔月開催中。ヒカ☆ラボなどのセミナーやイベントにも登壇中。本サイトで「HTML5アプリ作ろうぜ！」の記事連載中。

前のページへ 1|2|3|4 　　　　　　

SpecialPR

印刷／保存

連載通知

スポンサーからのお知らせPR

SpecialPR

HTML5�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ鬯ｮ�ｯ陷ｿ�･�ｽ�ｹ�ｽ�｢�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽX 鬯ｯ�ｯ�ｽ�ｮ�ｽ�ｽ�ｽ�ｫ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｪ鬯ｮ�ｯ陋ｹ�ｺ�ｽ�ｻ郢ｧ謇假ｽｽ�ｽ�ｽ�ｿ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｺ鬯ｮ�｣陋ｹ�ｽ�ｽ�ｽ�ｽ�ｵ鬮ｫ�ｴ遶擾ｽｵ�ｽ�ｺ�ｽ�ｷ�ｽ�ｽ�ｽ�ｸ�ｽ�ｽ�ｽ�ｷ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｹ鬮ｫ�ｴ髮懶ｽ｣�ｽ�ｽ�ｽ�｢�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｳ鬯ｯ�ｩ陝ｷ�｢�ｽ�ｽ�ｽ�｢�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｧ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｭ鬯ｯ�ｩ陝ｷ�｢�ｽ�ｽ�ｽ�｢鬮ｫ�ｴ髮懶ｽ｣�ｽ�ｽ�ｽ�｢�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｳ鬯ｯ�ｩ陝ｷ�｢�ｽ�ｽ�ｽ�｢�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｧ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｰ

鬯ｯ�ｮ�ｽ�ｫ�ｽ�ｽ�ｽ�ｴ鬮ｯ譎｢�ｽ�ｷ�ｽ�ｽ�ｽ�｢�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｬ鬯ｯ�ｮ�ｽ�ｫ�ｽ�ｽ�ｽ�ｴ鬯ｯ�ｲ�ｽ�ｽ�ｽ�ｼ陞滂ｽｲ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�･鬯ｯ�ｮ�ｽ�ｫ�ｽ�ｽ�ｽ�ｴ鬮ｯ譎｢�ｽ�ｶ�ｽ�ｽ�ｽ�ｷ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�｣�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｯ鬯ｮ�｣陷ｴ�ｽ�ｽ�ｽ�ｽ�ｫ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�ｽ�｣