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

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

galleria

03-17)  1. 一覧形式

 

positionを使い好きな場所に要素を配置する(ul要素)

一覧表の作成を行なう。
全体の枠(width: 720px;)と個別ガイダンスの枠(width: 160px;)、
回り込み(float: left;)を行なう。

cssの書き方 /*-------------------------------------------------------
03-17 ボックスを横に並べる
-------------------------------------------------------- */
div.eventArea{
 width: 720px;
}

.ebox_441{
 float: left;
 margin: 0 0 10px 10px;
 border: 1px solid #2B2B35;
 width: 160px;
 padding: 4px;
 height: 300px;
 color: #FFFFFF; /* 白色 */
 background-color: #010014; /* 黒色 */
}
HTMLの使用例 <div class="eventArea">
<img src="../images/fes_event_title.gif" alt="Event" width="94" height="28" />
<h4 class="subTitle">イベント内容</h4>

<div class="ebox_441">
<dl>
<dt><img src="../images/fes_event03.jpg" alt="" />星空バーベキュー</dt>
<dd>
<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>
</dd>
</dl>
<!--.eventBox1-->
</div>
<div class="ebox_441">
<dl>
<dt><img src="../images/fes_event04.jpg" alt="" />おいしいコーヒーの入れ方教室</dt>
<dd>
<ul>
<li class="date">Jul.31 15:30〜17:30</li>
<li class="explain">ネイルドリップでのおいしいコーヒーの入れ方を教えます。</li>
<li class="entry"><a href="#"><span>コーヒー申込</span></a></li>
</ul>
</dd>
</dl>
<!--.eventBox1-->
</div>
--- 省略 ---
</div>

Event

イベント内容

星空バーベキュー
おいしいコーヒーの入れ方教室
  • Jul.31 15:30〜17:30
  • ネイルドリップでのおいしいコーヒーの入れ方を教えます。
  • コーヒー申込
星空映画祭
  • Jul.30 21:00〜23:00
  • 星空公園に300インチの巨大スクリーンが登場。
  • 食事会参加申込
  • 締切間近
星空学級
  • Aug.1 13:00〜18:30
  • 星空小学校の教室が会場。生活に役立つセミナーがラインナップ。
  • 星空学級参加申込
星空Live
  • Jul.31 18:30〜20:00
  • mayuによるライブパフォーマンス
  • 満席
星空カジノ
  • Jul.31 21:00〜23:00
  • 小雨決行。事前申込不要。
星空屋台村
  • 期間中毎日開催
  • ラーメンや焼き鳥、移動式ワゴンまで30の屋台が登場。
星空マルシェ
  • 期間中毎日 10:00〜12:00
  • 星空タウンで育てられた新鮮野菜を朝市で販売

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

Event

イベント内容

星空バーベキュー
Jul.30 18:00〜20:00
星空を眺めながらバーべキュー。小雨決行。
バーベキュー申込
締切間近
おいしいコーヒーの入れ方教室
Jul.31 15:30〜17:30
ネイルドリップでのおいしいコーヒーの入れ方を教えます。
教室参加申込
星空映画祭
Jul.30 21:00〜23:00
星空公園に300インチの巨大スクリーンが登場。
映画参加申込
締切間近
星空学級
Aug.1 13:00〜18:30
星空小学校の教室が会場。生活に役立つセミナーがラインナップ。
星空学級参加申込
星空Live
  • Jul.31 18:30〜20:00
  • mayuによるライブパフォーマンス
  • 満席
星空カジノ
  • Jul.31 21:00〜23:00
  • 小雨決行。事前申込不要。
星空屋台村
  • 期間中毎日開催
  • ラーメンや焼き鳥、移動式ワゴンまで30の屋台が登場。
星空マルシェ
  • 期間中毎日 10:00〜12:00
  • 星空タウンで育てられた新鮮野菜を朝市で販売

03-17)  3. 一枚のテキストの量するボタンを作る

Event

イベント内容

星空バーベキュー
おいしいコーヒーの入れ方教室
  • Jul.31 15:30〜17:30
  • ネイルドリップでのおいしいコーヒーの入れ方を教えます。
  • 教室参加申込
星空映画祭
  • Jul.30 21:00〜23:00
  • 星空公園に300インチの巨大スクリーンが登場。
  • 食事会参加申込
  • 締切間近
星空学級
  • Aug.1 13:00〜18:30
  • 星空小学校の教室が会場。生活に役立つセミナーがラインナップ。
  • 星空学級参加申込
星空Live
  • Jul.31 18:30〜20:00
  • mayuによるライブパフォーマンス
  • 満席
星空カジノ
  • Jul.31 21:00〜23:00
  • 小雨決行。事前申込不要。
星空屋台村
  • 期間中毎日開催
  • ラーメンや焼き鳥、移動式ワゴンまで30の屋台が登場。
星空マルシェ
  • 期間中毎日 10:00〜12:00
  • 星空タウンで育てられた新鮮野菜を朝市で販売