気ままに綴る独学メモ帳
ちょっとテクニカルなレイアウトのWebサイトテンプレート。
時期ハズレの秋用テーマです…
このテンプレートは１カラムの固定レイアウトで、slideBoxを使用してスクロールバーをカスタマイズしています。
元々ブログ用に作ったものなので、普通のサイトだと使いづらいかもしれません。
コンテンツのスライドはslideBox.js ver1.0を改変してマウスホイール対応にさせてます。
詳しくはこちらの記事を参照»[mootools]slideBox ver1.0をマウスホイールに対応させる
下方向の処理は手抜いてるので普通にスクロールバー出した方がいいかも。
トップページでコンテンツを非表示にするスクリプトと、
マウスオーバーで一言コメント表示するToolTipも仕込んであります
フォントサイズ指定はYUIのやつ使ってます。
ちょっとテクニカルなレイアウトのWebサイトテンプレート。
個人サイト或いはブログ向けの２カラム固定幅レイアウト。色違いの黒もあります。
半透明の背景、PNG24のタイトル画像、オーバーフローによる擬似フレーム。
ページを開いた際に一時的にコンテンツを隠すカバーと、別ページにジャンプするときにダイアログ出すスクリプトが入れてあります。
フォントサイズ指定はYUIのやつ使ってます。
Divまみれなので変更はしづらいかもしれない。
ちょっとテクニカルなレイアウトのWebサイトテンプレート。
個人サイト或いはブログ向けの２カラム固定幅レイアウト。色違いの白もあります。
半透明の背景、PNG24のタイトル画像、オーバーフローによる擬似フレーム。
ページを開いた際に一時的にコンテンツを隠すカバーと、別ページにジャンプするときにダイアログ出すスクリプトが入れてあります。
フォントサイズ指定はYUIのやつ使ってます。
Divまみれなので変更はしづらいかもしれない。
ちょっとテクニカルなレイアウトのWebサイトテンプレートその３。
中身は基本的なXHTMLとCSSだけで、メニューとレイアウト要素以外は入っていません。
このテンプレートは上にタブメニュー、中央にメインビジュアル用のwidth:100%ブロックがある２カラム構成で、タブが上に動くアクションはCSSでやっています。
並び順は上から、ヘッダ（メニュー）»ビジュアル»コンテンツ»サイドバー»フッタ。
フォントサイズ指定はYUIのやつ使ってます。
このテンプレートには、使用しているボタン・コンテンツタイトル画像のpdfファイルが添付してあります。
▼所謂Web2.0っていう感じのやつ
ちょっとテクニカルなレイアウトのWebサイトテンプレートその２。
中身は基本的なXHTMLとCSSだけで、メニューとレイアウト要素以外は入っていません。
このテンプレートはブログによくあるトップのみ３カラム、中が２カラムの構成で、ヘッダとフッタが横100%に見えるように作ってあります。
コンテンツ・サイドバーの量が多くなるのを想定した作りなので、中身が少ないとフッタが下にピッタリくっつきません。
Ｗｅ
並び順は上から、ヘッダ»グローバルメニュー»コンテンツ»サイドバー»フッタ。
フォントサイズ指定はYUIのやつ使ってます。
CSSのフィルタリングで使用しているif文については、IEのみに適用させるIFで解説しています。
ちょっとテクニカルなレイアウトのWebサイトテンプレート。
中身は基本的なXHTMLとCSSだけで、メニューとレイアウト要素以外は入っていません。
このテンプレートは上にタブメニューがある１カラム構成で、ロールオーバーとカレントページのタブスタイル変更はjavascriptを使用しています。
並び順は上から、ヘッダ»メニュー»コンテンツ»フッタ。
フォントサイズ指定はYUIのやつ使ってます。
求人情報の応募フォームにありそうな入力項目のXHTMLフォームのコピペ用サンプル。
classやIDは一切使ってないのでスニペットとしても使えると思います。
テーブル使用。注釈はsmall。
結構手抜いてます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <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は続きにあります。
