トップ > インターネット > ホームページ作成・素材 > HTMLの基礎−タグを覚えてウェブページを作ろう!−

ホームページはHTMLタグの知識とテキストエディタさえあれば作成できます。またタグを理解していればサイトの細かい部分まで手が届きます。でも、わからない・・そんな方にお送りする初心者向けのHTMLタグ講座「HTMLの基礎」。

RSS


メルマガの登録・解除

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。



HTMLの基礎 Vol.27 フレーム領域の設定4(iframe)

発行日:12/31

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

    HTMLの基礎 −タグを覚えてウェブページを作ろう!−

      2004/12/31(Fri) Vol.27       執筆:ykr
              http://ykr.main.jp/html/index.html

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

       1.ページ内にフレーム領域を作成する  <iframe>

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   


  今年も残すところあと数時間(発行時より)となりました。時間が過ぎ
  るのが本当に早く感じられた1年でした。
  皆さんは今年を振り返ってみてどんな一年だったでしょうか?

  さて前回はフレーム領域の設定を行いました。今回もまたフレーム領域
  の設定の学習なのですが、ページを分割するのではなく、ページ内にフ
  レーム領域を設定してページを表示させます。

  それでは今回も最後までお付き合いよろしくお願いします。


  ※注意  HTMLのバージョンは4.01です。
       発刊時点で非推奨とされてるものも掲載しています。
       表示確認しているブラウザは、WinIE6、WinNN7、MacIE5.2
       MacNN7です。その他のブラウザでの表示は未確認ですので
       意図したとおりにならないことがあります。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


1.ページ内にフレーム領域を作成する  <iframe>

  参照  http://ykr.main.jp/html/component/html08.html#iframe

  <iframe></iframe>を設定するとページを分割することなく、ページ内
  にフレーム領域を作成する事ができます。


----------------------------------------------------------------------


 ■<iframe src="値" name="値" width="値" height="値"></iframe>
  <a href="値" target="値">文字列又は画像<a>

  <iframe></iframe>にさまざまな属性を指定することでページを分割する
  ことなく、ページ内にフレーム領域を作成する事ができます。
  属性の値の指定方法は以下の通りです。


  ▼<iframe>の属性

   ・src   ・・フレーム領域に表示するファイルのパス
   ・name   ・・フレーム領域につける名前を指定
   ・width  ・・フレーム領域の横幅
   ・height  ・・フレーム領域の縦幅

  これらを指定することでフレームがページ内に表示されます。
  そして、<iframe></iframe>の下に記述した<a>により、フレーム領域の
  ページ内のファイルの切り替えを行う事ができます。


  ▼フレーム領域のページの切り替えを行う<a>の属性

   ・href  ・・リンク先ファイルのパス
   ・target ・・フレーム領域につけた名前を記述


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


  それでは、いつもと同じ手順でHTML文書を作成して表示を確かめて
  みましょう。面倒な方は前回の続きに上書きしても良いでしょう。


----------------------------------------------------------------------
▼フレームを分割するファイル


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>ページ内にフレーム領域を作成する</title>
</head>

<body bgcolor="#ffffff" text="#000000">
<h1>ページ内にフレーム領域を作成する</h1>
<hr>
<h2>iframeを設定</h2>
<hr>
<iframe src="a.html" name="ykr" width="300" height="100"></iframe>
<br>
<a href="b.html" target="ykr">Bのファイルを表示</a><br>
<a href="a.html" target="ykr">Aのファイルを表示</a>
<hr>
<p>
上記のフレーム領域にははじめ、「a.html」が表示されています。下に設定
したリンクで「b.html」を表示させたり、再び「a.html」を表示させたりす
ることができます。
</p>
</body>
</html>


----------------------------------------------------------------------
▼a.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>Aのファイル</title>
</head>
<body bgcolor="#ff9999">
Aのファイル
</body>
</html>

----------------------------------------------------------------------
▼b.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>Bのファイル</title>
</head>
<body bgcolor="#99ff99">
Bのファイル
</body>
</html>

----------------------------------------------------------------------


  さて、記述できたらファイルを保存します。
  前回のファイルに追加したという方は、上書き保存か名前をつけて、新
  しく保存して下さい。拡張子は「.html」です。


----------------------------------------------------------------------


 ■<iframe src="a.html" name="ykr" width="300" height="100"></iframe>

  <iframe></iframe>を設定してページ内にフレーム領域を作成しています。
  src属性で表示するファイル「a.html」を指定、フレーム領域の名前を「
  ykr」とし、フレーム領域の横幅を300ピクセル、縦幅を100ピクセ
  ルに設定しています。

 ■<a href="b.html" target="ykr">Bのファイルを表示</a><br>
  <a href="a.html" target="ykr">Aのファイルを表示</a>

  普通のリンクと変わりませんが、target属性にフレーム領域の名前を指定
  しています。こうする事で指定した名前のフレーム領域内に表示するペー
  ジのリンクの設定を行う事が可能です。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


来週は・・・

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

   1.フレーム非対応のブラウザへの配慮 <noframes>

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

(予告なく変更する事があります)


