INFORMATION
- 2012-09-20
-
ホームページをリニューアルしました
ピックアップ
3つの顔企業サイトはもちろん、様々なWebサイトにお使いいただける汎用性の高いデザインテンプレートです。堅実なイメージにしたいWebサイトに適しています。また、メインカラーを変更するだけでかなりイメージが変わってくると思います。
今回、シンプルながらも細部に凝ったデザインにしてみたのですが、あまりデザインにこだわりすぎるとCSSが複雑になってカスタマイズしにくくなってしまうので、このバランスが難しいところです。
こういうfloatを多用するデザインだと必ずIE6でバグに遭遇してしまいます・・・。フッターのところでfloatを使用しているのですが、HTMLファイルにコメントを入れているとなぜかmarginが3pxほど拡張されてしまうというわけのわからないバグがあるため、そこだけ閉じタグのコメントを入れていません。
完全幅固定タイプです。
全体的な横幅はヘッダーとメニューは780px、コンテンツとフッターは800pxです。部分的にテンプレートの横幅が異なるデザインになっています。メインコンテンツ部分は540px（余白除く）、サブコンテンツ部分は220px（余白除く）です。
今回、アイキャッチ画像を付けてみました。アイキャッチ画像がない場合は、大見出しにしています。見出しレベルはh2にしています。それに伴い、メインコンテンツ、サブコンテンツは見出しのレベルを下げてh3から始めています。
現在表示しているページに該当するメニューのa要素に｢class="active"｣を指定すると、メニューボタンの色が変わり、ナビゲーションの役割を果たします。
画像について
画像はCoolWebWindow作です。色の変更などの編集も可能です。ご自由にお使いください。
ページ上部への戻りリンクについて
ページ上部への戻りは、JavaScriptを用いて、なめらかにスクロールしながら移動するようにしております。
画像のロールオーバーについて
ヘッダーの「お問い合わせはこちら」のボタンは、JavaScriptにてロールオーバーをしてます。ロールオーバーをしたい画像がありましたら、imgタグに「.rollover」というクラスを指定してください。また、ロールオーバー用の画像は、ロールオーバーしない画像名に「_on」を付けた名前にしてください。
カスタマイズについて
カスタマイズはご自由になさってください。
制限はありません。
その他、不具合などございましたら
CoolWebWindowにお知らせください。
サンプルタグについて
以下、サンプルタグになります。ご利用の際は参考にしてみてください。
INFORMATION
- 2009-04-28
-
○○新聞に取材を受けました。
- 2009-04-24
-
休業のお知らせ。誠に勝手ながら5月2日から6日まで長期休暇日とさせていただきます。ご了承ください。
h3タグ
h4タグ
h5タグ
h6タグ
強調（em）
より強い強調（strong）
追加（ins）
削除（del）
テキストアンカー
リスト
普通のリスト
- 普通のリスト1
- 普通のリスト2
- 普通のリスト3
番号付きリスト
- 番号付きリスト1
- 番号付きリスト2
- 番号付きリスト3
li要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。
定義リスト
- 定義リスト1
- 定義した用語の説明
- 定義リスト2
- 定義した用語の説明
- 定義リスト3
- 定義した用語の説明
dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。
テーブル
| 見出し1 | 見出し2 | 見出し3 | 見出し4 | 見出し5 |
|---|---|---|---|---|
| セル1 | セル2 | セル3 | セル4 | セル5 |
| セル1 | セル2 | セル3 | セル4 | セル5 |
| セル1 | セル2 | セル3 | セル4 | セル5 |
