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

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

galleria

03-11)  1. 一枚の画像でテキストの量によって可変するボタンを作る

 

マウスオーバーでデザインを変更する


cssの書き方 /*--------------------------------------------------
03-11 テキストの量で変わるボタン
--------------------------------------------------- */
.ebox_441{
 float: left;
 margin: 0 0 10px 10px;
 border: 1px solid #2B2B35;
 width: 160px;
 padding: 4px;
 height: 300px;
 color: #FFFFFF; /* 白色 */
 background-color: #010014; /* 黒色 */
}
.ebox_441 a:link {
 color:#010014;
}
.ebox_441 a:visited {
 color:#010014;
}
.ebox_441 a:hover {
 color:#FFFFFF;
}
.ebox_441 a:active {
 color:#FFFFFF;
}
.ebox_441 ul{
 text-align:left;
}
.ebox_441 dl{
 position: relative;
 width: 160px;
}
.ebox_441 dt{
 margin: 0 0 15px 0;
 font-size: small;
 line-height: 1.0;
}
.ebox_441 dt img{
 margin: 0 0 7px 0;
}
.ebox_441 dd{
 margin: 0;
}
.ebox_441 dl dd ul{
}
.ebox_441 dl dd ul li{
 list-style-type: none;
}
HTMLの使用例 <div class="ebox_441">
  <ul>
    <li class="date">Jul.30 18:00〜20:00</li>
    <li class="explain">星空を眺めながらバーべキュー。小雨決行。</li>
    <li class="entry"><a href="#"><span>バーベキュー申込     </span></a></li>
    <li class="condition">
    <img src="../images/fes_event_iconFew.png" alt="締切間近" width="40" height="40" /></li>
  </ul>
</div>

星空バーベキュー
Jul.30 18:00〜20:00
星空を眺めながらバーべキュー。小雨決行。
バーベキュー申込
締切間近