CSS
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 を使うと便利。
Twitter Bootstrap はレスポンシブ Web デザインをサポートしているから、 小さい画面ではナビゲーションバーのメニューが隠れて、代わりにボタンが表示される。 このボタンをタップするとメニューがドロップダウン(?)表示されるんだけど、これ好みじゃない…
Twitter Bootstrap が提供するアイコンは、 画像ファイルだから拡大すると見苦しいし、 色も黒と白の2色しかないので、 テーマをカスタマイズする場合の使い勝手がイマイチ。 そこで最近、Web フォント形式のアイコン『Font Awesome』を使い始めた。 Font Aw…
デザインはからっきしだけど、このままではダメだと思って、本や雑誌でデザインを独学してる。 で、モックアップが重要みたいなこと説かれていると、Visio なんか使ってワイヤーフレームを書き始めるけど、正直まどろっこしい。性に合わない。この上 Photosh…
RAILS_ROOT/vendor/assets 下に Bootstrap 一式を放り込んで使っていたんだけど、 このやり方だと Bootstrap のスタイルをカスタマイズするとき面倒なことに気付いた。 上書きする CSS を書く?ありえない。 Bootstrap 公式のカスタマイズページを使う? 変…
overflow-y:auto のスタイルを付けた div でラップするだけ。 <html> <head> <title>Table Test</title> <style type="text/css"> </head></html>
StackOverflow の最上部にあるナビゲーションって、固定された幅の中で項目が左右に寄せてあって、しかも背景はブラウザ画面の幅いっぱいに表示されています。これどうやるんだろう? 気になってソースを調べてみると、ネガティブマージンを使っていました。…
CSS フレームワークを再認識 CSS フレームワークって、名前だけは知っていましたが、どういうものなのか全く知りませんでした。次の記事を読むまでは。 404 Not Found - ゆーすけべー日記 確かに、これは便利そうですね!さっそく、CSS フレームワークを導入…
ニコニコ動画やニコニコ静画で使われている、ヘッダー・ナビゲーション・右サイドバー・フッターを持つ CSS レイアウトを、見よう見まねで実装してみました。こんな感じのやつ。 このレイアウトは Web アプリでよく利用すると思うので、メモしておきます。 <html> <head></head></html>…
Twitter やニコニコ動画みたいなヘッダーが固定された HTML ページを、ネットで調べながら見よう見まねで作ってみました。こんなの。 Ajax を使った RIA だと、この手の「ヘッダ固定」や「フッタ固定」は頻繁に実装すると思うので、今後の自分のためにメモっ…
CSSでブラウザ画面いっぱいにレイアウトしたいけど、div タグの height を 100% にしても、高さいっぱいに表示されませんでした。width を 100% にしたときは、幅いっぱいに表示されるのに…。どうやらこれは、height が親要素の高さに依存しているのが原因み…