- 締切済み
webページの画像の配置(CSS/HTML)
webページ作成をしていて、ヘッダーに画像と動画を計４つ配置したいと思っています。 画像右/画像左/画像上/動画を 画 画像上 画 像 動 像 左 画 右 のような配置をすべく、 ・HTML <div id="top"> <div id="header"> <ul> <li><img border="0" src="left.jpeg" width="190" height="415" alt=""/></li> <li><img border="0" src="top.jpeg" width="560" height="100" alt=""/><iframe width="560" height="315" align="left" src="//www.youtube.com/....(略)..." frameborder="0" allowfullscreen></iframe></li> <li><img border="0" src="right.jpeg" width="190" height="415" alt=""/></li> </ul> </div> (略)</div> ・CSS div#top { width:960px; margin:0 auto; } div#header { position:relative; width:960px; } div#header ul{ margin:0; padding:0; float:left; } div#header li{ margin:0; padding:0; float:left; } 幅の調節など、色々試してみましたが、どうしてもうまくいかず、 画像左 画像上 動画 画像右 のようになってしまいます。 何が原因でどのように改善すればいいのか、アイデアおよび知識があれば教えて頂きたいと思います。 よろしくお願いします！ ※初投稿なので、御無礼・不明瞭な点などありましたら、ご指摘頂けると幸いです。 また、不足した情報なども、あれば教えてくださいませ。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- zzaine_2013
- ベストアンサー率0% (0/0)
floatボックス（ご質問では LI）で幅を指定しない場合、幅は子ボックスの幅で決定されます（IE6等の旧いブラウザを除く）。 ご質問の 3つの floatボックスのうち、最初と最後のものはそうなっているのですが、真ん中の floatボックスの幅は、2つの インラインボックス（img、iframe）が横に並ぼうとするのが原因で、ご希望の幅である 560pxを超えています。 そのため、3つの floatボックスを横に並べると親ボックスの幅を超えるため、縦ならびになってしまいます。 floatボックス（LI）に明示的に幅を指定すれば、ほぼ正常な表示になります。 また、#header li img, #header li iframe {display: block;} を CSSに追加しても同様の結果が得られます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2です。 まず、質問で書かれたHTMLのマークアップは、とてもよいと思います。デザインのためにHTMLが書かれていない。 そのため、とっても簡単にデザインできますし、将来デザインを自由に変更できます。 ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) なぜならHTMLは 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より と書かれているように、必ずしも視覚性ブラウザのためだけでなく、上記のようなユーザーエージェントのみならず、検索エンジンにも理解できるように記述し、それを、(視覚系ブラウザには)スタイルシートでデザインしていくと言うのが、最も重要なHTML自体の基本だからです。★そのためにHTMLを使用する★ No.2、および下記で示した[HTML]は、質問文にかかれたものに、少し手を入れて、よりナビゲーションだと分かるようにマークアップしてあります。 以下に、全文を示しておきます。 添付図は、googleが認識しているであろう姿 「Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。--Google ウェブマスター向けガイドライン（品質に関するガイドライン）( https://support.google.com/webmasters/answer/35769?hl=ja )」 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済み。iframeは本来strictでは使用できない ★タブは＿に置換してあるので戻すこと。 ★これは一例です。absoluteを使って全く同じにデザインできます。(画像も含めてウィンドウ幅に関わらず伸縮して表示するにはabsoluteのほうが良いです。) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- body{background-color:gray;} a img{border:none;} div.article{ width:940px;margin:0 auto; background-color:silver; } /* ここからが配置 */ div.header div.nav h2{display:none;} div.nav ul,div.nav ul li{ list-style:none;display:block; margin:0;padding:0; } div.header div.nav ul:after{ content:"";clear:left;display:block; } div.header div.nav ul li{width:190px;float:left;} div.header div.nav ul li.withFrame{width:560px;} --> ＿</style> </head> <body> ＿<div class="article"> ＿＿<div class="header"> ＿＿＿<h1>タイトル</h1> ＿＿＿<div class="nav"> ＿＿＿＿<h2>サイトマップ</h2> ＿＿＿＿<ul> ＿＿＿＿＿<li> ＿＿＿＿＿＿<a href="./products"><img src="./images/rose.jpg" width="190" height="415" alt="バラの苗木販売"></a> ＿＿＿＿＿</li> ＿＿＿＿＿<li class="withFrame"> ＿＿＿＿＿＿<a href="./howto"><img src="./images/howto.jpg" width="560" height="100" alt="育て方"></a> ＿＿＿＿＿＿<iframe width="560" height="315" align="left" src="./iframe.html" frameborder="0" title="育て方動画"> ＿＿＿＿＿＿＿<a href="./iframe.html">フレームを利用できない場合</a> ＿＿＿＿＿＿</iframe> ＿＿＿＿＿</li> ＿＿＿＿＿<li> ＿＿＿＿＿＿<a href="./contactUs"><img src="./images/contact.jpg" width="190" height="415" alt="問合せ"></a> ＿＿＿＿＿</li> ＿＿＿＿</ul> ＿＿＿</div> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2>見出し</h2> ＿＿</div> ＿＿<div class="footer"> ＿＿＿<h2>文書情報</h2> ＿＿</div> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLの文書構造が読み取れません。HTMLには文書構造だけをマークアップして、スタイルシートはその文書構造を利用してプレゼンテーションを決めていきます。デザインのためにHTMLを書いてしまうと ・検索エンジンは無論、自分にも、機械にも何が書かれているかわからなくなります。 ・将来、デザインを変えようとしたときHTMLまで書き直さなきゃならない。 HTML開かなくてもスタイルシートだけ見てどうデザインされたいるかわかるのが理想 ・デザインが出来なくなる。これを逆に理解されている方がいますが、全く逆できちんと文書構造だけ書かれていればデザインの自由度が高くなります。 場所がheaderにあること、動画をもつものやそうでないものが、並列な項目とマークアップされていることから、それらを横に並べたいということだと想像します。 <div class="article" id="top"> <div class="header"> <h1>title</h1> <div class="nav"> <h2>***について次のような</h2> <ul> <li> <a href="[URL]"><img src="left.jpeg" width="190" height="415" alt="バラの苗木販売"></a> </li> <li> <a href="[URL]"><img src="top.jpeg" width="560" height="100" alt="育て方"></a> <iframe width="560" height="315" align="left" src="[URL]" frameborder="0" allowfullscreen></iframe> </li> <li> <a href="[URL]"><img src="right.jpeg" width="190" height="415" alt=""></a> </li> </ul> </div> </div> 以下省略 HTML5だと・・ <article id="top"> <header> <h1>title</h1> <nav> <ul> <h2>***について次のような</h2> <li> <a href="[URL]"><img src="left.jpeg" width="190" height="415" alt=""></a> </li> <li> <a href="[URL]"><img src="top.jpeg" width="560" height="100" alt=""></a> <iframe width="560" height="315" align="left" src="[URL]" frameborder="0" allowfullscreen></iframe> </li> <li> <a href="[URL]"><img src="right.jpeg" width="190" height="415" alt=""></a> </li> </ul> </nav> </header> になりますかね。 スタイルシートで、デザインしています。 ・display:inline:block;が楽です。後方互換が必要な場合はfloatを使用しますが「標準モード」で起動するようにDOCTYPEを記述しないと、ブラウザ間の調整で悩みます。 ・position:absolute;でもよい。 ・できればリキッドデザインにしておくと、スマホのような小さなディスプレイだろうが、幅広ディスプレイでも共通のスタイルで対応できます。 ・iframeが必要ですか？？？動画だったら<object>で埋め込んだほうがよいのでは？
- yesido_may
- ベストアンサー率55% (15/27)
おはようございます。 人によって書き方が多少違うと思いますが 私は↓のようにやってます。 <div id="wrap"> <div id="right">右画像</div> <div id="left">左画像</div> <div id="top">上画像</div> <div id="under">下動画</div> </div> <style type="text/css"> <!-- #right { float: right; background-color: #FF3333; height: 100px; width: 100px; } #left { float: left; background-color: #990066; height: 100px; width: 100px; } #top { background-color: #CCFF99; height: 50px; } #under { background-color: #CCCC66; height: 50px; } #wrap { border: 1px solid #333333; width: 600px; } --> </style> 個人的な考え方ですが、リスト要素は 複雑なレイアウトで配置するには不向きだと思います。
補足
返信が遅くなり、申し訳ありません。 回答いただいた内容を取り入れてみたものの、まだうまくいきません。 具体的には。。。 ＨＴＭＬ <div id="top"> <!-- menu start --> <div id="header"> <!--・左画像 --> <!--・上画像PV--> <!--・右画像 --> <div id="left"><img border="0" src="left.jpeg" alt=""/></div> <div id="right"><img border="0" src="right.jpeg"alt=""/></div> <div id="top2"><img border="0" src="top.jpeg" alt=""/></div> <div id="under"><object><param name="movie" value="//www.youtube.com/...(動画略)..."></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/...(動画略)..." type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object></div> </div> ＣＳＳ /* ===== TEMPLATE LAYOUT ===== */ div#top { width:960px; margin:0 auto; } div#header { position:relative; width:960px; } /*===== header =====*/ div#left { margin:0; padding:0; width="190" height="415" float:left; } div#right { margin:0; padding:0; width="190" height="415" float:right; } div#top2 { margin:0; padding:0; width="560" height="100" } div#under { margin:0; padding:0; width="560" height="315" } としてみた結果、以下のようになってしまいました。 http://personal03.web.fc2.com/i/okw1.jpg お時間がありましたら、お返事頂けると幸いです。
補足
申し訳ないのですが、当方の理解力不足が祟って、内容の理解ができなかったのですが…