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

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

No.2 回答者： naokita 回答日時： 2011/12/12 22:23

両側って事で、２カラムって事無いでしょうし、

フレームセットやテーブルレイアウトなんか使わないでしょう。
でも、初心者の初期制作は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;}

この回答へのお礼

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

お礼日時：2011/12/16 18:43

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2011/12/12 09:08

例

<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の仕組みが分かってきました。ひきつづき勉学に励みます!！！

お礼日時：2011/12/16 18:42