縦のスペースの空け方。

質問

下のサイトを作成しています。そこでお聞きしたいのですが、左側の「新店情報」と「新店情報」の縦のスペースを狭くしたいのですがやり方がわかりません。もしお解かりの方がいらっしゃいましたら、ぜひ教えてほしいです。よろしくお願いします。

http://jishusitu.com/index.html

回答No.1

ORUKA1951 · ベストアンサー

tableタグを使わずにレイアウトを整える方法 ( http://okwave.jp/qa/q7411596.html )
もあわせて、
　根本的な問題ですが、HTMLは文書を、それを構成する要素に分解し、それぞれの要素をマークアップするものです。<h1>から<h6>、<table>、<p>はそれぞれ、見出し、表、段落をマークアップするためのタグです。HTML4.01では、それだけでは文書構造を示せませんので、『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』することになります。
　たとえば、示されたページで{topic--有料自習室の取材情報と自習室.comからのお知らせ}が本文となるのでしょう。だとすれば、
<div class="header">
・・ほぼ記述どおりでよい・・
　<div class="nav">
　　サイト内のナビゲーション
　</div>
</div>
<div class="section">
　<h2>取材情報と自習室からのお知らせ<h2>
　　<div class="section" id="Osaka">
　　　<h3><img height="86" width="85" alt="自習室新店情報" src="img/topic/topic_name_4.png"><img height="85" width="108" alt="" src="img/topic/cocco.jpg">大阪　Osaka</h3>
　　　<p>2012年4月13日オープン予定！<span class="day">*2012.4.4 </span></p>
　　</div>
　　<div class="section" id="Fukuoka">
　　　・・・・以下略・・・
　　</div>
　　<div class="aside"><!-- 本文と直接関係ない記事 -->
　　　<h2>自習室や勉強などにかんするコラム</h2>
　　　<p>・・・</p>
　　　<p>・・・</p>
　　</div>
</div>
<div class="footer>
</div>
のようなマークアップでよいのです。ここでつけたclass名は、『文書に構造を付加するための』もので、HTML5では、「HTML4.01では文書構造を示す要素が足りなかった」と言う反省から、取り入れられる要素です。言い換えれば、そのまま<header><section><aside><footer>になるものです。
　それぞれの意味や使い方は→HTML5におけるHTML4からの変更点/3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )

　これ以上に、contentsInner,mainArea,のようなid名や、reportSummaryBox,clearfix,reportImg1,reportImg2,reportSummaryのようなclass名をつける必要は、まったくありません。

　なぜなら、HTMLで文書構造がきちんと示されていたら
div.section{position:relative;}
div.section div.section{width:400px;}
div.section div.section h3 img{position:absolute;top:0;left:0;}
div.section div.section h3 img+img{left:90px;}
div.section div.section h3,div.section div.section p{margin-left:200px;}
　と言う簡単なスタイルシートですみますね。

　要は、デザインのためにHTMLを書かないということです。実はtableでデザインするのは、その典型ですが、やたらめったら<div>を書き連ねて「文書構造と無関係なclass名をつける」のも、同じ穴の狢(むじな)です。

　なお、
＞左側の「新店情報」と「新店情報」の縦のスペースを狭くしたいのですが
　も、同様で、上記のようなHTMLでしたら
div.section div.aside p{margin:0;}
だけでよいですね。本文中の本文と関係ない記事--aside(コラム)の段落のマージンはゼロにする・・・・と、別にHTMLに何の手を加えることなく設定できますし、後日見直すときも簡単ですよね。

お礼

ご回答いただき、ありがとうございます。

非常に丁寧にご説明いただき、本当に感謝します。ご説明いただいた箇所をできるだけ早くに訂正したいと思います。本当にありがとうございました。