ちょっと変わったマニアな作品が集結

左メニューを固定しスクロールはメイン部分のみするページをHTMLとCSSで作っています。
固定自体はできたのですが、私が作っているページのメニューの項目が多すぎて、メニュー部分を固定するとブラウザ内に入らない下の方の項目が見えなくなってしまいます。
これをフレームを使わずに作ることはできないでしょうか?
できればカクカクしないようなメニューが作りたいです。

■■■■■■■■■■■■■
■menu  ■ main      ■
■      ■          ■   
■       ■          ■
■      ■          ■
■■■■■■■■■■■■■
・メニュー部分は固定だが、一番下の項目が見えるまではスクロールできる
・メニューが一番下までいったらメニューはそこで固定してメイン部分だけスクロール

【HTML】
<div id="main">
メインの内容
</div>
<div id="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
・・・・(26項目)
</ul>
</div>

【css】
#main{
float:right;
}
#menu{
width:160px;
position:fixed;
_position:absolute;
top:30px;
left:0px;
}

このQ&Aに関連する最新のQ&A

A 回答 (1件)

メニューのCSSを以下のようにしてみたらどうでしょう。



#menu{
width:160px;
position:fixed;
_position:absolute;
top:30px;
left:0px;

height: 100%;
overflow: auto;

}

overflow: auto;
としておけば領域からはみ出した場合だけ、スクロールバーが表示されます。
    • good
    • 0
この回答へのお礼

表記のやり方でやったらできました。
ありがとうございます。
助かりました。

お礼日時:2008/02/03 15:14

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qframeset要素を使わずに画面を分割したい

アンテナ(下記サイト)のように左にメニュー画面を、右にコンテンツを表示するホームページを作成したいと考えています。
https://antenna.jp/

ひとつのウインドウで画面を2つにわけるためにはhtmlのframeset要素を使えばできることは把握しているのですが、上記サイトのアンテナではframesetを使わずに画面分割をしています。

見た目やレスポンシブ対応のしやすさも考え、できればframesetを使わずに画面分割を行いたいのですが、どのようにすれば可能でしょうか。
メニュー部分とコンテンツ部分を別々にスクロールできるようにしたいです。

どなたか分かる方教えてください。

Aベストアンサー

長くなるから、参考ページ参照。

参考URL:http://www.geocities.jp/eijispace/2012/0419.html

Qposition:fixed;でメニューを右側に固定したい

position:fixed;でメニューを右側に固定したい

こちらを参考にサイドバーが固定された2カラムのサイトを作っています。
http://www.css-lecture.com/log/css/049.html
上記のサイトを見てくだされば分かると思うのですが、サイトバーはすべてを囲うwrapperボックスの左端に固定されています。
これをwrapperボックスの右端に持って行きたいのですが、うまくいきません。
position:fixed;にrightやleftを指定すると、wrapperボックスではなくブラウザの端に寄ってしまいます。
absolutoではスクロールされてしまいますし……。
自分なりに調べていろいろと試してみたのですが、解決することはできませんでした。
javascriptや疑似フレームは出来るだけ使いたくありません。
右端に持って行くことは可能なのでしょうか?現状では無理なのでしょうか?

HTML
<div id="wrapper">
<div id="menu"></div>
<div id="main"></div>
</div>

CSS
#wrapper{
width:700px;
margin:0 auto;
background-color:#FFF;
position:relative;
}
div#menu{
width: 100px;
background: #CCC;
padding:10px;
height:100%;
position:fixed;
top: 0px;
z-index: 20;
}
* html div#subContents {
position: absolute;
top: expression(eval(document.documentElement.scrollTop+0));
}
#main{
margin-left:120px;
padding:10px;
width:560px;
position:relative;
background-color:#FFF;
}

よろしくお願いします。

position:fixed;でメニューを右側に固定したい

こちらを参考にサイドバーが固定された2カラムのサイトを作っています。
http://www.css-lecture.com/log/css/049.html
上記のサイトを見てくだされば分かると思うのですが、サイトバーはすべてを囲うwrapperボックスの左端に固定されています。
これをwrapperボックスの右端に持って行きたいのですが、うまくいきません。
position:fixed;にrightやleftを指定すると、wrapperボックスではなくブラウザの端に寄ってしまいます。
absolutoではスクロールされてしまい...続きを読む

Aベストアンサー

左のマージンを取ってみるとか…?

Qメニューを左に固定

例えば、トップページに左側に縦メニュー、
右の広いスペースに更新履歴やトップ絵があったろします。
私がやりたい事は、メニューから例えば「BBS」を選ぶと右の更新履歴等があったスペースにBBSが出てきて、メニューバーだけは残る、という仕組みです!!
色々なサイトで見かけたりするこの仕組み、どうやったら出来るのでしょうか?