■ 雑記 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


  今回も最後まで付き合ってくださった方、お疲れ様でした。

  来週のメルマガの内容は非常に短いと思います。手を抜くな!と言われ
  そうですが、年明けという事でご了承くださいね。上記に記載された「
  noframe」とは別に、簡単ですがウェブ関連の話でもしようと思います。

  皆さんは今日は年越しそば食べるんでしょうか?ちなみに私は多分食べ
  ません。というか、去年も食べていませんが・・(去年は、ずっと寝不
  足が続いていた上、さらに大晦日の前日は徹夜してしまったので、大晦
  日は日中爆睡してしまい、起きたら夜というなんとも空しい事をしてし
  まいました・・)

  「HTMLの基礎」のメールマガジンは今年の後半から始めたのですが
  、あっという間の半年でした。もう少しで全ての「HTML4.01」のタグは
  紹介し終えるので、その後どうするかはまだ考え中です。

  それでは皆様にとって2005年が良い年でありますように。
  来年もどうぞ「HTMLの基礎」をよろしくお願いいたします。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

■■■「HTMLの基礎」姉妹サイトです。よろしくお願いします。■■■■

■■■「全部まるごとスタイルシート」
■   http://ykr414.com/css/index.html
■   スタイルシート辞典です。プロパティごと、または目的ごとに引
■   け、ブラウザの対応状況なども掲載しています。
■   HTMLに加える事で、より細かいレイアウトの指定が可能に。
■   コピーペーストするだけで利用できるテンプレートのページも。

■■■「コマンドプロンプトを使ってみよう!」
■   http://ykr414.com/dos/index.html
■   コマンドプロンプトとは何かから始まり、バッチファイルの作成
■   法や、コマンド別・目的別に引けるコマンド辞典。
■   初心者でもわかるよう細かく説明。

■■■「伸び縮みマークアップ言語 XML」
■   http://ykr414.com/xml/index.html
■   SGMLのサブセットであるXMLは、ネット上で扱うデータを
■   記述するためのデータフォーマットで、柔軟性のある言語構造を
■   持っており、プログラムで自在にデータを情報処理できます。そ
■   のXMLを実際に文書を作成しながら解説。随時追加更新。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


・makers     http://ykr414.net/makers/
         ダイエットグッズ、美味しいもの、かわいいもの
         セレクトショップ。ちょっと珍しいグッズ・便利な
         サービスなどの情報も掲載。
         コラムなどのコンテンツもあります。


*――*――*――*――*――*――*――*――*――*――*――*――*――*――*
  Auther       ykr
  Mail         ykr414@yahoo.co.jp
  URL          http://ykr.main.jp/html/index.html
  Copyright    (C)2004 ykr414. All rights reserved.
  Attention    掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

| 次の記事>> | 最新の記事

ブックマークに登録する

TwitterでつぶやくLismeトピックスに追加するdel.icio.usに追加Buzzurlにブックマークニフティクリップに追加Yahoo!ブックマークに登録記事をEvernoteへクリップ
My Yahoo!に追加Add to Google

規約に同意してこのメルマガに登録/解除する

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。


この記事へのコメント

コメントを書く


上の画像で表示されている文字を半角英数で入力してください。

※コメントの内容はこのページに公開されます。発行者さんだけが閲覧できるものではありません。
コメントの投稿時は投稿者規約への同意が必要です。

  1. コメントはありません。

このメルマガもおすすめ

  1. @(あっと)驚く!エクセル好きルアップ  

    最終発行日:
    2011/05/26
    読者数:
    4069人

    エクセル(Excel)の基礎から裏ワザまで... D-UP発行のマガジンは、1問1答の形式、詳細な解説付きで配信。さらに連動した懸賞サービスもあり、スキルとプレゼントを同時にゲット。映画情報もあるよ

  2. これ知ってます?Wordの小ワザ&便利ワザ

    最終発行日:
    2011/05/26
    読者数:
    4683人

    D-UPが送る、ほほー!っと納得ワード(Word)の小ワザ&便利ワザをクイズ形式で楽しく学んでいきます。知ってて損することはありません。あなたの文章にアクセントをつけてみませんか?懸賞のチャンスもWでお得。

  3. 全部フリーソフト!!

    最終発行日:
    2014/02/26
    読者数:
    4888人

    ネット上にはこんなに便利なソフトがいっぱい。仕事にも、遊びにも、あると絶対にお得で楽しいソフトを1つずつご紹介します。

  4. 高橋浩子の日本一“お気楽”なパソコンマガジン

    最終発行日:
    2017/01/21
    読者数:
    1130人

    「クスッと笑えてタメになる」をモットーとするテクニカルライター高橋浩子が魂を込めてお届けする週刊メルマガ。パソコン講座を中心に、便利ネタやおすすめサイトもご紹介。とにもかくにも、“お気楽”に楽しめる異色のエンターテイメントマガジンである。

  5. C#プログラミングレッスン

    最終発行日:
    2014/09/30
    読者数:
    973人

    C#での .NETプログラミングを易しく丁寧に解説するメールマガジンです。「C#プログラミング・レッスン」で、.NETプログラミングをマスターしましょう。

発行者プロフィール

過去の発行記事