XREA <FreeWebHosting>
広告

CSS-FAQVol.4

良くある質問とその回答

リンクにマウスが乗ったら沈ましたい

方法はいろいろあります。リンクにマウスが乗った時というのはa:hover {}です。positionを変える方法もありますが、paddingmarginを弄る方法もあります。この場合の時は通常の時と乗せた時で左右の合計が同じようにしたほうがよい。a:hover { position:relative;top:1px;left:1px;}でもいいです。

訪問済みリンクでa:hoverが動いてないみたいです

IEのバグがあるので、疑似クラスの後に半角スペースを挿入します。それでもダメなら、記述の順番を変えてみましょう。

a:link    {color:#009;}
a:visited {color:#090;}
a:hover   {color:#900;}
a:active  {color:#909;}

:hover:visitedよりも先に書くと、内容が上書きされます。ですから、見本の順番で書くといいと思います。筆者も昔ハマりました。

HTMLの<dl compact>に相当するものは何?

display:compactですが、対応しているUAが少ないと思う。

見えなくしたいんですが

「見えなくする」効果のものは2種類あります。

display:none;は「存在しないもの」となるので、HTMLのコメントのような感じになります。Microsoft社のWebサイトにある、プルダウンメニューのようなものにも使われています(表示・非表示の切り替えをJavaScriptでやっている)。こんな感じにも使えると思います。

em {display:none;}
<em>CSS対応UAで見てみると…?</em>
hr {display:none;}

visibility:hidden;は見えませんがレイアウト上は存在しているように扱われる。その点がdisplay:none;と違うところ。「暗記シート」として使えると思います。

em {visibility:hidden;}
<q>日本国民は、正当に選挙された<em>国会</em>における代表者を通じて行動し</q>(省略)

CSSを理解する時に必要なものは?

ソースコードを整形済みテキストにしたい

code {white-space:pre;}にしたらいいだけの気がしますが、code要素はインライン要素なので、white-spaceを使うことができません。pre要素で包むか、div要素に包んでwhite-spaceか、どちらかをとることになると思いますwhite-spaceは全ての要素に使用できます。

レイアウトのためにDIV要素を多用するのって良くない?

良くない。CSSで装飾するためにdivを多用するのは本末転倒。HTMLをCSSで装飾する、というのが本来の使い方。CSSで装飾するためにHTMLを記述する、というのは逆だろ!

CSSが<input type="file" >に適用されない

IEではデザインを変更できない仕様だそうです。現状ではファイル参照ボタンを弄れない。対応を待ちましょう(数年単位でかかるかも知れません)。

テーブルの横列を交互に違う色にしたい

これはclassを使えば簡単。でも、一行とびの列が同じ関係とは言いにくい。未確認だけどtr + trをうまく使えば実現できそう。ただ、IEは未対応。疑似クラス:nth-childにevenとoddを指定するといいそうですよ。

CSS3あたりで「n番目の子要素」といった選択ができるようになるかもしれない。

DOCTYPEスイッチって何ですか?

DOCTYPE宣言でCSSやHTMLの解釈が異なるように設計されているブラウザの機能です。実際にどのように変化するかは自分で調べてください。DOCTYPE Switchを持つものとしては、WinIE6,MacIE5,mozillaがあります。

傍点を打ちたいんですが

筆者の知っている限り、ruby要素を使うしかない。しかし、HTML4.01には存在しないので、XHTMLにする必要がある。でもルビの内容が「・・・」では、ルビ対応音声ブラウザを使用中に困ったことになるかもしれない。em {border-top:medium dotter #000}を使うこともできると思うが、一文字一文字に「・」が対応しないので、ここはあきらめるしかないのか。

テーブルレイアウトのほうが良くないか?

テーブルレイアウト教の逆襲

2ch.Web製作板のCSS質問スレにて、テーブルレイアウト派の書き込みを見つけました。発見の度にこのように載せたいのですが、場所の都合で乗らないこともあります。

cssなんか無理して使っても、環境によってボロボロだし、結局はtableレイアウトなら大抵のブラウザで意図したように読めるし、htmlの正しさなんて言われてもねえ。悪いのはユーザー(製作者・閲覧者)ではなくメーカーやw3cなんだから、そこらへんが整備されない限りユーザーにhtmlの正しさを説いてもダメだね Webの真の普及なんか遠い。もうどこみまわしてもtableだし。

HTML 4.01 Transnational + Table レイアウト がベストって事

cssなんか無理して使っても、環境によってボロボロだとあるが、NS4.7xは仕方ない。あれはどうしようもない。テーブルも音声ブラウザで読み上げるとむちゃくちゃになるところが多いと思います。テーブルを全部読み込み終わるまでは表示されないことが殆どなので、ナローバンドでは非常にきつい。tableレイアウトなら大抵のブラウザで意図したように読めるそうだが、CSSだって同じ。CSSは装飾するだけなので、HTMLさえかけていればそれこそケータイでもPDAでもゲーム機でも読める。テーブルレイアウトはHTMLさえ正しくかけていないので、PDAなど画面が小さければ非常に読みにくい。htmlの正しさを無視するなら、ユーザーが不便になるだけ。何度も言うが、キチンとしたHTMLのほうがユーザーに優しい。理由は各自調べること。

Transitionalなんていっていないで独自のDTDでも宣言したらどうだ?だからTransnationalなんてのを使ってるんだ?Transitionalじゃなくて。

CSSだと行間を空けたり、余白を設定したり見やすくする工夫が数多くできるんだけども。

でも、悪いのはユーザー(製作者・閲覧者)ではなくメーカーやw3cなんだから、そこらへんが整備されない限りユーザーにhtmlの正しさを説いてもダメだねは同意。NS4.7xのような悲惨ブラウザが無ければ、そしてHTML4.01やCSSに完全に対応していたら、状況はかなり違っていただろうね。シェア90%というブラウザでさえHTML4.01strictに完全に対応していないんだから。

プロでお金を取っている場合でもできるだけstrictな記述をしてほしいが(不思議マークアップ禁止)、クライアントの要求を考えるとできないんだろう。客ももうすこし勉強してから頼むべきか。