カラムにホームページを表示させたい

締切済

質問者：japanwalker
質問日時：2014/11/07 22:36
回答数：5件

例えば、cssで添付画像のように２カラムのレイアウトを作ったとします。

左のdiv#subContentに
<a href="a.html">a</a>
<a href="b.html">b</a>
<a href="c.html">c</a>
とし、それぞれa、b、cをクリックしたとき
右のdiv#mainContentにa.html、b.html、c.htmlを表示させたいのです。

こういうことは出来ないのでしょうか？
検索しても方法を書いたサイトに辿り着けません。

今までは、こういいうことをして作っていたのですが・・・
<frameset cols="160,*" border="0">
<frame src="sub.html" name="subFrame">
<frame src="main.html" name="mainFrame" >
</frameset>

まだcssは勉強したてです。ちょっと混乱してきました。

通報する

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

質問の本文を隠す

回答 (5件)

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

No.1

回答者： outbrave
回答日時：2014/11/08 14:40

2カラムの場合は、同じレイアウトのページを複製して、部分的に変更することになります。

移動は部分的ではなく、ページ単位です。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

なんとなく仰ってる意味解ります。

通報する

お礼日時：2014/11/08 21:54

No.2

回答者： ORUKA1951
回答日時：2014/11/08 17:34

私はここ15年framesetは使用していません。

