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

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

galleria

02-03) 1. スクロールバーをつけない(左側サンプル)

02-03) 2. 量の多いコンテンツにスクロールバーをつける(右側サンプル)

 

リスト要素を2つ並べて表示する(右側がスクロールバー付)

左側リストの幅を.list_331のwidth: 300px;で指定する。
左側のul要素に float: left; プロパティでul要素の右側リストを並べて表示する。
右側リストの幅を.list_332のwidth: 300px;で指定する。

cssの書き方 /*-------------------------------------------------------
02-01 スクロールバーなし
-------------------------------------------------------- */
.list_331{
 float: left;
 margin-left: 10px;
 width: 300px;
}
.list_331 li{
 margin: 0 0 10px 0;
 padding: 0 0 10px 0;
 list-style-type: none;
 font-size: small;
 line-height: 1.2;
 background-repeat: repeat-x;
 background-position: left bottom;
 background-image: url("../images/inc_line_horizon.gif");
}
.list_331 li img{
 float: left;
 margin: 0 7px 0 0;
 border-right: 4px solid #808080 ; /* 右黒枠で写真を立体的に見せる */
 border-bottom: 4px solid #808080 ; /* 下黒枠で写真を立体的に見せる */
}

/*-------------------------------------------------------
02-02 スクロールバー付き
------------------------------------------------------- */
.list_332{
 width: 300px;
 height: 300px; /* 表示範囲指定 */
 overflow: auto; /* スクロールバー付き */
}
.list_332 li{
 margin: 0 0 10px 50px;
 height: 50px;
 list-style-type: none;
 font-size: small;
 line-height: 1.2;
 background-repeat: repeat-x;
 background-position: left bottom;
 background-image: url("../images/inc_line_horizon.gif");
}
.list_332 li img{
 float: left;
 margin: 0 7px 0 0;
 border-right: 4px solid #808080 ; /* 右黒枠で写真を立体的に見せる */
 border-bottom: 4px solid #808080 ; /* 下黒枠で写真を立体的に見せる */
}
HTMLの使用例 <ul class="list_331">
  <li><a href="#"><img src="../images/inc_news01.jpg" alt=""/>
     文字列 ・・・
    /a>
  </li>
  <li><a href="#"><img src="../images/inc_news02.jpg" alt=""/>
    文字列 ・・・
    </a>
  </li>
  <li><a href="#"><img src="../images/inc_news03.jpg" alt=""/>
    字列 ・・・
    </a>
  </li>
  <li><a href="#"><img src="../images/inc_news04.jpg" alt=""/>
    文字列 ・・・
    </a>
  </li>
  --- 省略 ---
</ul>
<ul class="list_332">
  <li><a href="#"><img src="../images/inc_news01.jpg" alt=""/>
     文字列 ・・・
    /a>
  </li>
  <li><a href="#"><img src="../images/inc_news02.jpg" alt=""/>
    文字列 ・・・
    </a>
  </li>
  <li><a href="#"><img src="../images/inc_news03.jpg" alt=""/>
    字列 ・・・
    </a>
  </li>
  <li><a href="#"><img src="../images/inc_news04.jpg" alt=""/>
    文字列 ・・・
    </a>
  </li>
  --- 省略 ---
</ul>