id:taro_707
ポイントあり100pt回答受付終了
ウェブ制作

以下のようなサイトを作りたいのですが、

http://www5.synapse.ne.jp/taro/
思うようなデザインに出来ません。
知恵を貸してください。
（詳しくは上記サイトに書いてあります）

回答の条件
  • URL必須
  • 1人2回まで
  • 登録：
  • 終了：--
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答（6件）

id:nekogo No.1

回答回数113ベストアンサー獲得回数2

ポイント17pt

http://tohoho.wakusei.ne.jp/wwwssi.htm

そのファイルは現在ありません

SSIが使えるようであれば、メニュー部分を他のファイルとして、以下のような形で呼び出せばできると思います。

呼び出す側のファイル名は、shtml　となります。

<!--#include file=”メニュー部分” -->

id:taro_707

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

名前だけは知ってますが、使ったことがないので今から勉強します。

でも使えたら便利そうですね。

頑張っておぼえます。

2004/06/09 10:15:20
id:tetsuya9 No.2

回答回数33ベストアンサー獲得回数0

ポイント17pt

右のセルをセルで区切らずに1行にして、ナビゲーションのために一つテーブルを設けます。

そのナビゲーション入りのテーブルを、既存のテーブルの右列に、上寄せで入れれば大丈夫だと思います。

id:taro_707

上寄せということはalignで指定するということでしょうか？

私も考えたのですが、

http://tohoho.wakusei.ne.jp/html/table.htm

の中に上寄せ指定の属性が見つからなかったので

あきらめてました。

よろしければ上寄せの具体的な方法を教えてもらえないでしょうか？

勉強不足ですみません。

2004/06/09 10:20:01
id:aki73ix No.3

回答回数5224ベストアンサー獲得回数27

ポイント17pt

http://asa7410.hp.infoseek.co.jp/

HP-DESIGN.NET

ここのサイトのようにダイナミックHTMLを使ってはいかがでしょうか？サンプルも入手可能です

少し加工して、JavaScriptでブラウザの画面の幅を取得してナビゲーションの座標を調整すればいい感じになるかと思います

http://www2.ocn.ne.jp/~yoochan/decoration/

Decoration HTML Room

id:taro_707

実はダイナミックHTMLも使ったことがないです。

恥ずかしながら、、、。

1つ目のサイトはメニューが動くようですが、今回は上部に固定したいです。

ダイナミックHTMLとJavaScriptを使って特定の位置に固定するということは可能でしょうか？

2004/06/09 10:29:26
id:KAIUN No.4

回答回数24ベストアンサー獲得回数3

ポイント17pt

メニューが入っているテーブルのセルが伸びてしまうということですよね？

それでしたら、たとえばメニューの部分だけを独立したテーブルに入れるなりして、右側のセル（背景がグレーの部分）の縦配置を“TOP”にしてあげれば大丈夫だと思います。

↓グレーの部分のこんな感じです。

<td valign=”top” bgcolor=”#CCCCCC”>

<table width=”200” border=”0” cellspacing=”0” cellpadding=”0”>

<tr>

<td bgcolor=”#FFFF99”>TOP

<p>INFOMATION</p>

<p>TOPICS</p>

<p>FAQ</p>

<p>LINK</p>

<p>MAIL</p></td>

</tr>

</table></td>

id:taro_707

なるほど、セルをtopに指定するんですね。

ありがとうございます。

2004/06/09 10:38:17
id:marutahiko No.5

回答回数36ベストアンサー獲得回数0

ポイント16pt

<td width=”200” bgcolor=”#CCFFFF” valign=”top”>

<table width=”100%” border=”0” cellspacing=”0” cellpadding=”0” height=”100%”>

<tr>

<td bgcolor=”#FFFF99”> <font size=”2”>

<b>TOP

INFOMATION

TOPICS

FAQ

LINK

MAIL</b></font></td>

とすれば、メニューは上に固定されます。

灰色部分はメニューにくっつけるのではなく別テーブルにしてはどうでしょうか？

id:taro_707

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

今回はテーブルの方法を採用して、

他の方法はこれから勉強していきたいと思います。

みなさま、回答ありがとうございました。

2004/06/09 10:42:30
id:reply No.6

