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

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

galleria

05-10)　　1. ﾃｰﾌﾞﾙでフォームデザインの作成

　

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

ｃｓｓの書き方 /*-------------------------------------------------------
05-10 cssでテーブルのデザインを整える
-------------------------------------------------------- */
.info_911{
margin: 0;
}
.tbl_911{
width: 690px;
margin: 0 0 15px 0; /*　下端(確認ボタン)から15pxずらす　*/
border: 2px solid #2B2B35; /*　外枠の黒色　*/
background-color: #808080; /*　背景色の指定　*/
border-collapse: collapse; /*　テーブルの枠線なし　*/
}
.tbl_911 th{
padding: 10px; /* 文字の位置をずらす */
border: 1px solid #2B2B35; /* TH部のボックス指定　*/
color: #FFFFFF;
vertical-align: top;
text-align: center; /*　文字は中央　*/
}
.tbl_911 td{
padding: 10px; /* 文字の位置をずらす */
border: 1px solid #2B2B35; /* TD部のボックス指定　*/
color: #FFFFFF;
vertical-align: top;
text-align: left; /*　文字は左端　*/
}
.info_911 p.attention{
margin: 0 0 10px 0; /*　フッター部との空きの　*/
}

.entryField{
padding: 4px; /* 入力テキストの余白域　*/
background-image: url(../images/fes_event_textboxBg.gif);
background-repeat: repeat-x;
background-position: left top;
border: 0;
}
input#entryName1,
input#entryName2{
margin: 0 15px 0 5px;
}
select#entryPref{
margin: 0 0 5px 0;
}

select#entryPref optgroup{
font-style: normal;
}
select#entryPref optgroup.odd{
background-color: #666666;
color: #FFFFFF;
}
select#entryPref optgroup.even{
background-color: #CCCCCC;
color: #333333;
}
select#entryPref optgroup option{
padding: 0 0 0 1em;
}

.entryEvent{
}
.entryEvent li{
margin: 0 0 10px 0;
list-style-type: none;
}
.entryEvent li span{
padding: 0 0 0 15px;
color: #0000FF;
font-size: 79%;
}
.entryEvent li del{
padding: 0 0 0 25px;
color: #2B2B35;
}

.entrySubmit{
margin: 0 0 15px 0;
text-align: center;
}
HTMLの使用例 <div class="info_911">
<form action="#" id="entry">
<table class="tbl_911">
<tr>
<th scope="row">氏名</th>
<td>
<label for="entryName1">氏</label>
<input type="text" value="" size="20" class="entryField" id="entryName1" name="name1" /><br/>
<label for="entryName2">名</label>
<input type="text" value="" size="20" class="entryField" id="entryName2" name="name2" />
</td>
</tr>
<tr>
<th scope="row"><label for="entryMail">メールアドレス</label></th>
<td>
<input type="text" value="" size="40" class="entryField" id="entryMail" name="mail" />
</td>
</tr>
---　省略　---
</table>
<p class="entrySubmit"><input type="image" src="../images/fes_event_btSubmit.gif" alt="確認画面へ進む" value="確認画面へ進む" accesskey="2"/></p>
</form>
<p class="attention">※入力していただいた</p>
</div>

申込フォーム

氏名

参加イベント
  • 星空Live5/31 18:30〜20:00

※入力していただいた個人情報につきましては、本年度の星空フェスティバルにのみ利用させていただきます。収集された個人情報を、第三者へ提供いたしません。