title 属性に <br> タグを含んだ文字列、data-html 属性に true を設定すればいい。
<span rel="tooltip" data-toggle="tooltip" data-placement="right" data-html="true" title="1行目<br/>2行目"> コンテンツ </span>
Rails なら simple_format を使うと便利。
<span rel="tooltip" data-toggle="tooltip" data-placement="right" data-html="true" title="<%= simple_format(item.tooltip) %>"> <%= item.content %> </span>
Twitter Bootstrap はレスポンシブ Web デザインをサポートしているから、 小さい画面ではナビゲーションバーのメニューが隠れて、代わりにボタンが表示される。
このボタンをタップするとメニューがドロップダウン(?)表示されるんだけど、これ好みじゃない。 Facebook や Gmail の iPhone アプリみたいに、横からスライド表示されるメニューにしたい。
そこで、Sidr と Bootstrap を組み合わせて、それっぽいメニューを実装してみた。
この手のメニューを実装するプラグインは Sidr のほかに PageSlide や Snap なんかがあるけど、 試した中では Sidr が一番 Bootstrap と組み合わせやすかった。他のは動かすだけで一苦労。
Bootstrap と Sidr を組み合わせたサンプルがこちら。
<!DOCTYPE html> <html> <head> <title>Sample</title> <meta charset="utf-8"/> <link rel="stylesheet" href="bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" /> <link rel="stylesheet" href="sidr/stylesheets/jquery.sidr.dark.css" /> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <a id="sidebar_button" href="#" class="btn btn-navbar" style="float:left;"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a href="#" class="brand">Sample</a> </div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <table class="table"> <tbody> <tr> <td> <input type="checkbox" /> Task </td> </tr> </tbody> </table> </div> </div> <!--これがメニューになる--> <div id="sidr"> <ul> <li> Lists <ul> <li><a href="#">list</a></li> <li><a href="#">list</a></li> <li><a href="#">list</a></li> <li><a href="#">list</a></li> </ul> </li> <li> Tags <ul> <li><a href="#">tag</a></li> <li><a href="#">tag</a></li> <li><a href="#">tag</a></li> <li><a href="#">tag</a></li> </ul> </li> </ul> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script> <script type="text/javascript" src="sidr/jquery.sidr.min.js"></script> <script type="text/javascript"> $(function() { var $tbody = $("tbody"); var $template = $tbody.html(); for (var i = 0; i < 20; i++) { $tbody.append($template); } }); // サイドバーにする要素を指定しない場合、 // id に sidr が設定された要素を使う。 $("#sidebar_button").sidr(); </script> </body> </html>
Bootstrap のナビバーボタンは本来右端に表示されるけど、直接スタイルを指定して左端に表示している。
この HTML を Chrome で表示。
左上のボタンをクリックすると
スライドしてメニューが表示された。
ここまでは期待通り。 本格的にアプリに組み込むのはこれからなので、もしかしたらこの先で躓くかもしれない。 その時は Sidr のソースコードを改変するか、おとなしく自作しよう。
Twitter Bootstrap が提供するアイコンは、 画像ファイルだから拡大すると見苦しいし、 色も黒と白の2色しかないので、 テーマをカスタマイズする場合の使い勝手がイマイチ。
そこで最近、Web フォント形式のアイコン『Font Awesome』を使い始めた。
Bootstrap ライクなデザインのアイコンフォントが、なんと 249 個。 Bootstrap が提供するアイコンと同じデザインのものも含まれているので、 全部フォントで置き換えられる。 というか、icon-* 系のクラスはフォントを使ったものに上書きされてしまうんだけど。
フォントなので拡大しても粗くならないし、CSS で色も変更できる。 Rails で使うなら、font-awesome-sass-rails を導入するのが手っ取り早い。
bootstra-sass と font-awesome-sass-rails の2つは、 今後も頻繁にお世話になりそうなので、 Rails の Application Template に追加しておこう。
デザインはからっきしだけど、このままではダメだと思って、本や雑誌でデザインを独学してる。 で、モックアップが重要みたいなこと説かれていると、Visio なんか使ってワイヤーフレームを書き始めるけど、正直まどろっこしい。性に合わない。この上 Photoshop？学習コスト高すぎる…。もちろん財布にも優しくない。
そもそも、Web サービスのデザインの場合、HTML と CSS でやればいいんだよ。最近気づいた。 HTML と CSS なら、慣れ親しんだエディタとブラウザがあれば事足りる。
Bootstrap や jQuery といった、デザインで利用するフレームワークと素材をつっこんだリポジトリを GitHub や Bitbucket に作っておけば、あとは clone してローカルでいじればいい。個人なら編集内容をリアルタイムで共有する必要ないし、少人数なら GitHub や Bitbucket で共有すればいい。静的な HTML はホストもできるし。
今はそんな感じで落ち着いた。 細部に凝ろうと思ったら、Photoshop や Illustrator を覚える必要があるだろうけど。 そこは YAGNI の精神。必要になるまでやらないでいいや。
RAILS_ROOT/vendor/assets 下に Bootstrap 一式を放り込んで使っていたんだけど、 このやり方だと Bootstrap のスタイルをカスタマイズするとき面倒なことに気付いた。
上書きする CSS を書く？ありえない。 Bootstrap 公式のカスタマイズページを使う？ 変更を確認するためにファイルを置き換えるのが面倒。
ブラウザで開発中の画面を見ながらカスタマイズしたい。 書くコードの量は少ないほうが良い。 一箇所変更するだけで関連する箇所がまとめて変更されるような…。 それ、Sass で出来るじゃないか。 というわけで、bootstrap-sass を使うことにした。
Rails は Sass をサポートしているので、Gemfile に
gem 'bootstrap-sass'
を追加し、 RAILS_ROOT/app/assets/stylesheets/bootstrap_load.css.scss を作成。
/* bootstrap-sass の変数を上書き */ $navbarText: #ffffff; $navbarBrandColor: #ffffff; $navbarLinkColor: #ffffff; $navbarLinkColorActive: #ffffff; $navbarLinkColorHover: #ffffff; $navbarBackground: #673412; $navbarBackgroundHighlight: #3a1703; $navbarLinkBackgroundActive: #673412; @import "bootstrap"; @import "bootstrap-responsive";
あと、application.css に書いていた、bootstrap を require している部分は削除。 これだけで簡単に navbar をカスタマイズできた。
変数を上書きしている部分は、増えてきたら別ファイルに切り出したほうが良いな。 Sass 便利だ。積極的に使っていこう。
overflow-y:auto のスタイルを付けた div でラップするだけ。
<html> <head> <title>Table Test</title> <style type="text/css"> <!-- /* overflow を指定して内側の table をスクロールさせる */ #list-view { overflow-x: hidden; overflow-y: auto; border: 1px solid black; height: 200px; width: 300px; } /* 外側の div に横幅をあわせる */ #list-table { width: 100%; } #list-table tbody { width: 100%; } /* 項目が分かりやすいように線で囲む */ #list-table td { border: 1px solid black; } --> </style> </head> <body> <div id="header"> <h1>Table Test</h1> </div> <div id="main"> <div id="list-view"> <!--この table が外側の div からはみ出るときスクロールする--> <table id="list-table"> <tbody> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> </tbody> </table> </div> </div> </body> </html>
こんな感じになります。
Web デザイナなら、こんなの迷わずに一瞬で書けるんでしょうね。CSS ムズカシイ。
StackOverflow の最上部にあるナビゲーションって、固定された幅の中で項目が左右に寄せてあって、しかも背景はブラウザ画面の幅いっぱいに表示されています。これどうやるんだろう？
気になってソースを調べてみると、ネガティブマージンを使っていました。簡単なサンプルがこちら。
<html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; text-align: center; } #custom-header { width: 100%; height: 32px; background: #EEE; margin-bottom: -32px; } #topheader { float: right; } #container { text-align: left; width: 350px; } --> </style> </head> <body> <div id="custom-header"> </div> <div id="container"> <div id="topheader"> login | about | faq </div> <div style="clear:both;"></div> <div id="header"> <h1>test</h1> </div> <div id="main"> ここにメインコンテンツを表示 </div> </div> </body> </html>
背景用の div をブラウザ画面の幅いっぱいに表示し、ネガティブマージンを指定してナビゲーションを重ねています。
リキッドレイアウトでサイドバーを実現するのにネガティブマージンを使ったことはあるけど、こんな風に縦方向に使って、しかも他の要素と重ねるなんて使い方は思い付きもしなかったです。
プログラミング同様、Web デザインも有名なサイトの HTML や CSS を読むのが一番勉強になると思いはじめた今日この頃。
