Loading...

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

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

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (35,481Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (17,739Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (16,112Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (15,641Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (15,640Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (15,407Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (15,223Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,568Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (10,950Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (10,597Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,435Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,308Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (9,873Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,500Views)
  • 翻訳機能をWebサイトに埋め込む方法 (9,450Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,901Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,839Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,599Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (5,426Views)
  • TwitterBootstrapでも採用されている、たぶんもっとも簡単なレスポンシブ対応テーブルの作り方 (5,326Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった

    2013年08月22日(木)
    10308Views

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

    Twitter Bootstrapがバージョン3にアップグレードしました。
    前からデキる子だと思っていましたが、今回のアップグレードで、さらにデキる子になっているようです。

    twitterbootstrapトップページ Bootstrap公式サイト

    モバイルファースト

    公式サイトの謳い文句が
    “Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.”

    訳すと
    「”洗練” “直感的” “パワフル” な、モバイルファースト・フロントエンドフレームワーク。Web開発をより速く、より簡単に」といった感じですね。

    とくに「モバイルファースト」という文言があることに注目です。
    公式サイトの機能一覧を見てみると、リキッドレイアウトや、レスポンシブイメージ、メディアクエリなど、モバイル向けのレイアウト機能が大幅に強化されていることを確認できます。

    デザインが今風に

    前バージョンが出た当時、流行っていたのが、Web2.0風のデザインでした。
    ですから、Bootstrapも、そんなWeb2.0風の”触れそうな質感を持ったデザイン”を取り入れていました。

    ですが、現在ではWeb2.0風デザインのブームは一段落し、代わりに平面的な”メトロデザイン”が台頭してきました。
    Bootstrap3ではその流れに合わせ、デザインがメトロデザインに統一されています。

    サポートブラウザ

    公式にサポートを宣言しているのが下記のブラウザ群です。

    • Chrome (Mac, Windows, iOS, and Android)
    • Safari (Mac and iOS only, as Windows has more or less been discontinued)
    • Firefox (Mac, Windows)
    • Internet Explorer
    • Opera (Mac, Windows)

    Bootstrapの規則に従って開発を行えば、自動的にこれらのブラウザは問題なく動作するというのはありがたいですね。
    工数の大幅な削減が望めます。(保証はされていますが、検証は自己責任できちんとしたほうがいいでしょう)

    IE8とIE9のサポートについて

    これも公式サイトを見ると、「サポートされている」と謳っています。
    ただ、「多くのCSS3プロパティ、たとえば、角丸やシャドウ効果はIE8ではサポートされていません。これに注意が必要です」ともあります。
    また「メディアクエリもそのままではサポートされていないので、別途respond.jsを読み込む必要がある」とのことです。
    まだまだ問題児健在ですね(笑)。

    設定方法

    さて、以上を読んでみて興味を持った方は、ぜひ新しいBootstrapを触ってみるといいかと思います。

    初期設定方法を下記します。

    下記ページよりBootstrap一式をダウンロードします。
    Getting started · Bootstrap
    bootstrapダウンロード

    ファイルを解凍すると、CSSとjsのファイルがありますので、htmlファイルに読み込ませます。

    このCSS、jsファイルの内部のソースをいじる必要がないようなら、名前に”min”とついたファイルを読み込ませます。
    具体的には

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="bootstrap/3.0.0/css/bootstrap.min.css">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="bootstrap/3.0.0/css/bootstrap-theme.min.css">
    
    <!-- Latest compiled and minified JavaScript --> 
    <script src="bootstrap/3.0.0/js/bootstrap.min.js"></script>
    

    こんなかんじです。
    パスは適宜変更してください。

    また、Bootstrapに含まれるjavascriptはjQueryを用いています。
    別途、jQueryをインストールしてください。

    例:レスポンシブ対応のテーブル作成

    例として、レスポンシブ対応のテーブル作成を見てみます。
    レスポンシブ対応テーブルサンプル

    ブラウザの横幅が一定以下になった段階で、テーブル全体の幅がそれ以上縮まらなくなり、はみ出した部分を横スクロールすることで表示できるようになります。

    設定方法は
    CSS · Bootstrap
    上記公式サイトが参考になります。

    具体的には
    下記のように、レスポンシブ対応テーブルをdivで囲い、クラスに、table-responsiveという名前を設定します。
    続いて、該当テーブルのクラスにtableという名前をつけます。

    <div class="table-responsive">
         <table class="table">
           ...  
         </table> 
    </div>
    

    こんなかんじで、驚くほど簡単に、レスポンシブ対応のテーブルができました。

    まとめ

    3にアップグレードして劇的に進化したTwitter Bootstrap。
    フロントエンド開発時にはデフォルトで読み込むようにしてもいいかもしれないですね。

    おわりに

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

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


    筆者に何か教える?

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

    feedlyでブログを購読する?

    follow us in feedly

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

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

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

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