個人的に思う、よろしくないCSS～ CSS革命前夜1 ～

画像を絶対配置で背景の代わりにしたり、切り貼りしたり。

絶対にやってはいけません。これだけは私見を「押し付け」たい。ユーザースタイルシート使いとして。そもそも、飾りの為の画像は、img要素に相応しくありません。「どこでも配置モード」はユーザーの敵です。

同じ文字列を幾つも重ね合わせて影文字を作成

ノーコメント。

この他、要するにCSSの問題ではなくてHTMLの書き方がまずいケース。

文字のサイズをやたら小さくする

例 :

font-size:7px;

背景色と文字色（前景色）の色が似通っている

キャプチャなどをとって、グレースケール（白黒）でみてみましょう。読めなくなったら、その配色は間違いです。全く読めない人がいるということです。

背景画像をテクスチャとして使う

ほとんどの場合文字を読みづらくするだけです。しばしば素材系サイトで配付されているものは、縦、あるいは横に並べるもので、背景全体に敷き詰めるものではありません。自分でその背景素材を敷き詰めて使っている素材屋がありますか? ないでしょう。利用者を馬鹿にしているのですよ。

画像を非表示にすると？な使い方

「画像OFFにするくらいならCSSもOFFにしろよ」などと言ってはいけません。サーバーが不調で、画像がなかなか落とせない場合も考えてください。画像を非表示にしてもきちんと意図の伝わるデザインにすべきです。

セレクタの前に全角空白

パースエラーになります。手持ちのIEは補正するので、気づかない人もいるかと思いまして。

float指定あり、かつwidth指定無し

以前やってました。Opera6等で見ると横スクロールバーが際限なく伸びます。CSSの文法の問題でして、これについては、Google 検索結果: float width "ねこめしにっき"の各記事を参照。

文字サイズ固定

状況によっては、文字サイズを小さくしたい時もあります。そもそも文字サイズを固定できるのは、Internet Explorerに対してだけのような気もします。単位はem、%を使いましょう。 small、midium、largeなどのキーワードでも構いません。

訪問済みリンクが、未訪問リンクと同じデザイン

Nielsen博士、さすがに私も紫には抵抗があります。しかしなんとか工夫して区別のつくデザインにすべきです。

幅を絶対値で固定

例：

div{ width:400px }

文字サイズを変更するとやたら見づらくなることが多いです。pxは、解像度に対する相対的な単位ですが、window幅に対しては絶対的な単位であると言えます。%を使いましょう。

リンクの下線を消している

リンク探しゲームに興味のない人もいます。私です。明らかに分かる部分で消しているのなら問題ありません。しかし、その基準に個人差があることを忘れてはいけません。

訪問済みリンクになったとたん、文字が読めなくなるくらい目立たなくなる

区別すれば良いと言うものではありません。

背景画像固定

何かがくっついてくると恐怖を感じる人もいます（大袈裟）。私の知る限りの全てのブラウザは、背景画像が固定されているとスクロールが重くなります。多用しがちですが、読みやすさを徹底的に追求するなら控えた方が良いかも知れません。

bodyのスクロールバーを消して、擬似position:fixed

例

body{ overflow:hidden }
div{ overflow:auto ; width:??? ; height:??? }

私も一部で使っていますが、これもほとんどのブラウザでスクロールが重くなる原因となります。

広範囲にposition:absoluteを指定

下手をするとホイールクリックが機能しなくなります。

広範囲にfilter

実に様々な不具合が出ます。処理系への負担は絶大です。

body{ font-size:1em }

昔私もやってました。文字の大きさを変更すると、ものすごい勢いで変化します。狙ってやるのはアリかも知れません。

blockquote{ padding:??? }

IEで、だんだん文字がずれていきます。blockquote p{ margin:??? }として回避します。なんでpなの？とか言わないでください。

font-family:sans-serif

IE5.5で文字化けが発生します。sans-serifのみの指定は止めておいたほうが無難です。複数指定する際には、sans-serifは最後にします。（例 : font-family:"ＭＳ Ｐゴシック", sans-serif）

カーソルの形を変える、スクロールバーの色を変える

普段、使い慣れたカーソルやスクロールバーなどの「部品」を突然変更されるとわずかながら混乱の元になります。特に、カーソルの形状は使いみちをよく考えなければ全く意味を持ちません。十字カーソルはピクセル単位でユーザーが座標を正確にポイントする際に用いるものだし、矢印カーソルはウィンドウのリサイズ時に用います。余程の「意味」があるならともかく、「かっこいいから」使うものではありません。

左あるいは右にやたらとスペースを取る

