制作者の活動(PR)。

アイドル女優・堀北真希ちゃんはうさぎの耳が似合うと思って創造した女子大生キャラクタ
主な作品

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

擬似インラインフレーム。

CSSの小技として、擬似インラインフレームを実現する方法です。

擬似インラインフレーム・目次。

はじめに・本当に<iframe>要素にすべきでしょうか？

<iframe>要素を利用している個人サイトは結構多いような気がします。

そして、その用途の大半は視覚効果を狙ってのものと思われます。

しかし、制作者は、視覚効果を狙うために<iframe>要素を利用する事はどうしても推奨出来ません。

なぜかと言えば、以下の二点が問題だからです。

後方互換性に問題がある

ネットスケープ 4.x以前ではインラインフレームを表示出来ません。

<iframe>要素には、内容として代替コンテンツを記述出来るようになっておりますが、視覚効果のみを考えている者はそれを記述しようとせず、ネットスケープ 4.x以前などで閲覧すると意味不明になる事さえあります。

わざわざリソースを複数作らなければならない

<iframe>要素でインラインフレームを実現するには、<iframe>要素を記述したりソースと、<iframe>要素で埋め込まれるべきリソースの二つを用意しなければなりません。

装飾効果を狙ってのケース、すなわちどうしてもインラインフレームにしなければならないと言う訳ではないケースでわざわざリソースを複数作るのは馬鹿馬鹿しいと思えてならないのです。

視覚効果を狙って枠組みを決めるのであれば、<iframe>要素にしなくても充分実現可能です。

すなわち、擬似インラインフレームを用いるのが良いと言えます。

実際に擬似インラインフレームを実現するには。

注意すべき事。

注意すべき事は擬似フレームと殆ど変わりません。

特に重大と思われるのは以下の点です。

ネットスケープ 4.x以前やオペラ 6.x以前では実現出来ません

ネットスケープ 4.xの場合はCSSに依るデザインそのものを諦めるべきですが、オペラ 6.xはCSSのバグは多いもののそれなりに表現する事は可能です。

ですから、オペラ 6.xでの問題を上手に回避する事が肝要でしょう。

実際の方法。

事前のHTML側の準備。

実際の方法も擬似フレームとほとんど変わりません。

擬似インラインフレームとしたい箇所を<div>要素として、それに適切なIDなりクラス名なりを与えます。

具体的なスタイル。

擬似インラインフレームの具体的なスタイルは以下のようなものでしょう。

横幅と高さが固定されている

これはwidthプロパティとheightプロパティで容易に実現出来ます。

入り切らない場合にはスクロール出来る

これもoverflow: scrollプロパティを与えれば容易に実現しますが、オペラ 6.xではこのプロパティを適切に扱ってくれません。

このため、overflow: autoプロパティを与えるのが安全なのですが、この場合オペラ 6.xでははみ出して表示させてしまいますので、後述のようにオペラ 6.xを回避するようにスタイルを記述するのが安全でしょう。

インライン配置とする。但し適宜フローティングする場合もある

インライン配置にするなら、display: inlineプロパティを与えれば宜しいでしょう。

勿論、marginプロパティ及びpaddingプロパティも適切に与える事をお忘れなく。

フローティングしたいのであれば、floatプロパティを用います。

枠線を付ける

これはborderプロパティを用います。

以上の点を踏まえると、以下のようなスタイルになるでしょう。

擬似インラインフレームを実現したいセレクタ {
    width: 横幅;
    height: 高さ;
    overflow: scroll;
    display: inline;
    float: rightまたはleft; /* フロートさせる場合のみ */
    margin: 適切な余白幅;
    padding: 適切なパディング幅;
    border: 適切な枠線の色・形・太さ;
    }

ここに当該インラインフレームに関するスタイルを記述する事になりますが、更に当該インラインフレームの周囲のデザインも必要ならそれらもここに記述する事になるでしょう。

問題あるユーザエージェントの回避。

上述の通り、このスタイルはオペラ 6.xやネットスケープ 4.x以前で問題になるので、これらのユーザエージェントを回避する事にします。

具体的には当該スタイルを指定するスタイルシートはHTML文書の<link>要素で直接リンクされるものとします。

このとき、<link>要素のmedia属性には複数のメディア("screen, projection"など)を指定します。

スタイルシート内では、以下のように同じスタイルを二度記述します。

@media <link>要素のmedia属性のうちの一つ {
    オペラ 6.xで回避すべきスタイル
    }

@media <link>要素のmedia属性のうち一番目に書かなかったもの全部 {
    (一番目に書いたものと同じ)オペラ 6.xで回避すべきスタイル
    }

ここに当該インラインフレームに関するスタイルを記述する事になりますが、更に当該インラインフレームの周囲のデザインも必要ならそれらもここに記述する事になるでしょう。

参考事項・擬似インラインフレーム内のフラグメントを参照した場合の挙動。

擬似インラインフレーム内のid属性や<a>要素のname属性で指定されたフラグメントへのアンカーを参照した場合、どのような挙動をするでしょうか。

制作者が確認したところ、現行のユーザエージェントでは、オペラ 7.x以外では以下のような動作をしました。

尚、オペラ 7.xではフォーカスの移動に関しては意味不明な挙動となりました。但し、この問題はオペラ 8.x以降で改善されております。

フラグメントの性質を考えれば、これは最も順当な挙動と思われます。

ですが、擬似インラインフレーム内へのリンクでは文書全体もフォーカスが移動する事は案外見落とされそうですので、取り敢えずこのような挙動になる事は予め承知しておくと良いでしょう。

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

ページ外へのご案内。

marguerite.site@gmail.com