■ WSJ21[GHP] - XHTMLタグ講座で覚えよう

■Section 2-9■良いホームページ作成講座■

▼GHP講座2.9　−　XHTMLタグを覚える


◎ 基本的なホームページを作るために最低限必要な知識(言語)
◎ ホームページを作るために覚えなくてはいけないんです。
◎ 頑張って覚えて下さいね＜他人事＞初めは見ながらでいいですからっ♪
◎ 簡単な英語ができるなら、かなり楽に覚えられますよ。
.
◇◆◇このページで、解説するタグ一覧◇◆◇

[frame] frameset frame noframes (iframe)

※スタイルシートを使用している都合上、文字のサイズなど実際の表示と多少異なります。

★フレーム分割 - <frameset> - Frame Set

★フレーム定義 - <frame> - Frame

★フレーム非対応時 - <noframes> - No Frames


　画面を分割する時に使います。
　メニューだけを独立させることで、ナビゲーションが非常に楽になります。
　※XHTML1.1では定義されていないみたいなので「XHTML1.0 Frameset」規格に基づきます。
　※下記の内容は、今までの続きではなく、新規ファイルを制作して打ち込んで下さい
  1. <?xml version="1.0" encoding="Shift_JIS"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
  6.   <link rev="made" href="mailto:メールアドレス" />
  7.   <link rel="index" href="ホームページのアドレス" />
  8.   <title>タイトル：サイト名など(常に表示されます)</title>
  9. </head>
  10. <!-- ================================ -->
  11. <frameset cols="*" rows="50,*,14" title="WSJ" frameborder="0" framespacing="0">
  12. <frame noresize="noresize" name="mn" id="mn" title="mn"
    src="top_mn.html" scrolling="no" />
  13. <frame noresize="noresize" name="tp" id="tp" title="tp"
    src="top.html" scrolling="yes" />
  14. <frame noresize="noresize" name="cr" id="cr" title="cr"
    src="top_cr.html" scrolling="no" />
  15.   <noframes><body>
  16.   <p><a href="top.html">トップページ</a></p>
  17.   </body></noframes>
  18. </frameset>
  19. </html>
↓　↓　↓　解　説　↓　↓　↓
  1. (XHTML1.1 同様)
  2. DOCTYPE宣言。XHTMLのバージョン表記。上記は、フレーム使用の場合の記述です。
  3. (XHTML1.1 同様)
  4. (XHTML1.1 同様)
  5. (XHTML1.1 同様)
  6. (XHTML1.1 同様)
  7. (XHTML1.1 同様)
  8. (XHTML1.1 同様)フレームを表示している限り常に表示されます。
  9. (XHTML1.1 同様)
  10. (しきいの為のコメント)
  11. frameset : フレームの分割方法(上下３分割)
  12. frame : 分割１つ目のページ設定
  13. frame : 分割２つ目のページ設定
  14. frame : 分割３つ目のページ設定
  15. noframes : フレーム未対応ブラウザの表示開始
  16. フレーム未対応ブラウザの表示内容
  17. noframes : フレーム未対応ブラウザの表示終端
  18. frameset : 終端
  19. (XHTML1.1 同様)
　注意すべき箇所：body要素がnoframes要素に囲まれている点

〜フレームの続き〜　各属性の解説


　少々複雑なので各項目に焦点を絞って解説していきます。
　企業さんとかのページで使うと良い感じになりますよ。

・framesetの属性


　・「cols属性」･･･フレームの横分割
　・「rows属性」･･･フレームの縦分割
　・「title属性」･･･フレームの説明
　・「frameborder属性」･･･フレーム枠の太さ(付けるとスマートになる)
　・「framespacing属性」･･･フレーム枠の隙間(付けるとスマートになる)
　「<frameset cols="*" rows="50,*">」　→(同意)→　「<frameset rows="50,*">」
　「<frameset cols="120,*" rows="*">」　→(同意)→　「<frameset cols="120,*">」
　分割(属性)値は「,(カンマ)」で区切って書きます。
　属性値の指定方法は「40%,60%」「100,*」といった２種類あります。
　「%」を付けるとその比率でフレームが分割されます。
　→　画面のサイズによって異なってきますので使わない方が良いでしょう。
　「数値」と「*」で指定すると「数値」はピクセル数、「*」は分割の残りピクセル数を表します。
　→　画面サイズが違っても「数値」で指定したサイズは変わりませんのでデザインに向いています。
　※分割したページはframe要素で指定していきます。
.
frameborder属性、framespacing属性の属性値を「0」にすると枠のないスマートなデザインができます。
枠の有無は印象にかなり影響を与えるのでデザイン面では最重要な設定ではないでしょうか。

