初期XHTML/CSSセットの説明

目次

  1. XHTML
  2. CSS
    1. ファイル構成
    2. reset.css
    3. base.css
    4. GP-parts.css
    5. win-ie.css
    6. print.css
    7. thickbox.css
    8. check.css
  3. Javascript
    1. jquery.js / yuga.js / thickbox.js
    2. heightLine.js
    3. mapload
  4. ページの上部へ

XHTML

あまり特別なことはしていません。link要素や、見出しをしっかりと用意しているアタリが特徴と言えば特徴です。

CSS

ファイル構成

  • import.css
    • reset.css
    • base.css
    • GP-parts.css
    • win-ie.css
  • print.css
  • thickbox.css
  • check.css

reset.css

YUIのreset.cssを参考に、いろいろと足したり引いたりしています。

base.css

サイト内で共通のスタイルを指定します。

GP-parts.css

サイト内で汎用的に利用するパーツのスタイルを指定します。例えば、1行に3枚の写真が並ぶ写真のリストや、カワム割の指定などです。

win-ie.css

IEへのハックを記述します。IE6とIE7への指定を別ファイルに指定する方も多いですが、僕の場合は1ファイルに指定してしまいます。

print.css

印刷用のスタイルを指定します。印刷用のデザインをしっかりと定義することが無ければ、とりあえずこれを読み込んで、後は必要に応じて「display: none;」を指定するセレクタを書き換えます。

thickbox.css

thickbox」を利用することが結構多いので。若干カスタマイズしています。

check.css

CSSでXHTMLがある程度正しいかを確認できるスタイルです。エリック・メイヤーさんが公開されていたものを元に整えた記憶があるのですが、本家のページは忘れてしまいました。

Javascript

jquery.js / yuga.js / thickbox.js

jQueryを元に、中村亨介さんが公開されている「yuga.js」というライブラリです。

mapload.js

Google MAPを利用する際に利用しているものです。head要素内で読み込んだ後に、以下のコードを記述することでGoogle MAPの埋め込みが可能です。

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
	//mapdataLoad('住所', '施設名', 地図の拡大率);
	mapdataLoad('住所テキスト', '施設名テキスト', 拡大率は数値で);
});
//]]>
</script>