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

下記のサイトのように左側のボックスの仲のリンクをクリックすると右側に内容が表示されます。例えば「どうせならお得に辞めよう」と書かれたリンクをクリックすると左側のボックスは固定されたままで右側に内容が表示されます。フレームは使ってないのはわかります。CSSでボックスを作っているのはわかるのですが、左側のボックスはどのページに行っても固定されています。

まさかこれを実現しているのは、単純にリンク毎にまったく同じボックスを貼り付けて作っているということでしょうか?例えば「どうせならお得に辞めよう」「サービス残業するなんて」・・・ボックス内にリンクがあります。各リンク毎に全く同じボックスを作ればどのページに移動しても、あたかもボックスは固定されているように見えます。しかし、一つリンクを追加したら全部のページでリンクを追加しないといけません。これは面倒です。

いったいどのような方法でボックスを固定しているんでしょうか?私の想像通りのことをやっているんでしょうか?
http://www.1sitsugyou.com/

●質問者: popattack
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS クリック サイト サービス残業 フレーム
○ 状態 :終了
└ 回答数 : 4/5件

▽最新の回答へ

1 ● y-kawaz
●0ポイント

普通にSSIか何かでヘッダとフッタをインクルードしてるだけだと思います。

CGIかもしれませんが拡張子も.htmlですし、この程度でCGI使うのも無駄なので多分SSIでしょうね。

http://www.atmarkit.co.jp/flinux/rensai/apache07/apache07.html


2 ● fumikef
●0ポイント

最初の方の回答は、別にトンチンカンな回答ではないと思いますよ。

私もSSI(Server Side Include)を使ってると思います。


リンク先の出だしにありますが、「SSIを使えば複数のページで共通部分を一元化できるなどのメリットがある。」の通り、共通部分としてサイドのメニューを複数のページで同じ位置に表示しているんでしょう。


つまり、サイドメニューだけのパーツがあらかじめ用意してあって、それをSSIという技術を使って、全てのページに読み込ん(インクルード)で表示している感じです。


リンクを増やす場合も、サイドメニューのパーツにリンクを増やせば、全てのページにリンクが入ることになります。


http://www.atmarkit.co.jp/flinux/rensai/apache07/apache07.html

最初の方と同じURLですけど。

◎質問者からの返答

ここのサイトでSSIは使っていないと思います。規模が小さいし、個人のページなので何かソフトウェアを使っていると思います。そのソフトウェアがなんなのかわかるでしょうか?


3 ● gorimaru9
●10ポイント

ソースを見ると

<!--■ヘッダー--><!-- #BeginLibraryItem "/Library/header.lbi" -->

</div><!-- #EndLibraryItem --><!--/■ヘッダー-->

<!--●左コンテンツ--><!-- #BeginLibraryItem "/Library/left.lbi" --><div id="left">

</div><!-- #EndLibraryItem --><!--/●左コンテンツ-->

といった記述が見られるため、ヘッダーや左コンテンツごとにモジュールとして分割していることが想定されます。

全てのページが.htmで作られているところをみると、Movable Typeのようなソフトウェアを使用してページを作成しているのかも知れません。

Example Web Page


4 ● proganochelys
●80ポイント

DreamweaverのLibrary機能を使っているようです。


http://oshiete1.goo.ne.jp/qa1784605.html

http://www.oyakonews.com/oyanews/homep/UPDATE/UPD_06.html



私はAdobeのGoLiveを使っていましたが、同じような機能「テンプレート」を使っていました。

SSIが使えないサーバーもありますし、JavaScriptで外部ファイルを呼び出すことも考えましたが、全てのブラウザで動作する保証もありませんでしたので、この機能には助けられました。

一箇所編集すれば、それにリンクしている各ページの該当部分をソフトが自動的に書き換えてくれますので便利です。

独自機能なので、ツールが限定されるというのが難点でしょうか。

◎質問者からの返答

このような具体的な回答が欲しかったです。ありがとうございます。

関連質問


●質問をもっと探す●



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