横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
positionを使い好きな場所に要素を配置する(ul要素)
cssの書き方 |
/*------------------------------------------------------- 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> |
※入力していただいた個人情報につきましては、本年度の星空フェスティバルにのみ利用させていただきます。収集された個人情報を、第三者へ提供いたしません。