ホームページ作成・素材

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

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

全て表示する >

HTMLの基礎 Vol.28 フレーム未対応のブラウザへの配慮(noframes)

2005/01/07

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

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

      2004/01/07(Fri) Vol.28       執筆:ykr
              http://ykr.main.jp/html/index.html

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

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

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

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


  新年あけましておめでとうございます。本格的な寒さで体調を崩されて
  いる方や、まだお正月気分が抜け切らない方も多いのではないでしょう
  か?私はというとお正月は特に変わったことも無く、普通に御節を食べ
  、普通に初詣も行って来ました。

  2005年は一体どんな年になるでしょう?また新たに気持ちを入れ替
  えて、今年もがんばっていきたいと思います。これからもどうぞ宜しく
  お願いいたします。

  さて、今回はかなり短いです。フレームに対応していないブラウザへの
  為の記述方法の説明と、少しウェブ関連の話でもしようと思います。
  では、最後までお付き合いよろしくお願いしますね。


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


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


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

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

  フレーム未対応のブラウザ、又ブラウザの設定でフレームを非表示にし
  ているユーザーの為に、フレームを使用する場合、フレーム非対応の
  ブラウザへの配慮をしておく必要があります。

  <noframes></noframes>の間に、フレーム非対応ブラウザで表示する内
  容を記述します。


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


 ■<noframes><body>フレーム未対応ブラウザの表示内容</body></noframes>

  上記のように<noframes></noframes>の間に書かれた内容が、フレーム
  未対応のブラウザに表示されます。

  <noframes></noframes>では、<body></body>内で使用出来るタグを記述
  することが可能です。


 ■<iframe〜(属性省略)>フレーム未対応ブラウザの表示内容</iframe>

  <iframe>を使用している場合のフレーム未対応ブラウザへの配慮は、上
  記のように、<iframe></iframe>の間に記述します。


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


  それでは、いつもと同じ手順で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>

<frameset cols="30%,*">
<frame src="a.html" name="l">
<frame src="b.html" name="r">
<noframes>
<body>
ここから<a href="a.html">フレーム未対応版ページ</a>へお入り下さい。
</body>
</noframes>
</frameset>

</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」です。


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


 ■<noframes>
  <body>
  ここから<a href="a.html">フレーム未対応版ページ</a>へお入り下さい。
  </body>
  </noframes>

  このようにフレーム未対応ブラウザへ表示するページの内容を記述する事
  で、フレーム未対応ブラウザへの対策が出来ます。

  但し、フレーム未対応ブラウでなければ<noframes></noframes>の間に記
  述された内容は見ることは出来ません。


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


 ■ウェブ関連の他愛無い話

  私のマシンの中には、途中までしかできていないページが沢山あります。
  かなり前に作成して、日の目を見ずに眠っているものも沢山あるのです
  が、今改めてみてみると結構面白いです。

  もともと余りウェブに興味はありませんでした。それよりも作る事が大
  好きだったので、今思うと余り役に立たないツールを作っては、IT関
  連の知り合いに送って(いや、送りつけて)感想や改善点を求めるなど
  、今思うと勉強にはなりましたが、時間を使って無駄な物ばかり作って
  いたなぁ・・なんて少し懐かしくなります。全然面白くないピンボール
  とか、ユニコード変換ツール等etc・・しかもやたら使い勝手が悪いし
  使い道も無い・・(苦笑)

  HTMLは手打ちから入りました。今でもHTML作成ソフトは使いに
  くく余計に時間がかかるので使用しません。昔のプログラムなどは、真
  っ黒の画面(DOS)に文字を打ち込んだり等々、今のグラフィカルな
  物から思うととても味気ないものでした。(そのときは面白くてたまら
  なかったのですが)

  大分前の作品を見ていると、結構変な使い方をしているタグなども見受
  けられるのですが、自分のマシンだけで見るHTMLでしたら互換性も
  間違いも別に構わないのです。自分しか見ないのですから。

  http://hinoki.sakura.ne.jp/~okada/table/

  ▲Daisuke Okada氏のテーブルアートのページなのですが面白いです。
  このページを見て私も一時期テーブルアートにはまりました。

  というわけで、何が言いたかったのか全くわからない話になってしまい
  ました。仕事上で起きた事や思ったことなどを書くつもりだったのです
  が、それはまた次の機会にします。


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


来週は・・・

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

   1.ページに関する問い合わせなどの記述 <address>

   2.基準となるURLの指定 <base>

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

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


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


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

  次回からは「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    掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

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

メルマガ情報

創刊日:2004-06-29  
最終発行日:  
発行周期:週間  
Score!: - 点   

コメント一覧コメントを書く

この記事にコメントを書く

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

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

  • コメントはありません。