WEBデザインに役立つ、いけてるサイト、かっこいいサイト、おしゃれなサイト、クールなサイトなどを集めたWEBデザイナーのためのWEBデザインリンク集。WEBデザインの参考にどうぞ

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

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

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

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

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

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

要因としては、

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

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

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

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

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

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

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

以前から導入してみようと思っていた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;を使おうよ！

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

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

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

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宣言なし

最近は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を排除のサンプル

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

»Hide CSS from browsers :: @import

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はいれたくないしね。
ま、状況に応じて使うって感じだな〜

メモがてらCSSハックの一覧を作ってみました。以下”iframe”で記述。
モダンブラウザなら全部緑になってるはず。
挙動が違ってたら教えてください。

木達さんブログ経由で見つけた情報。
なんでも、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と合わせて使うとよりよいサイト作りができそう。

»Fenrir Developer Team Labs

»ochanoco blog >> 『Hawkeye』使ってみた。

ページの背景画像にレイアウトグリッドの画像を配置しておくと、CSSを使ってマークアップする時には非常に役立ちそう。
そんな便利な画像を公開しているのを見つけました。

テーブルと違い、CSSだと1pxのズレとかがなかなかわかりづらいし、気づかずそのまま公開なんてのもけっこうあるしね。
この背景があれば視覚的にわかるので、ズレも一発だな〜

コーダーはもちろん、デザイナーにも是非使ってほしい。
つか紙上がりのデザイナーの人にグリッドの概念を叩き込むのは至難の業なので、これを使って説明すると早そう。

追記：
レイアウトグリッド画像のブックマークレットを公開しているサイトをみつけました。
このURLをブックマークすれば既存のサイトの背景画像を簡単にレイアウトグリッド化できます。　超便利！！

»レイアウト用グリッド画像

IE7を検証した記事が載っていたのでご紹介。
全体的に基本的な事しか載っていないけど、逆にこの仕様をしらないと今後のサイト構築に影響するので一読しといたほうがいいかも。IE6のバグもついでにわかるしね〜
セレクタや属性セレクタの説明もされているので、わからない方はこの機会にどうぞ。

»【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (MYCOMジャーナル)

シンプルなIE7のハックをみつけたので

バージョン 6 以下の IE にのみ適用

* html body

バージョン 7 の IE にのみ適用

*+html body

バージョン 7 を含む全ての IE にのみ適用

*+html body, * html body

IE7 を含むモダンブラウザにのみ適用（バージョン 6 以下の IE を除外）

html>body

IE7 を除くモダンブラウザにのみ適用

html>/**/body

引用元：Lucky bag::blog: IE7 を含むモダンブラウザ向けの CSS ハックまとめ

このCSS HACKは非常にいいのですが、ひとつ気をつけないといけないことがあります。
IE7も文書型宣言を記述してないと互換モードになってしまうってことです。

といってもIE5.xと同じに作ればいいってわけでもないみたいなので、過去に作ったサイトで文章型宣言が書かれていないと物凄くめんどくさい事になりそうですね。
いままでちゃんとHTMLを記述していたかがIE7の正式リリースで分かってしまうかも。。。

»文書型宣言あり（XHTML）

»文書型宣言あり（HTML）

»文書型宣言なし

最近まで自分もstyle要素やscript要素にコメントをつけていました。
でももうコメントはいらないんじゃね？と勝手に思い今はコメントを記述していません。

以下コメントをやめた理由。
---
HTML 4ではスタイルシートをサポートしていないブラウザのためにコメントを推奨していた。なぜならサポートしてないとテキストがそのまま表示されちゃうから。
しかーしXHTMLではコメントは使うなと書いてる。なぜならstyle要素内もPCDATAとして扱われるようになったため。HTML 4だとstyle要素内はCDATA
現状XHTMLで記述されているページでstyle要素にコメントを使ってもIEやFirefoxなどはちゃんと解釈してくれる。互換性のためですかね
でも今後出てくるブラウザでもコメントを解釈してくれるとは限らない。
スタイルシートをサポートしていないブラウザはHTML3.2以前のブラウザのはず。きっと。HTML3.2でstyle要素は予約されていたため
HTML3.2以前に出たブラウザはIEやNNのバージョン3なのでユーザーはほんの僅かなはず。つかバージョン4もCSS切ってるんだから問題ないよね
CDATA セクションを使うって手もあるけど、IE6やその他のブラウザで正しく解釈してくれないのでNG。
ってことはコメントを使わない方がいいよね。
---
まぁこの様な理由がありコメントアウトはやめました。それが正しいのか間違っているのかは分かりませんけど、、、