Aベストアンサー

フレームで検索すると出てくるとおもいますよ。

下記のサイトを参考にしてみてはいかがでしょうか。
直リンクしてはいけないと思うので、アドレスの「h」の部分抜いてあります。
アドレスの頭にhをつけてくださいね。

リンクについては target というのを使います。

それについてはSTEP-16に書いてあるので参考にしてください。
そういったフレームを用いているサイトのソースを見るというのも参考になりますよ^^

Q

<div id="container">の使い方についてお尋ねします。

ページの上から下まで帯のようにしたいのですが、例えば以下のように書くとヘッダーのところまでしかcontainerが効いていません。


HTML
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
<div id="footer">フッター</div>
</div>
</body>

CSS
#container {
font-size: 21px;
line-height: 28px;
color: #353535;
width: 1050px;
margin: 0 auto;
}

ランディングページのようなものを作りたく、
ページの上からフッターの手前くらいまで<div id="container">を効かせるにはどのように記述すればよいでしょうか?

<div id="container">の使い方についてお尋ねします。

ページの上から下まで帯のようにしたいのですが、例えば以下のように書くとヘッダーのところまでしかcontainerが効いていません。


HTML
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
<div id="footer">フッター</div>
</div>
</body>

CSS
#container {
font-size: 21px;
line-height: 28px;
color: #353535;
width: 1050px;
marg...続きを読む

Aベストアンサー

>HTML5とCSS3に関するおすすめの本があったら教えていただけないでしょうか?
 これがとても難しい。理由は
・進歩の激しいこの世界、出版時には古くなっている
・すべて仕様書に書かれている。それで事足りる物を書き下す意味がない。
 仕様書には、「なぜそうするのか」の理由も含めて完璧に書かれている。
 それを読めば解決する物を、著者の色眼鏡を通して記述しても正確ではない
 しばしば、仕様書を読んだことがあるのか疑問のものがある。

 これについては、No.1でいくつか説明しました。

 よって、一番早くて、しかも正確な参考書は仕様書ということになります。私もHTMLやCSSは仕様書で学びました。
 最初は冗長に感じますが、それは正確性を追求するために致し方ないでしょう。
 まずはHTMLをしっかり学ばれることをお勧めします。いきなり膨大なHTML5ではなく、HTML4.01strict【strictですよ。】を身につけてから、HTML5に進まれるほうが楽でしょう。

1.2 仕様の記述法( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/about.html#h-1.2 )より
 本仕様書は、著者及び実装者という2種類の読者を想定している。著者である読者に対しては、本仕様書が、HTMLの実装詳細に必要以上に触れずに使える、効率的・魅力的でアクセス性のよい文書を著述する際に必要な道具となることを望む。けれども実装者である読者は、仕様に適合するユーザエージェントを作成する上で必要となるすべての情報を見つけることができるだろう。
 本仕様書は様々な方法で利用できるだろう。
・ 最初から最後まで通読する。
・ 必要な情報に直接アクセスする。

 最初は、全体を通して読んで全体像を把握して、いつでも必要な情報にたどり着けるようになること。
 私のブックマークでは
HTML4.01詳細目次( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html#toc )

 ついで、スタイルシートはやはりCSS2.1あたりがベストです。
CSS 2.1目次( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html#toc )
 特に
4 構文と基本データ型
5 セレクタ
6 プロパティ値とカスケーディング、継承の割り当て
 ここを読まれるだけで、あなたが理解しているCSSが如何に不完全か理解できると思います。

 そのうえで、
HTML4からの変更点( http://www.html5.jp/trans/w3c_differences.html )
 で、変更部分を身につけるのが最も最短で効率的でしょう。

★HTMLやCSSの学習は、数学や理科の勉強方法ととても良く似ています。基礎から順を追ってなぜなのかを理解しながら学ぶと、小学生でも数検2級とかが取れるように、簡単なものなのです。結果を急いでうわべだけ学ぼうとしても反って時間と労力を無駄にして、しかもきちんと身についていないから応用問題に果ても足も出ない・・・ということになる。

>HTML5とCSS3に関するおすすめの本があったら教えていただけないでしょうか?
 これがとても難しい。理由は
・進歩の激しいこの世界、出版時には古くなっている
・すべて仕様書に書かれている。それで事足りる物を書き下す意味がない。
 仕様書には、「なぜそうするのか」の理由も含めて完璧に書かれている。
 それを読めば解決する物を、著者の色眼鏡を通して記述しても正確ではない
 しばしば、仕様書を読んだことがあるのか疑問のものがある。

 これについては、No.1でいくつか説明しました。

 よっ...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。


人気Q&Aランキング