HTML

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

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

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

秋なので Canvas に絵を描いてみた

朝夕はすごく涼しくなりましたね。むしろ寒いくらいです。もうすっかり秋ですね。秋だけに、絵を描いてみたくなりました。ただし、使うキャンバスは絵画用じゃなく、HTML5 のものですけど。線を引くところから初めて、画像を表示するまで、一通り試したコー…

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 だと、この手の「ヘッダ固定」や「フッタ固定」は頻繁に実装すると思うので、今後の自分のためにメモっ…