- ベストアンサー
CSSで縦断表示する方法について
- CSSを使用して複数のdivをまたいで縦断表示する方法を教えてください。
- ブラウザによって表示が変わることもあり、相対的にすることもできません。
- 困っているので、アドバイスをいただければと思います。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
No.3です。 ＞今までのレイアウト無視して設定できますか？ ずばり可能です。というか、そのために「構造とプレゼンテーション( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」を分離して、スタイルシートを使うのですから!! そのための必須として、HTMLに文書構造を正しく、そしてそれしか書いてないことが条件です。 HTMLにデザインに関わることが書かれていたら無理な場合が多いです。 ★デザインは、必ず文書構造に基づくものです。 「本文の目次」が、他のfooterなどにあるわけないですから、footerに書かれている目次を本文内にデザインすることはありえないと言うこと。 文書構造だけが正確に書かれていたら、文書構造に反しない限り、好き勝手にデザインできます。
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞positionを使ってもブラウザによって表示が変わりますし それはありません。単にDOCTYPEがまずいからです。標準モードで動作させればIE6でもほぼ同じに表示できるはず。 ＞<div id="a">hogehoge</div> そもそも、ここがまずい!! 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』と明記されている。文書構造を示すためにidやclassを使うのであって、デザインのためじゃない!!そんなことするから、デザインが変えられなくなる。 ＞スクロールでついてくるメニューを付ける場合なども、似た状況だと思います。 fixedで済む話です。ついてこなくてよいなら、absoluteです。 [例] ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) firefox,IEなどで[表示]→[スタイル(シート)」で、様々なスタイルを選択してみると、それが可能なことが分かるはずです。もちろん印刷用のスタイルも違う(印刷プレヒュー) もちろんスタイルシートを使わなけれ(googleは使わない)ば、素のHTMLとして利用できるので視覚弱者でも問題ないはず。 ＞※例えばyahooの真ん中に、スクロールでついてくるメニューを付ける場合 [ページの左に固定]が、それでしょう。 (google Chromeは代替スタイルシートは利用できない) HTMLには文書構造しかかかれてないので、所定幅に収めて並べることも、ページサイドにfixedもウィンドウの上や下に固定することも出来ますよね。
- naokita
- ベストアンサー率57% (1008/1745)
html,body{ height: 100%;} div div{ margin: 6px 0; height: 200px; background: yellow;} <body style="position:relative;"> <div style="height: 100%; min-height: 100%;"> <div id="a">hogehoge</div> <div id="b">hogehoge</div> <div id="c">hogehoge</div> <div id="d">hogehoge</div> <div id="e">hogehoge</div> <img src="ほげ.gif" width="100" style="height: 100%; position: fixed; top: 0; left: 200px;" /> </div> </body> こんな事はやった事ないけど、fixedじゃなくabsoluteって事なのかな？ 100%とは？何に対してなのか？ 画像が伸びて良いのか？・・・
- metametamu
- ベストアンサー率51% (153/295)
そういう時にはhtml要素に背景画像を指定してrepeat-yですね。
