小山太郎.com

ブラウザ表示のを印刷用にCSSを用意するtipsについてメモ。
普段はあまり印刷を気にすることがなくても、「自分の意図したとおりに印刷してほしい」時などがページによってはあるかもしれません。
とりあえずメモ用に印刷に関するものを取り上げてみる。
※メモなので途中です。

Read more… »

よく忘れてしまうのでメモ。

FireFoxにおいて、背景色がコンテンツ内容に合わせて伸びてくれない現象がよく出る。
以前対応したのに、また忘れてしまったのでメモ。

<div class=”contents”>
  <div style=”float:left”>
    画像やなんでもコンテンツてんこもり
  </div>
</div>
なんてのがあって、contentsのcssを
.contents {
  background: #000000;
}
なんつって背景を黒に塗りつぶすはずが、FireFoxで見ると「黒塗られてねーじゃん！」ってなることがよくある。

どうやら、contents内のデータにfloat:leftなどの指定が入ってると、このような現象になる。

つーわけで解決法。

<div style=”clear:both”></div>空タグを入れろ！

悲しいかな、ドキュメントとビューを切り離すはずが、ビューのデータがHTMLに書き込む必要があるなんて・・・
赤字を追加です。

<div class=”contents”>
  <div style=”float:left”>
    画像やなんでもコンテンツてんこもり
  </div>
<div style=”clear:both”></div>
</div>

当然、こんなんダサダサなので、style=”clear:both”をCSSに.clear { clear:both; }って書いて<div class=”clear”></div>にしましょう。まぁこれでもダサいんだが・・・

「せっかく自分でがんばってサイト作ったんだけど、誰かに読まれてすぐコピーされっちまう・・・」

と思った方は少なくないはず。
小山太郎もその一人。

Read more… »