Archive | 1月, 2013

Twitter Bootstrap vs Google Bootstrapまとめ このエントリーをはてなブックマークに追加

25 1月

Twitter Bootstrapには常日頃からとてもとてもお世話になっています。最近、Twitter bootstrapからフォークして誕生したGoogle Bootstrap。両者の違いをまとめました。気分によって使いわけよう。

リンク

Overview

  • 基本的なところはだいたい同じ。
  • Google Bootstrapが拡張した部分について、特に本記事にまとめています。
  • Twitter Bootstrapのほうが、色味が薄く、padding や line-heightをとっており、余裕があるデザイン。ボタンやフォームは角丸。
  • Google Bootstrapは、文字が少し小さく、コンパクトな印象。ボタンやフォームは四角くて、ペタッとしている。

では、細かい部分の説明です。

テーブルダグ

クラス名は.success, .error, .warning, .info と同じですが、若干色味が違います。Googleのほうが少し濃い色になっています。

検索フォーム

Twitter Bootstrapの検索フォームが丸いのに対し、Google Bootstrapは四角いです。フォームにフォーカスすると、Twitter Bootstrapのほうがボワーっと光るエフェクトが大きいです。

セレクトボックス

Google Bootstrapでは、セレクトボックスが基本灰色で、開くと選択部分が灰色になる。

ファイルアップロード

ファイルアップロードフォームはGoogle Bootstrapのみ。でも…あんまり…なんかふつう。

その他、フォームは全体的に、Twitter Bootstrapが灰色グラデーション・角丸・立体的なのに対し、Google Bootstrapが灰色・四角・ペタっとしている。

フォーカス

Twitter Bootstrapは、フォーカス次のボワーがちょっと豪華。Googleは、Invalidなフォームの外枠が青なんですね。なんで?

ボタン

Twitter Bootstrapのボタンはおなじみ、同色グラデーション・角丸。若干大きいかんじがします。リンクの色は明るめの青です。

対してGoogle Bootstraoは、ボタンの色は一色で、四角です。結構前にGoogleのデザインが一新したとき、「うわっ!ださっ!」とWeb界隈が一瞬引きましたが、今は慣れましたよね。あのボタンです。リンクの色はちょっと濃い青。

ボタンサイズ

ボタンのサイズも、Twitter Bootstrapのほうが若干大きいです。

コンポーネント/タブ、ナビリスト

Google Bootstrapの上のコンポーネントは、ulタグに.nav-tabs .nab-tabs-google とつけたときに表示される、Google Tabsというものです。Googleのサービスでよく見ますね。Android4系も、こんなかんじのインタフェースがある場合があります。

下のコンポーネントはNav listsコンポーネント。Googleのコンポーネントは、Googleのサービスをよく使うようなユーザでないと、このリンクは押せるか押せないか?ということがわかりにくいかもしれませんね。

黒いナビバー・Inverted variation

Google Bootstrapは、Twitter Bootstrap風のバーを各種揃えていますが、「.navbar-googlebar」というクラスをつけることで、Google Bootstrapが提供しているバーを利用することができます。中でもパッと見て違うのが、Googleの黒バー。黒というよりは灰色で、アクティブになっている部分がカッコイイ!(Google bootstrapで、Homeの部分がactiveになっています。)

その他のGoogleバー

バーについてはGoogle Bootstrapが独自に拡張したものが多々あります。この上のバーは、アクティブになっている部分の下が、切符切りされたみたいに三角でカワイイ。

ページャ

ページャーは、Twitter Bootstrapが白ベース、Google Bootstrapが灰色ベースです。

ラベル、バッヂ

ラベルとバッヂ。バッヂは、スマートフォンの通知がまとめられているときなどによく見る、あの「通知何件」の表示法。色味はGoogleのほうがはっきりしている。Googleのラベルは四角い。

アラート

アラートは、全体的にGoogle Bootstrapのほうが濃くなっている。特に、通常のalert(黄色)の文字色が黒になったのは嬉しい。Twitter Bootstrapの黄色背景に黄色文字だと、ちょっと見辛かった(いや、CSSで上書きすればいいのですが…)。

おわりに

以上が、主なTwitter BootstrapとGoogle Bootstrapの違いです。

全体的にTwitter Bootstrapはポップで可愛いかんじ、Google Bootstrapはビジネス向きなかんじがしますね。

いずれにせよ自分たちで多少CSSを編集する必要がありますが、イメージに近い方のBootstrapを使うといいのかなーと思いました。

 

ぴいこサーバの.vimrc このエントリーをはてなブックマークに追加

9 1月

あとで多分必要になるから、メモ。

set number
set smartindent
set autoindent
set expandtab
set shiftwidth=2
set showmatch
set smarttab
set tabstop=2
set whichwrap=b,s,h,l,,[,]
set hlsearch
nmap <Esc><Esc> :nohlsearch<CR><Esc>
set encoding=utf-8
set fileencodings=utf-8,ucs-bom,iso-2022-jp-3,iso-2022-jp,eucjp-ms,euc-jisx0213,euc-jp,sjis,cp932
set fileformats=unix,dos,mac
set statusline=%F%m%r%h%w\%=[TYPE=%Y]\[FORMAT=%{&ff}]\[ENC=%{&fileencoding}]\[LOW=%l/%L]
set laststatus=2
nmap vv viwdi
  1. ライン番号表示
  2. スマートインデントでインデントをいいかんじにする
  3. オートインデント有効
  4. タブをスペースに置き換える(会社のコード規約がタブ=半角スペース2個のため)
  5. vimが勝手にタブを入れるときのタブ幅
  6. カッコとかのマッチを強調表示
  7. スマートタブでタブをいいかんじにする
  8. タブを半角何文字で表示するか設定
  9. 行またぎ移動(行頭にカーソルがあるとき左を押すと、ひとつ上の行末に行く)
  10. 検索結果をハイライトする
  11. Escキーを2回押すとハイライトを解除
  12. エンコードはUTF-8
  13. ファイルのエンコーディング
  14. ファイルの改行コード
  15. ステータスラインにファイル名、ファイルタイプ、改行のフォーマット、エンコード、行数を表示する
  16. ステータスラインを常に表示する
  17. コマンドラインモードで[vv]と押すと、単語を選択→削除→インサートモードになる(超便利だよ!)