|
児童劇団大きな夢 稲城子どもミュージカル
|
|
| Web製作ガイドライン |
|
| Last update:2006/04/23 |
HTMLの仕様について、以下にガイドラインを記す。
・利用者環境について
・ロゴ／ヘッダー・フッター・バナーについて
・JavaScriptについて
・CSSについて
・HTMLについて
・Color Scheme
利用者環境について
本サイトでは、利用者環境を以下の前提として使用されるものとしている。
| ブラウザ |
Internet Explorer Version5.5 以降 |
| OS |
上記ブラウザが稼動するMS-Windowsマシン |
| 描画領域 |
1024×768ピクセル以上必須 |
|
ロゴ／ヘッダー・フッター・バナーについて
本サイトで使用するロゴ／ヘッダー・フッター・バナーは原則、次を使用する。
| ロゴ／ヘッダー |
 |
|
| フッター |
 |
|
| 他サイトからのバナー(リンク) |
 |
| リンク先指定：<A href="http://inagikm.com/" target="_blank"><IMG
src="image_banner1.jpg" border="0"></A> |
|
JavaScriptについて
本システムでは、動的な機能の処理にJavaScriptを使用している。
複数ページ共通のJavaScriptについては、以下の外部ファイルを使用している。
ディレクトリ /scripts/
各ページ個別でJavaScriptを使用する時は、
<HEAD>内または<BODY>内に直接記述する。
CSS（Cascading Style Sheet）について
当ホームページでは、ページレイアウトをより自由にするために、CSS（スタイルシート）を使用している。
ユーザーの利用環境により表示される文字サイズが異なるので、表示の統一を図るためCSSを使用している。
ディレクトリ / (document root)
| ファイル名 |
プラットフォーム |
| css.css |
All
|
|
基本的に<FONT>タグ及び<A>タグのフォント指定には、すべてCSSを使用している。
主に以下のclassが定義されている。
使用頻度が高いclass
| class名 |
用途 |
サンプル |
| text |
標準的なテキスト |
あいうえお ABCDEFG abcdefg 1234567890 |
| descriptiontext |
見出し文 |
あいうえお ABCDEFG abcdefg 1234567890 |
| subheadtext |
小見出し |
あいうえお ABCDEFG abcdefg 1234567890 |
| subhead1 |
中見出し |
あいうえお ABCDEFG abcdefg 1234567890 |
| subhead2 |
中見出し |
あいうえお ABCDEFG abcdefg 1234567890 |
| subhead3 |
中見出し |
あいうえお ABCDEFG abcdefg 1234567890 |
| subhead4 |
中見出し |
あいうえお ABCDEFG abcdefg 1234567890 |
| subhead4large |
中見出し |
あいうえお ABCDEFG abcdefg 1234567890 |
| subhead4blue |
中見出し |
あいうえお ABCDEFG abcdefg 1234567890 |
| subhead5 |
中見出し |
あいうえお ABCDEFG abcdefg 1234567890 |
| subhead6 |
大見出し |
あいうえお ABCDEFG abcdefg 1234567890 |
| copyright |
コピーライト |
Copyright (C) 2005 Inagi Kodomo Musical. All rights reserved. |
| link1 |
リンク |
あいうえお ABCDEFG abcdefg 1234567890 |
| poptopics |
サブナビゲーションのリンク |
あいうえお ABCDEFG abcdefg 1234567890 |
| locator1 |
site locatorのリンク（home） |
あいうえお ABCDEFG abcdefg 1234567890 |
| locator2 |
site locatorのリンク |
あいうえお ABCDEFG abcdefg 1234567890 |
|
詳細な属性及び、ページ個別のレイアウトで使用されているclassは、各cssファイルを参照。
HTMLについて
テキスト
記述に関する定義を、以下の通りに統一する。
|
全角
|
ひらがな、カタカナ、漢字、（）、＆、「」、〜、￥、％、： |
|
半角
|
英数字、上記以外の記号、コピーライト「(c)」、登録商標「(R)」の「()」（括弧）、時刻の「:」（コロン)
|
|
その他
|
使用頻度の高いものについて、以下のように記述を統一する。
・電話番号 → TEL
・ファックス番号 → FAX
・Email → E-mail
・電話番号、ファックス番号の区切りは、"-"（ハイフン）で統一する。
○ 03-1234-5678 × (03)12345678
・年号以外の多桁数字は、","（カンマ）で区切る。
○ 10,000 × 10000
機種依存文字については、使用を避けること。
表現上、やむを得ず使用する場合は、必ずプラットフォームごとに表示確認するか、画像で代用すること。
|
|
HTMLタグに使用されている記号をテキストとして表示する時は、必ず文字コードを使用する。
タグ
HTMLタグは、以下のように統一する。
|
<TITLE>
|
・基本的に <TITLE>劇団大きな夢 稲城子どもミュージカル</TITLE> とする。
|
|
<BODY>
|
・全ページ、属性を以下に統一する。
<BODY text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" link="#0014A0" vlink="#4466B0" alink="#0000FF" bgcolor="#eeeeee" bottommargin="0">
|
|
<IMG>
|
・src、width、height、alt、borderの属性は必ず指定する。
（特に名前を指定する必要のない画像（1px.gif等）については、alt=""とする）
|
|
<FONT>
|
・基本的に、class指定する。（size、color、faceはcssで指定）
・1箇所だけにしか適用されない属性については、cssに定義せずに、<FONT>タグに直接指定してもよい。
|
|
<A>
|
・基本的にclass指定する。
|
|
<TABLE>
|
・border、cellspacing、cellpaddingの属性を必ず指定する。各属性は、レイアウトに応じて指定する。
|
|
<TR>
|
・<TR>内の<TD>のvalign、bgcolor属性がすべて同じ場合は、<TR>で指定する。
（例）
| ○ |
<TR valign="top" bgcolor="#ffffff">
<TD>text</TD>
<TD>text</TD>
<TD>text</TD>
</TR>
|
× |
<TR>
<TD valign="top" bgcolor="#ffffff">text</TD>
<TD valign="top" bgcolor="#ffffff">text</TD>
<TD valign="top" bgcolor="#ffffff">text</TD>
</TR>
|
|
・valign="middle"はデフォルトなので指定しなくてもよい。
|
|
<TD>
|
・align="left"はデフォルトなので、指定しなくてもよい。
・折り返しをしない場合は必ずnowrapを指定する。（<NOBR>タグは絶対に使用しない）
|
|
<P>
|
・段落は基本的に<P></P>で囲む。
・<P>の範囲内に<TABLE>を含む時は、</P>を省略する。
|
|
<HR>
|
・<HR>を使用する場合は、size="1"とする。
|
|
使用禁止タグ
以下のタグは使用しない。
・<OL> <LI> → <TABLE>を使用
・<CENTER> → <DIV> <P> <TD>等のalign属性で指定
・<H> <BIG>等フォント関係 → CSSで定義
パス
内部リンクのパスの記述は相対パスは可とする。
|