ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング