＜＜ |一覧 |リンク集 |ヘルプ |＞＞

一覧 ＞（1 ＞2 ＞3 ＞4 ＞5 ＞6 ＞7 ＞8 ＞9 ＞10 ＞11 ＞12＞13）

スタイルシート（CSS）のトラブル、バグ集

トラブル・バグ一覧

1. 幅がおかしくなる

   スタイルシートで幅や長さなどを決めると、異常が起きたという方はこちらをご覧下さい。

   1. 文字が定めた幅に従わない。
   2. 思い通りの幅にならない。
   3. 幅を定めた背景から、文字がはみ出したりしてしまう。
   4. 幅が広がらず、文字が隠れてしまう。

2. 文字などが重なってしまう

   文字が重なって読めなくなってしまったという方はご覧下さい。

   1. 上の行と下の行が重なる。（または離れすぎる）
   2. 段落、またはブロック単位で重なってしまう。
   3. 画像と文字が重なる。

3. 思い通りの文字（フォント）が表示されない

   変な記号になってしまい、文章が読めなくなったという方はこちらへ。また、フォントをうまく変えられない人もこちらへ。

   1. 文字化けが起きた。
   2. 文字の書体をうまく変えることが出来ない。
   3. 文字があまり太くならない。
   4. リスト要素の頭の記号がおかしい。

4. 背景が乱れる

   背景に色を付けたり、画像を付けると、乱れてしまったという方はこちらへ。

   1. 背景色が全体に塗られない。文章部分だけに塗られてしまう。
   2. 背景が乱れてしまう。
   3. 背景から文字がはみ出したりしてしまう。
   4. 背景に色を付けると、端にスキマが出来る。
   5. 枠線や、背景に色を付けると、縦長になるなど、おかしな表示になる。
   6. 背景に画像を付けると、前後、改行しないはずのインライン要素が、改行されてしまう。
   7. インライン要素に付けた背景画像が、文章部分だけではなく、全体に付けられる。

5. リンクやフォームが出来なくなった。

   スタイルシートを使ったが、リンクが働かず、目的のページへジャンプしないという方はこちらをご覧下さい。また、フォーム要素の機能が働かない方もこちらへ。

   1. リンクが働かなかった。
   2. リンクがずれている。つまり、別の所をクリックしなければならない。
   3. フォームが普通の文章となって、入力できなくなる。

6. 文字の大きさが思い通りに変えられない

   font系のスタイルシートを使っても文字の大きさがうまく変えられなかった方はこちらへ。

   1. 「font-size:small」を使ったが、文字が小さくならない。
   2. 文字が思い通りの大きさにならなかった。
   3. Hx(xには英数字）要素の大きさが狂う。
   4. 「font-weight」を使ったが、文字があまり太くならない。
   5. 文字が小さすぎて、つぶれてしまう。

7. 位置がずれたり、配置がうまくできない

   スタイルシートを使うと、文書や、画像のおく場所を指定できます。うまくいかなかった方はこちらへ。

   1. 「text-align」をtable要素に使いたいが、ブラウザによって表示が異なってしまう。
   2. 勝手に、前後が改行される。
   3. 「float」を使っていると、1行下になってしまう。
   4. リストにおいて2つ目の項目以降から位置がずれる
   5. 表がずれてしまう
   6. 中寄せできない
   7. 「float」に関すること。

8. 余白の調整がおかしい

   「padding」、「margin」を使っても、余白が出来ないなど。

   1. 「margin」を適用させたが、余白が出来なかった。
   2. 上の段落と下の段落の余白が重なってしまったが、ブラウザごとに異なる。
   3. 「padding」を適用させたが、すこし表示がおかしくなった。

9. 継承

   スタイルシートでは「継承」というものがあります。これについて解説、問題点を挙げていきます。

10. 線がおかしい。
    1. ワク線が表示されない。
    2. ワク線が消せない。
    3. 線がワクに付かず、しぼんでしまう。
    4. 段組をすると、線の表示がおかしくなった。
    5. 下線の色がおかしくなる。
11. 強制終了したり、フリーズするなど異常が起きる。
    1. 「@import」を使うと、異常が起きた。
    2. HTMLの文書が読み込まれない。
    3. 突然、強制終了した。

12. スタイルシートが適用されない

    スタイルシートを使ってみたけど、何も変わらなかったという方はこちらへ。

    1. ほとんどのブラウザで見たんだけど、適用されなかった。
    2. 一部特定のブラウザで適用されなかった。（例えば、インターネットエクスプローラーでちゃんと表示されたのに、ネットスケープでは適用されなかったとか）
    3. 他の要素では適用されるのに、一部の要素では適用されない。

13. 文字や画像などが消えてしまった。

    スタイルシートを使うと、文字や画像などが突如、消えてしまった。

    1. 項目(li要素）の頭に付いている記号（点や数字）が消えた。

以下の条件のどれか1つでも促せば、「トラブル」と認め、ここに載せていきたいと思います。

• W3Cが定めたCSSの最新仕様に従っていない。
• ブラウザによって、表示のされ方が違う。
• 初心者が陥りやすい問題（ブラウザがCSSの仕様に従っていたとしても）。

確認に使用したブラウザ

バージョンの数字が小さければ小さいほど、古いブラウザです。例えば、6.05は6.0のあとに公開されたものです。バージョンは小数点を付けるのが普通です。例えば、6.0から、ちょっと手を加えて6.1に。6.1から大幅に改良されると7.0となります。

このサイトにおける表記

ブラウザの名前、バージョン等。

オペラ6.0

Opera version6.0（英語版を日本語化したもの。Windows98）

オペラ6.05

Opera version6.05（Build:1140。日本語版。Windows98）

インターネットエクスプローラー4.0

Internet Explorer4.0（Version:4.72.3110.1,更新バージョン:SP1a;2636;日本語版。Windows98）

（ウィンドウズ板）インターネットエクスプローラー5.01

Internet Explorer5.01（日本語版。Windows98）

インターネットエクスプローラー5.5

Internet Explorer5.5（日本語版。Windows98）

インターネットエクスプローラー6.0

Internet Explorer6.0（日本語版。Windows98）

マック板インターネットエクスプローラー5.1

Internet Explorer5.1 Macintosh Edition（日本語版。Mac OS9。G4）

ネットスケープ4.04

Netscape Communicator4.04（日本語版。Windows98）

ネットスケープ6.1

Netscape6.1（日本語版。Windows98）

ネットスケープ7.0

Netscape7.0（日本語版。Windows98)

注意点として、たとえ、同じ会社の同一ブラウザで、バージョンが同じであったとしても、OSが違うブラウザではバグ等が違う結果になることがあります。他のOSユーザの方は、ぜひ、確認を。また、状況によって、バグを再現できないこともあるかもしれませんので、お気をつけ下さい。

1 ＞2 ＞3 ＞4 ＞5 ＞6 ＞7 ＞8 ＞9 ＞10 ＞11 ＞12）

＞＞スタート地点に戻る

＞＞関連リンク集が見たい

simple by dhr（Eメールでdhrname@mail.goo.ne.jp）