0

大変解りやすい説明有難うございました。
[relative][absolut]は理解致しました。 [確認1]block_a_bについて
block_bはblock_aを基準に配置をすれば良いのですね。
[結果]
block_bのtopがblock_aのbottomと重なり、aとbとの余白がありません。

[確認2]box_1_2_3_4について
box_aはblock_aの位置より左・上で位置決めをする
[結果]
box4個は表示されますが、box_1_2のtopがblock_aのtopと同じ位置で重なり、左・上余白がありません。

[確認3]box_5_6_7_8について
block_bを基準に配置決めをする
[結果]
box1_2_3_4の左上で重なって表示されます。


解りやすく[a]と[b]の部分をピックアップして記述していました。
しかし、前後の記述が影響してこのように表示されるのではないかと思いますので、
以下のように修正いたしました。
他に方法がございましたら、アドバイスお願いいたします。


[実行したいこと]
①HPの更新がしやすいように画像（1_2_3_4）(5_6_7_8)をaとbのブロックに分け、更に縦並びの画像を

余白をつけて上下左右に2個づつ表示させる方法

②HP上でブロック要素ばかりを使用してよいのでしょうか？
③SEO対策として有効な記述の仕方

<STYLE>

.layout1{
width : 500px;
float : left;
}
.block_a{
width : 450px;
}
.imgbox_1{
width : 200px;
}
.imgbox_2{
width : 200px;
}
.imgbox_3{
width : 200px;
}
.imgbox_4{
width : 200px;
}
.block_b{
width : 350px;
}
.imgbox_5{
width : 150px;
}
.imgbox_6{
width : 150px;
}
.imgbox_7{
width : 150px;
}
.imgbox_8{
width : 150px;
}
.blockc{
width : 450px;
}
.layout2{
width : 150px;
margin-left : 500px;
}
.layout3{
width : 650px;
clear : both;

</STYLE>


[HTML]

<div class="layout1">
<div class="block_a">
<div class="imgbox1">image1.gif</div>
<div class="imgbox2">image2.gif</div>
<div class="imgbox3">image3.gif</div>
<div class="imgbox4">image4.gif</div>
</div>
<div class="block_b">
<div class="imgbox5">image5.gif</div>
<div class="imgbox6">image6.gif</div>
<div class="imgbox7">image7.gif</div>
<div class="imgbox8">image8.gif</div>
</div>
<div class="blockc">テキスト入力</div>
</div>
<div class="layout2">
<div class="block_d">
<IMG src="image9.gif" border="0"><BR>
<IMG src="image10.gif" border="0"><BR>
<IMG src="image11.gif" border="0"><BR>
<IMG src="image12.gif" border="0"><BR>
</div>
</div>
<div class="layout3">
<p>テキスト</p>
</div>

質問者が選んだベストソリューション

Yahoo!知恵袋 5150日前