制作者の活動(PR)。

アイドル女優・堀北真希ちゃんにうさみみを着けたオリジナルキャラクタ。次ぎ アイドル女優・堀北真希ちゃんにうさぎの耳を着けた制作者のオリジナルキャラクタ
主な作品

人気女優をモデルにした創作キャラクタのイラスト例とそれを組み込んだアニメーション動画

内容がボックスに入り切らない場合。

ポジショニングを駆使して高度なレイアウトを行う場合、多くのボックスはその横幅(widthプロパティ)と高さ(heightプロパティ)の双方を指定することになるでしょう。

この場合問題になるのは、ボックスに内容が入り切らなくなった場合です。閲覧者の環境に依っては文字が大きいため入り切らないとか、ブラウザの実装しているフォントの問題で内容の最後の一文字が入り切らないと言うことは充分予想できます。

このため、入り切らない場合の挙動を指定することが求められます。

内容がボックスに入り切らない場合・目次。

overflowプロパティ…内容が入り切らない場合の処置を指定。

overflowプロパティは、内容が入り切らない場合にどのような処置を執るかを指定します。

overflowプロパティが取れる値としては主に以下のものがあります。

visible

overflowプロパティを指定していない場合と同じです。入り切らない分ははみ出して表示されます。

hidden

入り切らない分は切捨てられて表示されません。

scroll

ボックスをスクロール可能にします。スクロールで入り切らない分も見られることになります。

auto

明確には指定されていませんが、はみ出す場合に限りスクロールにすべきとされております。

但し、あくまでもすべきと言うことなので、実際の処理はブラウザによって異なります。

overflow: scroll;プロパティでスクロールさせる場合の注意事項(平成16年 4月18日全面書換)。

overflowプロパティに対応していないブラウザ。

オペラ 6.x，ネットスケープ 4.x，インターネットエクスプローラ4.x及びマッキントッシュ版インターネットエクスプローラ5.xではこの処理は満足に利用出来ません。

ネットスケープ 4.xでは他のCSS対応ブラウザのCSSをそのまま使うことは不可能で、専用のCSSでは使わないようにすればいいだけの話しですが、他のブラウザではそうは行きません。

ここではこれらのブラウザでの対策を考えてみましょう。

ネットスケープ 4.x及びインターネットエクスプローラ4.x/マッキントッシュ版5.x対策：@media規則で弾く。

インターネットエクスプローラのうち、4.xとマッキントッシュ版5.xはいずれも@media規則の内容を認識できません。

また、ネットスケープ 4.xも同様です。

そこで、@media規則を用いることで、適切に機能しないプロパティを弾くことが出来ます。

オペラ 6.x対策 1：「overflow: scroll;」の代りに「overflow: auto;」を利用する。

オペラ 6.xでは「overflow: scroll;」とすると、はみ出した内容が見えなくなってしまいます。

そこで「overflow: auto;」を利用します。

こうすれば他のブラウザでは必要に応じてスクロールが発生しますし、オペラ 6.xではスクロールを発生させずにはみ出させて表示させます。

「overflow: auto;」を用いた場合の問題点。

ところが「overflow: auto;」を用いた場合、インターネットエクスプローラで問題が生じます。

インターネットエクスプローラでは、スクロールとならずにボックスを押し拡げてしまうからです。

ただ、ボックスの横幅/高さを制限した場合はスクロールが発生するので、widthプロパティやheightプロパティを併用するといいでしょう。

但し、この場合、他のブラウザでおかしくなる可能性があります。対策としては、プロパティ名の前に「_」をつけることで、インターネットエクスプローラでしか認識しないプロパティ名にすることが出来ます。

例えば、横方向にスクロールを発生させたい場合は、以下のようにします。

セレクタ {
    overflow: auto;
    _width: 100%;
        …
    }
もう一つのやり方。

もう一つのやり方としては、インターネットエクスプローラでも問題の無いプロパティ定義を予め当てておき、その直後に本来当てるべきプロパティを属性セレクタと一緒に当ててしまうと言うものです。

インターネットエクスプローラは属性セレクタを認識しないため、これらのプロパティ定義を無効と見なして上書きしないからです。

例えば、横方向にスクロールを発生させたい場合は、以下のようにします。

セレクタ {
    overflow: auto;
    width: 100%;
        …
    }
セレクタ, [version] {
    width: auto;
    }

二番目のプロパティ定義は、インターネットエクスプローラでは認識不能な属性セレクタが含まれているためインターネットエクスプローラでは弾かれてしまいますが、他のブラウザでは問題無く認識されます。

そして、二番目の定義で横幅の指定を取り消しているため、問題が解消される事になります。

オペラ 6.x対策 2：@media規則の不具合を利用する。

実は、オペラ 6.xでも@media規則に不具合があります。

具体的には<link>要素で直接リンクしたCSSスタイル定義ファイルにある@media規則について、<link>要素のmedia属性で指定しているメディアより少ないメディアを指定している場合、当該@media規則内が無効になると言うものです。

まとめ。

以上を纏めると、特定のブラウザでのoverflowプロパティでのトラブルを回避するには、以下のように記述すればいい事となります。

つまり、ネットスケープ 4.x/インターネットエクスプローラ4.x/マッキントッシュ版を弾くための@media規則規則の中に、オペラ 6.x対策のoverflow: auto;とその影響を(ウィンドウズ版)インターネットエクスプローラで回避するための「_width」プロパティを仕込んでいます。

@media screen, projection {
    セレクタ { overflow: auto; _width: 100%; }
    }

また、もう一つの方法を用いるとこうなるでしょう。

@media screen, projection {
    セレクタ { overflow: auto; width: 100%; }
    セレクタ, [version] { width: auto; }
    }

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com