たぶんこんな事を言いたい人もいるはずなので、一応。
そもそもHTMLにstyle要素を記述するのが悪いんだ！外部にスタイルをもてばいいじゃん！なんて言う人も結構いると思います。
しかーし、個人で制作している分には問題ないけど、仕事となると話は別。サイトの仕様上、外部スタイルシートには触れられないとか、外部スタイルシートを埋め込めないとか、あるはず。
そうなるとHTML側に書くしかなくなるんです。

»PCDATA
»CDATA
»CDATA セクション

角丸をCSSで実現する方法を紹介しているサイトはいくつかあります。
その代表的なのがNifty Corners。
だけど空タグがあったりするから却下。
ここも空タグ入ってるから却下。
しかもこれらのサイトはボーダーがつけられない。

自分がやりたいのは、というかやらなくてはいけないのは、ボーダーがあってグラデをしていて、なおかつ縦横可変できる見出し。
この縦横可変ってのがクセモノで、4つのコーナーをちゃんと割り当てないと可変にはなってくれないんです。。。
しかもボーダーつけなきゃいけないし。。。

考え抜いたあげく、できたのが下のリンクになっています。
空タグは無くなったけど、ちょっと微妙です。
四隅にイメージをもってこなきゃいけないので、divが入れ子すぎる。
主要ブラウザはほぼOKで、IE5.0だけちょっと崩れます。でも可読性が失われることはないのでOKということで。
あとdivの入れ子はどこでも使うのでこれも見逃してもらうとして、、、
でももうちょっと考えなくては、、、

»角丸で見出し（縦横可変、ボーダー、グラデあり）

フルCSSでサイトを構築する事が当たり前になりつつある今日この頃。

先ほどCSSでの落とし穴を見つけてしまいました。

よくサイト全体をセンタリングするテクニックがありますが、ここに落とし穴。

CSSを記述するときに一度html要素やbody要素のマージンやパディングをクリアーしてから書く人が多いと思うのですが、その行為が落とし穴です。

以下が、現象と回避策となっています。

「Netscapeでコンテンツ幅以下にブラウザを縮めると縮めた分左に隠れてしまう」という現象が起きてしまうらしいです。

解決方法はpaddingの設定を0以外にして、コンテンツの幅をbodyにも指定してあげます。

body {margin:0;padding:0 1px;width:700px;}

引用元：ochanoco blog >> よく使うCSSのプロパティ初期化で

とりあえず下の例をネットスケープで見てもらえば分かると思います。

ちなみにNetscape7でもNetscape6でも同じ現象は起きます。

追記：

max-widthで100%指定をする方法でも回避ができるとの事。

こっちの方がスマートっぽいけど、max-widthを100%以外に設定するときはNGかな。。。　まぁそんなにないか

»左端が消える

»左端が消えない

»左端が消えない（max-widthを100%指定）

»Mozilla 5.0系 CSSバグリスト

まだ知らない人もいるかと思うので、とりあえずエントリー。
今までWinIEだけに適用できていたアンダースコアハックですが、IE7になるとこれが使えなくなります。
今まで使っていたサイトには大きな打撃になるやもしれません。
まぁ元々アンダースコアハックを使わないと表示崩れを起こすIEに問題があったのでIE7は正常に戻っただけなんですけどね。
デジタルARENAの記事にわかりやすく書いてあるので見てみるといいかも。

»Internet Explorer 7ベータ2の不具合からWebデザイン業界の混乱が見えてきた / デジタルARENA

