ウェブデザインに役立つ、いけてるサイト、かっこいいサイト、おしゃれなサイト、クールなサイトなどを集めたWEBデザイナーのためのWEBデザインのリンク集。WEBデザインの参考にどうぞ
最近はIE5系を排除する案件が増えていますが、でもなんとなく崩れるのが嫌で対応してしまう。
無駄とは言わないけど時間がないときは非常に効率が悪いし、非対応で組んでいて後々見たらテキスト部分が読めねーなんてことになったら悲惨なので今は@importハックで非対応ブラウザは排除しています。
CSSを読み込ませなければバグなどでテキストが表示されなくなったり、可読性が悪くなることもほぼないので安心して切り落とせますね～ｗ
以下のハックは良く使う@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を排除のサンプル
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>
このBIRは素晴らしいテクニックなんだけど一つだけ問題があるんです。MacIEだと画像が表示されない。。。現状はMacIE対応がまだまだ存在するので、このテクを使うならMacIE非対応のときかMacIEだけ画像OFF時のテキスト表示をあきらめるかのどっちかになる。
まぁそこまでしてCSS側に持ってこなくてもいいって話なんだけど。。。
しかもこのテクのキモはbodyに入ってるz-index、あんまりbodyにz-indexはいれたくないしね。
ま、状況に応じて使うって感じだな〜
木達さんブログ経由で見つけた情報。
なんでも、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
CSSは設計した本人でも時間が経つと作りがわからなくなったり、ひどい時には作っている最中でもコレなんのクラスだっけ？なんてことになりがち。
それを他人が見たらそりゃーCSSの解析に時間がかかるってもんです。
他人がわからない、解析に時間がかかるってのがクライアントなり制作会社の一部の人に嫌われる＆積極的に取り組まない原因のひとつだと思う。（今いる会社もそう）
その原因を軽減しスムーズに仕事が進むようにしたい。
そんな事を思いつつ、いろいろ試行錯誤しているんだけどなかなかうまくいかない。
で、今日見つけたサイトにはちょっとしたアイディアが載っていたので参考に。
ここのサイトでは見出しやテキストなどの例が載っていたけど、コレを元にマージンや各ブロックパーツなどの定義を加えていけば、CSS仕様書フェーズ1はできそう。
あとは、会社に仕様書の大事さを解いて仕様書の作成する時間を作ってもらうことだな〜
»Drinking Rockstars and Programming >> Creating a Style-Guide for your site
WordPressのテンプレートなどでよく見る、下メニュー版を代替スタイルシートでテストアップしてみました。
カテゴリー内で代替スタイルを適用すると、左メニューが下に移動します。
左メニューが邪魔でサムネイルを全体に表示したい方にお勧めです。（そんな人はあまりいないと思いますが）
元々は自分用ユーザースタイルシートで使っていたんですが、自分的に使いやすいのでちょっと公開してみました。
メニューが下にあるので、マウスジェスチャーなどを使うと便利です。
ただ代替なので、違うカテゴリーに遷移してしまうと元のスタイルに戻ってしまいます。
ちなみに代替スタイルシートを適用する方法は、
Firefoxだと「表示＞スタイルシート＞Left Nav none」
Operaだと「表示＞スタイル＞Left Nav none」です。
Sleipnirのプラグインなんだけど、すごく便利です。
InfoaxiaのWeb Developerにもちょっと似てるけど、HawkeyeのほうがHTMLやCSSの解析は断然に使い勝手がいい。
なにがいいかってーと、「クリックした要素の詳細を表示」って機能がいいね〜
これを使うとクリックした要素のツリー構造がわかったり、その要素に適用されているスタイルだけが一発でわかる。
Web DeveloperにもCSSを表示ってのがあるけど、あれは全てのスタイルを表示しているので、CSSの解析のときは結構時間がかかっちゃうんだよね。
あと良かったのが、HTMLの構造を表示してくれる機能かな〜
これはHTMLの構造を視覚的に見れるので、誰かの作ったサイトを手直しするときや、更新するときに便利かも。
Geckoとの比較機能もSleipnirのプラグインならではの機能だと思います。
その他にもH要素の表示、ブロック要素の表示、id,class属性値、ヘッダー内情報、コメントの表示、色情報などなど便利機能満載です。
Web Developerと合わせて使うとよりよいサイト作りができそう。
知ってそうでなかなか知らない、!DOCTYPE スイッチの標準準拠モードの有効化、無効化方法。
下の表のようにHTML のバージョンが指定されていないときや、指定されていてもURIを指定していないなどの違いがわかります。
| Label | Definition | URL あり | URL なし |
|---|---|---|---|
| !DOCTYPE なし | 無効 | 無効 | |
| HTML (バージョン指定なし) | 無効 | 無効 | |
| HTML 2.0 | 無効 | 無効 | |
| HTML 3.0 | 無効 | 無効 | |
| HTML 3.2 | 無効 | 無効 | |
| HTML 4.0 | 指定なし | 有効 | 有効 |
| HTML 4.0 | Frameset | 有効 | 無効 |
| HTML 4.0 | Transitional | 有効 | 無効 |
| HTML 4.0 | Strict | 有効 | 有効 |
| XHTML | 有効 | 有効 | |
| XML | 有効 | 有効 | |
| 認識されない !DOCTYPE | 有効 | 有効 |
ページの背景画像にレイアウトグリッドの画像を配置しておくと、CSSを使ってマークアップする時には非常に役立ちそう。
そんな便利な画像を公開しているのを見つけました。
テーブルと違い、CSSだと1pxのズレとかがなかなかわかりづらいし、気づかずそのまま公開なんてのもけっこうあるしね。
この背景があれば視覚的にわかるので、ズレも一発だな〜
コーダーはもちろん、デザイナーにも是非使ってほしい。
つか紙上がりのデザイナーの人にグリッドの概念を叩き込むのは至難の業なので、これを使って説明すると早そう。
追記：
レイアウトグリッド画像のブックマークレットを公開しているサイトをみつけました。
このURLをブックマークすれば既存のサイトの背景画像を簡単にレイアウトグリッド化できます。 超便利！！
IE7を検証した記事が載っていたのでご紹介。
全体的に基本的な事しか載っていないけど、逆にこの仕様をしらないと今後のサイト構築に影響するので一読しといたほうがいいかも。IE6のバグもついでにわかるしね〜
セレクタや属性セレクタの説明もされているので、わからない方はこの機会にどうぞ。
シンプルなIE7のハックをみつけたので
バージョン 6 以下の IE にのみ適用
* html body
バージョン 7 の IE にのみ適用
*+html body
バージョン 7 を含む全ての IE にのみ適用
*+html body, * html body
IE7 を含むモダンブラウザにのみ適用（バージョン 6 以下の IE を除外）
html>body
IE7 を除くモダンブラウザにのみ適用
html>/**/body
このCSS HACKは非常にいいのですが、ひとつ気をつけないといけないことがあります。
IE7も文書型宣言を記述してないと互換モードになってしまうってことです。
といってもIE5.xと同じに作ればいいってわけでもないみたいなので、過去に作ったサイトで文章型宣言が書かれていないと物凄くめんどくさい事になりそうですね。
いままでちゃんとHTMLを記述していたかがIE7の正式リリースで分かってしまうかも。。。
