画像を縦に4つ並べたい場合

質問

2カラムのレイアウトのページを作成しています。
左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。

現在は
<p><img src="画像ファイル.jpg" /></p>
↑これを4つ書いています。

テーブルタグを使うと便利だと思ったのですが、レイアウト目的でテーブルを使うのはあまりよくないと聞きました。

また、画像と画像の間に10px位のスペースを空けたいです。（brは使いたくありません）

よい方法があれば教えていただけませんでしょうか。
何卒よろしくお願いします(>_<)

回答No.2

ORUKA1951 · ベストアンサー

初心者の方だと思います。
　最初の最初にしっかり身につけて置いていただきたいのは、HTMLは文書構造を記述するもので、スタイルシートはそれをどのように表現(プレゼンテーション)するかを指定するものです。HTML5の勧告を目前にした今、とても重要な考え方です。
　いわゆるtableを文書の整形の為だけに用いてはならない。はそのひとつにしか過ぎません。

＞2カラムのレイアウトのページを作成しています。
＞左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。
＞現在は
＞<p><img src="画像ファイル.jpg" /></p>
＞↑これを4つ書いています。

　とは考えないのです。ここをクリアできると、HTMLもスタイルシートも簡単になり、また本当にすばらしいデザインへの道も開けます。原則に忠実になるとデザイン性が失われると、曲解される人がいますが実際は逆です。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

　前置きが長くなりましたが、次のように考えられるようになった最初のステップは卒業です。
★４項目程度の目次と本文からなるページがあります。
★これを、右側に画像として項目を立てに配置して、その左に本文を並べたい
　結果は同じですが、過程がまったく異なりますね。

具体的には、
「HTMLでリストとして目次をマークアップしてあるのだが、それを本文の左にたてに画像ボタンのように表示したい」と考えます。
　すなわち
<div class="section"><!-- 本文を示すclass名 -->
　<div class="section" id="section1">
　　<h1>見だし</h1>
　　<p>記事</p>
　</div>
　<div class="section" id="section2">
　　<h1>見だし</h1>
　　<p>記事</p>
　</div>
　<div class="section" id="section3">
　　<h1>見だし</h1>
　　<p>記事</p>
　</div>
　<div class="section" id="section4">
　　<h1>見だし</h1>
　　<p>記事</p>
　</div>
　<div id="contentTable">
　　<ol>
　　　<li><a href="section1">セクション1</a></li>
　　　<li><a href="section2">セクション2</a></li>
　　　<li><a href="section3">セクション3</a></li>
　　　<li><a href="section4">セクション4</a></li>
　　</ol>
　</div>
</div><!-- 本文終わり -->
とマークアップされているとすると・・・これなら簡単でしょう。
スタイルシートで
div.section{position:relative;}
#contentTable{position:absolute;top0;left:0;width:20%;text-align:center;}
div.section div.section{margin-left:21%;}
#contentTable ol,#contentTable ol li{list-style:none;display:block;margin:0;padding:0;}
#contentTable ol li{background-color:yellow;position:relative;}
#contentTable ol li+li{margin-top:10px;}

とします。
画像は指定していませんが、「セクション1」などの文字の代わりに<img src="***" width="180" height="20" alt="セクション1">とかにして、
#contentTable ol li img{display:block;width:100%;height:auto;}
とすると、ウィンドウ幅に関係なく、常に本文の20%幅の画像が表示されるでしょう。

　1999年当時の古いHTMLの書き方とは、すこし違うと思いますが、逆にとても楽になるはずです。HTMLはそのままで、ボタンを横に並べたり、プルダウンで細かい項目を出したり、リンク先の写真を登場させたりなどが、HTMLを書き換えなくてもできるようになります。

回答No.1

ponta1971

スタイルシートに

ul{
list-style-type:none;
margin:0px;
padding:0px;
}

li{
margin:0px;
padding:0px;
}

HTMLに

<ul>
<li><img src='./a.png' alt='a'></li>
<li><img src='./b.png' alt='b'></li>
<li><img src='./c.png' alt='c'></li>
<li><img src='./d.png' alt='d'></li>
</ul>

こんな感じでどうでしょうか。
画像の間隔はmarginの値で調節できます。

例なのでリストのタグ全体にスタイルシートが効いていますが、実際にはclass指定するとかしてください。

ただ、この場合隙間無く画像が並ぶはずなのですが、私の環境では隙間が開いてしまったので、もう少し突き詰めてみないといけないですが・・・。