Webデザインに関する質問です。

サイト上部にヘッダ、サイト左側にサイドメニューを用意し、ヘッダやメニューのリンクをクリックすることで、サイト全体ではなくコンテンツ部分のみ更新するようなものを実現しようと思っています。

下記サイトの様なものが理想です。
http://www.hcii.cmu.edu/
http://www.connect-tech.co.jp/products/index.html

frameタグ、PHPやWordpressを使用せずに実装したいと考えています。
実現する方法があれば教えてください。

回答の条件
  • URL必須
  • 1人2回まで
  • 13歳以上
  • 登録:2010/12/30 08:01:42
  • 終了:2011/01/04 09:29:11

ベストアンサー

id:ymlab No.4

ymlab回答回数506ベストアンサー獲得回数332010/12/30 18:20:22

ポイント18pt

私ならば、id:asuka645 さんと同じように、Javascript のinnerHTML で実装します。

一時期、職場を管理しているサーバの仕様がPHPやcgi等のスクリプトを実装できなかった時期に、

innerHTMLで実装したことがあります。但し、PHP等で通信ができないため、

あまり実装する必要性を見出せませんでした。ただソースコードが見えにくくなるだけでした。


javascriptのみのAjaxで実装する方法は、ちょっと私には実装方法が不明です。

Ajaxの主たる部分である、XMLHttpRequestは、セキュリティを担保するため、

クロスドメイン制限がかかっているはずです。

他には、JSONを使う方法もあります。

私は、ちょっとしかJSONを扱ったことがありませんので、

詳しくは説明できませんが、

http://shokai.org/blog/archives/993

等が参考になるかと思います。

また、さらにこれもやったことがないので、紹介のみですが、

HTML5+CSS3で実装することもできそうです。

今後はHTML5が一般的になると思うので、勉強のために、実装するのも良いかも知れません。

http://www.publickey1.jp/blog/09/webhtml5css3javascript_20.html

ただし、HTML5は、

http://www.publickey1.jp/blog/10/_46html5.html

にもあるように、Internet Explorerが未だ対応していないので、

人によっては正常に表示されない可能性があります。

そこで、対応していないブラウザの時は、別の手段で実装するという

面倒な作業が待っています。

どれにするかはいろいろな手段がありますが、

どれにしようと考える時が一番わくわくしますね。

頑張ってくださいね。

id:tmksStyle

ありがとうございます。参考にさせていただきます。調査して実装するまで時間がかかるので今は何とも言えませんが、がんばってみます。

2010/12/30 18:33:36

その他の回答(5件)

id:niwa-mikiho No.1

niwa-mikiho回答回数508ベストアンサー獲得回数382010/12/30 08:20:01

ポイント19pt

PHP などの言語を使わないとなると、Ajax による呼び出ししか手段はありません。


http://dummy;

id:tmksStyle

ありがとうございます。サーバ側をいじれないので、Ajaxを使うしかないかもしれません。

2010/12/30 08:52:37
id:a-kuma3 No.2

a-kuma3回答回数4442ベストアンサー獲得回数18252010/12/30 08:47:19

ポイント19pt

理想としてあげてもらったサイトでは、メニューをクリックしたときにコンテンツだけじゃなくて、

ページ全体を読み直しているけど。

メニューの位置をカチっと決めてあげれば、メニューを書きなおしているように見えない(ことが多い)、ということじゃない?


http://dummy/

id:tmksStyle

サイトのレスポンスが速かったのでコンテンツ部分だけ変更しているように見えたのですが、やはりページ全体の読み直しだったのですか。サイト全体の書き直しが必要になるので、できれば避けたいところです。

2010/12/30 08:55:46
id:asuka645 No.3

あすか回答回数856ベストアンサー獲得回数972010/12/30 10:31:30

ポイント18pt

JavaScriptのinnerHTMLを使って書き換えてはいかがでしょうか。

特定の要素の中身をごっそり書き換える」を参考にして下さい。

id:tmksStyle

ありがとうございます。後ほど試してみます。

2010/12/30 10:51:55
id:ymlab No.4

ymlab回答回数506ベストアンサー獲得回数332010/12/30 18:20:22ここでベストアンサー

ポイント18pt

私ならば、id:asuka645 さんと同じように、Javascript のinnerHTML で実装します。

一時期、職場を管理しているサーバの仕様がPHPやcgi等のスクリプトを実装できなかった時期に、

innerHTMLで実装したことがあります。但し、PHP等で通信ができないため、

あまり実装する必要性を見出せませんでした。ただソースコードが見えにくくなるだけでした。


javascriptのみのAjaxで実装する方法は、ちょっと私には実装方法が不明です。

Ajaxの主たる部分である、XMLHttpRequestは、セキュリティを担保するため、

クロスドメイン制限がかかっているはずです。

他には、JSONを使う方法もあります。

私は、ちょっとしかJSONを扱ったことがありませんので、

詳しくは説明できませんが、

http://shokai.org/blog/archives/993

等が参考になるかと思います。

また、さらにこれもやったことがないので、紹介のみですが、

HTML5+CSS3で実装することもできそうです。

今後はHTML5が一般的になると思うので、勉強のために、実装するのも良いかも知れません。

http://www.publickey1.jp/blog/09/webhtml5css3javascript_20.html

ただし、HTML5は、

http://www.publickey1.jp/blog/10/_46html5.html

にもあるように、Internet Explorerが未だ対応していないので、

人によっては正常に表示されない可能性があります。

そこで、対応していないブラウザの時は、別の手段で実装するという

面倒な作業が待っています。

どれにするかはいろいろな手段がありますが、

どれにしようと考える時が一番わくわくしますね。

頑張ってくださいね。

id:tmksStyle

ありがとうございます。参考にさせていただきます。調査して実装するまで時間がかかるので今は何とも言えませんが、がんばってみます。

2010/12/30 18:33:36
id:k-tan2 No.5

k-tan2回答回数401ベストアンサー獲得回数482010/12/30 21:53:01

ポイント18pt

>サイト全体ではなくコンテンツ部分のみ更新するようなものを実現しようと思っています

そう見えるだけで、実際にはページ全部書き換わってるんです。

http://www.css-designsample.com/csslayout/float-2column.html

ここにある、

◦2カラム固定幅のCSSサンプルソース

◦3カラム固定幅のCSSサンプルソース

をローカルでもよいので試してみれば、確認できると思います。

ちなみに、質問文の2つのサイトも部分書き換えでなくて

すべて書き換わってます。

ヘッダーと左サイドバーが書きまわってないように見えるだけなんです。

id:tmksStyle

サイト内のページ全て手動で書き換えなければなりませんね。なんかいい着地点があればいいんですけど。

2010/12/31 09:56:09
id:hanako393 No.6

hanako393回答回数1142ベストアンサー獲得回数872010/12/31 13:27:32

ポイント18pt

prototype.jsで外部htmlファイルを読み込む

http://sevenstyleweb.com/blog/2008/05/prototypejshtml.html

この方法で実現可能です。

回答であがっている他のも同様ですが、

javascriptで実装する方式(Ajaxも含む)では、Googleとかの検索エンジンに

その部分が認識されませんので(単なるJavascriptと認識される)、

かなり、SEOとしては不利になります。

だから、あまりそんなことをする人はいません。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません