ママのスキンケアのお悩みにおすすめアイテム

個人のHP作成の際フレームを使おうとしていましたが、よくないと聞き他の表示の仕方を探しています。
フレームを使わずにフレームのような表示をするにはどうしたらよいでしょうか。
(メニューと表示部分を上下に分け、メニュー部分はどのページでも表示させたいです)
CSSやjavascriptなど使うのかな、と思いつつどう書けばそうなるのか全くわからない状態です。
ぜひ知恵をお貸しください。
また、わかりやすく説明されているサイト様などあれば教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

初めての場合、下記のページがとても参考になると思います。



http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_fr …
    • good
    • 1
この回答へのお礼

回答ありがとうございます。
早速、このページみてみました。
今まで手がかりがなかった状態だったので助かります。
初心者なので少し難しそうですが頑張ってみたいと思います。

お礼日時:2008/03/15 18:15

全てのページで同じ内容を書けば、全てのページで同じ内容が表示されます。


必要が有れば、CSSファイルやJavaScriptファイルも、全てのページで同じファイルにリンク(<link href="">)するか、同じ内容(<script>や<style>)を記述して下さい。


「同じ内容を何度も書く」という手間を省くために、
フレームを使ったり、すでにでているようなSSI(サーバーサイドインクルード)やテンプレートを使うのが一般的です。

敷居は高めですが、JavaScriptのAjaxという考え方もあります。
Ajaxを応用して、CSI(クライアントサイドインクルード)という言葉も出てきていますので、
そのうち、Ajaxではなく、CSIという方向で一般化すると思います。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
SSIやAjax、CSIなんていうのもあるんですね(@_@;)
まだまだ勉強不足です・・・;
確かに同じ内容を何度も書くのは手間なのでSSIやテンプレートについても調べてみようと思います。

お礼日時:2008/03/15 18:32

フレームを使わない場合


一般的にはSSIやDreamweaverやホームページビルダーなどテンプレートエンジン機能の付いたHTMLエディタを使う場合が多いです。

phpなどが使える環境であればメニュー部分のみを外部ファイルとし
includeするといいです。

参考URL:http://as76.net/dai/prg/include.htm

この回答への補足

HTMLエディタは今のところ持っていないのですが、あったほうがいいのでしょうか・・・(メモ帳に手打ちしています)
なるべくお金をかけたくないので・・・。
phpについてはあまり知らなかったのでURLが参考になりました。
が、サーバーのほうがphpを禁止しているので残念ながら使えないようです;

補足日時:2008/03/15 18:24
    • good
    • 0
この回答へのお礼

なんとか自分でできそう、というところまできました。
回答ありがとうございました。

お礼日時:2008/03/16 18:52

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qframeset要素を使わずに画面を分割したい

アンテナ(下記サイト)のように左にメニュー画面を、右にコンテンツを表示するホームページを作成したいと考えています。
https://antenna.jp/

ひとつのウインドウで画面を2つにわけるためにはhtmlのframeset要素を使えばできることは把握しているのですが、上記サイトのアンテナではframesetを使わずに画面分割をしています。

見た目やレスポンシブ対応のしやすさも考え、できればframesetを使わずに画面分割を行いたいのですが、どのようにすれば可能でしょうか。
メニュー部分とコンテンツ部分を別々にスクロールできるようにしたいです。

どなたか分かる方教えてください。

Aベストアンサー

長くなるから、参考ページ参照。

参考URL:http://www.geocities.jp/eijispace/2012/0419.html

Qフレームを使わずに右側だけを切り替える

個人で絵のサイトを作ろうとしています。
HTMLとCSSで作り、画面を半分に分けて左側がメニューで右側に絵が表示されるというよくある形が目標です。
フレームを使わずに、overflowでスクロールできるようにしたのですが、問題はメニューで右側に絵を表示させる際にこのままだとメニューを切り替えるたびにリンクがページごと切り替わる点です。
メニューの数がある程度限られていれば、左側が同じページをいくつもつくり右側だけ変えるようにできますが、絵の数が増えればそのたびメニューの項目がいくつと増えていきます。
そのたび今まで作ったページたちの左側をいちいち編集しなければいけませんよね?それはめんどくさい…
今目指すレイアウトでフレームを使わずに右側だけ切り替える、もしくは絵を更新するたびにひとつひとつ書き換えにいかなくても済む方法はありますでしょうか?
同じような質問はいくつもあるのですがなかなか解決にたどり着かないので質問させていただきました。
以上の内容でよろしければ回答お願いします。

Aベストアンサー

#5、#6です。(前回、間違って連投してしまいました。失礼。)

>載せたい画像の大きさはそれぞれ違うので一括指定できません。
どこをいじられたのかわかりませんが、別に画像サイズを固定する必要はありません。
表示部分のサイズを固定してもよければ、画像の枠(にあたるli要素)のサイズを」固定しておけば、画像のサイズは自由に出来るのではないでしょうか。
表示部分のサイズも可変とかいろいろになると、スクリプトを使ってしまった方が簡単そう。

前回とほとんど同じですが、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<style type="text/css">
<!--
#navi, #images { float:left; }
ul, li { list-style-type:none; padding:0; margin:0; }
#navi { width:10em; }
#navi img { width:4em; height:2em; border-width:0px; }
#images { width:600px; height:300px; overflow:hidden; }
#images li { width:600px; height:300px; text-align:center; overflow:auto; }
//-->
</style>
</head>

<body>

