CSS | Words in the WWW

あなたは、タブ派？スペース派？ HTML&CSS

HTMLやCSS、PHPのコーディングをしている時、ソースコードのインデントどうしてます？

（多分、）標準的なソフトでコーディングしていれば、タブでインデントされてると思います。

みなさんはどうですか？
タブ（またはスペース）に統一してますか。それともそのままでしょうか。

問題にしたいは、ネットからソースコードをコピペした時、インデントがスペース4個になってることが多くあります。そして、そのままペーストすると、一つのファイル内に、タブインデントと、スペースインデントが共存しちゃうわけです。

ブラウザの「ソースを見る」とかメモ帳で見る分には、どっちも空白なので、見た目にもほとんど違和感なく見れるし、本当にどっちでもいいって言えばどっちでもいいことなんでしょうけど、エディタで見ると、なんか気持ち悪いんですよね。

あと、タブの方が、1文字で表示されるので、なんとなくタブの方が軽いのかなとか思ってますが、どうなんでしょう。

こんなこと、どっちでもいいよって気にしない人も結構多くいそうですが、気になる人は、もう何ていうか、ざわざわしちゃってしょうがないと思うんですよ。
オープンソースソフトウェアの中身も時々、タブとスペースが混在していることありますしね。
もう、どっちかに統一しようよっ！って思っちゃうんです。

私の場合、Dreamweaverの「ソースフォーマットの適用」を使って、全部タブインデントに変換しちゃうんですけど、場合によっては、ページの半分位までインデントされちゃってさらに難解なコードになっちゃうこともしばしば（笑

最近、またウェブデザインの方をやってるんですが

IMGタグ使うのに躊躇してしまう（笑）

素直にIMGタグを使っていいんだろうけど、CSS background-image に使おうとしちゃう。

そんなことないですか？

Image Rollover Borders That Do Not Change Layout

画像をタイル状に並べてロールオーバーでボーダーを表示した時、レイアウトが崩れてしまうのを防止するCSSテク。

ボーダーの太さ分だけ画像の要素が大きくなってしまうので、それを内側にボーダーを引くことで解消しています。

Image Rollover Borders That Do Not Change Layout

Problem CSS

#example-problem a img, #example-problem a   { border: none; float: left; }
#example-problem a:hover                     { border: 3px solid black; }

This CSS applies a border on a hover where there was none before. Layout problems ensue.

Fix #1: Inner Borders

#example-one a img, #example-one a           { border: none; overflow: hidden; float: left; }
#example-one a:hover                         { border: 3px solid black; }
#example-one a:hover img                     { margin: -3px; }

This CSS applies a negative margin on all sides of the image of the exact size of the border. This pulls the border inside and causes no layout changes.

Fix #2: Outer Borders

#example-two a img, #example-two a           { border: none; float: left; }
#example-two a                               { margin: 3px; }
#example-two a:hover                         { outline: 3px solid black; }