IE6 だけで CSS が効かなくなったことはありませんか。
CSS の中でマルチバイト文字なのかな、日本語などを書いてしまうと、IE6 で CSS が一部読み込まれなくなることがあります。

その際はの解決方法は2種類あります。

• 日本語を全て削除する。
• コメントを削除できない場合は、ファイルの文字コードをページに合わせましょう。
  ( Shift-JIS なら UTF-8 にしてみる。)

そもそも CSS にコメントはそこまで必要ないと私は思いますが、コメント書くなら英語で書きましょう。英語が書けない私のような人は、コメント？コメント書かないと書いてあることが分からないような人はまだまだですね。と言って誤魔化すのがベストです。

今更の話なんですが、なんとなくまとめてみることにします。

たぶん CSS 初心者の方は float の解除をするのに困ることがあると思います。
clear: both; で解除できると思うと見せかけて、実はそれじゃあダメなんですね。確かこれだけだと親要素が潰れちゃってダメなんですね。

それの対処法として、大体の人はこんなんやっちゃうと思います。
わかりやすくタグに直接 CSS 書かせてもらいますね。

1
2
3
4
5
6
7

<div style="float: left;">
	<p>テキスト</p>
</div>
<div style="float: right;">
	<p>テキスト</p>
</div>
<div style="clear: both;"></div>

でもこれだと見栄えのための HTML を書くことになっちゃうと思いますのでダメです。
じゃあどうすれば良いのか。

これは一般的なのか私には分かりませんが、私はこういう場合に clearfix というものを使います。
clearfixでfloatを解除 | d-spica

CSS をそのまま引用させていただきますです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
 
.clearfix {
  min-height: 1px;
}
 
* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

そして、HTML は以下みたいな感じです。

1
2
3
4
5
6
7
8
9

<div class="clearfix">
	<div style="float: left;">
		<p>テキスト</p>
	</div>
	<div style="float: right;">
		<p>テキスト</p>
	</div>
</div>
</div>

これは確か after 擬似要素でその要素の下に clear: both; をする要素を追加することができるんですね。
と、自分が後でコピー&ペーストできるように記事にしておきました。

もし、clearfix 使ってない人がいたらぜひ使ってみてくださいね！

ちなみに初心者の方はこんなんあるんで、ぜひ参考にしてみてください。凄い重要なことまとめてあって良いです。今私の中でITキヲスクさんが熱いっす。
ITキヲスク | CSS基礎文法最速マスター

全てのプロパティを覚えてると言っている私ですが、なぜか絶対に覚えられないプロパティや値があります。
全てのプロパティを覚えていると職場の方々は信じているので、覚えられないものを一覧にしておきます。

※マークされている部分が覚えられない、もしくは曖昧。

早く覚えなければいけませんが、なぜか覚えられないです。

以下のように記述すると IE6 でだけ無駄な改行が発生します。いつもながら独自の世界を駆け抜ける IE シリーズには楽しませていただいております。

1
2
3
4

<ul>
<li><span style="display:block;">テキストA</span></li>
<li><span style="display:block;">テキストB</span></li>
</ul>

解決策は一つ目が以下のように HTML を書く段階で改行させない方法。まぁ IE6 のために時間を潰すのは面倒なので、とりあえず一応以下のように書いた方法だけで正常に表示されるのを確認しました。

1

<ul><li><span style="display:block;">テキストA</span></li><li><span style="display:block;">テキストB</span></li></ul>

あと二つ目は li に padding: 1px; を指定する方法です。隙間が入ってうまい具合にデザインできないのでイライラしますねー。

私は個人制作では IE6 で li の中にブロック化した要素が入っているコンテンツは非表示にします。もしくは放置します。たぶん IE6 を使っている人はこのブログを読んだりしないと思うし、IE6 をバリバリ使ってる人に読んで欲しいとも思わないーなんてことを思ってるわけでもないですが…(笑) 心の奥底では思ってるかもしれませんね…。

ただ普通にテーブルを使うと、影のついた変な線が出てくると思います。
これをそのまま使うのはあまり良くないので、table に cellspacing=”1″ して背景色を枠線に見せるのも良いんですが、枠線はやっぱり border で出したい。でも border で枠線を出すと、隣のセルと枠線が重なり合って、枠線が2pxになっちゃうので使えないと思っていたのですが、CSS で border-collapse で collapse を指定すれば、枠線が重なりあって2pxから1pxになってくれるみたいです。メモメモ。
border-collapse－スタイルシートリファレンス

初心者に CSS を説明するのはとても難しいです。
CSS を理解するにはたくさん CSS を触るほかないです。

ですが、以下のページなら CSS をあまり触ることなく、CSS に関しての理解を深めることができるかもしれません。
初心者が陥りそうなCSSの7の間違い | CSS-EBLOG

今日 WordPress で部分的に CSS が適用されない部分が発生して、困ってしまいました。結局原因はわからなかったのですが、PHP による振り分けがうまく動作しなかったりといろいろ問題はあるようです。

CSS が適用されなくなる件に関して、何か情報をもっている方がいましたら情報提供お願いします。

ul 要素、ol 要素、l i要素では list-style-type を設定することができますが、dl 要素など定義型リストなどには list-style-type を設定することができません。しかし display プロパティで list-item を設定することで他の要素にも設定することができます。例を以下に書いておきましたので参考にしてください。

ソースコード

CSS

1
2
3
4
5
6
7
8
9
10
11
12

dl {
margin: 10px;
padding: 0;
}
dl dt {
margin-left: 10px;
display: list-item;
list-style-type: square;
}
dl dd {
margin-left: 20px;
}

HTML

1
2
3
4

<dl>
<dt>マーク</dt>
<dd>マークはマーク</dd>
</dl>

金曜日までに完成させなきゃいけないページがある。一応納期はずっと後の奴で、練習のような感じでやらせてもらってる仕事だけど、やっぱりここは金曜日までに完成させたい。一応一日のノルマは毎日クリアしてる、でも今日は本当に達成できなくて、20時過ぎまでやってました。

Firefox と IE6 と IE7 と Safari では表示が違うところがあり、もう終わったかと思いましたが。以下のページのおかげで助かりました。
CSSハック一覧：HTML│CSSタグ辞書

おかげ様で CSS がハックでめちゃくちゃになりました。先輩に明日見せて、きっとダメって言われるんだろうな。あと明日ショッピングカートをなんかしなくちゃいかんらしい。私にそんなことさせて良いのですか。やってみせますよ！

ボックスに margin: 0 0 -20px 0; なんていう指定をして、下のボックスにわざと重ねてデザインすることがあると思います。こんなことをするのは私だけか心配ですが、このように重ねて表示させようとすると、Firefox と IE では表示結果が異なってしまうことがあります。ボックスの重なり表示を統一するには z-index を使うと良いです。

1
2
3
4

.hoge {
position: absolute;
z-index: 2;
}

z-index の値が大きいと手前に、小さいと後ろに表示されます。デフォルトではすべてのボックスに0が設定されていますので、手前に表示させたいボックスに上記のように記述してやれば手前に来ます。まだ Firefox と IE7 でしか確認していないので、他のブラウザでも確認したいです。