CSS

[Bootstrap] メインコンテンツが少ない時にフッターの下に余白ができないように最下段に表示するTips

CSS clicktx_tech_memo

個人的なメモ Bootstrap(に限らず)メインコンテンツが少なくて、heightが小さい場合はフッターの下に余白が出来てしまいカッコ悪い。 で、何かいいのあるか検索したところ自分でCSSを設定しなくてはいけない模様。 css - Flushing footer to bottom of the page, twitter bootstrap - Stack Overflow

Bootstrapでfluidレイアウトの時にthumbnailsを使うとズレる問題の解決策

確認バージョン:Twitter Bootstrap 2.0.4 bootstrap.cssで .row-fluid [class*="span"]:first-child { margin-left: 0; } このようになっており、最初の<li>要素だけ margin-left:0 になるため、2段目からのサムネイルにズレが生じる。 サンプルコード html5 - In bootstrap, how make the thumbnails fluid resize well - Stack Overflow 解決策 今のところCSSに追記するか、jQueryで操作するスクリプトを […]

CSSでテーブルの隙間を無くす

CSS clicktx_tech_memo
  • 2011.01.13

テーブルでセルの隙間を0にする。 table { border-collapse: collapse; } デフォルトで設定しておくと楽。 例外で隙間を作りたい時。 table { border-collapse: separate; border-spacing: 1px; }

いつのまにかSafari(OS X?)がword-breakを実装していた件

つい先日、CSSをイジッていて気が付いた事。 通常、div等のボックス内にある半角英数の文字列…例えばURL等の長い文字列は改行されない。 んだけど、IE独自の仕様で word-break ってのがあるらしくIE独自じゃ意味ないしなぁと気にもしなかった。 たまたまCSSのテストをしていて、試しに word-break:break-all; を設定してみた。 ふとSafariで確認したら折り返されている! いつのまにか実装されていたのか?? ちなみにMac OSX 用 Safari 4.04 での事。 FireFox 3.5.7で確認したけど、こちらは改行されていなかった。