スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > インラインフレーム

インラインフレーム

投稿日:2006年11月21日   レベル:初心者    ソフトウェア:DreamWeaverGoLiveFrontPage



フローティング、インラインフレームはページの中に別のものを挿入できます。PHPやSHTMLとは異なって、インラインフレームは.htmlファイルにスクロールバーを使った部分を埋め込むことができるのです。しかし、インラインフレームは全てのブラウザで使用できるわけではありません。マック用Netscape4.xとOpera5ではインラインフレームはサポートされていません。


Step1 − ファイルに記述する

まず、<iframe src="embededpage.html"、と埋め込みたいembededpage.htmlファイルに記述することから始めます。


Step2 − name="depiction"と入力

埋め込むページの名前を付けるために、name="depiction"と入力して、ページの名前を"depiction"とします。


Step3 − インラインフレームのサイズを決定

width="200"height="300">と記述します。インラインフレームのサイズを決定します。


Step4 − サポート外のブラウザ

最後にインラインフレームをサポートしていないブラウザに表示されるテキストを入力して、</iframe>で完了です。


Step5 − サンプルソース

このようになっていますか?

<iframe src="embededpage.html" name="depiction" width="200" height="300">Your Browser does not support inline frames.</iframe>


Step6 − ポイント

・境界線はステップ2の後にframeborder="0"を加えることで取り除くことができます。このテクニックはページ全体のデザインを考える上でとても役立つと思います。
・CSSは埋め込んだページのスクロールバーのカスタマイズに使用できます。


Step7 − 実際の表示

正しくこれらの作業を実践できたら、下のようなインラインフレームがブラウザで見れるはずです(下では境界を取り除いています)。
実際の表示画面


引用:Web Design Library 著者:Depiction.net翻訳:atuk



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング