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

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

galleria

05-04)　　1. スライドバー付のデザイン作成

　

テーブルにスライドバーを付けて表示する。
タイトル部はスクロールしない。
量が多いデータ部のみスクロール対象とする。

ｃｓｓの書き方 /*-------------------------------------------------------
05-04 テーブルの長い部分にスクロールバーを付ける
-------------------------------------------------------- */
.tbl_931{
clear: both;
width: 650px;
margin: 0 0 15px 50px;
}
.tbl_931 table{
float: left;
width: 380px;
margin: 0 0 0 15px;
border-collapse: collapse;
}
.tbl_931 table thead{
display: block;
width: 100%;
}
.tbl_931 table thead th{
width: 180px;
padding: 5px;
border: 1px solid #999999;
background-color: #FFC100;
font-size: 82%;
font-weight: normal;
text-align: center;
}
.tbl_931 table tbody{
display: block;
width: 100%;
height: 240px;
overflow: auto;
}
*html .tbl_931 table tbody{ /*for IE6 hack*/
overflow: visible;
height: auto;
}
*:first-child + html .tbl_931 table tbody{ /*for IE7 hack*/
height: auto;
}
.tbl_931 table td{
padding: 5px;
border: 1px solid #999999;
background-color: #FFFFFF;
font-size: 82%;
text-align: left;
}
.tbl_931 table td.item{ width: 180px;}
.tbl_931 table td.price{ width: 164px;}
.tbl_931 p.kome{
float: right;
width: 285px;
text-indent: -1em;
padding-left: 1em;
}
HTMLの使用例  <div class="tbl_931">
<h4><span>オプション</span></h4>
<table>
<thead>
<tr>
<th scope="col">オプション</th>
<th scope="col">料金</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item">DJブース</td>
<td class="price">無料</td>
</tr>
<tr>
<td class="item">マイク</td>
<td class="price">無料</td>
</tr>
<tr>
<td class="item">音響設備</td>
<td class="price">無料</td>
</tr>
---　省略　---
</tbody>
</table>
<p class="kome">※ウェディングケーキは7日前　文字列　・・・</p>
<p class="kome">※衛星放送（BS / CS）の映像　文字列・・・</p>
</div>

オプション

オプション 料金
DJブース 無料
マイク 無料
音響設備 無料
DVDプレイヤー 無料
プロジェクター 無料
スクリーン 無料
ウェディングケーキ 5,000円〜30,000円
ホールケーキ 3,000円〜5,000円
装花 ご予算に応じてご用意いたします
ウェルカムボード作成 3,000円
カメラマン手配 10,000円

※ウェディングケーキは7日前までに、ホールケーキは3日前までにお申し込みください。間際のご予約の場合は、ケーキ盛り合わせにて対応させていただきます。

※衛星放送（BS / CS）の映像をプロジェクターにて投影することも可能ですが、一部有料チャンネルの場合、別途料金が発生する場合もあります。