ウェブデザインに役立つ、いけてるサイト、かっこいいサイト、おしゃれなサイト、クールなサイトなどを集めたWEBデザイナーのためのWEBデザインのリンク集。WEBデザインの参考にどうぞ
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と合わせて使うとよりよいサイト作りができそう。
ページの背景画像にレイアウトグリッドの画像を配置しておくと、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の正式リリースで分かってしまうかも。。。
最近まで自分も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側に書くしかなくなるんです。
角丸を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;}
とりあえず下の例をネットスケープで見てもらえば分かると思います。
ちなみにNetscape7でもNetscape6でも同じ現象は起きます。
追記：
max-widthで100%指定をする方法でも回避ができるとの事。
こっちの方がスマートっぽいけど、max-widthを100%以外に設定するときはNGかな。。。 まぁそんなにないか
まだ知らない人もいるかと思うので、とりあえずエントリー。
今までWinIEだけに適用できていたアンダースコアハックですが、IE7になるとこれが使えなくなります。
今まで使っていたサイトには大きな打撃になるやもしれません。
まぁ元々アンダースコアハックを使わないと表示崩れを起こすIEに問題があったのでIE7は正常に戻っただけなんですけどね。
デジタルARENAの記事にわかりやすく書いてあるので見てみるといいかも。
»Internet Explorer 7ベータ2の不具合からWebデザイン業界の混乱が見えてきた / デジタルARENA
