こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

今までのレイアウト無視して設定できますか?

とてもも待っております。よろしくお願いします。

仮に以下の記述があったとします。
<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>

CSSの定義は各種

#*** {
width:100%;
height:200px;
}

といった感じです。

ここからが質問なのですが、例えばこの全画面幅で表示されている特定の場所に
そうですね、ど真ん中でもよいのですが100px幅で上から下まで長い画像を表示させるには
どのような設定を行えばよいでしょうか?

positionを使ってもブラウザによって表示が変わりますし、相対的にしたくとも、複数のdivが存在しているため、上から下までを縦断させることができません。※例えばyahooの真ん中に、スクロールでついてくるメニューを付ける場合なども、似た状況だと思います。

これら、複数のdivをまたいで縦断して表示できる方法をご存知の方いらっしゃいましたら、何卒アドバイスをいただけないでしょうか。とても困っております。

よろしくお願いいたします。m(_ _)m

投稿日時 - 2013-07-21 23:42:03

QNo.8186265

すぐに回答ほしいです

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

No.3です。
>今までのレイアウト無視して設定できますか?
 ずばり可能です。というか、そのために「構造とプレゼンテーション( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」を分離して、スタイルシートを使うのですから!!
 そのための必須として、HTMLに文書構造を正しく、そしてそれしか書いてないことが条件です。
 HTMLにデザインに関わることが書かれていたら無理な場合が多いです。

★デザインは、必ず文書構造に基づくものです。
 「本文の目次」が、他のfooterなどにあるわけないですから、footerに書かれている目次を本文内にデザインすることはありえないと言うこと。
 文書構造だけが正確に書かれていたら、文書構造に反しない限り、好き勝手にデザインできます。

投稿日時 - 2013-07-22 10:58:37

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(4)

ANo.3

>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もウィンドウの上や下に固定することも出来ますよね。

投稿日時 - 2013-07-22 09:09:15

ANo.2

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%とは?何に対してなのか? 画像が伸びて良いのか?・・・

投稿日時 - 2013-07-22 01:04:28

ANo.1

そういう時にはhtml要素に背景画像を指定してrepeat-yですね。

投稿日時 - 2013-07-22 01:00:40

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-