簡単にレスポンシブWebデザインに対応できるTwitter Bootstrapの使い方

  • このエントリーをはてなブックマークに追加

タイピング

簡単に今風のデザインが作れるTwitter Bootstrapをご紹介します。 Twitter Bootstrapとは簡単に説明すると、Twitter社が開発・提供するCSSフレームワークです。 Twitter Bootstrapの凄いところは、レスポンシブWebデザインと言われる 各デバイスごとにサイズを可変することができるデザインも簡単に制作できるという点が優れています。

今回はTwitter Bootstrapの利用方法についてお伝えしていきます。

1. Twitter Bootstrapのダウンロード

まずTwitter Bootstrapサイトにアクセスしてください。 http://twitter.github.io/bootstrap/index.html

Bootstrapサイト

アクセスしたら「Get started」とページ上部に書かれた部分をクリックしてください。 ダウンロードページが表示されます。 今回は、Download Bootstrap sourceと書かれた方のボタンをクリックし、 ファイルをダウンロードしてください。

Bootstrapダウンロード画面

ダウンロードしたファイルを解凍すると、 「twitter-bootstrap-37d0a30」というディレクトリの中にある「docs」ディレクトリ内の index.htmlファイルをダブルクリックしてください。

ローカル環境に、1.に記載したURLと同じ内容のページが表示されていることを 確認することができるかと思います。

2. index.htmlのソースコードを確認

次にこのindex.htmlファイルのソースを確認してください。

index.htmlファイルのソースを確認するソフトはテキストエディタで確認してください。

それでは、さっそくソース部分を編集してみましょう。 <h1> </h1>部分のBootstrapと書かれている部分をサイトエンジンサイトに 変更して保存してみました。

Bootstrap編集後の画面

あっという間にそれらしく変更することができます。

次はTwitter Bootstrapを利用するにあたって基本的なことを お伝えしていきます。

3. Twitter Bootstrapの基本的なルール

・グリッドデザイン Twitter Bootstrapはグリッドシステムを採用し、横幅940pxの固定エリアを12カラムに分割されています。 通常のサイトで利用するようなメインコンテンツとサイドコンテンツに分けたページを制作したい場合、spanXXと指定することで分割を簡単にしてくれます。

例) getting-started.htmlのソースを開いてみてください。

87行目にspan3と記述され、97行目にspan9と記述されているかと思います。

先ほど説明したとおり、Twitter Bootstrapは横幅940pxを12カラムに分割して構成されています。 span3というのは3カラム分をサイドコンテンツ用に分割し、残りのメインコンテンツ部分に9カラム利用するという記述になっています。

・可変グリッドデザイン Twitter Bootstrapは、ブラウザのウィンドウ幅にあわせて、表示幅が可変にすることも簡単にできます。

例) getting-started.htmlのソースを開いて編集してみましょう

36行目 75行目 82行目部分のcontainer部分を下記に変更してください。

<div class="container"> → <div class="container-fluid">

次に86行目のrowと記述されている部分をrow-fluidに変更してください。

<div class="row">→<div class="row-fluid">

変更し保存が完了したら、ブラウザでファイルを確認してみてください。

可変対応のレイアウト

上記のようにページが可変対応のレイアウトに変更されました。

今回はレイアウトの変更の仕方についてお伝えしました。
Twitter Bootstrapを利用することで、簡単にレイアウトの変更ができることがお分かりいただけたかと思います。

HTMLの知識とCSSを理解されている方が利用すれば、さらに色々なことを簡単に利用することができますので、ぜひ、Twitter Bootstrapを利用して、モックアップの制作や、サービスサイトの立ち上げに試してください。
きっと効率よく制作することができると思います。

すぐ実践できる外国人集客のノウハウを無料でお届け

外国人の集客方法やマーケティングで実践したことを参考情報としてメールでお届けします。ブログに書かないノウハウもお届けしていますので、外国人の集客にお悩みなら今すぐご登録ください。




  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。