今日のCSS Niteは行ったほうがいいです。間違いない。

»CSS Nite公式ブログ: CSS Nite Vol.8（2006年5月）次回

以前にIE7 Beta2でikesaiを見たところナビゲーションリンクの挙動がおかしいと報告ありましたが、IE7 Beta2 日本語版にアップデートしたら通常通り元に戻っていました。
なんでもCSSの@importのバグだったそうです。なんともIEらしいというかなんというか。。。
まぁそのバグは解決したのでいいのですが、もう一つ衝撃的な事が起こりました。
何故か右側部分がウィンドウからはみ出ているではないですか！
これはイカンと修正を試みますがまったく直らず。普通にwidthを100%にしているだけではみ出すなんてありえない。
いや、IEだからありえるのか？でもこんなバグがあるわけがないとしばらく悩んでいたら。
なんとなんとIE7に付いているズーム機能がデフォルトで125%になっていました。。。
なぜ125%になってやがんだ〜〜って叫びたかったです。
しかもこれってCtrl + スクロールボタンでないとズームってできないのかな？
ステータスバーにそんな機能なかったんだけど。

ついでにIE7をスタンドアローンで使うための技を掲載しているサイトをご紹介。
ちょっとメンドクサイ作業は毎回発生しますが、IE6をまだ使いたいという人にはおススメ。
IE7 beta2 previewと書いてありますが、僕が試したところIE7 Beta2 日本語版でもちゃんと動作しました。ですが一応自己責任でお願いします。

»IE7 beta2 preview をインストールしないで使う

CSS Nite Vol.7に行ってみました。
Niteのプレゼンはあまり参考にはならなかった、鷹野って人のCSSロールオーバーもウ〜ンって感じだったし、、、、その後のLiteは逆にとても有意義な時間でした。
ミツエーリンクスの木達さん、WEB標準の教科書を書かれている益子さん、ビジネス・アーキテクツの森田 雄さん、web creators編集者の方、シックス・アパート方などなど、WEBの一線で活躍している方々が大勢いました。
このような交流の場ってやっぱり大事ですね〜
いろいろな方がいるので話していて面白いし、知り合いの知り合いとかが結構いたりしてWEB業界って案外狭いな〜　みたいな

来月も参加しよ

Internet ExplorerのCSS脆弱性をついて攻撃される手法らしいです。

これはCSSをインポートする事で、端末の情報などを抜き取られてしまうので、Javascriptを切っててもやられてしまうのでたちが悪い。

ちょっと前まではmixiのpost_keyもこの手法で抜き取られたりしてたんだってさ。（いまは対応してるみたいだけど）

IT用語辞典の「注目用語ランキング」で昨日からいきなりランクアップしていたので気になって見たらこんなんでした。。。

何かあったのかな？

CSSXSSとは

　Internet Explorerのスタイルシート(CSS)の呼び出し機能に潜む脆弱性をつく攻撃手法。攻撃者は不正なCSSインポートを含んだWebページを閲覧させることにより、被害者のコンピュータから不正に情報を入手することができる。

　CSSでは別ドメインに置かれた外部スタイルシートファイルを「@import」宣言などを使って読み込む(インポートする)ことができるが、Internet Explorerでは外部ファイルの種類を自動判別するため、ファイル名のわかる“{”が入ったテキストファイルを自由に抜き出せてしまう。インポート方法は@import、addimport、link要素、xml-stylesheetなどが知られ、インポートされるファイルがShift-JISで記述されている場合は、文字コード的に“{”と類似するカタカナの「ボ」や「マ」などが入っていても抜き出されてしまう。

引用元：CSSXSSとは 【CSS Cross Site Scripting】　─　意味・解説 ： IT用語辞典 e-Words

みずほ証券のサイトなんですけど、いや〜このサイトはヤバイですね。
CSSでレイアウトされているのはもちろんなんですが、文字のサイズを変更するとサイト全体が拡大します。
IE5シリーズでも全然崩れないしね。
このサイトを見たとき、俺はアリンコだなと思いました。

»みずほ証券