リスト横並びで画像を並べた時の隙間を消す

リスト横並びで画像を並べた時、display:inline;を指定して水平に並べた場合、要素と要素の間に隙間が生じます。
これは空白類文字といって、ソースコード内の改行は半角スペースくらいの空白に変換するそうです。

1. <li>タグを改行せず、一行に並べる

2. <li>タグの間にコメントタグを入れる

3. </li>の閉じタグを途中で区切る

4. display:inline;をやめて、float:left;で横並びにする

5. display:table-cell;で横並びにする

display:table-cell;はIEでは対応していない為、モダンブラウザとIEで記述を分けなければならない。

6. font-sizeで隙間を消す

横並びの要素を包括する要素にfont-size:0;を指定すれば、隙間は消えます。<li>を横並びにするなら、<ul>にfont-size:0;

スマートフォンページ幅対策

スマートフォンの画面サイズに合わせたい時は、こちらの一行をheadに追加してみる。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
initial-scale=初期状態のスケール地
maximum-scale=最大スケール値
user-scalable=拡大縮小ができるか

webサイトとスマートフォンの画面幅を合わせる事が出来る。

久しぶりにie6でレイアウトが崩れたので復習

IE6はCSSの解釈がおかしい

CSSの解釈がおかしいためレイアウトが崩れ

 

ボックス幅の解釈

div#box{
	width:100px;
	border:1px solid black;
	padding:5px;
}

ボックス全体の幅は112px→IE6では全体で100pxとなります。

【対策】widthとpadding、borderを一緒に使わない

div#box1{
	width:100px;
}
div#box2{
	border:1px solid black;
	padding:5px;
}

例えば分けて指定

floatで回り込むとmarginが2倍に

div#box{
	float:right;
	margin-right:20px;
}

通常は20pxが、IE6の場合40pxとなる

【対策】 marginとfloatを使うときはdisplay:inline;を忘れずに

div#box{
	float:right;
	margin-right:20px;
	display:inline;
}

 

floatでボックスを回りこませてmarginで間隔を開けるときはdisplay:inline;をお忘れなく。

IE6のCSS対策の最終手段CSSハック

 

.sample{
	width: 100px;
	_width : 120px;
}

この場合、IE6以下のみ120pxとなり、他のブラウザでは100px

.sample{
	width: 100px;
}
* html .sample{
	width : 120px;
}

こちらも同じで、IE6以下のみ120pxとなり、他のブラウザでは100px

Flashの上に画像 swfファイルの上に画像

画像の上にswfがかぶらないようにする方法
文字の上にswfが被らないようにする方法
Flashの上に画像swfファイルの上に画像
横メニューの下にフラッシュを表示させているサイトの場合
メニューをドロップダウンで作成しているとフラッシュで隠れてしまうことがあります。
なんとか、レイヤー的にメニューが上かswfファイルか上か出来ないものだろうか。
■Flashの上に画像
■swfファイルの上に画像
xhtmlの場合、下記の param 要素を object 要素内に追加します。
<param name="wmode" value="transparent">
htmlの場合、 embed 要素に wmode 属性を追加します。
wmode="transparent"
このような感じです。
<object>
<param name="…" value="…" />
<param name="…" value="…" />
<param name="wmode" value="transparent">
<embed src="…" wmode="transparent" />
</object>

cssレイアウト崩れの原因 — バグ回避方法 —

● フォントサイズ

font-sizeは%かpxで指定

【バグ対象ブラウザIE6】

⇒ キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる ⇒

em単位で指定した値が文字サイズ変更後に正しく反映されない

● ボックス

widthと同時に左右brderや左右paddingを指定しない

heightと同時に上下brderや上下paddingを指定しない

⇒ ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう

【バグ対象ブラウザIE5.5,IE6】

⇒ 左右ボーダーとパディングを設置した要素に後続する部分がずれる body要素にはborderやwidthを指定しない。

⇒ 初期コンテナブロックを生成する要素の幅を指定できない

● 視覚的

フロートのコンテナブロックにはwidthを指定

【バグ対象ブラウザ IE5.5,IE6】

⇒ 背景色が指定された要素内にフロートがあるときに要素内の文字が消える

⇒ フロートを含むボックスのマージンが無視される

左フロートの左marginはゼロにする

右フロートの右marginはゼロにする

【バグ対象ブラウザ IE5.5,IE6】

⇒ フロートの左右マージンが指定値より大きくなる

clearしていないブロックボックスにはwidthもheightも指定しない

【バグ対象ブラウザ IE5.5,IE6】

⇒ フロートに後続するボックスの幅がフロートに合わせて短縮される

clearするボックスの上marginはゼロ

【バグ対象ブラウザ IE5.5,IE6】

⇒ clearを指定した要素ではフロートに対して上マージンを設置する

clearするボックスには同時にwidthも指定

絶対配置要素のコンテナブロックにはwidthを指定

絶対配置要素の位置指定はtopとleftまたはrightとbottomで行う。

leftとrightやtopとbottomを同時指定しない。

【バグ対象ブラウザ IE6】

⇒ left, topが指定された要素ではright, bottomを認識しない

verflwを使うときは同時にwidthやheightを指定する

⇒ 幅と高さが明示されていない要素へのverflow:hidden;指定が完全に反映されない

cssハック css hack – スタイルシート —

CSS ハック

ブラウザごとの表示の違いを、ブラウザが持っている「バグ」を逆手に取って利用する方法。

CSSハックと呼ばれているもので、あくまでも応急処置的な意味で使う。

The W3C CSS Validationに通らないものもあります

IE6以下

スターハック

* html #contents { margin:0 0 0 10px; }

対応ブラウザ:IE4~6、MacIE4~5

セレクタの前に【* html 】を挿入

アンダースコアハック

#contents { _margin:0 0 0 10px; }

対応ブラウザ:IE4~6

プロパティ前に【_】アンダースコアを挿入

IE6のみ除外

#contents { color /**/:#000000; }

対応ブラウザ:IE7、IE8、Firefox、Safari、Opera

プロパティ後に【/**/】を挿入

IE7用

*:first-child+html #contents { margin:0 0 0 10px; }

対応ブラウザ:IE7

*:first-child+html】を挿入

IE6/IE7共通

#contents {/margin:0 0 0 10px; }

対応ブラウザ:IE6、IE7

プロパティの前に【/】を挿入

—————————————————————————-

【追記】

IE8
*+html>/**/body ●●●
IE7
*:first-child+html ●●●