CSSのガイドライン

参照元 ： taichi kaminogoya様

最近、自分以外の人のCSSをじっくり見る機会があって、
その時に思ったのは
「HTMLの書き方は、多少の差異はあれどあまり個人差はないが、
CSSは、書き方やファイルの作り方に個人差があるのではないか？」
ということです。

今まで、他の人の書いたCSSを研究してこなかったわけではありませんが、
顔が見える人（つまり知人）のCSSを見て比較する機会がほとんどなかったので、
CSSの書き方もその人の性格を表すんだろうか？なんていうことも思っています。

さて、本題ですが、
他人のことが気になると、自分のことも気になるわけで、
私はCSSを書く際にどうやってファイルを分けているのか？
セレクタはどういう書式で書いているのか？プロパティはどうなんだろう？
が気になり、

以下で現在の自分の作り方をまとめてみました。

NVDAを使ってみた

オープンソースのスクリーンリーダー、NVDA（日本語版）をインストールしてみました。
NVDAJp
OSはWindowsのみの対応です。

FlashDeveloperやDesignerがたくさんいる中で、なかなか自分独自の切り口が見つけられずにいたので、
せっかくHTMLとCSSにこだわりを持っているならアクセシビリティ方面に興味を向けてみた方が良いかと思い挑戦。

これが結構面白い！便利！
視覚に障害のある方にとっては、まだまだ使いにくいものなのかもしれませんが、
視覚障害者の方がどのようにサイトの情報を仕入れているのか勉強になりますし、
自分のサイトがどのように閲覧されているのか知ることができます。

サイトの見た目だけじゃなくて、文章の順番やレイアウトにも気を配らないといけませんね。

スムーズスクロールのサイト

http://www.bryankatzel.com/
（InternetExproler6以下非推奨）

Webデザインに関する情報収集中に見つけた面白いサイトです。

JavaScriptのスムーズスクロールと、
透過PNG画像を組み合わせて作られた、海外デザイナーのポートフォリオサイトです。

IE6以下では透過PNGが上手く表示されないので、サイトのデザインがかなり崩れます。
また、こちらで用いられているtinyscrolling.jsは、IE6互換モードでは上手く動かないそうです。

CSSを書くタイミング

さっそくですが、
みなさんがWebサイトを制作するとき、「CSSを書くタイミング」はいつですか？

私が普段サイトを作るときは、
１．テキストをHTMLでマークアップする
２．DIVでテキストを囲む
３．CSSを使って装飾・レイアウト
の順番です。

しかし、
2007年出版のとある書籍でCSSに関する記事を読んでいたところ、
そこではDIVを先に書き、CSSでレイアウトを確定させてから、
テキストを流し込んでいく、というような記述がされていました。

実際に研究室の同僚４名に聞いてみると、うち３名が
１．まず、DIVとCSSを使いレイアウトを確定
２．テキストを流し込みながら、CSSを指定
の順番で制作する、と答えました。

私は、ただの無機質なテキストデータが、CSSによってきれいなデータになる、という
画面の変遷を見るのがとても好きなので、HTMLから先に書くのかもしれません。
また、デザインにあまり興味がない、という理由もあるのではと思います。

どちらが良い、悪い、という問題ではなく、
自分のやり方だけがすべてではないんだ、ということを知りました。

みなさんはどちらでしょうか？

Firefoxのアドオンリスト

大学のパソコンを自宅環境で使用しようと思い立ったとき、
インストールしているアドオンをすっかり忘れてしまって困ったのでメモ。

題して、Firefoxアドオンランキング。

１．Web developer

便利。CSSのソースも、JavaScriptのソースもみれるし、画像の配置や
はたまた段組情報までもあらわにしてしまうオススメツール。
日本語版もどこかにあるそうなんですが、ちょっと分からないのです・・・。
私が使っているのは英語版です。↓
https://addons.mozilla.org/ja/firefox/addon/60

２．HTML Validator

HTMLが正しい文法で書かれているかチェックしてくれる。
普通のサイトだとほとんどが×マークだからとっても気になります。
あくまでも目安としてお使いください。
文法があってればなにをしてもいい！ってわけではないので。
https://addons.mozilla.org/ja/firefox/addon/249

３．IE Tab

Web制作をするとき、Firefoxで表示チェックして完成だ！と喜んだのもつかの間、
IEでページをみると大惨事、ということを何度も繰り返してきましたが、
このアドオンがあればFirefoxでも、IEの挙動を確かめられます。
https://addons.mozilla.org/ja/firefox/addon/1419

４．JSView

インストールすると、ブラウザの一番下の部分（ステータスバー、っていうんですかね）
に、SSJSとか言う表記が出て、サイトで使われているCSSと、JavaScriptを表示することが出来ます。
https://addons.mozilla.org/ja/firefox/addon/2076

５．緑のGoo

ブラウザが緑色のナチュラルな感じに変化。右上の検索窓で検索すると、
Gooの木というポイントが溜まります。溜まったポイントに応じてGooが環境保全団体に寄付をしてくれるんだそう。
正直この背景色は使いづらいが、エコに貢献したいので使用。
ちなみに、Goo検索はGoogleと同じアルゴリズムなので、基本的に検索結果は同じです。
https://addons.mozilla.org/ja/firefox/addon/6154

次点.IE NetRenderer

アドオンサーフィンしていて気になった。
みるところによると、IE６～８まで、すべてのレンダリングを確認できるとか！？
ちょっとインストールして試してみたいと思います。
https://addons.mozilla.org/ja/firefox/addon/6455