Template

SiteTemplate02: 2-3Columun 4-5BOX BlogStyle

2008/05/30 Web Site No comments , , , ,

ちょっとテクニカルなレイアウトのWebサイトテンプレートその2。
中身は基本的なXHTMLとCSSだけで、メニューとレイアウト要素以外は入っていません。

このテンプレートはブログによくあるトップのみ3カラム、中が2カラムの構成で、ヘッダとフッタが横100%に見えるように作ってあります。
コンテンツ・サイドバーの量が多くなるのを想定した作りなので、中身が少ないとフッタが下にピッタリくっつきません。
We
並び順は上から、ヘッダ»グローバルメニュー»コンテンツ»サイドバー»フッタ。
フォントサイズ指定はYUIのやつ使ってます。
CSSのフィルタリングで使用しているif文については、IEのみに適用させるIFで解説しています。

SiteTemplate02

  • 2-3Columun 4-5BOX
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

(さらに…)

SiteTemplate01: 1Columun 4BOX TabMenu

2008/05/29 Web Site No comments , , , ,

ちょっとテクニカルなレイアウトのWebサイトテンプレート。
中身は基本的なXHTMLとCSSだけで、メニューとレイアウト要素以外は入っていません。

このテンプレートは上にタブメニューがある1カラム構成で、ロールオーバーとカレントページのタブスタイル変更はjavascriptを使用しています。
並び順は上から、ヘッダ»メニュー»コンテンツ»フッタ。
フォントサイズ指定はYUIのやつ使ってます。

SiteTemplate01

  • 1Columun 4BOX
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

(さらに…)

[XHTML]コピペ用セレクトメニュー(テキスト編)

2008/05/14 Form No comments ,

入力フォームで良く使うセレクトメニューのサンプルソース。
都道府県、質問内容、違反報告内容など。

お届け時間指定

業者によって時間は変わるけど大体こんな感じ。

<select name="time">
<option>希望なし</option>
<option>午前中</option>
<option>12時-14時</option>
<option>14時-16時</option>
<option>16時-18時</option>
<option>18時-20時</option>
<option>20時-21時</option>
</select>

(さらに…)

[XHTML]コピペ用フォームパーツ(数字編)

2008/05/14 Form No comments ,

年月日や西暦、商品個数などに使えるセレクトメニューのXHTMLソース。コピペ用です。

月(1~12)のセレクトメニュー

<select name="month">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>

9~0のセレクトメニュー

<select name="num">
  <option value="9">9</option>
  <option value="8">8</option>
  <option value="7">7</option>
  <option value="6">6</option>
  <option value="5">5</option>
  <option value="4">4</option>
  <option value="3">3</option>
  <option value="2">2</option>
  <option value="1">1</option>
  <option value="0">0</option>
</select>

(さらに…)

[XHTML]応募フォームっぽい入力項目のメールフォーム

2008/05/14 Form No comments ,

求人情報の応募フォームにありそうな入力項目のXHTMLフォームのコピペ用サンプル。

classやIDは一切使ってないのでスニペットとしても使えると思います。
テーブル使用。注釈はsmall。
結構手抜いてます。

<form action="" method="post">
<table cellpadding="0" cellspacing="0" border="1">
	<tr><th scope="row">お名前</th>
	<td><input name="name" type="text" size="50" /><small>(全角)</small></td></tr>
	<tr><th scope="row">ふりがな</th>
	<td><input name="name2" type="text" size="50" /><small>(全角)</small></td></tr>
	<tr><th scope="row">生年月日</th>
	<td><input name="birth" type="text" size="20" /><small>(例:1980/04/01)</small></td></tr>
	<tr><th scope="row">性別</th>
	<td><input name="sex" type="radio" value="男性" />男性
	<input name="sex" type="radio" value="女性" />女性</td></tr>
	<tr><th scope="row">E-Mail</th>
	<td><input name="email" type="text" size="50" /></td></tr>
	<tr><th scope="row">電話番号</th>
	<td><input name="tel" type="text" size="50" /><small>(例:1234-56-7890)</small></td></tr>
	<tr><th scope="row">携帯電話・PHS番号</th>
	<td><input name="tel2" type="text" size="50" /><small>(例:090-1234-5678)</small></td></tr>
	<tr><th scope="row">郵便番号</th>
	<td><input name="postcode" type="text" size="10" /><small>(例:507-0000)</small></td></tr>
	<tr><th scope="row">住所</th>
	<td><input name="address" type="text" size="50" /></td></tr>
	<tr><th scope="row">現在役職の有無</th>
	<td><input name="businesspost" type="radio" value="あり" />あり
	<input name="businesspost" type="radio" value="なし" />なし</td></tr>
	<tr><th scope="row">最終学歴</th>
	<td><input name="schoolcareer" type="text" size="50" /></td></tr>
	<tr><th scope="row">資格</th>
	<td><textarea name="license" cols="70" rows="3"></textarea></td></tr>
	<tr><th scope="row">職務経歴</th>
	<td><textarea name="history" cols="70" rows="10"></textarea></td></tr>
	<tr><th scope="row">自己PR</th>
	<td><textarea name="message" cols="70" rows="10"></textarea></td></tr>
	<tr><th scope="row">入社希望時期</th>
	<td><input name="enter" type="text" size="50" /></td></tr>
	<tr><th scope="row">その他希望条件</th>
	<td><textarea name="other" cols="70" rows="5"></textarea></td></tr>
</table>
<p><button type="submit">送信</button><button type="reset">リセット</button></p></form>

サンプルのCSSは続きにあります。

(さらに…)