<div>
<ul id="navi">
<li><a href="#img1"><img src="img/photo01.jpg" alt="photo1">photo1</a></li>
<li><a href="#img2"><img src="img/photo02.jpg" alt="photo2">photo2</a></li>
<li><a href="#img3"><img src="img/photo03.jpg" alt="photo3">photo3</a></li>
<li><a href="#img4"><img src="img/photo04.jpg" alt="photo4">photo4</a></li>
<li><a href="#img5"><img src="img/photo05.jpg" alt="photo5">photo5</a></li>
<li><a href="#img6"><img src="img/photo06.jpg" alt="photo6">photo6</a></li>
</ul>

<ul id="images">
<li><a name="img1"><img src="img/photo01.jpg" alt="photo1" style="width:400px; heigth:200px"></a></li>
<li><a name="img2"><img src="img/photo02.jpg" alt="photo2" style="width:300px; height:100px;"></a></li>
<li><a name="img3"><img src="img/photo03.jpg" alt="photo3" style="width:800px; height500px;"></a></li>
<li><a name="img4"><img src="img/photo04.jpg" alt="photo4"></a></li>
<li><a name="img5"><img src="img/photo05.jpg" alt="photo5"></a></li>
<li><a name="img6"><img src="img/photo06.jpg" alt="photo6"></a></li>
</ul>
</div>


*スクリプトを使ってもよいのであれば、たくさんのものがライブラリ化されているので、探せばいろいろ見つかると思います。
<以下一例>
http://sandbox.scriptiny.com/javascript-slideshow/
http://www.fabulant.com/downloadcenter/imgfadezoom/imgfadezoom.html
http://myisland.jp/template/gallery/gallery04.html

#5、#6です。(前回、間違って連投してしまいました。失礼。)

>載せたい画像の大きさはそれぞれ違うので一括指定できません。
どこをいじられたのかわかりませんが、別に画像サイズを固定する必要はありません。
表示部分のサイズを固定してもよければ、画像の枠(にあたるli要素)のサイズを」固定しておけば、画像のサイズは自由に出来るのではないでしょうか。
表示部分のサイズも可変とかいろいろになると、スクリプトを使ってしまった方が簡単そう。

前回とほとんど同じですが、

<!DOCTYPE HTML PUBLIC ...続きを読む

QCSSによるFrameの代替方法

趣味でHPを作成しているものなのですが、
左 |____上_____
左 |
左 |____下_____
という3分割フレームを使っています。
左にはサイトMapを置き、上にはページタイトル、
そして、下には、左のMapでクリックしたものを「target」で、
下に表示しているのですが、
今後Frame要素がなくなるのではないかと
危惧している為、CSSで代替出来ないかと考えております。
左と上はフレームである必要も無いので良いのですが、
サイトの画面を移動せず、下という1部分だけを
切り替えてという感じで引き続き運営して行きたいのですが、
CSSで代替できないでしょうか?
なんとなく段組みレイアウトとJavaScript(こちらは
カテ違いですがわかれば)あたりで、何とか出来ないかと
思っています。その他の言語でしょうか?
私は独学でやっているもので、ジャストなものをサイトで探しても
見つからず、持っている本等にも書いてないので、
お分かりの人がいれば教えて頂きたいと思います。
宜しくお願い致します。

Aベストアンサー

フレームを使わなければ全てのページにメニューを書けば良いのですが、同じメニューを全てのページに入れるのは面倒ですね。

それでフレームを使っているのだと思いますが、メニュー部を共有するならSSIを使う方法が比較的見つけ易いですね。
http://www.google.co.jp/search?sourceid=navclient&hl=ja&ie=UTF-8&rls=GGLG,GGLG:2006-05,GGLG:ja&q=ssi+%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC
但し、サーバーがSSIに対応していないと使えませんし、メニューのリンクを検索エンジンが辿るのか?なんて心配もありますね。

javascriptでメニュー部を書き出しても良いのですが、noscriptに同じことを書くことになりますので全く旨みがないのではないかと思いますし、noscriptを書かないと検索エンジンは辿りませんね。
普通に外部javascriptを作ってdocument.writeで書けば良い方法です。

そんなときには、perlでも覚えてパソコン内でperlを動かしてHTMLファイルを作らせるようにしてしまえばメニューの更新も簡単に済みますけどね。
メニュー部分のHTMLのファイル(1つのファイル)と今まで内容が書かれたファイル(沢山あるファイル)を合体させて新しいファイルを作り保存するスクリプトですね。
---ローカル環境でperlを動かすための参考ページ-----------
ActivePerlのダウンロード
http://www2j.biglobe.ne.jp/~apollo/server/server.html
AN HTTP Server Home Page
http://www.st.rim.or.jp/~nakata/

---実際にスクリプトを組む時の参考ページ--------
perlファイル操作とファイルハンドル
http://www.kent-web.com/perl/chap6.html

ページが増える度にperlにHTMLファイルを作らせてそれを一括でサーバーにアップロードすれば簡単に済みますよ。
パソコンの中にメニュー管理用ページを作ってメニューの変更などができてボタンを押すとそれを埋め込んだファイルを作るようにしておくとより簡単になります。

以上参考意見でした。

フレームを使わなければ全てのページにメニューを書けば良いのですが、同じメニューを全てのページに入れるのは面倒ですね。

それでフレームを使っているのだと思いますが、メニュー部を共有するならSSIを使う方法が比較的見つけ易いですね。
http://www.google.co.jp/search?sourceid=navclient&hl=ja&ie=UTF-8&rls=GGLG,GGLG:2006-05,GGLG:ja&q=ssi+%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC
但し、サーバーがSSIに対応していないと使えませんし、メニューのリンクを検索エンジンが辿るのか?なんて心配もあり...続きを読む

Q擬似フレーム

フレームだらけの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は作れたのですが,ヘッダー・サイトマップ・フッターの共用の仕方がわかりません.

よろしくお願い致します.

Aベストアンサー

>参考にしたサイトでは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)

>参考にしたサイトでは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...続きを読む


人気Q&Aランキング