人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: tmksStyle
●カテゴリ:ウェブ制作
✍キーワード:PHP Webデザイン wordpress クリック コンテンツ
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● niwa-mikiho
●19ポイント

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


http://dummy;

◎質問者からの返答

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


2 ● a-kuma3
●19ポイント

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

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

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


http://dummy/

◎質問者からの返答

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


3 ● あすか
●18ポイント

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

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

◎質問者からの返答

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


4 ● ymlab
●18ポイント ベストアンサー

私ならば、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が未だ対応していないので、

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

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

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

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

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

頑張ってくださいね。

◎質問者からの返答

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


5 ● k-tan2
●18ポイント

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

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

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

ここにある、

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

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

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

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

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

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

◎質問者からの返答

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


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