goods and life +

Twitter bootstrap が凄すぎる件

Twitter bootstrap ってなにげに凄すぎじゃない (°Д°)?

CSSフレームワーク・グリッドレイアウト・レスポンシブデザイン完全対応、js付き。
あとはググルさんの CDN から jQuery を引っ張ってきたらそれでよし。
しかも可変グリッドレイアウトもあり。

レスポンシブWebデザイン(Responsive Web Design)といわれる、ワンソースの html でマルチデバイスに対応させる振り分け方法でWebサイトを作れます。

Twitter_bootstrap

デフォルトのサンプル例をテキストオンリーでそのまま使って、色の指定を多少変えるとか、そんな程度ならめっちゃ楽にしかも早く作れるかもしれないです…

もしかしてこれってすごい素材になると思うわけですけど、どう思いますこれ?

 

ちなみに、レスポンシブWebデザインとはこんな感じです。

PC、タブレット、スマートフォンという異なるデバイスでアクセスされたとき、1つの html ファイルでデバイスに合わせた見せ方がおこなえます。
各デバイスへの振り分けはCSSでおこないます。

レスポンシブWebデザイン

PCで見ているものをただ縮小するのではなく、PC、タブレット、スマートフォンそれぞの画面サイズに合わせ、見やすく便利なUIに個別にデザインしておきます。

いま、実際にそういう方法で作られているサイトもぼちぼち増えてきました。

たとえば以下のサイトをPCで見て、ウインドウのサイズをタブレットやスマートフォンのサイズに変えてみるとか、実際にタブレットやスマートフォンでアクセスしてみてください。

http://www.nhk.or.jp/studiopark/index.html

http://www.sevenbank.co.jp/soukin/jp/

 ▲ウインドウのサイズをタブレットやスマートフォンのサイズになるように動かしてみると…。

こんな感じになるのです。
デメリットもあるので使いようというか、最大効率化できるかどうかでやる意味が問われることになると思います。

でも可能性は感じますね、スマホユーザーは増える一方だし(*゜▽゜*)b

2013年1月22日追記
Introducing Google Bootstrap

Google Bootstrap

http://todc.github.com/google-bootstrap/

※ URL がこちらに変わったみたいです
http://getbootstrap.com/getting-started/

URL :
TRACKBACK URL :

  • コメント ( 5 )
  • トラックバック ( 0 )
  1. こんばんは
    う~ん?これも良く分かりませんでした
    しかもサイトが英語表記なので、余計に分かりづらいです(笑)

    昨日の「投げ銭」は、離婚した?(離婚する?)師匠の為にカンパという分かりやすい例があったので理解できました(笑)

    今回も分かりやすい解説をお願いします

  2. もうちょっと記事に説明を足してみました。
    特にNHKは、スマホサイズ、タブレットサイズ、のみならずPC向けでも大画面ユーザーと一般的なモニタサイズのノーマルな2サイズまで用意されていてびっくりしますね~

    ちなみに、グーグルのクローラーも各デバイス用にそれぞれ独立したサイトがあるよりも、
    1つのhtmlで振り分ける方法だと巡回の回数が少なくて、コンテンツの重複扱いもしなくて済むのでこのレスポンシブWebデザインの方法を推奨していたりします。

    Google 検索と相性の良い携帯電話 / スマートフォン向けウェブサイトを運営するには

    Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法

    どうすか?

  3. SVGにしなくても、{max-width:100%; height:auto;}とかこんなのでいけそうみたいですね。

  4. そういえばこんなのもあったです…。
    http://www.howtogomo.com/jp/d/

    急かされているような気がせんでもないですけど。

  5. >http://www.howtogomo.com/jp/d/
    おおっ。これは活用するのです!
    ありがとう!

この記事にコメントする

Return Top