テーブルレイアウトを使用しないといっている人へ

久々の更新ですが、いきなり引用。。

 何を伝えたかったかというと,サイトのユーザーさんはソースを見てお問い合わせをしたり,何かを購入したりする訳では無いということです。ですので,十分にCSSを理解していない段階で,より正しいHTMLを書こうとしてデザインを犠牲にしてしまうことと,高度なデザインをちょっとだけtable要素をレイアウト目的に使用しつつ再現することを天秤にかけたときに,どっちがクライアントさんのためになるのかということを考えなければいけないですよね,ということです。

それこそ,事件は会議室ではなく現場で起こるように,マークアップの現場では時として「え!このデザインはさすがに…」とか「この納期ではさすがに…」とか言うことが起こってきます(この辺は,ワークフローの改善などによっても回避することは可能ですが)。例えば,納期中にマークアップを仕上げるということがマストで,そんなにHTMLの厳格さにはこだわっていないという案件があった場合(あくまで,喩えですが)に,CSSがあんまり得意ではないので table要素をレイアウト目的に使用することでしか間に合わないということであれば,そうすることが正義というか,選択肢がそれしか無いということになりますね。

引用元:第2回 CSSレイアウトとか,Web標準とか:ITpro

いやー非常に同感ですね~

自分もHTMLの構造やCSSレイアウトを意識し始めたころは、理想を追いかけてマークアップをしていましたが、いざ案件(仕事)をやってみると、そううまくは行かないことに気づかされました。。大規模案件になればなるほど、多人数制作になればなるほど困難。

要因としては、
  • 1つのプロジェクトでコーディングレベルまで落ちてくる間に、スケジュールが押していることが多く、時間的余裕がない。
  • CSSレイアウトなど、ハイレベルコーディングをすることにより、他のメンバー(スキルレベルが違う)の作業時間が大幅に遅れる。
  • 運用者が制作者ではなく、クライアントサイド。

などなど、いろいろな要因があると思います。

上記にもあるワークフローの改善もあると思いますが、入れ替わりの激しいこの業界ではなかなか厳しいのが現状だし、必ずしもワークフロー通りに案件が進むとは限りませんし、思いません。

結果。
理想を追いすぎて、クライアントや社内に迷惑をかけるよりも、妥協(現実を見る)をし、スムースにプロジェクトを進めるほうがいいな。
と、悟りました。

でも、マークアップエンジニアとしては自分の理想のマークアップをしたい。。。

今の会社に来て一回もないけど。。。。。。。。

ikesaiだけでも、しょぼいソースを書き直して理想のマークアップにしなければ。

全称セレクタにzoomを使うとバグる

以前から導入してみようと思っていたhaslayoutのzoom機能ですが、導入したらいろいろ不具合が起きてきました。
まずはaタグです。ある環境下でaタグのリンク領域がおかしなことになりました。まぁこれはその部分にzoom: normal;といれてやれば回避できたんですが、olのバグに関してはどうにもこうにも回避できませんでした。 症状はというと、ナンバリングリストの番号がすべて1になってしまうというなんとも不可思議な現象です。そこでいろいろ調べてみると自分と同じ症状の人がちらほらいたようで、回避方法も書いてありました。
これで解決!と思いきやこの方法でやると、リスト内の行が2行以上になると最後の行に番号がきてしまう。なので初心に帰りliにzoom: normal;を入れてみるとすべての症状が回避できました。灯台下暗しです。。。

以下がサンプルになります。もちろんIEで見てね

»zoomによるolのバグ サンプル1

»zoomによるolのバグ サンプル2

»zoomによるolのバグ サンプル3

なんとか回避はできたけど、このほかにもいろいろバグがありそうなので、今後は全称セレクタは避ける方向で。。

»TRANS – * { magin: 0;}だけでは物足りない!zoom: 1;を使おうよ!

first-letterのバグ

注釈(※)などをインデントするにあたり、いろいろトラブったのでメモ。

■margin-leftを使うとIE6でボックスサイズが広がるのでプラス側はpaddingにする。

p.indentA01 {
	margin-left: 0.7em;
}
p.indentA01:first-letter {
	margin-left: -0.7em;
}

を下に変更

p.indentA01 {
	padding-left: 0.7em;
}
p.indentA01:first-letter {
	margin-left: -0.7em;
}

■似たクラスを続けて記述すると、スタイルが効かなくなるのでバラして記述する。

div.captionA01 p.indentA01,
div.captionA02 p.indentA01,
div.captionA01 p.indentA01r,
div.captionA02 p.indentA01r {
	padding-left: 0.7em;
}

を下に変更

div.captionA01 p.indentA01,
div.captionA02 p.indentA01 {
	padding-left: 0.7em;
}
div.captionA01 p.indentA01r,
div.captionA02 p.indentA01r {
	padding-left: 0.7em;
}

IE6が本当に使えない。
あとUTF-8で※が文字化けするのってどうやって回避するんだろ。

font-famliyでメイリオを指定するとテキストフィールドがバグる

最近わかったのが、font-famliyでメイリオを指定するとIEやFirefoxのテキストフィールドが想像以上に伸びる現象を発見しました。
これはどうもある条件が重なるとなるようです。
inputのテキストフィールドにsize指定をし、font-famliyにメイリオを指定し、尚且つメイリオフォントがPCにインストールされているとなります。
なのでVistaでは確実におかしくなり、XPでもインストールしている人がいればなります。
で、回避するにはsize指定をHTML側にしない事。なんだけど、指定しないわけにはいけない場合も必ずあるので、font-famliyにメイリオは指定しないほうが良いって事ですな。
先取りしてメイリオを指定している人は確認したほうがいいですねー

