CSS:　画像を並べる　①

CSSで画像を並べる方法。その１

探して、今のとこ一番簡単でわかりやすかった方法。

CSS
スタイルシートに追加
---------------------------------------------
/* 画像横並び */
.images ul {
    padding:0;
    margin:10;
    font-size:0;
    text-align: justify;
    text-justify: distribute-all-lines;
}

.images:after ul{
    content:url(css_justify.png);
    line-height:0;
    visibility:hidden;
}

.images ul li{
    display:inline;
    margin:0;
    padding:0;
}

div.images {
　　margen-left:10px;
}
-----------------------------------------

HTML
画像を並べたい位置に下記のHTMLを書き込む

----------------------------------------

<div class="images">

<ul class="images">
<li><img src="img_01.jpg" width="000" height="000" alt="" /></li>_
<li><img src="img_02.jpg" width="" height="" alt="" /></li>_
</ul>

</div>

----------------------------------------------------

"img_01.jpg" の部分は画像へのパス。

width="000" height="000"　の部分は画面に表示する画像サイズ。

縦横比がオリジナルサイズと合わない場合はこの数字に合わせて強制的にサイズ調整される。
数値を記入しなければオリジナルサイズで表示される。

---------------------------------------------------

例）

単純な横並(2枚)
元画像サイズ　400×300
表示サイズ　　210×158

<ul class="images">
<li><img src="img_01.jpg" width="210" height="158" alt="" /></li>_
<li><img src="img_02.jpg" width="210" height="158" alt="" /></li>_
</ul>

</div>

------------------------------------------------------------------

単純な横並(3枚)
元画像サイズ　400×300
表示サイズ　　140×105

<ul class="images">
<li><img src="img_01.jpg" width="140" height="105" alt="" /></li>_
<li><img src="img_02.jpg" width="140" height="105" alt="" /></li>_
<li><img src="img_03.jpg" width="140" height="105" alt="" /></li>_
</ul>

</div>

------------------------------------------------------------------

2列2段
元画像サイズ　400×300
表示サイズ　　210×158

<ul class="images">
<li><img src="img_01.jpg" width="210" height="158" alt="" /></li>_
<li><img src="img_02.jpg" width="210" height="158" alt="" /></li>_
</ul>

<ul class="images:after">
<li><img src="img_03.jpg" width="210" height="158" alt="" /></li>_
<li><img src="img_04.jpg" width="210" height="158" alt="" /></li>_
</ul>

</div>

------------------------------------------------------------------

単純な横並(2枚)にしたいがオリジナルサイズが大きくて収まらないので縦ならびになった例
元画像サイズ　400×300
表示サイズ　　数値未記入

<ul class="images">
<li><img src="img_01.jpg" width="" height="" alt="" /></li>_
<li><img src="img_02.jpg" width="" height="" alt="" /></li>_
</ul>

</div>

------------------------------------------------------------------

縦型、横型の写真が混ざる例

単純な横並(2枚)
元画像サイズ　400×300, 300×400
表示サイズ　　210×158, 158×210

<ul class="images">
<li><img src="img_01.jpg" width="210" height="158" alt="" /></li>_
<li><img src="img_02.jpg" width="158" height="210" alt="" /></li>_
</ul>

</div>

------------------------------------------------------------------

縦型、横型の写真が混ざる例

2列2段
元画像サイズ　400×300, 300×400
表示サイズ　　210×158, 158×210

<ul class="images">
<li><img src="img_01.jpg" width="210" height="158" alt="" /></li>_
<li><img src="img_02.jpg" width="158" height="210" alt="" /></li>_
</ul>

<ul class="images:after">
<li><img src="img_01.jpg" width="210" height="158" alt="" /></li>_
<li><img src="img_02.jpg" width="158" height="210" alt="" /></li>_
</ul>

</div>

------------------------------------------------------------------

同じ向きの写真を並べるのがいいらしい。

paso a paso