俺のメモ

CSSで便利そうだけど、イマイチ使い道がわからないwidth:auto。
僕が重宝してるのはフォームのテキスト部分です。

フォームの中のinputがほとんどがtextな場合、inputタグに200pxになるようにスタイルをかけます。
しかし、このままでは、checkboxやsubmitもinputタグなので同様に200pxになってしまいます。
これらにも同様に10pxや100pxとして幅を指定するのもいいですが、submitなんて万一width内に文字が入らなければ切れてしまうのでwidthを指定してないデフォルトに戻してあげるべきです。
そういう場合width:autoを使います。

autoは本来デフォルトに戻すという意味なので、これで小さくしたいのみinput要素があればdefaultというクラスをかけてあげればOKです。
こんな感じで。
input {
width:200px;
}

input.default {
width:auto;
}


俺の意見なんてどうでもいいんだろうけど、気持ちを文にするいい練習材料になるので書いておこう。

まず俺のスペック

• 業界歴は４年くらい
• 現在も制作会社勤務
• 最初の１年はデザイン、コーディング、プログラム
• 残りの３年はメインはプログラム、たまにコーディング
• プログラム系のセミナーは何回か行った。(YAPC asiaも)
• CSSNiteも一回行った。

俺が考えるCSSNiteが嫌われるの根底の理由は３つ。

主催者が嫌い
エンジニアがコーダーを見下してる
（エンジニアからして）セミナーの質が低い

の気がします。

１に関しては、CSSNiteに行ったが、確かにうっとしい。個性が強いだけでは済まされない人間性。
（景品を取りに行く）客に走ってくださいと行ってみたり、前回のCSSNite前夜祭のネタと同じものやってみたり。
CSSNite前夜祭は無料、CSSNiteは有料で同じネタっておかしくない？
そして、なんでそんな偉そうなの？

２つ目に関していえば、認めたくはないがそれはある。
逆も思われるだろう。システム馬鹿と。
java使いがperl使いを見下しperl使いがphp使いを見下す。
そして、php使い(だけじゃないけど)がさらにHTMLコーダーを見下す。

そして３つ目。
クオリティが低い。
大阪だったのもあるけど、ふつーうの兄ちゃん姉ちゃんが普通の話しをしてくれる感じです。
ドリの使い方なんかを。
クオリティより量なんでしょうか。
イベントの数が多い多い。
多いのはいいけど質も高めて。

どんだけ～。

IE7がでてますます肩身の狭くなるポップアップですが、今は代替としてCSS+JavaScriptで疑似ポップアップのようにしてだすのが主流になってきそうです。

今回試したPure CSS Tooltipsは、それよりも少しライト感覚でCSSだけでポップアップをだします。
ただ、当たり前でがCSSのみなのでマウスオーバーしてる時しかでてきません。
手軽に使いたい時に効果を発揮しそうです。

■CSS

.ItemHeaderClient{
/*border-bottom:1px solid #717171;*/
padding:10px 8px;
line-height:1.5;
}
.ItemClient{
/* \*/clear:right;/* */
border:1px solid #8C9698;
margin:0 11px 9px 0;
background:#fff;
}a.blueClient{
color:#06c;
font-size:20px;
font-weight:bold;
}span.line{
_float:left;
margin-right:20px;
white-space: nowrap;
}

■XHTML
<a class=info href="#" mce_href="#">
これをマウスオーバー
<span>ここに説明文を書いておく</span>
</a>

たったこれだけツールチップが実現できます。

CSSでIE6だけ表示がずれるのはよくある話です。
ボックスの計算式がおかしいというのがもっとも一般的です。

今日ははまりまくったのは別のバグ。
ボックスを並べると中にあるテキストがどんどん左によってくるというもの。
みた感じ、タグのとじ忘れかと思うような症状ですが、これは立派なIE6固有のバグです。
そういえばブログか本で読んだことはあったけど、自分が実際にこのバグにぶちあたるとは思いませんでした。
というのも、このエラーがでる引き金は下記の３つがそろった時。

-「divの中にdiv」など、ブロック要素を2重にする
- 外側のブロック要素に、border-leftとpadding-bottomを定義する
- これらが繰り返される

するとpadding-bottomの値の分だけ左によっていきます。

なら一つ目は問題ないけど２つ目は左に5pxずれます。
3つ目は左に10pxずれます。
ぱっと見、タグのとじ忘れかなと思うこのエラーは発見するまでが大変だった。
結局0pxならエラーがでないので0pxに書き換えて一件落着。
PHPやMTでHTMLを生成する際ループでボックスを繰り返しつくる場合は気をつけときましょう。