締切済み

このレイアウトを組むには？

2012/05/18 12:43

サイズの異なる正方形バナーを下記の画像のように配置したいのですが、上手くいきません。 2列構成にしないといけないのでしょうか？アドバイス頂ければ幸いです。宜しくお願い致します。

attyonburike32
お礼率0% (0/6)

CSS
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/05/18 15:09 回答No.2

最初にデザインを決めてHTMLを書くのは根本的に誤っていますし、失敗の元です。先でバナーを他のものに変えたり、デザインを変えるときに最初から書き直さなきゃならなくなります。　『構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』はHTMLの大原則です。　現在はバナーとして画像を別途置く事はあまりされていません。バナーはあくまで見出しなどの画像であったり、背景としてスタイルシートで追加することが多いでしょう。　たとえば、HTMLが下記のようなものだったとします。 <body> 　<div class="header"> 　　<h1><img src="./images/Logo2.png" width="480" height="480" alt="タイトル"></h1> 　　<div class="nav"> 　　　<ol> 　　　　<li><a href="./b">なんたら</a></li> 　　　　<li><a href="./c">かんたら</a></li> 　　　</ol> 　　</div> 　</div> 　<div class="section"> 　　<h2>記事見出し</h2> 　　<p>なんたらかんたら、</p> 　　<p>なんたらかんたら</p> 　　<p>なんたらかんたら、</p> 　　<p>なんたらかんたら</p> 　　<p class="banner"><img src="./images/sectionLogo.png" width="480" height="480" alt="本文タイトル"></p> 　</div> 　<div class="footer"> 　　<h2>文書情報</h2> 　</div> </body> [HTML5}だと <body> 　<div class="header"> 　　<h1><img src="./images/Logo2.png" width="480" height="480" alt="タイトル"></h1> 　　<div class="nav"> 　　　<ol> 　　　　<li><a href="./b">なんたら</a></li> 　　　　<li><a href="./c">かんたら</a></li> 　　　</ol> 　　</div> 　</div> 　<div class="section"> 　　<h2>記事見出し</h2> 　　<p>なんたらかんたら、</p> 　　<p>なんたらかんたら</p> 　　<p>なんたらかんたら、</p> 　　<p>なんたらかんたら</p> 　　<p class="banner"><img src="./images/sectionLogo.png" width="480" height="480" alt="本文タイトル"></p> 　</div> 　<div class="footer"> 　　<h2>文書情報</h2> 　</div> </body> とか・・プレゼンテーションは考えません。・・・これだとHTMLの目的「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )」　その上でスタイルシートでデザインしていきます。逆にあなたが気が変わってまったく異なるデザインにしようとしたときでもHTMLを書き直す必要はありません。要は、HTMLさえきちんと書かれていればスタイルシートで何とでも。【サンプル】HTML4.01strict + CSS2.1 ウェブ標準 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) 注意)タブは、＿に置換してあるので戻す。 ★ウィンドウ幅を変えても追随してくれる。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1><img src="./images/Logo.png" width="480" height="480" alt="タイトル"></h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="./b">なんたら</a></li> ＿＿＿＿<li><a href="./c">かんたら</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>記事見出し</h2> ＿＿<p>なんたらかんたら、</p> ＿＿<p>なんたらかんたら</p> ＿＿<p>なんたらかんたら、</p> ＿＿<p>なんたらかんたら</p> ＿＿<p class="banner"><img src="./images/sectionLogo.png" width="480" height="480" alt="本文タイトル"></p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>

noname#155869

2012/05/18 13:09 回答No.1

どのように配置したいのか判らないので説明のしようが無いですよ。白い紙とかに手書きしたものを写真撮って画像添付するとか、お絵かき添付をしてくださいな

質問者

補足 2012/05/18 14:03

早々のレスポンスありがとうございます。質問時より添付しているのですが、確認頂けないでしょうか。横長の長方形画像で、上下の余白が黒くなって分かりにくいのですが、 ┏━━━━━┓┏━━━━┓┏━┓┏━┓ ┃※※※※※┃┃※※※※┃┃※┃┃※┃ ┃※※※※※┃┃※※※※┃┗━┛┗━┛ ┃※※※※※┃┃※※※※┃┏━━━━┓ ┃※※※※※┃┗━━━━┛┃※※※※┃ ┃※※※※※┃┏━┓┏━┓┃※※※※┃ ┃※※※※※┃┃※┃┃※┃┃※※※※┃ ┗━━━━━┛┗━┛┗━┛┗━━━━┛ このようなレイアウトです。