タグ別アーカイブ: CSS

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

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

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

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

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

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

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

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

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

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; }

CSS スタイルシートを極める

という人におすすめ。

これは「ツカエル」と思ったCSSは、ブログでも紹介するんですが、こういうリファレンスがあると、便利かも。

あ、なんか人任せでスミマセン。

あと、最近のサイト制作でのコダワリといえば、最初に YUI.css を読み込ませて、要素をリセットするという事。

YUI(Yahoo User Interface) Library

YUI Reset CSS