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

IE では border で 1px の点線を引くと、スクロールしたりしたときに線と線がくっついて見栄えが悪くなってしまうことがあります。私は Firefox では問題なく表示されるし、たまにしか表示されないので気にしていなかったのですが、今日お客さんから直してくれと頼まれたので直すことになりました。

わざわざくっつかない線を表示するために画像を使うのは嫌なので、CSS でなんとか出来る方法を探していたら以下の方法を発見しました。
タグメモのカケラ | IEで、ボーダーがうまく表示されない

点線を指定している id や class に対して position: relative を指定すると良いそうです。

1
2
3
4
5
6

hoge {
margin: 10px 0;
padding: 10px;
border: 1px #dddddd dashed;
position: relative;
}

でも私の環境では何も解決されませんでした。解決できなかった人は border を 2px にしたりすると解決されますのでいろいろ試してみるのも良いかもしれませんね。何か他にも方法があったら教えてほしいです。

HTML では空白をいくつ入力しても一つとしてカウントされますが、以下の記号を使えば強制的に空白を作ることが可能です。今回の記事は All about を参考にさせていただきました。

1
2
3
4

 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。

上記のHTMLソースは以下のようになっていますよ。

1
2
3
4

 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。

これの良いところ基本編は All about に書いてありますので、そちらを参考にしてください。ここでは良いところ応用編を説明します。

空白文字が使える場面

私が今日体験したことなんですけど、Table でカレンダーを作るときとか、表を作るとき、background でカラーを設定して、table に cellspacing=”1″ を入れることによって、td と td の間に線を入れている(正確には隙間から背景色が見えるだけ)場合であれば問題ないのですが、border を使ってカレンダーや表を作っているときであると、td に何も入力されていない場合、IE6 および IE7 では border が出てこなくなります。そういうときに何も入力されていない td に空白文字を含めると、IE シリーズでも border を表示させることができますよ。

先日 option 要素内で改行してほしいという修正依頼が来ました。
残念ながら option 要素内で改行することはできません。

最近モバイルサイトの修正をしていたりしますが、文字化けが全く解消されません。
どうしていいやら、本文は文字化けしていないけど、タイトルが文字化けするんですよね。

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>