質問の仕方が分かりませんが、 だいたいのHPやウェブサイトはメニューやリンクがあって例えば、

質問の仕方が分かりませんが、 だいたいのHPやウェブサイトはメニューやリンクがあって例えば、 メニューのホームを押す→ホームに関するコンテンツが表示される メニューのキャラ紹介を押す→キャラに関するコンテンツが表示される 的な感じで作られていますよね。 これって、 <a href="#">ホーム</a> って感じで作られてるのかと思うんですけど、各メニュー(ホームとか〇〇紹介とか)を押しても、なぜ基本的なレイアウトは変化せずに内容のみ変化するといった感じにできるのでしょうか。 私の予想としては、大元のファイルをコピペして、各メニューについて内容だけ変更したファイルをそれぞれ作成して#にそのファイル名を入れているのかなと思っています。これであっているのでしょうか。 言いたいことが全く伝わらないかもしれませんがよろしくお願いします。

ベストアンサー

0

><a href="#">ホーム</a> >って感じで作られてるのかと思うんですけど #はページ内ジャンプです、他のページへのジャンプではありません、他のページへのジャンプとページ内ジャンプを組み合わせる場合もあります。 >各メニュー(ホームとか〇〇紹介とか)を押しても、なぜ基本的なレイアウトは変化せずに内容のみ変化するといった感じにできるのでしょうか。 >私の予想としては、大元のファイルをコピペして、各メニューについて内容だけ変更したファイルをそれぞれ作成して#にそのファイル名を入れているのかなと思っています。これであっているのでしょうか。 恐らく それでOKです、簡単なメニューを持っている簡単なページを2つ作って実際に試してみると良いでしょう(これぐらいなら あれこれ考えるより実際に試した方が早いですよ)。 下記はテスト用のデモですので、実用性は考慮していません。 CSSの共通部分は外部ファイルにする場合もあります。 ファイルに「html」拡張子を付けて下さい(ファイルが完成したらダブルクリックでデフォルト・ブラウザで表示できます、ブラウザの起動に少々 時間がかかるかもしれません)。 metaタグでcharsetをUTF-8に設定しています。 モチロン他のキャラクターセットに変更しても良いですが、必ずcharsetに設定されているキャラクターセットでセーブして下さい。 キャラクターセットが違うと全角文字が文字化けします。 ※現在、キャラクターセットは多数ありますが、「UTF-8、Shift_JIS」の2つがインターネットでのデファクトスタンダードです。 【index.html】 <!DOCTYPE html> <html> <head> <mefta charset='UTF-8'> <title>example</title> <style> a { background-color: #00ccff; } a:hover { background-color: #00ff77; } </style> </head> <body> <p> <a href="index.html">Home Link</a> <a href="page2.html">Page 2 Link</a> </p> <p> いろはにほへと ちるぬるを. わかよたれそ つねならむ. </p> </script> </body> </html> 【page2.html】 <!DOCTYPE html> <html> <head> <mefta charset='UTF-8'> <title>example</title> <style> a { background-color: #00ccff; } a:hover { background-color: #00ff77; } </style> </head> <body> <p> <a href="index.html">Home Link</a> <a href="page2.html">Page 2 Link</a> </p> <p> うゐのおくやま けふこえて. あさきゆめみし ゑいもせす </p> </script> </body> </html>

ThanksImg質問者からのお礼コメント

ご丁寧にありがとうございます。

お礼日時:10/23 16:22

その他の回答(2件)

1

ごめんなさい。ちょっとおっしゃることが良くわからないので的外れかもしれませんが・・・ >大元のファイルをコピペして わざわざコピペしたりせず、共通の部分はパーツ化して、そのパーツを呼び出すだけで使えるようにしています。 例えば、メニューやヘッダー、フッターなんかはすべてのページで共通のことが多いですよね。 それらを「menu」「head」「foot」というパーツとして作ります。そして、それを配置する場所で「ここに"menu"のパーツを置く」というような命令を書きます。(これはphpなどで書かれることが多いです) お知りになりたいことと合致していますでしょうか?

1人がナイス!しています