Web標準にアプローチ　〔まいまいのお宿。〕

スタイルシート・デザイン


HTML（エッチティーエムエル） ＆スタイルシートトレーニングブック改訂版


詳解HTML ＆ CSS ＆ JavaScript辞典第3版

「スタイルシートを使っている時は印刷プレビューにもご用心」

WindowsIE と WindowsFirefox を立ち上げて
双方で表示を確認しながら
時には、Safari なんかでもプレビューしながら
ホームページのお仕事を進めておりました。

ルンルンルン

で、ちょっと印刷プレビューも見てみよう！と表示確認をすると
なんとも、あれれ？な表示になっちゃってました。

スタイルシートを使っていて（HTML4.0 transitional にて作成中）
リストメニューを作っていて
そのメニューを画像（img）で作りこんでいるときに
ブラウザ表示でもよく見られる光景がそこにあったんですねぇ。
印刷用スタイルを使っているわけでもないのに・・・
2px ほどの余白さんが発生！

ブラウザ表示ではOKなのに、印刷プレビューが駄目。
しかもWindowsIEだから、大目に見るわけにも行かないんだな。
恰好悪いし、許せないし、不思議。

大抵の場合は、img が インライン要素であるがために
こんなになっちゃうようなので
ブロック要素（って言うんだっけ？）にしてしまえばOKだったりする。


li.img { display:block; }


今回もそれでOKだったんだけど
CSSレイアウトするならば、やっぱ極力画像は挿入しないで
CSS側で設定してやるのが「吉」なのかなぁ～と思いました。

【関連記事】

• HTML4.01 strict と transitional における画像余白？の差異
• HTML4.01 strict と transitional における画像余白？の差異（解決編）
  

そういや、ここんとこアフィリイエイトをコマメにしていないので
クリック数すら下降気味だったのですが
今月は、今年で一番よかったりします。なんでかわからないですけどね。
ちょーっと駅近さんを手入れしたからかな～
検索経由でもいらっしゃっているみたい。

･････つづく

• 基準のソースコード
• 文字コードは「Shift-JIS」か「EUC-JP」か
• Javascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーする
  
• CSSでidを指定する時は要素名とセットで記述
• HTMLのDOCTYPE宣言は軽視できない
• 行間指定「line-height」の使い方
• @importを使って外部スタイルシートを読み込む