2006-07-13 ========== Firefox で text-indent: (ry; がガーってなるやつ ----------------------------------------------- Reference URI: http://lowreal.net/logs/2006/07/13/1 Written Time: 2006-07-13T00:01:54+09:00 Tags: css web そういえばうちではならないなって思ったけど [overflowの解釈、間違ってませんか? - WebStudio](http://www.d-toybox.com/studio/weblog/show.php?mode=single&id=2005092101) を見てから text-indent でふっとばすときは overflow: hidden; を入れるようにしていたからだった。 変な挙動の CSS (Cascading Style Sheets) に対して「どうしてそうなるのか」も考えないとなぁ。でもさ、今日思ったけど、IE (Internet Explorer) さんは「どうしてそうなるのか」とか考えてやっても、無駄なのよね。 CSS で面倒くさいのは -------------------- Reference URI: http://lowreal.net/logs/2006/07/13/2 Written Time: 2006-07-13T01:14:51+09:00 Tags: css ブラウザ間のアレなんだから、あんまり CSS 書くこと自体を面倒くさいことにしないほう がいいよね、って思うんだ。 ところで自分が CSS を書くときに気をつけていることを書くよ！ - 必ずルールをインデントする (TAB インデント) - セレクタを複数書く場合は最後以外改行する - 規則のあとには必ずセミコロンを入れる (最後も) - 最後のルールのあとも改行する - 宣言ブロック間はホワイトラインを入れる - border, border-style, border-color, border-width 以外の border 系プロパティを極力 使わない - font プロパティを使わない。 - list-style 以外の list 系プロパティを極力使わない - margin, padding 以外の margin, padding 系プロパティを極力使わない - background 以外の background 系プロパティを極力使わない - 宣言ブロックは基本的に HTML の構造順に書く - 構造に関係ないやつ (ID 選択子を含まないもの) は上のほうに書く - インライン要素 (span, a), ブロック要素 (p, ol), どっちでも要素 (ins, del), 置き換 え要素 (img, input) の順に書く (しかしそんなに厳密に考えない) - ID 指定の場合、下位の要素に ID が指定されていても、上位 ID をあまり省略しない (CS S 読むだけでも、HTML 構造が少しわかるように書く) - 以下適当ですが、display, position, float は宣言ブロック中で上のほうに書くとか、ba ckground と color は近くに書くとか (しかしあまり気にしない) - ルールと書いたり規則と書いたり安定しないけど気にしない 「極力使わない」というのは、どうしてもカスケーディングを維持したいときだけ使う。 * { margin: 0; padding: 0; font-size: 100%; font-weight: normal; f ont-style: normal; color: inherit; background: transparent; border: none ;}a:link { color: #00f; text-decoration: underline;}a:visited { color: # 660; text-decoration: underline;}a:hover ,a:active { color: #00f; text-d ecoration: none;}p { margin: 0.5em 1em;}ul { padding: 0 0 0 1em;}ol { pa dding: 0 0 0 1.5em;}del,ins { background: #efefef; border: 1px solid #ccc;} input,textarea { background: #efefef; border-style: solid; border-color: #060; border-width: 0.2em 0.5em;}/* ここから構造順 */body { line-height: 1 .66; background: #1f2f16 url("/img/left.png") repeat-y 7% 0; color: #fff; margin: 0 0 0 7%; padding: 0 7% 0 50px;}#whole { background: #fff url("/i mg/right.png") repeat-y right top; color: #000; padding: 20px 55px 0 0;}#to p a { display: block; background: url("/img/logo.png") no-repeat left top; width: 500px; height: 100px; margin: 0 0 0 20px; text-indent: -10000p x; overflow: hidden;}#navigation {}#navigation ul li { display: inline; padding: 0 0.5em; border-style: solid; border-color: #ccc; border-width: 0 0 0 1px;}#navigation #search-form { position: absolute; top: 0; right : 7%; margin: 1em;}#content { padding: 1em;}#content h2 { font-size: 120 %; padding: 1em; background: #ccc;}#footer { color: #ccc; background: #000;}