『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。(1999年勧告HTML4.01仕様書 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　framesetの、ブックマークに登録できない、検索エンジンに登録されないなど問題点はすでに御存知でしょう。

・最も初歩的な対策は、同一の目次なども各ページにすべて書いておく。

・SSI(Server Side Includes)を利用して共通部分はサーバーに出力させる。
　HTTPサーバーの初期からある非常に古い枯れた技術です。
　(サーバーによったら許可していない場合がある）

・PHP,CGIなどプログラムを使用してページを出力する。

　※下の二つは、デフォルトの拡張子は.shtml.php,cgiなどですが、拡張子を.htmlにすることも可能です。

SSIのサンプル
下記ファイルを指定するフォルダーにれる。
文字コードはすべてShift_JIS
タブは＿に置換してあるので戻す。
/ssiSample
[P1.shtml]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<link rel="stylesheet" type="text/css" media="screen" href="./CSS/test.css">
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section" id="section1">
＿＿<h2>第一章の見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿
＿＿
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿
＿＿
＿</div>
</body>
</html>

[P2.shtml]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<link rel="stylesheet" type="text/css" media="screen" href="./CSS/test.css">
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section" id="section2">
＿＿<h2>第二章の見出し</h2>
＿＿<p>これは第二章です。</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿
＿＿
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿
＿＿
＿</div>
</body>
</html>

[P3.shtml]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<link rel="stylesheet" type="text/css" media="screen" href="./CSS/test.css">
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section" id="section3">
＿＿<h2>第三章の見出し</h2>
＿＿<p>これは第三章です。</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿
＿＿
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿
＿＿
＿</div>
</body>
</html>

この回答への補足

ご回答ありがとうございます。

うぉーーー
私のスキルで追いつけるか判りませんが、今から試してみます(^^ゞ

補足日時：2014/11/08 22:00

通報する

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2014/11/08 17:49

SSI用のファイルと、スタイルシートです。

それぞれを、指定されたディレクトリ(/ssiSample/SSI, /ssiSample/CSS に入れる
★今回はframesetのようにナビゲーション固定にはしてありません。
　固定にすることもスタイルシートを書き換えるだけで可能です。

/
|-- ssiSample
|　　　|-- P.1.html
|　　　|-- P.1.html
|　　　|-- P.1.html
|　　　|-- /SSI
|　　　|　　　　|- address.html
|　　　|　　　　|- aside.html
|　　　|　　　　|- history.html
|　　　|　　　　|- nav.html
|　　　|--/CSS
|　　　|　　　　|-- test.cssl

[address.html]
<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>

[aside.html]
＿＿<div class="aside">
＿＿＿<h3>補足記事</h3>
＿＿＿<p>ここには、本題から外れた(aside)、本題とは直接関係しない記事を書く</p>
＿＿</div>

[history.html]
<dl class="documentHistory">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2013-03-03 12:00:00 (JST)</dd>
＿＿</dl>

[nav.html]
<div class="nav">
＿＿＿<h3>目次</h3>
＿＿＿<ol>
＿＿＿＿<li><a href="./P1.shtml">１章</a></li>
＿＿＿＿<li><a href="./P2.shtml">２章</a></li>
＿＿＿＿<li><a href="./P3.shtml">３章</a></li>
＿＿＿</ol>
＿＿</div>

[test.css]
@charset "Shift_JIS";
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:470px;max-width:900px;margin:0 auto;padding:5px;}
div.section{position:relative;}
div.section div.nav,div.section div.aside{position:absolute;top:0;width:150px;height:100%;padding:0 5px;font-size:0.9em;}
div.section div.nav{left:0;}
div.section div.aside{right:0;}
div.section div.section{width:auto;min-height:400px;min-width:0;margin:0 160px;}
div.section h2,div.section p{margin:0 160px;}
div.section div p{margin:0;}

/* 色分け */
body{background-color:gray;}
div.header{background-color:aqua;}
div.section{background-color:white;}
div.section div.section{background-color:transparent;}
div.section div.aside{background-color:lime;}
div.section div.nav{background-color:silver;}
div.footer{background-color:fuchsia;}
#section2{background-color:yellow;}
#section1{background-color:orange;}

この回答への補足

セットしましたが、肝心のindex.htmlはどうすればいいのでしょうか？

補足日時：2014/11/08 23:00

通報する

- 0
- 件

通報する

No.4

回答者： tracer
回答日時：2014/11/09 08:21

全部の説明は長くなるため最後まで書けませんが、アプローチだけ紹介します。

まず、2通りのアプローチが考えられます。
ひとつめは、サイトのすべて情報を1つのhtmlに記述し、表示だけを切り替えるという手法です。これは、サイト全体の情報が少ない場合に有効です。この方法であれば、難しい技術は必要なく、html/cssレベルの作業です。

ふたつめは、javascriptを利用する方法です。
質問文から察するに、おそらく質問者さんとしては少し難しい内容になると思いますが、javascriptを利用することで、外部にある情報を差し込むことができます。

単純に考えるなら、質問内容を何も難しく考えずに、単に以下の様なhtmlでmain部分だけを変更して量産すれば、結果は同じです。ただ、framesetのように共通する部分を単一で扱えないだけです。

HTML
<div id="container">
　<div id="sub">A Sub</div>
　<div id="main">B Main</div>
</div>

すでに回答もありますが、共通の情報を一元管理したいという目的でframesetを選ばれたのであれば、通常のWeb制作ではサーバー側でhtmlを出力する方法を取ることが多いです。つまり、ひな形をつくって差し込む機能をサーバー側が持つことになります。ただ、SSIを利用するケースはかなり稀で、PHPやRubyなどの言語を使われるのが一般的だと思います。たとえば、PHPであれば、読み込みたい箇所に一行書くだけです。

//B subのhtmlを読み込む
<?php include(sub.html);?>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

１さんが書かれているのが一つめの方法ですよね？
簡単ですが、なんと言いますか・・・
ま、最後の手段的方法として取っておきましょう。

二つめのjavascriptを利用ってことになりますね。
おおまかに理解出来る程度ですが、実際にやってみないとなんとも。。。
これを機に勉強してみようと思います。

ありがとうございました。

通報する

お礼日時：2014/11/10 10:07

No.5

回答者： ORUKA1951
回答日時：2014/11/09 09:52

それで動作するなら

^^^^^^^^^^^^^^^^^^^^^
/ssiSample に
[.htaccess]
Options +Includes
AddHandler server-parsed html

を入れておく。ファイル名、リンク先の.shtmlを.htmlに変更する。
※保存時に".htaccess"として""で括らないと勝手に.htaccess.txtとするエディタもある。

[index.html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<link rel="stylesheet" type="text/css" media="screen" href="./CSS/test.css">
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section" id="section1">
＿＿<h2>このサイトの目次</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<div id="contentTable">
＿＿＿＿<ol>
＿＿＿＿＿<li><a href="./index.html">トップ</a></li>
＿＿＿＿＿<li><a href="./P1.html">１章</a></li>
＿＿＿＿＿<li><a href="./P2.html">２章</a></li>
＿＿＿＿＿<li><a href="./P3.html">３章</a></li>
＿＿＿＿</ol>
＿＿＿</div>
＿＿</div>
＿＿
＿＿
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿
＿＿
＿</div>
</body>
</html>

[nav.html]
<div class="nav">
＿＿＿<h3>目次</h3>
＿＿＿<ol>
＿＿＿＿<li><a href="./index.html">トップ</a></li>
＿＿＿＿<li><a href="./P1.html">１章</a></li>
＿＿＿＿<li><a href="./P2.html">２章</a></li>
＿＿＿＿<li><a href="./P3.html">３章</a></li>
＿＿＿</ol>
＿＿</div>

SSIは、とても古い技術で、質素で目立ちませんが、簡単に実現できるため意外と多くのサイトで使われています。いくつか理由があります。
・javascriptを使用すると、それを利用できないユーザーエージェントや検索エンジンに利用できない
・別途プログラムを用意したりしなくて良い。

目安として
数ページなら一つのページにまとめてフレーム風に(今回のCSS)
数～数十ページなら、同じ項目はコピペ
それを越えた場合や、動的に変化する場合はPHPやPerlやRubyを使用
　　単に同一コンテンツだけの場合はわざわざ使わない

CSSをframeset風に書き換えると
[test.css]
@charset "Shift_JIS";
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:470px;max-width:900px;margin:0 auto;padding:5px;}
div.header{height:100px;}
div.section{position:relative;}
div.section div.nav,div.section div.aside{font-size:0.9em;}
div.section div.nav{position:fixed;top:110px;width:100%;left:0;}
div.section div.aside{position:absolute;top:0;width:150px;height:100%;padding:0 5px;}
div.section div.aside{right:0;}
div.section div.section{width:auto;min-height:400px;min-width:0;margin:0 160px;}
div.section h2,div.section p{margin:0 160px;}
div.section div p{margin:0;}
div.section div.nav ol{width:90%;margin:0 auto;padding:0;}
div.section div.nav ol li{width:150px;list-style:none;line-height:2em;text-align:center;}
div.section div.nav h3{display:none;}
/* 色分け */
body{background-color:gray;}
div.header{background-color:aqua;}
div.section{background-color:white;}
div.section div.section{background-color:transparent;}
div.section div.aside{background-color:lime;}
div.section div.nav ol li{background-color:silver;}
div.footer{background-color:fuchsia;}
#section2{background-color:yellow;}
#section1{background-color:orange;}