メニューを表示
■ メニュー表示 frameを使う iframeを使う スタイルシートを使う CSSプルダウンメニュー スマホ対応メニュー
レスポンシブル メガメニュー他
使い回しメニュー → JavaScriptで垂直枠 JavaScriptで水平枠 共用化メニュー 共用化レスポンシブル2
  1. 【frameを使う】　
    おなじみのメニューは、 frameset (非推奨)を使い、３枚以上のファイルを作って１枚のページを作ります。　【作成例 ↓】
    【framem.htmlのページ構成】

    frameb.html

    (frameb)
    		 frame-l.html

    (hedari)
    メニュー    		 frame-r.html

    (migi)
    本文    		 frameb.html

    (frameb)


    具体的な　HTMLリスト ↓
    【表示例】　( 実行例 )
    framem.htmlを開きます
  2. 【iframeでレイアウト】　
    iframeを使っても、使い回しの効くメニューに出来ます。
    子ページのiframeから、親ページとなるページに、targetをコントロールしてリンクします。　【作成例 ↓】
    【右 (iframe-m1.html)のページ構成】

    本体
    ページ
    の
    背景    		 iframe
    を表示
    本体
    ページ
    を表示    		 本体
    ページ
    の
    背景


    具体的な　HTMLリスト ↓
    【表示例】　( 実行例 )
    iframe-m1.htmlを開きます
  3. 【スタイルシートでレイアウト】　
    　スタイルシートを使ってレイアウトすると、レイアウト変更のし易い記述が出来ます。
    　全体が一ページ構成なので、左のメニューリストは使い回しは出来ないので、ページ毎に同様の記載をします。　【作成例 ↓】
    【右 css-m.htmlのページ構成】

    body
    の
    背景    		 class
    .hidari
    を表示    		 class
    .migi
    を表示    		 body
    の
    背景


    具体的な　HTMLリスト ↓
    【表示例】　( 実行例 )
    framem.htmlを開きます
  4. 【CSSプルダウンメニュー】　
    　スタイルシートを使ってプルダウンメニューを記述が出来ます。　Win版IE6 は対応していません
    　全体が一ページ構成なので、左のメニューリストは使い回しは出来ないので、ページ毎に同様の記載が必要です。　【作成例 ↓】

    【右 css-p.html のページ構成】


    メニュー本体ページを作り、
    ( css-p.htmlのリスト表示 )

    ↓

    枝メニューを通常非表示にするスタイルシートを、
    外部シートとして作りました。
    ( css-p.cssのリスト表示 )
    【表示例】　( 実際例 )
    css-p.htmlを開きます