基礎HTML利用規約

ダウンロード

ユーザーMENUや制作者MENUを読んで、プロジェクトの概要を知ってください。

ユーザー向け

基礎ファイル
付録ファイル
一括ファイルには含まれていません。利用する場合はページのソースをコピーしてください。

制作者向け

基礎ファイル
付録ファイル
一括ファイルには含まれていません。利用する場合はページのソースをコピーしてください。

履歴

2016年4月3日
基礎HTMLに下記二行を追加しました。 
<!--<meta name="viewport" content="width=device-width">-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
またスタイルシートにオプション的にあらかじめ指定を追加しましたが、書き換えたり削除して使ってください。
2011年12月28日
制作者向けにtest.htmlを追加してみました。（極端な確認用でCDPとして不正確な部分もあるので、必ずしも考慮しろということではありません）
2011年3月9日
スタイルシートを修正しました。
  • ul#PAN,ul.modori#MENU,#FOOTER{display: none;}をul#PAN,ul.modori,#MENU,#FOOTER {display: none;}
2010年2月25日
スタイルシートと制作者向けHTMLを修正しました。
  • style.css
    ul#PAN,ul.modori#MENU,#FOOTER	{display: none:}
    を
    ul#PAN,ul.modori#MENU,#FOOTER	{display: none;}
  • sample3.html：<dt>用語</li>を<dt>用語</dt>
2010年2月15日
style.cssのあらかじめの記述をより詳細にしました。引き続き、必ず従わなくてはならないわけではありません。
2006年-2009年
過去の履歴
2006年5月1日
配布開始

基礎htmlをダウンロードしたら

  1. を参照しながら基礎HTMLの規則（およびHTML4.01Transitionalの規則）にそって、サイト内容をマークアップしてhtmlを作ります。
  2. htmlファイルが完成したら、それが正しいHTML文書であるか（スペリングミス、タグの閉じ忘れ、包含可能要素以外が含まれている、といったケアレスミスや不正がないか）チェックします。
  3. htmlが完成したら、CSSを用意します。CSSはCSS配布サイトリンクに登録しているサイトか、弊サイトの配布ページからダウンロードすることができます。CSSを自分で書いたり手を加えた場合は、ミスがないかチェックします。
  4. 完成したHTMLファイルと、HTMLファイルと同階層に作成された『csstemplate』（存在しない場合は新たに作成してください）にCSSファイルと画像をアップロードします。 
    [サーバ]
    ├ csstemplate[フォルダ]
    ｜  ├ style.css
    ｜  └ 画像
    ├ index.html
    └ htmlファイル
  5. サイトを改装する場合は、『csstemplate』フォルダ内のファイルのみを上書きします。

一度で理解できなくても、ゆっくりと一つ一つ確認しながら実践してください。基礎html解説・FAQに目を通したり、googleなどの検索エンジンの利用で疑問を解決できるかもしれません。

もう一歩踏み込む

メニュー管理

JavaScriptやPHP、SSIなどを利用することは、HTML管理の手助けになるかもしれません。

以下はCDPのために書かれているわけではありませんが、やることは同じです。

独自CSS

他

コメント（<!-- -->）
基礎HTMLにはコメントで注釈がついていますが、IE6にはExplorer 6 Duplicate Characters Bugという、floatとコメントの組み合わせによって出現するバグがあります。IE6にも対応したいときは、コメントは削除したほうが無難です。
alevirita > memo
CDPの○○がいらないから消したい、CDPのメニュー項目を非アンカーにする、等
PSPで見てみたら表示されない部分があったので（寒霞）
恐らく、@media規則に対応しておらず一番最後の指定が適応されるんじゃないか…と思います（ただPSPはCSS2対応らしいので、未確認。ブラウザモードにもよる？）。PSPに限らず、@media規則に未対応でそれを無視して全て読み込むブラウザであれば同様の状態になります。（エラーを出して@media以降を読み込まない環境もあるかもしれません）。
  • screen以外のメディアに対して装飾不要で構わないなら消す
  • @media print{～}を@media screenの前にもっていき、更に上書き
    @charset "Shift_JIS"; /* 文字エンコードの設定（削除不可） */

   /* ********************************************** */
   @media print{ /* 印刷メディア用 */
      #PAN,ul.modori,#MENU,#FOOTER{display: none;}
   }
   /* ********************************************** */
   @media screen{ /* スクリーンメディア用 */
      #PAN,ul.modori,#MENU,#FOOTER{display: block;}
  • @media規則に対応していなくても<link>のmedia属性には対応しているブラウザは少なくないので、screen以外のメディアへの指定はそれで指定する