擬似フレームを使用したHPの改造方法について
- JavaScript等の知識が必要なため、擬似フレームを使用したHPの改造は難しいです。
- 参考サイトを使用すれば、スクロールするHPを作成することは可能ですが、ヘッダーやフッターの共用方法がわかりません。
- 擬似フレームを使用したHPの改造は高いスキルが必要ですが、参考サイトを利用すれば実現可能です。
- ベストアンサー
擬似フレーム
フレームだらけのHPを,擬似フレームを使用したHPに改造しようと色々と試行錯誤していますが,JavaScript等が良く判らず,難儀しております. 理想としているのは,「擬似フレーム(疑似フレーム)」の作り方(IE6 にも対応、スタイルシート(CSS)、JavaScript使用)」http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_frame.html のサイトです. このサイトを参考にした,「高密度商業地域 - 擬似フレーム」http://komitsudo.blog70.fc2.com/blog-entry-32.html にある 「実際に動作しているサンプルページ」http://blog-imgs-27-origin.fc2.com/k/o/m/komitsudo/index.html と同様の本文がスクロールするHPは作れたのですが,ヘッダー・サイトマップ・フッターの共用の仕方がわかりません. よろしくお願い致します.
- yoshi7866
- お礼率63% (12/19)
- HTML
- 回答数2
- ありがとう数6
- みんなの回答 (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_menu.html)
その他の回答 (1)
- Sylar
- ベストアンサー率71% (10/14)
とりあえずソースを見ないと何がどう分からないのか分かりませんが・・・。 サンプルサイトの通りにしてみてはいかがですか? カンタンにやるなら 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つのサイト共に,ダウンロードできるようなサンプルファイルが無いので,全容が理解出来ないのです. よろしくお願い致します.
関連するQ&A
- フレームと擬似フレーム
以前、フレームを使わずにフレームに表示する方法をここでお聞きし、擬似フレームというものがあることを知りました。 CSSとjavascriptを使う擬似フレームと、フレームの場合やはり擬似フレームを使うべきなのか迷っています。 (SSIやphpは使えません) 更新は楽にしたいのと、対応しないブラウザがある→未対応ブラウザ向けにサイトマップをつくる 、という点では一緒かな、と思ったのですが・・・。
- ベストアンサー
- HTML
- この画像のアニメはなんですか?
この画像のアニメはオリジナルでしょうか?それともアニメ放送してますか? http://blog-imgs-43-origin.fc2.com/k/i/r/kiragazou/12022911_001.jpg http://blog-imgs-43-origin.fc2.com/k/i/r/kiragazou/12022911_000.jpg よろしくお願いします。
- ベストアンサー
- アニメ・声優
- 画像のフレームについてお聞きしたい事があり、質問させて頂きます。
画像のフレームについてお聞きしたい事があり、質問させて頂きます。 ↓の画像のフレーム(黒い枠)はどのように作れば良いのでしょうか? 何か特別なソフトは必要ですか? http://blog-imgs-29-origin.fc2.com/k/o/d/kodachrome64/Scan20018.jpg 詳しい方がいましたら、手順と共にご教授いただければ幸いです。 また、いくつか方法があればご紹介頂けたら嬉しいです。 フリーのフレームプラグインなどは探したのですが、photoshop7.0 に対応しているものが少なく、 CSが多いようです・・・。 主に使っているソフトは、photoshop7.0 イラストレーター10 です。
- ベストアンサー
- 画像・動画・音楽編集
- この写真の人誰だか教えて!!
ネットサーフィンしてたら。 この人の画像を見つけて。 すごいファンになったので。 この人の名前を教えてください。 http://blog-imgs-40-origin.fc2.com/f/e/t/feticheelog/b090810_14.jpg http://blog-imgs-40-origin.fc2.com/f/e/t/feticheelog/b090810_15.jpg
- ベストアンサー
- その他(趣味・娯楽・エンターテイメント)
- このグラビアアイドルの名前は?
それぞれ教えてください。 お願いします! http://blog-imgs-32-origin.fc2.com/o/t/o/otokonoganbo/08_20111010194255.jpg http://blog-imgs-32-origin.fc2.com/o/t/o/otokonoganbo/15_20111010194344.jpg http://dragshoe.rssing.com/browser.php?indx=1508945&item=9426 http://dragshoe.rssing.com/browser.php?indx=1508945&item=9440
- 締切済み
- その他(芸能人・有名人)
- どの研ぎ石がいいの?
包丁の切れ味が悪いので、研ぎ石を100均で買いたいのですが、 http://hakataseabasslure.blog.fc2.com/img/KIMG9027.jpg/ http://blog-imgs-12.fc2.com/b/o/k/bokkyun/002_20101206193953.jpg http://blog-imgs-47-origin.fc2.com/h/a/m/hamonotogiya/kanitogiki01.jpg こういった3種類が販売されてることが多く迷ってます。 どれがいいのでしょうか? 違いってあるんですか?
- ベストアンサー
- 食器・キッチン用品
- 【画像あり】空が赤い
空が赤くなる理由は何ですか? 画像 http://livedoor.blogimg.jp/ringotomomin/imgs/6/7/672e8846-s.jpg http://blog-imgs-37-origin.fc2.com/n/e/e/neetetsu/20110317032231_1_1.jpg 引用元: http://blog.livedoor.jp/ringotomomin/archives/51536804.html http://neetetsu.blog109.fc2.com/blog-entry-995.html
- ベストアンサー
- 地学
- 株の収支をグラフにしたいのですが・・・
http://blog-imgs-29-origin.fc2.com/s/y/s/sys0trade/image0905.png ↑のような収支のグラフを私も作ってみたいのですが このようなグラフを無料でDLできるようなサイトってありませんか?
- ベストアンサー
- 株式市場
- この子がしてるコスプレって
なんてキャラクターのコスプレですか? http://blog-imgs-31-origin.fc2.com/n/a/k/nakasoku/org3846.jpg
- ベストアンサー
- アニメ・声優
お礼
Sylar様. 無事外部ファイルを読み込めるようになりました. 色々とありがとうございました.