CSS Designplate、CDPって何ですか。
CSS で Design した (Tem)plate の意味で、私たちの作ったCSSを使ってデザインをするテンプレートのことです。indexページにも記載してあるように、『HTMLファイルには一切手を加えず、CSSファイルと画像を変更することでデザインをチェンジする』ことが可能です。企画に賛同した方々が、同じHTMLを基にCSSを描いていくことで、多くのデザインを、服を着せ替えるようにチェンジできます。
このページについて
疑問・質問等ありましたら、まず以下をご参照ください。
この企画について
HTMLとかCSSとか、何を言っているのかよく分からないんですが。
商用利用は可能ですか。
自社サイトを作成する際に使用、アフィリエイトサイトの使用は許可します。ですがホームページ作成代行で使用するなど、基礎htmlを金銭を得るために使用することは禁止です。また、基礎htmlと各CSS配布サイトで配布されているCSSファイルは利用規約が異なります。よくご確認ください。
アダルト・宗教・同人etc……なサイトですが、使用可能ですか。
法律に触れる・触れるおそれがなければ基礎htmlは利用可能です。ただし、基礎htmlと各CSS配布サイトで配布されているCSSファイルは利用規約が異なります。よくご確認ください。
ユーザー向
基礎htmlをダウンロードしました。その後どうすればいいですか。
基礎html配布の「基礎htmlをダウンロードしたら」の項を参照してください。
基礎htmlはダウンロードしました。でも開くと、デザインがない（ブラウザのデフォルトの表示）状態です。
デザインを変えたい場合は、htmlでサイト内容をマークアップし終わったあと、CSSを別途用意する必要があります。CSSはCSS配布サイトリンクからお好きなデザインを見付けて、ダウンロードすることもできます。
HTML4.01 Transitionalってなんですか。
4.01はHTMLの規格のバージョンです。バージョンによって、どんな要素︵タグ︶や属性が定義されているか違います。Transitionalは移行期を意味し、過去のバージョンで使用されていたタグや属性も一部使用可能です︵ただしそれらは時代遅れで現在の状況にそぐわないもので、仕様で使うことを﹁反対﹂されていますので、積極的に使うべきではありません︶。CDPを使うときは、HTML4.01の規則に沿ってHTMLを作成してください。
TransitionalでなくStrict︵より厳格︶の規則に沿っても問題ありません。﹁厳格﹂というと難しそうかもしれませんが、Transitionalにある今後廃止するタグ等がないぶん、より覚えることが少なくすむので、これから学ぶ方は寧ろそちらをオススメします。
Web上あるいは書籍のHTML講座やリファレンスを利用する場合は、これらについての言及があるものを利用してください。
●google検索﹁HTML4.01 仕様書﹂
●google検索﹁HTML4.01 リファレンス﹂
ダウンロードしてきたCSSファイルを、サーバーのどこにアップしたらいいのか分かりません。
基礎html配布の「基礎htmlをダウンロードしたら」の項を参照してください。
初めて配布サイトでCSSをダウンロードしました。その後どうすればいいですか。
適応させたはずのデザインが全く反映されません。
CSSファイルのCSSの設定がすべて反映されていない場合は以下のことを確認してください。
●︵オンライン上であれば︶CSSファイル︵拡張子が.cssのファイル︶はサーバーにアップしましたか？ アップロードしていない、もしくは失敗しているかもしれません。適切な階層へのアップロードを再度試みてください。
●各htmlファイルの上の方にある
<link rel="stylesheet" type="text/css" href="csstemplate/style.css"> という一文を削除していませんか？ またはCSSの場所指定︵パス︶を間違えてはいませんか？ 適切に書き直してください。
●CDP階層サンプル
●相対パスによる指定
●HTMLに記述ミスはありませんか？ 基礎html解説でCDPの構造を確認し、文法が正しいかチェックしてください。
●W3C HTML Validation Service
●Another HTML-lint
●CSSに記述ミスはありませんか？ 解析エラーは無視するよう仕様で定められています。文法が正しいかチェックしてください。
●W3C CSS検証サービス
●CSSファイルの拡張子は確かに.cssですか？ 保存の際、違う拡張子︵ex.﹁.txt﹂や﹁.css.txt﹂︶で保存されているかもしれません。確認してください。
●CSSファイル冒頭の@charset "Shift_JIS";の記述を消していませんか？元に戻してください。または、それより前になにかしらの記述︵改行や空白含︶がありませんか？削除してください。
●CSSファイルの文字コードがShift_JIS以外になってはいませんか？ Shift_JISにするか、CSSファイル冒頭の@charset "Shift_JIS"を保存した文字コードに変更してください。
●あなたは非常に古いブラウザを使用していたり、マイナーなブラウザを使用していたり、パソコン以外の環境ではありませんか？ 古いブラウザは一部のCSSに対応していなかったりバグを有しているため、CSSを読み込ませることで逆に可読に難が出る可能性があります。それ以外でも、CSS制作者は特定の環境に対して、独自のスタイルよりブラウザのデフォルトのCSSで見るほうがよいと判断し、それらのブラウザにstyle.cssの内容を全て読み込ませないようにしているのかもしれません。可能ならば、パソコンで最新のメジャーなブラウザで確認してください。
適応させたはずのデザインの一部が反映されません。一部の表示がおかしくなります。
CSSファイルのCSSの設定が一部だけ︵背景画像だけが表示されない、リンク色だけがデフォルトのまま等︶が反映されていない場合は以下をご確認ください。
●︵オンライン上であれば︶CSSファイルは全てアップロードしましたか？ CSSファイルはstyle.css以外にもあるかもしれません。適切な階層へのアップロードを再度試みてください。
●画像が表示されていないだけではないですか？
●︵オンライン上であれば︶画像ファイルは全てアップロードしましたか？ 適切な階層へのアップロードを再度試みてください。配布CSSを利用する場合は、画像は特定のフォルダ内にアップロードしなければいけないかもしれないし、そうではないかもしれません。またそのフォルダの名前も違うかもしれません。
●画像ファイルを上書きしたり新たに用意した場合は、ファイル名が正しいか確認してください。例えば、オフライン上ではファイル名や拡張子が大文字でも小文字でも同一ファイルとして扱われるかもしれませんが、オンライン上では多くの場合区別されます。
●HTMLに手を加えましたか？ DOCTYPE宣言が書き変わって、解釈モードが変更されているかもしれません。基礎html解説を参照してください。
●HTMLに記述ミスはありませんか？ 基礎html解説でCDPの構造を確認してください。また、文法が正しいかチェックしてください
●W3C HTML Validation Service
●Another HTML-lint
●CSSに記述ミスはありませんか？ 解析エラーは無視するよう仕様で定められています。文法が正しいかチェックしてください。
●
;や:を忘れていたり、タイプミスや全角スペースがある
●色番号指定に#を付け忘れていたり、サイズ指定に単位を付け忘れている
●W3C CSS検証サービス
●CSSは、セレクタの詳細度の高いもの、また、より後に読み込んだ記述を優先します。多重に指定されていないか確認してください
●style.cssの上部に@import url(xxx.css);という文があった場合、それを消していませんか？ それはCSSを読み込む記述です。もう一度書く必要があります。
●お使いのブラウザを確認してください。古いバージョンのブラウザは一部のCSSに対応していなかったり、バグが存在することがあります。またブラウザ独自のCSSは、それ以外のブラウザや対応していないバージョンのブラウザでは有効になりません。
スクロールバーの色を変更したいのですが、うまくいきません。
2011年現状CSSによるスクロールバーの色合い指定は全てブラウザの独自拡張なので、適応されるのは該当する一部のブラウザでしか有効になりません。
IEの場合
5.5以下のバージョンでは有効になりません。CSSの解釈が標準モードの場合、全体のスクロールバーの色指定はbodyではなくhtmlに行ってください︵標準モードだと全体のスクロールバーを出す基準ブロック︵ルート︶がhtmlなので︶
IE8以降からは独自プロパティに
-ms-という接頭辞が推奨されています。もしIE8以降だけ有効であればいいなら-ms-をつけたプロパティのみを、IE7以下も対象に含める場合は-msありとなしの併用︵もしくは-msなしの指定、ただしこの場合将来適応されなくなる可能性もあります︶をします。
html, body{
-ms-scrollbar-xxx-color: #color;
scrollbar-xxx-color: #color;
}ブラウザごとでデザインが違います、同じようにしたいです。
●ブラウザごとにデフォルトで持っているスタイルが大なり小なり違います。style.cssでそれを全て上書きすることである程度統一させることができます。
●google検索‥ブラウザ CSS リセット
●ブラウザやそのバージョンによっては、一部のCSSに対応していなかったり、バグが存在します。またブラウザ独自のCSSは、それ以外のブラウザでは有効になりません。ハックや各ブラウザ独自の実装やJavaScriptなどを利用した代替方法で擬似的に似たデザインにできる可能性があります。googleなど検索サイトでその方法が見つかるかもしれません。
ただ、同じに見えるようにしなければならないという決まりはありませんし、同じに見えることが完璧なデザインなわけではありません。
OSの違い、ブラウザの違い、ブラウザのバージョンの違い、解像度の違い、その時々のウィンドウサイズの違い、モニターの違い、閲覧環境は多岐にわたります。仮に同じOS・同じバージョンの同じブラウザであっても設定が違っていたり、ユーザーCSSを利用しているかもしれません。
解決法や代替方法を探して、導入し、確認し、メンテナンスしてゆくには手間と苦労が伴います。けれどどんなに苦労しても閲覧者にとっては無用のものに終わるかもしれませんし、やり方によっては重くなったり見辛かったりデメリットのほうが強くなるかもしれません。
ご自身のサイトのアクセス状況と合わせるなどして、割り切ったり、各環境の特性や実装レベルに応じた装飾を施す・もしくは施さない方法を選択することも一つの手段です。CSS制作者はそういった選択をしているかもしれません。
フッターにある、『CSS Designplate』の表示・リンクは削除してもいいですか？
はい、お好きにどうぞ。以下の行をすべて削除してください。
<li id="FOOTER03"><address><a href="http://css-designplate.info/">CSS Designplate</a></address></li>今回使うテンプレートの配布サイトにリンクをはりたい。サイトで紹介したい。
有難うございます。もし今後も『CSS着せ替えテンプレート』を利用していくつもりなら、全て、もしくは多数のページに配布元表記をすることは控えることをお勧めします。そうすることによって、醍醐味である「HTMLをいちいち変更しないこと」や「配布元の異なった様々なタイプのデザインを利用できること」を味わえます。作成者は、一つのページで紹介されるだけでも嬉しいです！
基礎htmlだけダウンロードして、CSSは自分でつくりたい。もしくはダウンロードしたCSSファイルに手を加えたい。
CSSはあなたが自由に作成してくださってかまいません。CSS配布サイトからダウンロードしたものに関しては、各サイトに利用規約に従ってください。カスタマイズに制限がある場合もあります。
配布されているCSSのデザインを使って、サイト内のデザイン統一を図るため、掲示板や日記、ブログのスキンを作成したい。
デザインの流用を許可します。またスキンへの流用に関して、CSS制作者は責任を負わないものとし、原則としてサポートは受けられません（可能な場合もあります。各サイトで確認して下さい）。
文字化けします
ご利用の編集ソフト・FTPソフト・ファイルアップローダーなどによって文字コードが変更された可能性があります。
- htmlの「
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">」のShift_JISの部分を変更後の文字コードに書きかえる。他の文字コード例；EUC-JP UTF-8 - ソフトの設定や保存法を見直して文字コードを変更しないようにするか、Shift_JISで保存するよう設定しなおす
- 文字コードを勝手に変更しないほかのソフトや手段を利用する
ファイルの開き方、アップロードの仕方、サーバスペースの確保の仕方、各種ソフトの使い方
サポート対象外です。
- google等検索サイトで検索する
- サーバーの仕様や説明項を見る
- ソフトのヘルプを見る
制作者向
CSSを作成し、配布したいのですが。
大歓迎です、是非作成してください。概要は制作者MENUを参照してください。ひとつ以上デザインをダウンロードできる状態であればCSS配布サイトリンク登録していただけます。
CSSを配布する際の決まり事はありますか。
制作者MENUの配布の際の注意事項をご確認ください。配布されるCSSの利用規約は、CDPの最低限の理念に反さない限りご自由に作って頂いて構いません。
CSSを制作する際、なにか気をつけることはありますか。
制作者MENUの配布の際の注意事項をご確認ください。
CSSを制作してみたけどデザインが崩れます。うまくいきません。
記述ミス、解釈モードの違い、ブラウザのバグや実装の差異かもしれません。文法チェッカーを利用するか、検索でヒントが見つかるかもしれません。
●︻参考項目︼デザインが全く反映されません。
●︻参考項目︼デザインの一部が反映されません。表示がおかしくなります。
●︻参考項目︼スクロールバーの色を変更したいのですが、うまくいきません。
●︻参考項目︼ブラウザごとでデザインが違います、同じようにしたいです。
●CSSバグリスト
●google検索‥﹁ブラウザ CSS 独自拡張OR独自実装OR先行実装﹂
CDPにそったHTMLを出力するスクリプトを作って配布（提供）したい。
以下の条件を満たしてください。
- 無償配布である
- HTMLにCSSdesignplateを利用しているとわかるようにする
- 弊サイトにリンクをはる（もしくはURLの表記）
リンク等は解説ページなどで明記して頂ければ、ソースとして吐き出させたりスクリプト内に書いたりしなくても構いません。事後で構いませんのでよろしければ連絡ください。弊サイトで紹介します。
基礎HTMLを利用してスキンを制作し配布（提供）したい。
改変したHTMLだけを配布することは禁止しています。けれど、自作のデザイン︵CSS︶を配布することが趣旨であれば、スキン用に改変したHTMLを同梱配布することは構いません。
以下の条件を満たしてください。
●無償配布である
●デザインの流用の許可︵独自部分もあることを考慮してどうしても駄目な場合はそう明記してください。でも、できれば原則は﹁流用可﹂でお願いします︶
●HTMLにCSSdesignplateを利用しているとわかるようにする
●弊サイトにリンクをはる︵もしくはURLの表記︶
リンク等は解説ページなどで明記して頂ければ、スキンファイル内になくても構いません。制作者MENUの﹁求められる配布条件﹂の項もご確認ください。
独自クラスを作って利用者に使ってもらいたい。
どうぞ。CDPの基本理念のもと、他サイトのテンプレートに変更可能であるように、引き続いて使えるような汎用性の高いものや、複数クラス等を利用して基礎HTMLの基盤を書き換えないようなものにしてください。お手数でなければ、その独自クラスを利用することで今後他サイトのテンプレートを使うときどうなるか（そのままでも大丈夫か・書き直したのほうがいいのか）も併記していただけると、ユーザーが不安や疑問を持たず選択して利用できると思います。
配布サイトを作れない・サイトを閉鎖することになった。
弊企画サイト内でCDPを配布できます。是非ご連絡ください。ひとつでもお待ちしています。
対象環境・最低限の確認環境などは定められていますか。
いいえ、特に弊企画側で定めてはいません。どの程度までの古いブラウザを切り捨てたり、どのブラウザで作成・表示確認をするかは自由です。CSSのレベルも1～3まで、ご自由に使ってください。先行実装や独自実装を使うのも構いません。お手間でなければ、ユーザーが適宜取捨選択して利用するために、配布に際して各自サイト内にそれらの詳細を明記してください。
プリンターやプロジェクター向き、モバイル向き、スマートフォン向きなどのメディア別のスタイルシートの配布もお待ちしています。