・frameの属性


　・「name属性」「id属性」･･･フレームの名前付け　『a要素のtarget属性で使用』
　・「title属性」･･･フレームの説明
　・「src属性」･･･フレームに指定するページ指定
　・「noresize属性」･･･フレームのリサイズを許すか
　・「scrolling属性」･･･スクロールバーの有無
　framesetで分割した数だけ書きます。縦横２分割なら４個分(2x2)書きます。
　　→　「左→右、上→下」の順で設定していきます。
　「name属性」「id属性」は属性値にフレームの名前を入れます。『a要素のtarget属性で使用』
　「src属性」には表示するページのURLを指定します。
　「noresize属性」を指定するとフレームのサイズを変更禁止にできます。
　「scrolling属性」を指定するとスクロールバーを非表示にできます。
　　→　スクロールバーが似合わない場所には最適です。

〜フレームの続き〜　「フレーム名」と「a要素のtarget属性」


　これで、やっと「a要素のtarget属性」を解説できるまでに至りました。
　フレームを使う場合には、「a要素のtarget属性」は必須と言えるほど重要な位置を占めます。
　「a要素のtarget属性値」は「_blank」「_self」「_parent」「_top」「(任意)」の５つと書きました。
　このうち「(任意)」「_top」「_parent」がフレーム使用時に最もよく使います。
　「(任意)」は主にフレーム名、つまり、frame要素の「name、id属性」で付けた名前です。
　これをtarget属性に設定することにより、異なるフレームを書き換えることが出来ます。
　では、分割部分(frameset内)だけをピックアップして説明してみます。
<frameset cols="*" rows="20,*,30" title="Top">
    <frame name="red" id="red" src="top_red.html" />
    <frame name="green" id="green" src="top_green.html" />
    <frame name="blue" id="blue" src="top_blue.html" />
</frameset>
↓　こういう名前のフレームが出来上がる　↓
red
green
blue
<frameset cols="100,*" rows="20,*" title="Top">
    <frame name="red" id="red" src="top_red.html" />
    <frame name="yellow" id="yellow" src="top_yellow.html" />
    <frame name="green" id="green" src="top_green.html" />
    <frame name="blue" id="blue" src="top_blue.html" />
</frameset>
↓　こういう名前のフレームが出来上がる　↓
red yellow
green blue
<frameset cols="100,*" title="Top">
    <frame name="red" id="red" src="top_red.html" />
    <frame name="blue" id="blue" src="top_blue.html" />
</frameset>
↓　こういう名前のフレームが出来上がる　↓
red blue
　上記の場合(横２分割)が一番多いのでこれを使って解説します。
　「redページ」から「blueページ」を変更したい場合は、「target="blue"」と書きます。
　そうすることによって「redページ」から「blueページ」を切り換えることが出来ます。
　この設定をしていなければ、クリックしたフレームが切り替わるだけです。

〜フレームの続き〜　a要素のtarget属性


　次は、「_parent」「_top」「_blank」「_self」の解説です。
　「_parent」は親フレーム、つまり「frameset要素」を解除して表示します。
　「_top」はフレームを解除して表示します。
　「_blank」は常に新しく窓を開いて表示します。
　「_self」は通常の設定でそのページ自体を切り換えます。
　試してみて、分からなければ質問して下さいね。

★･･･予告･･･


◇◆◇前頁の講座で解説したタグ◇◆◇

[ruby] ruby rb rt rp (rbc rtc)

[text] address div span [base] base


◇◆◇今頁の講座で解説したタグ◇◆◇

[frame] frameset frame noframes (iframe)


◇◆◇次頁の講座で解説するタグ◇◆◇

※一部を除き、今後の講座で解説していきます

[structure] html head title body

[forms] buttom fieldset form input label legend select optgroup option textarea

[meta] meta [link] link [style] style [scripting] script noscript


◇◆◇表示例◇◆◇
　今回の表示サンプルはナッシングです(^o^;　やっぱ入ります？

★おわりのあいさつ


　予告して終わっちゃいました(笑)
　恐らくここで解説しても余計に分からなくなってしまうと思います。
　解説してもさして役に立たないと思います。
　今後、適所適所で解説を入れるつもりです。
　
　では続いてCSSの解説に移らせて頂きますネ。
←講座2-8　 ●もどる●　 講座3-1→