回答回数787ベストアンサー獲得回数0

ポイント16pt

一例です。

バックグランドの色の設定で回避できます。

（私のブラウザでは問題は出ていません。）

<html>

<head>

<title>無題ドキュメント</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>

</head>

<body text=”#000000”>

<table width=”750” border=”0” cellspacing=”0” cellpadding=”0” bgcolor=”#CCCCFF”>

<tr>

<td width=”550” >

<table width=”100%” border=”0” cellspacing=”0” cellpadding=”0” height=”100%”>

<tr>

<td bgcolor=”#CCCCFF”>

<p><font size=”2”>全てのページがこのデザインで、

コンテンツ部分（紫の部分）だけがページによって変わります。

普通にコンテンツを更新して紫部分を縦に伸ばすとメニューが変な位置に行って

しまうので、その解決方法を探しています。

（条件）

・中央にスクロールバーを持ってきたくないのでフレームは使いたくない。

・右ナビゲーションというのは決まっているので変更できない。

・黄色部分のナビゲーションは常に上部に固定、高さも固定

ちなみに現在はこのページのように2列1行のテーブルでページを囲んで、

セルの中にそれぞれテーブルを入れ、</font></p>

<table width=”100” border=”1” cellspacing=”1” cellpadding=”5” bordercolor=”#000000” bgcolor=”#FFFFFF”>

<tr>

<td>

<table width=”100%” border=”1” cellspacing=”1” cellpadding=”1” height=”100” bordercolor=”#000000”>

<tr>

<td bgcolor=”#CCCCFF”>　</td>

</tr>

</table>

</td>

<td>

<table width=”100%” border=”1” cellspacing=”1” cellpadding=”1” height=”100” bordercolor=”#000000”>

<tr>

<td height=”27” bgcolor=”#FFFF99”>　</td>

</tr>

<tr>

<td bgcolor=”#CCCCCC”>　</td>

</tr>

</table>

</td>

</tr>

</table>

<p><font size=”2”>

コンテンツの縦幅が伸びた時は灰色部分に縦スペイサーを入れて調節していますが

ページ数が多いので手間がかかります。

これよりも簡単な方法は何かないでしょうか？

テーブルを使った方法でもＣＳＳを使った方法でもかまいません。

（デザインが変わらなければ手段は何でもいいです） </font>

</p>

</td>

</tr>

</table>

<table width=”100%” border=”0” cellspacing=”0” cellpadding=”0” height=”100%”>

<tr>

<td bgcolor=”#CCCCFF”>

<p><font size=”2”>全てのページがこのデザインで、

コンテンツ部分（紫の部分）だけがページによって変わります。

普通にコンテンツを更新して紫部分を縦に伸ばすとメニューが変な位置に行って

しまうので、その解決方法を探しています。

（条件）

・中央にスクロールバーを持ってきたくないのでフレームは使いたくない。

・右ナビゲーションというのは決まっているので変更できない。

・黄色部分のナビゲーションは常に上部に固定、高さも固定

ちなみに現在はこのページのように2列1行のテーブルでページを囲んで、

セルの中にそれぞれテーブルを入れ、</font></p>

<table width=”100” border=”1” cellspacing=”1” cellpadding=”5” bordercolor=”#000000” bgcolor=”#FFFFFF”>

<tr>

<td>

<table width=”100%” border=”1” cellspacing=”1” cellpadding=”1” height=”100” bordercolor=”#000000”>

<tr>

<td bgcolor=”#CCCCFF”>　</td>

</tr>

</table>

</td>

<td>

<table width=”100%” border=”1” cellspacing=”1” cellpadding=”1” height=”100” bordercolor=”#000000”>

<tr>

<td height=”27” bgcolor=”#FFFF99”>　</td>

</tr>

<tr>

<td bgcolor=”#CCCCCC”>　</td>

</tr>

</table>

</td>

</tr>

</table>

<p><font size=”2”>

コンテンツの縦幅が伸びた時は灰色部分に縦スペイサーを入れて調節していますが

ページ数が多いので手間がかかります。

これよりも簡単な方法は何かないでしょうか？

テーブルを使った方法でもＣＳＳを使った方法でもかまいません。

