フレームだらけのHPを,擬似フレームを使用したHPに改造しようと色々と試行錯誤していますが,JavaScript等が良く判らず,難儀しております.
理想としているのは,「擬似フレーム(疑似フレーム)」の作り方(IE6 にも対応、スタイルシート(CSS)、JavaScript使用)」http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_fr … のサイトです.
このサイトを参考にした,「高密度商業地域 - 擬似フレーム」http://komitsudo.blog70.fc2.com/blog-entry-32.html にある
「実際に動作しているサンプルページ」http://blog-imgs-27-origin.fc2.com/k/o/m/komitsu …
と同様の本文がスクロールするHPは作れたのですが,ヘッダー・サイトマップ・フッターの共用の仕方がわかりません.
よろしくお願い致します.
No.1
- 回答日時:
とりあえずソースを見ないと何がどう分からないのか分かりませんが・・・。
サンプルサイトの通りにしてみてはいかがですか?
カンタンにやるなら
HTML
<div class="head">ヘッダー</div>
<div class="main">
<div class="menu">メニュー</div>
<div class="frame">擬似フレーム</div>
</div>
<div class="foot">フッター</div>
CSS
.head{
width:100%;
height:10%;
background:#333333;
}
.main{
width:100%;
height:80%;
background:#eeeeee;
}
.menu{
width:20%;
height:100%;
float:left;
}
.frame{
width:80%;
height:100%;
overflow:auto;
float:left;
}
.foot{
width:100%;
height:10%;
background:#333333;
}
こんな感じで。
この回答への補足
Sylar様.
上記の例の場合,擬似フレーム側の内容が変わっても(別頁に移動しても),メニュー側を一定にする(外部からメニューを読み込む)にはどのようにしたら良いのでしょうか?
参考にしたサイトではJavaScriptを使用してメニューを読み込むようなのですが・・・・・・.
なお,最初にあげた2つのサイト共に,ダウンロードできるようなサンプルファイルが無いので,全容が理解出来ないのです.
よろしくお願い致します.
No.2ベストアンサー
- 回答日時:
>参考にしたサイトではJavaScriptを使用してメニューを読み込むようなのですが・・・・・・.
あ~、そういうことか。
単純にサイトに書いてることの説明になりますが
別のファイル「menu.js(仮)」を作って
document.write("<ul class='menu'>");
document.write("<li><a href='1.html'>page1</a></li>");
document.write("<li><a href='2.html'>page2</a></li>");
document.write("<li><a href='3.html'>page3</a></li>");
document.write("</ul>");
としておいて、
html側から
<div class="menu">
<script type="text/javascript" src="menu.js"></script>←これがメニュー部分
</div>
という感じで呼び出してます。
ちなみにヘッダーもフッターも同様に別ファイルから呼び出してますね。
ようするに複数ページの共通部分を外部から書き出すという感じでしょう。
ただ、このやり方だとSEO的にはあんまり効果なしだと思います。
SEO無視するなら擬似フレーム使わないでもいいと思うし。
>ダウンロードできるようなサンプルファイルが無いので,全容が理解出来ないのです.
そういう場合はソースを見て外部ファイルへ直接アクセスしてみてください。
サイトでもこの部分の説明が書いてあったりする。
↓
自動生成メニューの作り方
(http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/auto …)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- メガネ・コンタクト・視力矯正 失敗した高額メガネ 6 2022/12/03 23:11
- C言語・C++・C# 【C++】IDirect3DSurfaceのディープコピーは可能ですか? 1 2022/07/06 02:47
- その他(住宅・住まい) 私の自宅にも、全く同じ型式のロスナイが取り付けられています。 これって実際に業者に依頼したら費用は幾 2 2022/09/19 18:11
- その他(ファッション) 眼鏡のフレーム選びについて質問です。地味なおばさんにも似合うフレームの色は何色ですか?写真のような色 5 2023/05/18 12:16
- 画像編集・動画編集・音楽編集 動画をディスク作成すると画像が乱れる。 4 2022/06/24 07:49
- カスタマイズ(バイク) カスタマイズ 1 2022/11/12 01:09
- サングラス・カラコン 4000円以内のメガネフレーム 9 2022/12/01 10:30
- 物理学 スペースコロニーを作るとしたら。 1 2023/06/20 00:47
- その他(ファッション) スポーツメガネでフレームの色は白などはあり? 2 2022/11/30 07:26
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
リンクをクリックすると文字が...
-
擬似フレーム
-
h1にmarginを指定すると一瞬カ...
-
テキストボックス内にハイパー...
-
タブページの中にframeページを...
-
<p>で<td>のように枠を表示させ...
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
JavascriptとJqueryを混在し記述
-
Dreamweaver で 外部JSを読み込...
-
pythonのWebスクレイピングでfi...
-
条件分岐で、読み込む外部スク...
-
Safariで<iframe>のinnerHTMLを...
-
JavaScriptでiframeの内容を「...
-
function の return 値を表示し...
-
jqueryでのkeydownイベント発生...
-
ウィンドウ名の設定
-
Mac IE でスクリプトエラー
-
上と左にフレームわけされてい...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
(Javascript)印刷するファイル...
-
ハイパーリンクに下線を表示す...
-
別ページのページ内リンクでの...
-
横スクロールを右から左へ・・・
-
bodyにwidth:100%をつける理由は?
-
ボタンが押されたらWebページの...
-
テーブル内の数値を自動で計算...
-
"mailtoでメールの【氏名】【性...
-
ページの読み込みが完了してか...
-
テキストをクリックすると答え...
-
インラインフレーム内のスクロ...
-
<body id=~>の用途は?
-
複数のiframeの読み込みについて
-
Chromeがiframe内の「#~」に釣...
-
-css- ページオープン時やリロ...
-
ページによって表示位置がずれ...
-
<HR>タグでつくる四角形につい...
-
リンクをクリックすると文字が...
おすすめ情報