Loading...

htmlコーディング 小棹制作所

この記事がよく読まれてます

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (31,340Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (14,916Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (14,731Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (14,425Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (14,217Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (12,644Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,016Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (10,425Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,255Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (9,935Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (9,319Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (9,317Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,854Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (8,754Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (8,016Views)
  • 翻訳機能をWebサイトに埋め込む方法 (7,069Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,765Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,550Views)
  • 【番外編】フィッシングサイトからの偽メールが来た ~+120563143からのメールはフィッシングサイトへの誘導です~ (4,774Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (4,435Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで

    2013年04月23日(火)
    8854Views

    この記事は執筆から1年以上経過しており、情報が古い可能性があります。

    Twitter Bootstrapを使ってかんたんにモーダルウィンドウを作ってみましょう

    モーダルウィンドウとは

    まずは、当ホームページのお問い合せボタンをクリックしてみてください。
    画面が暗くなってニョキッとウィンドウが出てきます。
    これがモーダルウィンドウです(この機能に、中身のお問い合せフォームは含みません)。
    今回の記事では、Twitter Bootstrapの基礎を解説しながら、これを作成していきます。

    動作サンプル


    Twitter Bootstrapとは

    そもそも、Twitter Bootstrapとはなんなのでしょうか?
    Twitter Bootsrapの公式サイトにいくと
    「迅速かつ簡単にWeb開発できる、洗練された、直感的で強力なフロントエンドのフレームワーク。」
    とあります。
    フロントエンドというのは、デザインやレイアウト部分の開発のことです。

    これを噛み砕くと、Twitter Bootstrapを使うことで、カッコイイデザインの(ただし、Twitter Bootstrapがあらかじめ用意したデザインパーツを使った)Webサイト/Webアプリを、かんたんに作成することができます、ということを言っています。

    Twitter Bootstrapを使うメリットとデメリット

    メリットは、上にも書いたように、かんたんにカッコいいデザインのWebサイトを開発することができる点です。
    特に、Web開発のサーバーサイド開発を専門にやっている方など、フロントエンドのデザインやhtmlコーディングに多くの時間や労力をかけられない場合に有効な手法だと思います。
    レスポンシブにもある程度対応しています。

    デメリットは、すでにTiwtter Bootstrap側でデザインが用意されているパーツを当てはめていく、という作成方法になりますので、デザインをとことんこだわりたいといったプロジェクトには向いていません。
    ただ、公式サイトのサンプルにもあるように、多少のCSSの知識があれば、Twitter Bootstrapをベースにして、すごく個性的でカッコイイサイトを作ることも十分可能です。

    Twitter Bootstrapで作成されたサンプル

    Twitter Bootstrapで作成されたサンプルサイト GatherContent — Simple Website Content Organisation & Collaboration.

    それと、実際に使っていて思うことなのですが、Twitter Bootstrapを使うと、行間隔(line-height)や余白(marginやpadding)、それに、たとえばh1のフォントサイズなどが、Twitter Bootstrapであらかじめ決められた値になってしまいます。なので、すでに厳密なデザインカンプがある場合などは、Twitter BootstrapのCSSの設定を修正しなくてはならず、それが結構面倒だったりします。

    ダウンロード

    Twitter Bootstrapの概要を説明しましたので、実際にTwitter Bootsrapを使ってのサンプル作成を行なっていきます。

    まずは、ダウンロードから。

    Twitter Bootstrapは、公式サイトで提供されている諸々のファイル(CSSファイルとjsファイル)を一括でダウンロードすることで使用できるようになります。

    Bootstrap

    Twitter Bootstrapダウンロード画面

    設定

    まずは、htmlファイルを、ダウンロード→解凍したフォルダ内に作成しましょう。
    つぎに公式サイトにある見本のコードをそのままコピペしましょう。


    <!DOCTYPE html>
    <html>
      <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
      </head>
      <body>
        <h1>Hello, world!</h1>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>
    

    以上で、ダウンロードから設定までが完成しました。

    これで、Twitter Bootstrapが提供している諸々の機能が使用できるようになりました。

    モーダルウィンドウを作成してみる

    それでは、サンプルとして、モーダルウィンドウを作ってみます。
    まずは、公式サイトのモーダルウィンドウの項目を見てみましょう。

    Javascript · Bootstrap
    ここの Live demo にあるコードを使って、モーダルウィンドウを作成していきます。


    <!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>
    

    2行目で、モーダルウィンドウを出すためのボタンを作成しています。
    5行目以降で、モーダルウィンドウのレイアウトを作成しています。

    ボタンのリンク先(href=”myModal”)と5行目の モーダルウィンドウ全体をくくるid(id=”myModal”)を同じ名前にすることで、このボタンを押した時に、このモーダルウィンドウが動くように設定されます。

    このhtmlコードを、先ほど作成したhtmlファイルの<body>~ </body>
    の間にコピペすることで、モーダルウィンドウを実現することができます。

    あとは、デザインと、htmlコードを見比べて、文言を適宜差し替えて使うといいと思います。

    そして完成したサンプルが以下になります。
    Twitter Bootstrap モーダルウィンドウサンプル

    以上が、Twitter Bootstrapの基本設定から、モーダルウィンドウを作成するまでの手順となります。

    まとめ

    今回説明したモーダルウィンドウに限らず、Twitter Bootstrapの機能やレイアウト(デザイン)を設定するには、まず、公式サイトに行って該当の機能を見つける。→そこに記載されているhtmlコードをコピペする。という流れで実現します。
    CSSやデザインカンプがなくてもフロントエンドが作成できてしまうTwitter Bootstrap。
    短期間での制作や、デザインにそこまで独創性を求めないプロジェクトなどでは、特に威力を発揮してくれるでしょう。

    おわりに

    この記事はあなたのお役にたてましたか?
    もしよろしければ・・・

    この記事をみんなに教える?


    筆者に何か教える?

    たとえば、 小棹制作所はこんなこと↓を知りたがっているようです。

    feedlyでブログを購読する?

    follow us in feedly

    筆者にメーッセージを送る?

    なんでもご自由に書いて送ってください。
    ご質問等返信を希望の場合は、メールアドレス等返信先の記載をお忘れなく。

    チェックを入れて送信してください

    Copyright (C) 2012 小棹制作所.
    All rights reserved.