横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
写真画像(6行×2列)を記述する
クラス要素の .list_190 で全体枠の幅 width: 540px; 指定し、
個別要素のサイズは.list_190 li {}のwidth: 76px; で指定する。
cssの書き方 |
/*--------------------------------------------- 01-15 画像をキレイに並べる ---------------------------------------------- */ .list_190 { float: left; width: 540px; border: 3px #C0C0C0 solid; /* 灰色の枠指定 */ padding: 20px; } .list_190 li{ float: left; border: 3px solid #2B2B35; /* 画像単位に枠を指定する */ margin: 0 0 8px 8px; width: 76px; height: 76px; list-style-type: none; /* リスト項目のマーカー無し */ } .list_190 li img{ display: table-cell; /* 縦方向に対する高さを揃える */ width: 76px; height: 76px; vertical-align: middle; /* 縦方向の揃える */ text-align: center; } |
---|---|
HTMLの使用例 |
<ul class="list_190"> <li><img src="fes_iphoto01.jpg" alt="" /></li> <li><img src="fes_iphoto02.jpg" alt="" /></li> <li><img src="fes_iphoto03.jpg" alt="" /></li> <li><img src="fes_iphoto04.jpg" alt="" /></li> <li><img src="fes_iphoto05.jpg" alt="" /></li> <li><img src="fes_iphoto06.jpg" alt="" /></li> <li><img src="fes_iphoto07.jpg" alt="" /></li> <li><img src="fes_iphoto08.jpg" alt="" /></li> <li><img src="fes_iphoto09.jpg" alt="" /></li> <li><img src="fes_iphoto10.jpg" alt="" /></li> <li><img src="fes_iphoto11.jpg" alt="" /></li> <li><img src="fes_iphoto12.jpg" alt="" /></li> </ul> |