• ベストアンサー

ＣＳＳについて教えてください

ホームページ制作について質問です。サイドバー（メニュー）で天地成り行き・・・下まで、バーをおろす。がうまく出来ません。途中で切れてしまいます。なにかポイントがあれば教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

No.1の続きです。 　長いですが・・しっかり読んでくださいね。 　想像するにfloatを使って段組をされようとしていると推察します。 　　→Wiki 「Webデザインにおける段組 ( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84#Web.E3.83.87.E3.82.B6.E3.82.A4.E3.83.B3.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E6.AE.B5.E7.B5.84 )」 　文書構造を明確にしなければならないHTML5の勧告を目前に控えた今、段組をfloatで行うことは、かってのtableによるレイアウトがそうであったように、廃れていくでしょう。理由はWikiの記事を参考にしてください。 　たとえば、本文が長大な文書においてそのindex(索引)が最初にあるのは、ウェブ利用者からするとウザイです。そこで索引(目次)を本文の末尾に置くと、floatを使ってデザインしようとすると記事は右にfloatさせなければなりません。補足記事があれば、それも前に書いてfloat:rightです。それは明らかに不便です。もちろん本文記事内で、本来の挿絵をfloat:rightさせたり、解除したりが出来なくなります。 　文書構造を変更せずに、段組を行うためにはCSS3では、Columnsプロパティが導入されますが、これはひとつの記事を段組するもので、メニューを左に置くという用途には使えません。 　以前、この件に関連した回答をいくつかしています。 ★floatによる段組について - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7079628.html#a3 ) 　floatによる段組について - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7079628.html#a7 ) ★position : relative + abs - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q6776406.html ) ★2カラムの左固定、右変動幅にするには？ - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q6875304.html ) など、 HTML5的に記述するとHTMLは下記のようになります。 　HTML4.01の場合、それぞれ<header>→<div class="header">のようにします。 <header> 　ヘッダ 　<nav> 　　サイトナビゲーション 　</nav> </header> <section> 　<section> 　　本文 　　<figure> 　　　挿絵 　　</figure> 　</section> 　<aside> 　　脚注 　</aside> 　<nav> 　　目次(ページ内ナビゲーション) 　</nav> </section> <footer> 　フッタ </footer> この場合、<div section>内の<nav>を左|右に配置する場合は section{position:relative;}で配置やサイズの基準として section nav{position:absolute;top:0;(left|right):0;width:20%;height:100%;} section aside{position:absolute;top:0;(right|left):0;width:20%;height:100%;}で、サイズや配置を指定するとぴったりsectionの高さに合わせて左(または右)に配置されます。 　もちろん、本文中で<figure>を右なり、左にfloatさせることもできます。 　サイトナビゲーション header navに対しては、この指定は利きませんから、それはページの最上部|最下段やheaderの下に横にボタンとして配置もできます。

gejigeji1
質問者

お礼

ご丁寧な回答いただきまして。誠に有難うございます

gejigeji1
質問者

補足

何回も読み返させていただきます。ご丁寧な教授にお礼申し上げます

その他の回答 (2)

  • kon77
  • ベストアンサー率70% (83/117)
回答No.2

自分の解釈が間違っていたらすみません。例えば左にサイドバーがあって、その右にメインのコンテンツがある場合、メインのコンテンツの方が長いので、それに左のサイドバーが追いついてくれないという事でしょうか。 上記の場合なら以下が参考になるかも知れません。 http://blog.e-riverstyle.com/2009/07/4.html

gejigeji1
質問者

お礼

ご丁寧な回答いただきまして。誠に有難うございます

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

「サイドバー（メニュー）」 と言うことなので、HTMLは <body> 　<div class="header"> 　</div> 　<div class="section"> 　　<h2>見出し</h2> 　　<p>・・・・</p> 　　<p>・・・・</p> 　　<p>・・・・</p> 　　<div id="menue"> 　　　<ol> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ol> 　　</div> 　</div> ・・・・ でしようから、 div.section{ position:relative; width:80%; margin:0 auto; min-height:400px; } div.section h2,div.section p{margin-left:20%;} #menue{position:absolute;width:20%;height:100%;background-color:yellow;} とか・・・ static以外の直近の親コンテナブロックの高さや巾や位置をabsoluteで指定するだけです。

gejigeji1
質問者

お礼

ご丁寧な回答いただきまして。誠に有難うございます

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • CSSの修正箇所を教えてください。

    http://pet-thailand.com/example.html 上記ページのＣＳＳの修正について教えてください。 １、トップメニューの右端のメニューにカーソルを置いた時、2階層目が右の枠の下に潜り込んでしまい隠れてしまいます。枠の下に潜り込まずに、上に表示されるようにするには、どうすればよいでしょうか？ ２、サイドバーの背景が、サイドバーに配置した画像の高さで切れてしまいます。コンテンツの高さに合わせて、フッターあで背景を伸ばしたいのですが、ＣＳＳをどのように調整すれば良いでしょうか？ 大変恐れ入りますが、教えていただけると助かります。

    • 締切済み
    • CSS
  • HTMLとCSSで、

    HTMLとCSSでサイトを作っているのですが、 メニューバーの表示が上手く出来ません。 添付の上の図ようなメニューを作りたいのですが、 下の図のように、メニューがフラッシュで隠れてしまいます。 フラッシュの上にメニューを表示させるにはどうすれば良いですか？ よろしくお願いします。

  • Firefoxのサイドバーについて

    Firefoxのサイドバーでブックマークを出しているのですが、何かの拍子に「×」を押すと消えます。 そこで再表示させるときに、わざわざメニューバーを出して表示→サイドバー→ブックマーク、とたどって、さらに表示→ツールバー→メニューバー、としてメニューバーを消しています。 メニューバーはデフォルトでは表示されていないので、上記手順が面倒です。 もっとIEみたいに簡単にできる方法はありませんか？

  • CSSを編集して、ブログにメニューバーを取り付けようと思っているのです

    CSSを編集して、ブログにメニューバーを取り付けようと思っているのですがなかなか思うとおりにできません。 一応プレビューでは添付画像のように表示されます。 ですが、メニューバーがブログタイトルよりも上部にきてしまってますよね？ あれをブログタイトル画像の下に持ってくる方法はないんでしょうか？ それと、メニューバーはタイトル画像と同じ幅にしたいです。 ちなみにライブドアでブログをしてます。 質問が分かりにくくてすいません、、、 　 詳しい方よろしくおねがいします。

  • スタートボタンが消えてしまった

    WIN98です。 デスクトップの下にあるメニューバー(といっていいのでしょうか？左にスタートボタンのあるバーです)が消えてしまいました。ポイントしても出てきません。いつもは常時表示されています。終了できずに困っています。どうすれば表示させられるでしょうか。 「メニューバー」で検索してもよくわからなかったので質問します。 よろしくお願いします。

  • CSSでページ下部ソースを上に表示するには？

    タイトルがわかりづらくて申し訳ございません・・・。 やりたいことを要約しますと、CSSをつかい ページの上部によく配置しているナビゲーションメニューを ページ上では上に表示したいのですが、 ソース上、すべてのページが共通ですので SEOを考えて、ソースの下に配置したいのですがどうすればいいかわかりません・・・ 現在、サイドバーはfloatをつかい、ソース内では、コンテンツの下にきております。 現在の構成と、希望の構成を書きますので、ご教授いただけると助かります！ ■現在の構成 （ヘッダー） （ナビゲーションメニュー） （コンテンツ）※ブラウザでは右側 （サイドバー）※ブラウザでは左側に表示 （フッター） ■希望の構成 （ヘッダー） （コンテンツ） （サイドバー） （ナビゲーションメニュー） （フッター） ブラウザ上の表示は、同じにしたいです。

    • ベストアンサー
    • CSS
  • borderについて2つの質問

    こんにちは。 メニューバーが左に、メインコンテンツが右にあるホームページを作っています。 そこで、この2つを見た目で分けるために、メニューの右にborderを引いています。 つまり、border-rightを使っています。 しかし、メニューが短いのでborderが途中で切れています。 borderはメニューの長さしか表示されません。 そこで、これを一番下までもってくるにはどうすればいいのか教えてください。 もう一つお聞きしたいのは、メインコンテンツの右側にもborderを置いたのですが、 一番下まで表示されるのはいいのですが、 スクロールバーを上下に動かすとこの線の一部が欠けたりします。 何回か上下に動かしているとまた直ったりするのですが、非常に不安定です。 このサイトを実際にアップ（公開）した後もこのようなことが起こるのでしょうか。 これを解決する方法があれば教えてください。 どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • スライドするコンテンツを半透明なメニューバーの下に通すにはどうすればい

    スライドするコンテンツを半透明なメニューバーの下に通すにはどうすればいいのでしょうか？ うまく言葉で説明できないのですが、 http://www.housingworks.org/ の一番上のメニューのように上部にあって文字以外が半透明で、 http://www.designfilmfestival.com/singapore/ のサイドバーのように、コンテンツをスライドさせても、スライドさせたコンテンツが下を通っていくようにするにはどうすればいいでしょうか？ ページをスクロールした時について来ない半透明なフローティングメニューのような感じで、 メニューができないものでしょうか？

  • dreamweaverCS3のサイドバーが途切れる

    質問させてください。 dreamweaverCS3を使ってホームページを作成しているのですが、メインページが長くなるとサイドバーが途中で途切れてしまいます。 どのようにすれば、サイドバーを途切れさせないようにできるのでしょうか？ 本とネットで調べてみたのですが分からなかったので、ご教授下さい。 よろしくお願いいたします。

  • CSSでボーダーがとぎれてしまう・・

    すみません・・普段は自分で調べても分からないときだけこちらで質問するのですが、今回は作業に追われておりまして・・申し訳ない気持ちですが、質問させていただきます。 CSSで・・・ header、main、menu、footer の順番でdivで囲まれたコンテンツ？があります。 headerが上でその下の左にmenu、右にmainと並べて、その境目にボーダー線を指定したいのですが、どちらに指定しても逆側が長くなってしまうとボーダーが途中で途切れてしまいます。 これをこれを常にfooterの位置まで表示する方法はありませんでしょうか？ よろしくお願いします。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する