とてもも待っております。よろしくお願いします。
仮に以下の記述があったとします。
<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
No.4ベストアンサー
- 回答日時:
No.3です。
>今までのレイアウト無視して設定できますか?
ずばり可能です。というか、そのために「構造とプレゼンテーション( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」を分離して、スタイルシートを使うのですから!!
そのための必須として、HTMLに文書構造を正しく、そしてそれしか書いてないことが条件です。
HTMLにデザインに関わることが書かれていたら無理な場合が多いです。
★デザインは、必ず文書構造に基づくものです。
「本文の目次」が、他のfooterなどにあるわけないですから、footerに書かれている目次を本文内にデザインすることはありえないと言うこと。
文書構造だけが正確に書かれていたら、文書構造に反しない限り、好き勝手にデザインできます。
No.3
- 回答日時:
>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もウィンドウの上や下に固定することも出来ますよね。
No.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%とは?何に対してなのか? 画像が伸びて良いのか?・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
HTMLのJIS規格について
-
html の divとtable の役割
-
3カラムレイアウトで「常に残り...
-
<div>で改行させない方法
-
<div id="container">の使いか...
-
スペースを使わず文字位置を揃...
-
複数のボタンを等間隔に、かつ...
-
<!-- #BeginLibraryItemとは
-
CSSで、contentsがfooterに重な...
-
ヘッダーとフッターだけ背景を...
-
divを横に並べる方法
-
疑似インラインフレームの文字...
-
min-heightとheightの違いについて
-
コピーライト下・フッター一番...
-
div要素が重なってします
-
今までのレイアウト無視して設...
-
WEBデザイン ― ブラウザの横幅...
-
1時間30分を簡単に表したいで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
要素間、要素内に隙間が空く
-
画面を縮小するとカラムが落ち...
-
h1のテキストサイズよりh2の方...
-
divの中に外部のHTMLを埋め込む
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
hタグの右横に画像を表示
-
グリッドレイアウトで"auto-fit...
-
セクションをdivで囲むと見出し...
-
開閉式の隠し要素が一瞬表示さ...
-
html5でheaderの中にnav
おすすめ情報