限定しりとり

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

解決済

  • 質問者：oneday77
  • 質問日時：
  • 回答数：4件

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

No.3です。


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

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

No.3

  • 回答者： ORUKA1951
  • 回答日時：

＞positionを使ってもブラウザによって表示が変わりますし


　それはありません。単にDOCTYPEがまずいからです。標準モードで動作させればIE6でもほぼ同じに表示できるはず。
＞<div id="a">hogehoge</div>
　そもそも、ここがまずい!!
　『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』と明記されている。文書構造を示すためにidやclassを使うのであって、デザインのためじゃない!!そんなことするから、デザインが変えられなくなる。

＞スクロールでついてくるメニューを付ける場合なども、似た状況だと思います。
　fixedで済む話です。ついてこなくてよいなら、absoluteです。

[例]
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　firefox,IEなどで[表示]→[スタイル(シート)」で、様々なスタイルを選択してみると、それが可能なことが分かるはずです。もちろん印刷用のスタイルも違う(印刷プレヒュー)
　もちろんスタイルシートを使わなけれ(googleは使わない)ば、素のHTMLとして利用できるので視覚弱者でも問題ないはず。
＞※例えばyahooの真ん中に、スクロールでついてくるメニューを付ける場合
　[ページの左に固定]が、それでしょう。
　(google Chromeは代替スタイルシートは利用できない)

　HTMLには文書構造しかかかれてないので、所定幅に収めて並べることも、ページサイドにfixedもウィンドウの上や下に固定することも出来ますよね。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： naokita
  • 回答日時：

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%とは？何に対してなのか？ 画像が伸びて良いのか？・・・
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： metametamu
  • 回答日時：

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

    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報