締切済み

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

2014/11/07 22:36

例えば、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は勉強したてです。ちょっと混乱してきました。

japanwalker
お礼率72% (59/81)

CSS
回答数5
ありがとう数16

みんなの回答 （5）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/11/09 09:52 回答No.5

それで動作するなら ^^^^^^^^^^^^^^^^^^^^^ /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;}

tracer
ベストアンサー率41% (255/621)

2014/11/09 08:21 回答No.4

全部の説明は長くなるため最後まで書けませんが、アプローチだけ紹介します。まず、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);?>

質問者

お礼 2014/11/10 10:07

ご回答ありがとうございます。１さんが書かれているのが一つめの方法ですよね？簡単ですが、なんと言いますか・・・ま、最後の手段的方法として取っておきましょう。二つめのjavascriptを利用ってことになりますね。おおまかに理解出来る程度ですが、実際にやってみないとなんとも。。。これを機に勉強してみようと思います。ありがとうございました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/11/08 17:49 回答No.3

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;}

質問者

補足 2014/11/08 23:00

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

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/11/08 17:34 回答No.2

私はここ15年framesetは使用していません。『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。(1999年勧告HTML4.01仕様書 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』　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>

質問者