第17回勉強会

日　時：
2015年3月30日　13:10～17:00
場　所：
アワーズ 研修室
出席者：
北條、福田、小野、河野、古屋、土生、山縣（敬称略）

キャプション付きの画像を整列する方法

ページの幅割る横に並べる枚数の幅のボックスを作り、左フロートを設定する。ボックスの幅から20PXを引いた幅の画像を挿入する。画像に1px幅の枠線とパディング4PXを設定する。

上記を踏まえ幅800PXに2枚及び3枚の写真を挿入する方法を実習した。

  1. 写真の準備
    2枚横並び用には幅380PX｛＝(800÷2）ー20｝を4枚、3枚横並び用には246PX｛＝　(800÷3）ー20 ｝を6枚用意した。
  2. 2枚横並び用ボックスの設定
    幅50％、中央揃え、フロート左
  3. 3枚横並び用ボックスの設定
    幅33.3％、中央揃え、フロート左
  4. 写真の設定　 1px幅の枠線とパディング4PX

THML

<div class="shasin"><img src="写真のファイル名" width="380" height="幅380に対応する高さ" border="0" alt="説明文"><br>説明文</div>
（繰り返し3）

CSS

.shasin{
width : 50%;
float : left;
text-align : center;
margin-bottom : 10px;
}
.shasin img{
padding : 4px;
border : 1px solid black;
background-color : silver;
}

cssの例

#container 4方向マージン 自動
幅 800px
.shasin 幅 50％
回り込み 左
水平方向の位置 中央揃え
下方向マージン 10px;
.shasin3 幅 33.3%;
回り込み 左
水平方向の位置 中央揃え
下方向マージン 10px;
.shasin img 4方向パディング 4px
上方向ボーダー 1px solid black;
背景色 silver
shasin3 img 4方向パディング 4px
上方向ボーダー 1px solid black;
背景色 silver
.cl clear left

実施例