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

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

galleria

02-02) 1. 量の多いコンテンツにスクロールバーをつける

 

スクロールバー付を指定する。

 ul要素の
 heightプロパティに  height: 300px; (表示リストの高さ)を指定し、
 overflowプロパティに overflow: auto; (スクロールバー付き)を指定する。

cssの書き方 /*-------------------------------------------------------
02-02 スクロールバー付き
------------------------------------------------------- */
.list_332{
  width: 300px;
  height: 300px; /* 表示範囲指定 */
  overflow: auto; /* スクロールバー付き */
}
.list_332 li{
 margin: 0 0 20px 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;
}
HTMLの使用例 <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_news04jpg" alt=""/>
    文字列 ・・・
    </a>
  </li>
  --- 省略 ---
</ul>