CSS

Bootstrap の Tooltip で改行する方法

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 を使うと便利。

Bootstrap を使ってデザインしたアプリに Sidr でメニューを作成

Twitter Bootstrap はレスポンシブ Web デザインをサポートしているから、 小さい画面ではナビゲーションバーのメニューが隠れて、代わりにボタンが表示される。 このボタンをタップするとメニューがドロップダウン(?)表示されるんだけど、これ好みじゃない…

Twitter Bootstrap 付属のアイコン画像より Font Awesome

CSS

Twitter Bootstrap が提供するアイコンは、 画像ファイルだから拡大すると見苦しいし、 色も黒と白の2色しかないので、 テーマをカスタマイズする場合の使い勝手がイマイチ。 そこで最近、Web フォント形式のアイコン『Font Awesome』を使い始めた。 Font Aw…

Webサービスのモックアップは HTML と CSS で書けばいい

デザインはからっきしだけど、このままではダメだと思って、本や雑誌でデザインを独学してる。 で、モックアップが重要みたいなこと説かれていると、Visio なんか使ってワイヤーフレームを書き始めるけど、正直まどろっこしい。性に合わない。この上 Photosh…

bootstrap-sass を使って Twitter Bootstrap をカスタマイズ

RAILS_ROOT/vendor/assets 下に Bootstrap 一式を放り込んで使っていたんだけど、 このやり方だと Bootstrap のスタイルをカスタマイズするとき面倒なことに気付いた。 上書きする CSS を書く?ありえない。 Bootstrap 公式のカスタマイズページを使う? 変…

Google ドキュメントみたいに中身がスクロールするリストを実装するメモ

overflow-y:auto のスタイルを付けた div でラップするだけ。 <html> <head> <title>Table Test</title> <style type="text/css"> </head></html>

固定幅レイアウトでのナビゲーションのサンプル

StackOverflow の最上部にあるナビゲーションって、固定された幅の中で項目が左右に寄せてあって、しかも背景はブラウザ画面の幅いっぱいに表示されています。これどうやるんだろう? 気になってソースを調べてみると、ネガティブマージンを使っていました。…

CSSフレームワーク『BlueTrip』が想像以上にすごい

CSS フレームワークを再認識 CSS フレームワークって、名前だけは知っていましたが、どういうものなのか全く知りませんでした。次の記事を読むまでは。 404 Not Found - ゆーすけべー日記 確かに、これは便利そうですね!さっそく、CSS フレームワークを導入…

ニコニコ動画みたいなCSSレイアウト

ニコニコ動画やニコニコ静画で使われている、ヘッダー・ナビゲーション・右サイドバー・フッターを持つ CSS レイアウトを、見よう見まねで実装してみました。こんな感じのやつ。 このレイアウトは Web アプリでよく利用すると思うので、メモしておきます。 <html> <head></head></html>…

Twitterやニコニコ動画みたいにヘッダーを固定する方法

Twitter やニコニコ動画みたいなヘッダーが固定された HTML ページを、ネットで調べながら見よう見まねで作ってみました。こんなの。 Ajax を使った RIA だと、この手の「ヘッダ固定」や「フッタ固定」は頻繁に実装すると思うので、今後の自分のためにメモっ…

CSSでブラウザ画面の高さいっぱいにレイアウトする方法

CSS

CSSでブラウザ画面いっぱいにレイアウトしたいけど、div タグの height を 100% にしても、高さいっぱいに表示されませんでした。width を 100% にしたときは、幅いっぱいに表示されるのに…。どうやらこれは、height が親要素の高さに依存しているのが原因み…