おしえて

フレームの代わり、どうしたら？＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊社内向けのホームページ担当です。

締切済

質問者：goodegoodeggg
質問日時：2016/12/27 18:32
回答数：5件

フレームの代わり、どうしたら？
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
社内向けのホームページ担当です。
ずっとメンテナンス程度の更新しかしていなかったのですが、久し振りに新しいコンテンツを増やす事になりました。

ホームページビルダー8から16にアップデートしたら、テンプレートが豊富でビックリ。調べてみると、もうフレームでページ作りって古いんですね…

社内イントラで「検索機能」は使われてないのですが、せっかくなのでフレームを使わない方法でフレームページのような見映えにしたいです。

CSSも使ってなかったのでテンプレートの解読＆参考書で勉強を始めましたが、複数ページに点在する目次欄を共通化する方法が分かりません。

/*やりたいこと/*
・トップページの目次欄には部署名24件がぶら下がり、それぞれの部署ページにも同じ目次欄を付ける。
・部署の増減があると、全ての目次欄で部署名の改編が必要。
・ひとつのファイルの目次欄を修正すると、全てのページで目次欄が更新されるようにしたい。

/*質問/*
・HTML＋CSSで、フレームページのように常に共通の目次欄を使用する方法はありますか？javascriptも勉強し始めたばかりですみません(>_<)

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： ORUKA1951
回答日時：2016/12/30 16:55

フレームの問題は今更ですので繰り返しません。

ただ、とても古い技術で特定のページを表示した状態でブックマークしたり、他人に伝えられないのが最大の欠点で、社内ネットとしても最大の問題点となります。
Q:たくさんのページに同じ内容のコードが含まれている。
　いちいち書き換えるのは非現実的

　通常は、とても古い--枯れた技術であるSSI---Server Side Includes( https://ja.wikipedia.org/wiki/Server_Side_Includes )を利用する方法で、HTTPサーバーは標準で持っています。
例えば、HTML内に

というコードがあれば、その部分に/SSI/header_navigationList.htmにそのまま書き換えて提供してくれますから、/SSI/header_navigationList.htmを書き換えれば、そのコードの埋め込んであるすべてのページが書き換わります。
　フレームだけでなく、新着情報とか、重要な連絡事項など。。


とか、

Q: フレームに変わって、同様な利便性を持たせるには・・
　フレームに変わるプレゼンテーションは、下記のように
★タブは＿に置換してあるので戻す。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　のDATA(右上)で検証ずみのHTML5です。
★タブレットやスマホでも利用できるはず。
<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">

</style>
<style media="screen and (max-width: 640px)">

</style>

</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿</p>
＿＿<section>
＿＿＿<h3>A smaller heading</h3>
＿＿＿<p>
＿＿＿＿項目記事・・・
＿＿＿</p>
＿＿</section>
＿＿<section>
＿＿＿<h3>A smaller heading</h3>
＿＿＿<p>
＿＿＿＿項目記事・・・
＿＿＿</p>
＿＿</section>
＿＿<section>
＿＿＿<h3>A smaller heading</h3>
＿＿＿<p>
＿＿＿＿項目記事・・・
＿＿＿</p>
＿＿</section>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿＿<p>本文と直接関係ない補足記事など</p>
＿</footer>
</body>
</html>

- 0
- 件

通報する

No.4

回答者： Ogre7077
回答日時：2016/12/28 10:32

案1. Web ブラウザの機能で目次を挿入

各ページに <script src="/toc_part.js"></script> を仕込む。
toc_part.js に目次欄を生成する処理を書く。

案1その2
toc_part.js が AJAX 呼び出しをして、
toc_part.html を読み出して、
そのままページ内に挿入する。
参考)
https://developer.mozilla.org/ja/docs/AJAX

案1その3
toc_part.js が AJAX 呼び出しをして、
toc_part.json を読み出して、
データをもとに目次欄を生成する処理を書く。
参考)
https://developer.mozilla.org/ja/docs/Web/JavaSc …

案2. サーバー側の機能で目次を挿入
HTTP サーバーに SSI の機能を持たせ、
各ページに SSI を埋め込み、
toc_part.html をページ内に挿入する。
参考)
http://httpd.apache.org/docs/2.4/howto/ssi.html
https://msdn.microsoft.com/ja-jp/library/ms52594 …

案3. 公開前に目次を挿入
各ページに 目次欄 を挿入
スクリプトを組み、上記の部分に toc_part.html を挿入する処理を行う。
変更があった場合は、スクリプトで全ページを更新する。
参考)
https://www.google.co.jp/search?q=%E3%83%86%E3%8 …

- 1
- 件

通報する

No.3

回答者： whtg001
回答日時：2016/12/27 22:58

解決する方法は、dreamweaverを買ってもらってライブラリ機能を使用することです。

メニューなどの各ページ共通部分を１か所で管理できます。ライブラリ化したHTMLソースの共通部分を編集すると各HTMLファイルに自動的に反映してくれます。

HTML＋CSSでのデザインや配置は別問題としてあって、それぞれ覚える必要がありますがdreamweaverではCSSをGUIから操作できるインターフェースがあります。

////////////

もっとも効率的な更新ができる方法としてはCMSの利用というのもあります。これはサーバーにCMSのシステムをインストールする必要がありますのでサーバー管理者に相談する必要があるとおもわれます。

///////////

いずれにしてもいろいろな知識を必要とし、苦労することになりますので、現状維持が一番よろしいかとおもわれます。

- 0
- 件

通報する

No.2

回答者： moon-and-star
回答日時：2016/12/27 19:33

HTML＋CSSはかなり難しいです。

　　　
フレームのような管理のしやすさ（メニューは1ファイル）で尚、フレームではない作り方としてSSI（Server Side Include）という方法もあります。
私はこれで管理しています。
https://allabout.co.jp/gm/gc/23773/

- 0
- 件

通報する

No.1

回答者： moon-and-star
回答日時：2016/12/27 18:52

社内向けであればフレームでOK！

フレームの欠点は「一意のページを表示できない」という事ですが、作るにはとても便利です。
社内向けだけであれば作成に時間が掛からないフレームで一向に構わないでしょう。

- 1
- 件

通報する

この回答へのお礼

早速ありがとうございます！
フレーム推し嬉しいです(*^^*)

補足ですみません。
まだ先の話ですが、社内イントラ再構築の話があり、シェアポや何らかのポータル導入の話があがってます。なので、この機会にCSSデビューはするつもりでいます。

納期が間に合わないようならフレームで！でも出来れば新しい技術にもチャレンジして、使い勝手を確認したいです。

引き続き、お力添えのほどよろしくお願いします(>.<)

通報する

お礼日時：2016/12/27 19:05

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