»メイリオがインストールされていて、font-famliyにメイリオを指定した場合

CSS セレクタについての参考サイト

WWW WATCHに掲載されているCSS セレクタのリファレンスはかなり参考になります。
CSS3で定義されているものが多く今はあまり使うことはありませんが、覚えておいて損はないはず!

WWW WATCHさんに感謝。

»CSS セレクタに関するおさらい | WWW WATCH

»CSS セレクタに関するおさらい 2 | WWW WATCH

»CSS セレクタに関するおさらい 3 | WWW WATCH

単位に悩みたくない人に

CSS初心者でよく悩みがちなのは単位の算出です。 下記のサイトではポイント、ピクセル、パーセント、em を変換した際の近似値をチャートが掲載されています。 12pxの近似値パーセントが分からない、または忘れたなんて場合にとても便利です。

»Approximate Conversion from Points to Pixels

ボックスモデルの仕様で悩む

ネットを徘徊してたら久々にbox-sizingを見かけたのでIE7で試してみた。
ちなみにIEとモダンブラウザではボックスモデルの解釈が違うので本当にメンドクサイ事になるのは周知の事実。
そんなメンドクサイ仕様を回避するべく登場した裏技がbox-sizingと-moz-box-sizingでボックスモデルを制御する方法。

html * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

一行目の-moz-box-sizingはMozillaの独自拡張でCSS3の先行実装。
二行目のbox-sizingはCSS3で実装予定の属性。MacIEは先行実装している。
この技は非常に重宝されて結構みんな使ってたとおもう。

で、IE7で試してみたところbox-sizingは全然効かない。なのでbox-sizingを使って互換モードで作っているとIE7で死ぬって事ですな。
CSS3に実装されるといわれていたbox-sizingも、最近は実装されないんじゃないか?なんて噂も流れてるとか流れてないとか。。。そんな感じだしね~

»box-sizingテスト box-sizingあり xml宣言あり

»box-sizingテスト box-sizingあり xml宣言なし

@importでCSSを読み込ませないハック

最近はIE5系を排除する案件が増えていますが、でもなんとなく崩れるのが嫌で対応してしまう。
無駄とは言わないけど時間がないときは非常に効率が悪いし、非対応で組んでいて後々見たらテキスト部分が読めねーなんてことになったら悲惨なので今は@importハックで非対応ブラウザは排除しています。
CSSを読み込ませなければバグなどでテキストが表示されなくなったり、可読性が悪くなることもほぼないので安心して切り落とせますね~w

以下のハックは良く使う@importです。

@import "style.css";     /* WinIE4.xを排除 */
@import/**/"style.css";  /* WinIE4.x, WinIE5.0, MacIE5.2を排除 */
@import "style.css"/**/; /* WinIE4.x, WinIE5.0, WinIE5.5, MacIE5.2を排除 */

すべてIE系だけど、クライアントを捻じ伏せたらこれが使えます!!

»WinIE4.x, WinIE5.0, MacIE5.2を排除のサンプル

»WinIE4.x, WinIE5.0, WinIE5.5, MacIE5.2を排除のサンプル

»Hide CSS from browsers :: @import

画像をCSS側に記述するテク

Bob Image Replacement 略してBIRというテクニックらしいですが、ネーミングがイマイチ。でもこれは結構画期的な裏テクです。
ちょっと昔まではCSS側に画像を指定してHTML側にテキストを記述するって技が流行ったけど、アクセシビリティー的にはよろしくない(画像OFFの時に何も表示されなくなる)との事で今は廃れていました。だけどこのBIRテクを使うと画像がOFFでもテキストはちゃんとブラウザに表示されます。もちろん画像の記述はCSSに書いている。
以下、引用ソース

<style type="text/css">
 body {
  background:#d3d3d3;
  position:relative;
  z-index:1;
 } 

 .bir {
  background:transparent url('image.jpg') top left no-repeat;
  height:100px;
  width:400px;
 } 

 .bir span {
  position:relative;
  z-index:-1;
 }
 </style>
</head>
<body>
 <h1 class="bir"><span>Top-Level Text</span></h1>

引用元:One Web Developer’s Haven >> Blog Archive >> BIR

このBIRは素晴らしいテクニックなんだけど一つだけ問題があるんです。MacIEだと画像が表示されない。。。現状はMacIE対応がまだまだ存在するので、このテクを使うならMacIE非対応のときかMacIEだけ画像OFF時のテキスト表示をあきらめるかのどっちかになる。
まぁそこまでしてCSS側に持ってこなくてもいいって話なんだけど。。。
しかもこのテクのキモはbodyに入ってるz-index、あんまりbodyにz-indexはいれたくないしね。
ま、状況に応じて使うって感じだな〜

line-heightのバグ

木達さんブログ経由で見つけた情報。
なんでも、line-heightを単位なして設定するとMac OSXのFirefox 1.0.8以下でline-heightのバグが発生するようです。
なので、Firefox 1.0.7でちょっと試してみたんだけど、自分の環境ではline-heightに異常は見られなかった。
おかしいなと思いいろいろいじっていたら、どうもfont-familyを設定するとline-heightに異常が見られる事がわかった。
しかーし、font-familyの種類によってはバグが発生しないことも発見。
Verdana, Geneva, Arial, Osakaなどはバグが発生したけど、sans-serif, serifは発生しない。
まぁこんなバグは単位をちゃんと付けるようにすれば問題ないので、単位を付ける癖のない人は気をつけてくださいませって感じです。

以下サンプル。
»line-heightのバグ サンプル
»Unitless line-height bug in Mozilla and Firefox | 456 Berea Street