株式会社アイネックスはソフトウェアの開発、データ復旧サービス、ホームページの作成ツール企業です。

横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
    データ復旧サービス、ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

galleria

01-15) 1. 写真画像(小さい写真画像を並べる)

 

写真画像(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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12