IE6対応の考え方

IE6だけにハック設定する時(css)「アンダースコア」

◯いつもの設定

#sample {
	color: #000;
}

◯IE6のみに効く設定

#sample {
	_color: #000;
}

IE6・IE7だけにハック設定する時(css)「スラッシュ」

◯いつもの設定

#sample {
	color: #000;
}

◯IE6・IE7のみに効く設定

#sample {
	/color: #000;
}

ハックとは？「CSSハック」を参照

png画像使用時の注意

IE6ではpngの透明度を表示できないので、「DD_belatedPNG」というjqueryを使って表示させる。
html文のhead部分に↓を記述。

<!--[if IE 6]>
<script src="common/js/DD_belatedPNG.js"></script>
<script>
	DD_belatedPNG.fix('img, .png-bg');
</script>
<![endif]-->

jsフォルダに「DD_belatedPNG」のフォルダも一緒に入れておけばOK！
※cssで指定した背景画像は認識されないので、「('img, .png-bg')」内に記述されているクラス(この場合は「.png-bg」)をhtml側でクラス付けすればいい。

IEテスターでチェックしながらコーディング

コーディングする時には、IEも確認しながらする。
コーディング等がすべて終わった状態でチェックすると、修正の時間を余分にかけてしまう場合があるので、できればコーディングをする段階で一緒に確認していく。

z-indexを使う(css)

画像等の上下関係をIE６は無視して後ろに隠す時がある。
そんな時は「z-index」を使い、指定を100(任意の数字)にすると上に表示させられる。
※「z-index」のみでは効かないので、「position」も一緒に指定する。(「static」以外の指定で)

#sample {
	position: relative;
	z-index: 100;/*←任意の数字*/
}

floatさせる時は、必要なだけ「width」指定を忘れない。

IE6は、サイズ指定をしないと認識しないので、IEチェック時にレイアウトが崩れてたりする時がある。
そんな時に「width」を指定するだけで解消される率高し。(必要がない時はわざわざ指定しなくてもOK！)

headerの要素について考える

「h1」要素の使い所

ページ最上部に一文あるのが「h1」のパターンが多い。
その場合は「h1」の下にある会社ロゴを「p」要素にするパターンが多くなる。
又、中ページの事を考えてヘッダーの構成は変えない(デザインは変わっても構成はそのまま)。何も考えずに、中ページが変わるごとにヘッダーや中ページの構成が「h2」要素からスタートしたり、「h3」要素からスタートしたりと変わると、統一性がなくなり、無駄に記述する事が多くなる。

高さがあまり可変しにくいヘッダー部分は「height」で指定する事もある。

ヘッダーの高さはあまり可変させる事が少ないので、高さ固定させても影響が少ない。

右寄せのテキストリンクへの対応

テキストで構成され文字の大きさが可変するという事を見越して、

Before

<ul>
	<li>TOP</li>
	<li>ABOUT</li>
	<li>CONTACT</li>
</ul>

の順番で、

#header ul {
	float:right;
}
#header ul li {
	float: left;
	width: (任意)px;
}

「ul」要素に「float: right;」、「li」要素に「float:left;」(+α widthの指定)させるよりも、

After

<ul>
	<li>CONTACT</li>
	<li>ABOUT</li>
	<li>TOP</li>
</ul>

と、「li」要素の順番を逆順にして

#header ul li {
	float: right;
}

「li」要素に「float: right;」の記述だけで、
自動的に右揃えになり、シンプルなソースにできる。

タイトル要素の設定

背景画像(見出し)はline-heightを忘れない！(css)

「h3」とかの見出しの背景(以下、アイコン)と、文字を揃える為には「line-height」と「padding」を使う。
アイコンとテキストの高さの真ん中で揃わないとバランスが悪いので、

#sample {
	(min-height: (任意)px;)
	padding: (任意)px 0 (任意)px (任意)px;/*上下の余白、アイコンとかぶってる分を左にずらす*/
	line-height: (任意)px;/*アイコンの高さ*/
}

全体の高さ=line-height+padding

dl要素の使い方

「dl要素」でテーブルレイアウト

「dt」「dd」をうまく使う。
手順1→dlのleft,right,bottomにborder。
手順2→dtとddのtopにboder。(テキストの文字可変時でも上のborderの高さは同じになる様)
手順3→中のセル(になる)モノにの上下にpadding付け
横幅はwidth指定とtext-align: center;を記述すれば、自動的に横幅をpadding指定しなくても真ん中にいく。

パンくずにもdl

パンくずはページごとにより変わってくる部分だが、構成はほとんど変わらず、
ホーム＞中ページ(＞中の中…)
と決め打ちなので「dt」にはホーム、「dd」には「＞」のアイコンをセットして続けて記述できる様にする。

id・classへの考え方

id・class属性の名前

これから先、必ずhtml5の知識も必要になって来るであろう事を考えhtml5の要素を参考にして、よりわかりやすくて作業効率アップを図ったid名やclass名を付ける。

全体を表す時に使いそうな名前

• wrapper
• wrap
• container

カテゴリー分けする時に使いそうな名前

• category
• header
• head
• nav(i)
• gnav(i)
• topic
• pankuzu
• side
• menu
• area
• sub
• main
• contents
• footer
• foot

内容を表す時に使いそうな名前

• content
• culumn
• section
• inner
• item
• icon