文字が左右どちらかに寄っていると気分が落ち着かない人がいるのです。私です。

カラフル

落ち着かない人がいるのです。私です。せめて配色について勉強なさってからにしてください。

暗い背景色

落ち着かない人がいるのです。私です。鬱な内容の文章を演出するのは結構ですが、そういう意図がないのなら代替スタイルシートも用意してください。是非。ちなみに、User-Javascriptで自分で勝手にクッキーを発行しますので、切り替えスクリプトを用意しなくても大丈夫です（私だけ）。

a:hoverを綺麗に仕上げすぎる

小気味良いので、しばらくポイントしたりはずしたりして遊んでしまい、集中できないのは……
私だけのような気もします。

a:hoverでやたら派手な演出

• ハイパーリンクは最初から目立たせます。
• ポイントして、クリックするまで一体何秒あると思いますか。
• ポイントするまでの過程が大切だとは思いませんか。
• a:hoverでそんなにユーザビリティが上がると思いますか。

a:hoverでの派手な演出は、特殊な効果を狙う場合に限定してください。

a:hoverの反応が遅い

何故か反応するまで待ってしまうのは、私だけでしょうか。

段組

これは、伝えたい情報が溢れている場合に使います（ニュースサイト等）。段組にする意味を考えて使ってください。 ちなみに、段組されると文章に集中できない人がいます。私です。新聞は見慣れているので大丈夫です。

font-size:90%;

文字が小さめだと「クール」でしょうか。しかし、どうせ文字サイズは変更されてしまいます。中途半端な指定をするより、1em、100%、Midiumなどの中くらいのフォントサイズを指定しておいたほうが多くの人の好みに適合します。変なブラウザのせいで「100%」以外は弱冠の問題がありますが。ちなみに、ＭＳ Ｐゴシックは配色を間違えなければそう汚いフォントではありません。汚く見える場合、十中八九配色を間違えています。

MS UI ゴシック

几帳面な印象を受けます。あるいはコミカルな印象を受けます。下手をすると馬鹿っぽく見えますので注意してください。
使いこなすのが難しいフォントです。

ＭＳ 明朝

ＭＳ 明朝は和風のスタイルシートでないと全く似合いませんので注意してください。配色にも気を使う必要があります。Macintoshユーザさんが想像している以上に汚いフォントです。このフォントを使っていて、文字数が多いとレンダリングする時にハードディスクが悲鳴をあげるのは私の環境（Win + IE5.5/6.0）だけでしょうか。

不必要に凝ったことをする

CSSでやたらと凝ったことをする。裏技的なものを研究する。HTMLを弄らない限りにおいてそれは結構です。結構なんですが、洗練されたものを追及することも覚えてください。デザインに振り回されるのではなく、サイトイメージを洗練してください。ユーザビリティの追求にも関心を持ってください。

既に、どういったデザインが見やすいのかについては、長い時間をかけてかなり限定されているはずです。CSSを弄るうちに発見した奇抜なデザインというのは所詮一過性のものであると認識べきです。洗練された中で、いかに個性を発揮するかを考えてください。それこそ、クールなデザインですし、時間の無駄も大幅に節約できます。きっと「残る」CSSになりますよ。

やたらとCSSファイルを小分けにする

お。綺麗なCSSだな。と思ってファイルを見てみると、@importが4つも5つも。

ブラウザ対策でしょうか。鳩丸倶楽部のCSSを見習ってください（回避の仕方）。ブラウザ対策としての@importは、悔しがりながら使わなければなりません。「ブラウザ対策って何ですか。」と言いつつ、さりげなく回避するのがベストです。回避しないのも一興。

あるいは管理しやすくするためでしょうか。ローカルで管理してみてはどうでしょうか。便利な管理ソフトは探せばあるものです。

無闇に分けると表示処理がそれだけ遅くなります。CSSを用いている場合、CSSファイルの読み込みを終えるまでレンダリングが開始されません。

p{ text-align:center }

なぜそんなに本文をセンタリングしたいのか、非常に不思議です。なにが狙いなのでしょうか。全部プロローグなんでしょうか。TV版ベルセルクですか。それとも全部詩だったとか。

有益なご指摘を頂いております。有難うございます。

• izumi様 : IE5.5のフォントの問題のご指摘

Effective Use of Cascading Style Sheets (Alertbox July 1997)

「Implementation Advice」に好ましくない使い方が列挙されている。

さて、これらを一つでも満たしている場合、私はユーザースタイルシートで対処するわけです。それゆえ実は何も問題はありません。とくに最後に挙げた使い方については、「使い方次第」だと思います。憎まれ役を買って出たということで。

次に、クールなCSSを紹介します。