HPで画像を縦に並べるには

質問

TeraPadでHPを作っています。2チャンネルのスレッドを紹介している『○○』速報さんのようなHPで、よくプロフィールやアフィリエイトの縦長の画像を画面の端や両側に並べていますが、あれは昔流行ったフレーム分割ですか？それとも2カラムレイアウトでしょうか？
　どちらの方が作りやすいか、またその場合の作り方、もしくは作成法が掲載されているサイトを教えて下さい。

回答No.1

ORUKA1951 · ベストアンサー

例
<div class="profileList">
　<ul>
　　<li><a href=""><img src=""></a></li>
　　<li><a href=""><img src=""></a></li>
　　<li><a href=""><img src=""></a></li>
　</ul>
</div>
<div class="affiliateList">
　<ul>
　　<li><a href=""><img src=""></a></li>
　　<li><a href=""><img src=""></a></li>
　　<li><a href=""><img src=""></a></li>
　</ul>
</div>
　なら、それぞれを
div.profileLis,div.affiliateList{
position:absolute;top:100px;
width:100px;
}
div.profileLis ul,div.profileLis ul li,
div.affiliateList ul,div.affiliateList ul li{
display:block;list-style:none;margin:0;padding:0;
}
div.profileLis{left:0;}
}div.affiliateList{right:0;}
とかでよいのでは、Terapad--テキストエディタでしたらHTMLは文書構造にしたがってきちんとかけるので、あとは、縦だろうが横だろうが、右だろうが左だろうが、スタイルシートでご自由に・・

お礼

ご回答ありがとうございます。おかげさまでなんとかHTMLの仕組みが分かってきました。ひきつづき勉学に励みます!！！

回答No.2

naokita

両側って事で、２カラムって事無いでしょうし、
フレームセットやテーブルレイアウトなんか使わないでしょう。
でも、初心者の初期制作はHTMLだけで出来るので、この方が簡単なのでしょうが・・・

#1さんは、セレクタ誤記かな・・・
フロートで組むなら、

<div id="wrap">
<div id="header"><h1>ヘッダ</h1></div>
<div class="profileList">
<ul>
<li><a href=""><img src=""></a></li>
<li><a href=""><img src=""></a></li>
</ul>
</div>
<div id="main"><p>記事</p><p>記事</p></div>
<div class="affiliateList">
<ul>
<li><a href=""><img src=""></a></li>
<li><a href=""><img src=""></a></li>
</ul>
</div>
<div id="footer"><p>フッター</p></div>
</div>

div.wrap{ width:960px; margin:0 auto;}
div.header{ background:url( ) no-repeat;}
div.main,div.profileList,div.affiliateList{float:left;}
div.main{width:600px;}
div.profileList,div.affiliateList{width:180px;}
div.profileList ul,div.profileList ul li,
div.affiliateList ul,div.affiliateList ul li{
display:block;list-style:none;margin:0;padding:0;}
#footer{clear:left;}

お礼

初めのうちは難しいですね。ご回答ありがとうございました！！