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