- ベストアンサー
frameset要素を使わずに画面を分割したい
アンテナ（下記サイト）のように左にメニュー画面を、右にコンテンツを表示するホームページを作成したいと考えています。 https://antenna.jp/ ひとつのウインドウで画面を2つにわけるためにはhtmlのframeset要素を使えばできることは把握しているのですが、上記サイトのアンテナではframesetを使わずに画面分割をしています。 見た目やレスポンシブ対応のしやすさも考え、できればframesetを使わずに画面分割を行いたいのですが、どのようにすれば可能でしょうか。 メニュー部分とコンテンツ部分を別々にスクロールできるようにしたいです。 どなたか分かる方教えてください。
- white7lies
- お礼率67% (23/34)
- CSS
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
長くなるから、参考ページ参照。
その他の回答 (3)
このページて、iframeに読み込んでいるだけでしょう？ 同じようにするなら、せめてレスポンシブレイアウトにして、アコーディオンメニューを採用された方がスマートでは？・・・
お礼
iframeを使っているんですね！あまりにも不勉強すぎてわかりませんでした。 謎を解いていただきありがとうございました。 今必死にbootstrapを使ったレスポンシブ作ってます。こちらの方が便利そうですね。
- Kaneyan-R
- ベストアンサー率42% (1251/2916)
DIVでレイアウトコンテナ作って、CSSで配置。 スクロールバーいるなら、overflowを「auto」に。
お礼
overflowさえしらなかったので勉強になりました。 なんとか解決しそうです。ありがとうございました！
補足
ご回答ありがとうございます！overflowでできそうな気がします。 追加で質問させてください。 overflowを使用して縦スクロールを付けたい場合にはoverflowを適用する対象の縦幅を指定しなければならないと思うのですが、これをアンテナのように縦幅をウインドウサイズにして、右側のコンテンツ部分を下にスクロールしても左のメニュー部分はスクロールされず固定されている状態にするためには、どのようにCSSを書けばいいのでしょうか。 （参考サイト）アンテナ https://antenna.jp/
- askaaska
- ベストアンサー率35% (1455/4149)
スタイルシートの overflowを使えばできるです
お礼
最初に回答いただきありがとうございました！ overflow使ってみましたが、かなり使えそうですね。
関連するQ&A
- htmlのframeset について
htmlの framesetを使い、画面を2つに分けています。 左側にメニューを置き、 メニューをクリックした時に、右のフレームが変わります。 その時メニュー項目に色をつけるのは出来ましたが、 他のメニュー項目を押した時に、色が元に戻るようにしたいです。 つまり、今どこの項目が表示されているのか、認識しやすいように、 選択したメニュー項目と右の画面が同じ色を保持するようにしたいのです。 framesetは推奨されないときいたことがありますが、 表示上、どうしても必要です。 ご存知のかたがおられましたら教えて頂けませんでしょうか。 どうか、よろしくお願い致します。
- ベストアンサー
- HTML
- フレームとスクロール
frameset により、フレームを左右に分割し、左にメニュー、右にコンテンツを表示しました。 メニューフレームに <a href="・・・・.html#a" target="content">A として、コンテンツフレームに <a name="a"> を設定すると、メニューフレームの「A」をクリックすると、コンテンツのフレームは 「A」のところまでスクロールします。 これを、少し変化させて、 「A」をクリックすると、右スクロールバーを一回クリックしたのと同様に、下に隠れていた 続きの部分が上に移動して表示されるようにしたいのですが、・・・。 HTLMで、こういった処理が可能でしょうか。可能でしたら、教えていただきたいのですが。 不可能でしたら、あきらめます。よろしくお願いします。
- ベストアンサー
- HTML
- 画面2分割
ASP.NETを利用しています（C#）。ASPに関しては初心者です。 画面を左右に分割するラインを設定し、左にメニュー用のツリーを配置し、右にはメニューで選択した コンテンツを表示させる構成にしようと考えています。 この場合、左右に分ける縦ラインは、どのようにすれば設定できるのでしょうか。 Tableで出来るのかもしれませんが、、、やり方がわかりませんでした。 参考までに以下のように記載することで左右に分けることができましたが、 ラインが画面の下までいきませんでした。 ご存じの方、ご教授願います。
- ベストアンサー
- Microsoft ASP
- 画面分割について
長田と申します。 VS2005 にてWebサイトを勉強中です。 ・どうしても解決できそうにないので、投稿させて頂きました。 (経緯) 下名は、ASPにて作成したWebアプリケーションをASPXにコンバートしつつ、色々と機能面を勉強しています。 既存画面においては、随所でframeset,frameを使用した画面があり、これを同じ様に作成しようとしたところ、 ASP.NET 2.0 フレームワークおよびVisual Studio2005は、XHTML 1.0 Transitional を対象にしているため、 廃止要素にframeも含まれるため、利用できない事は、わかりました。 （『ツール』⇒『オプション』で検証の設定をXHTML 1.0 Frameset に変更しても、該当のWebフォームが マスターページを使用しているので、framesetが構文エラーとなってしまいます。） それと基本的な設定は、Defaultのままにしたいと思っています。 2005以前のバージョン迄は、使えていたみたいですが。 そこで、フレームセットの代替案は、どのようにしたら良いか悩んでおります。 「作成したい画面」 →http://msdn2.microsoft.com/ja-jp/library 『質問』 (1)Contents内で上記の真ん中境界線部分の様に画面を分割する具体的な方法を教えてください。 (2)また、境界線は、ドラッグしてサイズを変更できる様にするには、どのようにするのか。 参考サイト等、ご存知でしたら、ご教示願います。
- 締切済み
- Microsoft ASP
- 画面の二分割(?)について
画面の二分割（？）についての質問です。 いま、画面が左右二分割されたホームページをHTMLを使って作っている途中なのですが、現段階では、まず画面が二分割にすらなりません。1回、二分割出来た時もありましたが、その後、どうしたら左のページに文字を書くことが出来るのか分からなくなってしまいました。 サイト様を回って、テンプレートをダウンロードしてもやり方がいまいちよく分からないので、HTML辞典などを調べて自分で作っているので、原因は自分にあるのは良く分かっています。 理想は、http://wdt.pekori.jp/template/top/007/007_gray.html←このテンプレートを左右に二分割して右にページが出るようにすることです。 本当に初心者な私でも分かるようなサイト様があれば教えて頂けないでしょうか？ もしくは、ソースの何処にどんなHTMLを入れればいいのかを指摘してくれれば助かります。
- 締切済み
- その他([技術者向] コンピューター)
- スタイルシートで画面を縦に２分割する方法
スタイルシートで左側にメニュー(class=menu)を、右側に本文を書くようなサイトを作っています。 body { margin: 0px; } .menu { background-image:url(./img.gif) ; background-repeat:repeat ; margin:0px ; padding:10px ; position:absolute; width:150px ; } といった感じにしていましたが、左側メニューの背景がテキストの終端部分で切れてしまいます。（メニューの行数が短いので。） 私は、下までメニュー部分の背景がくるようにしたいのです。（つまり、画面が左右に２分割されるように） そこで、いろいろ調べて、body{}と.menu{}に「height:100%;」を加えることによって、少し改善が見られました。 表示させると、画面がきちんと２分割されます。 しかし、右の本文が長い時、スクロールをすると、それに伴いメニューが上に行き、やはりメニュー部分の下部が空白になります。 スクロールしても、下まできちんと２分割できるようにするには、どうすればいいでしょうか？ たぶん、分かってしまえば簡単なことなのでしょうが、よろしくお願いいたします。
- ベストアンサー
- HTML
- 画面の二分割（？）についての質問です。
画面の二分割（？）についての質問です。 いま、画面が左右二分割されたホームページをHTMLを使って作っている途中なのですが、現段階では、まず画面が二分割にすらなりません。1回、二分割出来た時もありましたが、その後、どうしたら左のページに文字を書くことが出来るのか分からなくなってしまいました。 サイト様を回って、テンプレートをダウンロードしてもやり方がいまいちよく分からないので、HTML辞典などを調べて自分で作っているので、原因は自分にあるのは良く分かっています。 理想は、http://wdt.pekori.jp/template/top/007/007_gray.html←このテンプレートを左右に二分割して右にページが出るようにすることです。 本当に初心者な私でも分かるようなサイト様があれば教えて頂けないでしょうか？ もしくは、ソースの何処にどんなHTMLを入れればいいのかを指摘してくれれば助かります。
- ベストアンサー
- ブログ
- 表示時にdiv要素のスクロール位置を指定したい
上部にヘッダー、左にメニュー、右にコンテンツ、下部にフッターという、２カラムのHTMLなのですが、左右のdiv要素にoverflowでスクロールをそれぞれ付けています。 問題なのは、この左側のメニューで、サイト内リンクをクリックすると新しくリンク先ページが開くので、当然スクロール値は０になります。 後方のボタンの場合、どのボタンを押したのかわからなくなってしまいます。 ということで、javascriptでスクロールの位置を調整したいのです。 私は初心者でして、見よう見まねで下記のように書いてみたのですが、スクロール値は０のままです。 根本的に間違っているのかすら解らずで、ご教授願いたいと思い投稿させて頂きました。 宜しくお願いいたします。 window.onload = function(){ sub_scroll.scrollTo('se'); } ※sub_scrollは左のdiv要素のidです。 seは先頭にしたい箇所のidです。
- 締切済み
- JavaScript
- ホームページビルダー14です。フレーム分割して作ろうと思います。画面上
ホームページビルダー14です。フレーム分割して作ろうと思います。画面上でいえば、上から5センチ程度でで上下分割、左から5センチ程度で左右分割、計4つのフレーム構成です。で、分割すると、各フレームにスクロールバーが表示されます。これって、ホームページを公開するときにも表示されるんでしょうか。消すことができますか。方法もざっくり教えてもらうと助かります。
- ベストアンサー
- その他（インターネット・Webサービス）
- Excel2007で、画面分割するには？
Excel2002にあります画面分割が、2007には見つかりません。 広い範囲にわたる画面の場合、2002ではカーソルがある画面のほぼ中央で、縦横に2分され、それぞれの部分をスクロールできる機能です。2007では、画面の上側を固定するのはできますが、この分割の方法が分かりません。教えて下さい。
- ベストアンサー
- オフィス系ソフト
お礼
このページものすごく参考になりました。 アンテナでやっている手法とは違うかもしれないですが、こちらの方がやりたいことができそうです。 ありがとうございました！