（デザインが変わらなければ手段は何でもいいです） </font>

</p>

</td>

</tr>

</table>

</td>

<td width=”200” bgcolor=”#CCCCCC” >

<table width=”100%” border=”0” cellspacing=”0” cellpadding=”0” height=”100%” bgcolor=”#CCCCCC”>

<tr>

<td bgcolor=”#FFFF99”> <font size=”2”>

<b>TOP

INFOMATION

TOPICS

FAQ

LINK

MAIL</b></font></td>

</tr>

</table>

</td>

</table>

</body>

</html>

id:taro_707

なるほど。

色々な方法がありますね。

ここで回答を締め切らせていただきます。

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

2004/06/09 10:44:44

コメント（6件)

  • id:taro_707
    taro_707 2004/06/09 10:48:11
    はてなって偉大ですね

    優良な回答がこんなに早く集まるなんてびっくりしました。
    はてなってすごい。
  • id:nekogo
    nekogo 2004/06/09 10:53:39
    Re:はてなって偉大ですね

    今、SSIでメニューを呼び出すページを大量に作ってまして、休憩にはてなを覗いていて、ああこれだと勘違いしてしまいました。慌ててのっからせていただきましたが、よくよく考えたら、ポイント送信の方がポイントをお返しできたんですよね・・・・・・

    私がご紹介した方法は、メニュー部分を後から変更することがある場合、一つのファイルを変更するだけで全てのページが変更できるというものです。

    ポイントを無駄に消費させてしまって本当にもうしわけないです<(_ _)>
  • id:reply
    reply 2004/06/09 11:39:04
    Re:はてなって偉大ですね

    ども、htmlが上手く表示させられませんでしたので、もし必要でしたら、お知らせください。（＾＾）
  • id:taro_707
    taro_707 2004/06/09 12:37:58
    Re(2):はてなって偉大ですね

    一括で変更できるということは、Dreamweaverのライブラリとかテンプレートみたいなものですかね。
    Webの技術を勉強中なので、SSIというものがあると知っただけでも収穫でした。
    お気になさらないでください(^o^)
  • id:taro_707
    taro_707 2004/06/09 12:43:37
    Re(2):はてなって偉大ですね

    まだhtmlを組んでないのですが、
    概念は分ったので、表示のしかたはこちらでなんとかできると思います。
    わざわざありがとうございました。
  • id:smoking186
    186 2004/06/10 13:29:29
    CSS

    tableを薦める方ばかりなので対抗してdiv+cssで。
    IE3.0以前とNN4.x以前は無理ですが、他は大体大丈夫です。

    以下ソース
    ----
    <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01//EN” ”http://www.w3.org/TR/html4/strict.dtd”>
    <html>
    <head>
    <meta http-equiv=”content-type” content=”text/html; charset=Shift_JIS” />
    <meta http-equiv=”content-style-type” content=”text/css; charset=Shift_JIS” />
    <title>test</title>
    <style>
    <!--
    #contents {
    width:750px; min-width:750px; max-width:750px;
    height:500px;
    position:relative;
    top:0px; left:0px;
    background-color:#CCCCCC;
    }
    #main {width:550px;
    height:500px; min-height:500px;
    border:0px;padding:0px;margin:0px;
    background-color:#CCCCFF;
    font-size:90%;}
    #menu {
    width:200px;
    border:0px;padding:0px;margin:0px;
    position:absolute;
    top:0px; right:0px;
    background-color:#FFFF99;
    font-size:90%;
    }

    #menu ul {
    list-style-type:none;
    margin-left:1px; font-weight:bold;
    }

    #menu li {
    margin-top:0.8em;
    margin-bottom:0.2em;
    }

    -->
    </style>
    </head>
    <body>
    <div id=”contents”>
    <div id=”main”>
    <h1>見出し</h1>
    <p>左側紫色の部分。</p>
    </div>
    <div id=”menu”>
    <ul>
    <li>TOP</li>
    <li>INFOMATION</li>
    <li>TOPICS</li>
    <li>FAQ</li>
    <li>LINK</li>
    <li>MAIL</li>
    </ul>
    </div>
    </div>
    </body>
    </html>
    ----

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
知りたいことを検索してみよう
▲ページトップへ