最終更新日：2011/12/01
★ニュース速報
■更新履歴
■障害情報
〜 目次 〜
初めに
HTML編
※HTML5のことはHTML5のコーナーで解説しています。ここではHTMLの基本的なことを記載しています。
XHTML関連
※より詳細なDTDにつきましては「文書型定義（DTD）について」をご参照ください。
※スタイルシート編集用テキストファイルはページ最下段にあります。（サイドバーにもあります。）
ひな型
※上記のXHTML1.1 DTD （テキスト形式）が表示されないときは下のHTML形式を利用してください。（ソースをお手元のエディタにコピペしてお使いください。）
IE7の考察
DTD関連
分散しているDTD（文書型定義）関係を再度、まとめてあります。
検証
記載ミス、文法ミスを防ぐために
- XHTMLの検証をする（マークアップ検証）
CSS基礎知識
- 色の指定形式（RGB値、RRGGBB値の形式、colorプロパティの値、色指定の種類）
- 16色のキーワード（色名）
- システムカラーのキーワード（システムカラー・キーワード一覧表、GUI色のキーワードによる色指定）
■対象とクラス
外部スタイルシートの作り方（〜実践編〜）
- CSSファイルへの指定方法（リンク要素）（外部ファイルの取り込み、相対パス）
CSSプロパティの解説（〜スタイルの指定〜）
純粋にCSSの書式のみを記載します。余計なものは一切入れません。
■リンク（擬似クラス）リンク色・リンクカラー・クリックしたときの色
■背景
■通常画像
※一般の領域（ボックス）の左右どちらかにテキストを回り込ませたい場合は、「配置と表示」の「ボックスの左右にテキストを回り込ませる 」をご参照ください。
■フォント（字体、字形）
- フォントの指定（フォントファミリー）
- フォントの大きさを指定（フォントサイズ）
- フォントに色を指定する（文字色指定、color指定）
- フォントを斜体にする（応用編）（斜体文字）
■テキスト
■領域（ボックス）
■リスト
■テーブル（表）
■配置と表示
- 要素の表示方法を指定する（display）
■そのほかのプロパティ
- 水平線（区切り線）
HTML5編
■基礎知識
- セクション用の要素を使い分ける（section要素、article要素、aside要素、nav要素）
■HTML5文書ひな形
※人によっては、テキスト形式のほうが編集しやすいかも知れませんのでテキスト形式も貼り付けておきます。もし、テキスト形式が表示されないときはHTML形式を利用してください。（名前を付けて保存してください。）
■HTML5チャート
CMS編
- CMSについて（コンテンツ管理システム）
ホームページ編
筆者にとって、ホームページを作るとき、疑問に思ったこと、興味を持ったことを中心に解説しました。
- SHTMLファイルの注意点（SSI）
- 「.html」の拡張子のファイルでSSIを動作させる（htaccess制御）
メタタグ・メタ情報
移動・送信
文書情報
アクセシビリティのヒント
アクセシビリティに配慮した文書作りは、ロボット型検索エンジンに優しいSEO対策としても有効です。
- セルを関連付ける（abbr属性、axis属性、headers属性、scope属性）
- パンくずリストの作り方（Topic Path（トピックパス）、breadcrumb（ブレッドクラム）の作り方）
- ナビゲーションスキップの作り方（スキップナビゲーション、ブロックスキップ）
CSSファイルの登録とサイトの概要
外部スタイルシートのサンプルソース
当サイトのCSSファイルは3枚あります。クラスセレクタ（IDセレクタもありますが・・・）を使えば、たった一枚のCSSファイルでまかなうことも可能です。
※（ ）内は、当サイトにおける外部スタイルシートとしてのCSSファイル名です。
無料で作るサンプル素材集(JavaScript＆CSS)
- セキュアでカラフルなメール送信フォーム（メールフォーム）
※XHTML環境におけるJavaScriptの使い方は「XHTML文書におけるJavaScriptの注意点」をご参照ください。
付録（そのほか、何でも・・・）
- オリジナルお気に入りアイコンの作り方（ブックマークアイコン、ファビコン、favicon）
■コピー＆ペースト用テキストファイルの使い方
クリックして、ブラウザの「ファイル」メニューから「名前を付けて保存」を選択すると内容が整形（改行）された拡張子"txt"のテキストファイルとして保存されます。なお、ブラウザによっては保存したときにソースが整形されていないことがあります。その場合はブラウザで表示された内容をお手元にあるテキストファイルにコピペしてお使いください。
資料・チャート
DOCTYPE宣言のDTD（文書型定義）の種類、バージョンごとの要素、属性対応状況を掲載してあります。
■更新履歴
ー 後記 ー
最後に
このサイトはもともと筆者の別のサイトでひとつのコーナーとして解説していたものをサイトとして独立させ、さらに2007年1月にレンタルサーバ環境へ移行させました。当初はスタイルシートを初めて学ぶ方を対象にしていたのですが、2006年3月に「外部スタイルシートの作り方」から現在のタイトルに変更しました。基本中の基本は一通り解説したつもりですが、今後もXHTMLとCSSの解説に力を入れていきたいと思います。サンプルソースの内容につきましては、完璧とは思いませんが、どうぞ参照にしながら、良いXHTML文書とCSSの外部スタイルシートを作ってください。皆さまのWebサイト制作にお役に立てれば幸いです。
わが国では、2004年6月20日にウェブ・アクセシビリティのJIS規格が制定されました。今後もウェブ・アクセシビリティの実践に、CSS（カスケーディング・スタイルシート）が威力を発揮するのは間違いありません。
ご注意： 内容につきましては随時、修正、加筆あり。また、全体的に内容が増える傾向にあります。そして、サイトのCSSサンプルソースも予告なしに変更になる場合があることをあらかじめ、ご了承ください。
脚注：
- Windows、Windows XP および、マイクロソフト製品は米国 Microsoft® Corporation の米国およびその他の国における登録商標または商標です。
- 当サイト内にスクリーンショットなどの画像がある場合は、Microsoft Corporation のガイドラインに従って画面写真を使用しています。
- NetscapeはNetscape Communications Corporation の米国、およびそのほかの国における商標、または登録商標です。
- MozillaとFirefoxはMozilla Foundationの米国、およびそのほかの国における商標、または登録商標です。
- Mac、および、SafariはApple Computer, Inc. の米国、およびそのほかの国における商標、または登録商標です。
- OperaはOpera Software ASAのノルウェー、およびそのほかの国における商標、または登録商標です。
- そのほか、当サイト内において、ブランド名・製品名・会社名・パソコン関係の名称などは、当該各社における商標、または登録商標です。
- TM、(C)、® などの商標シンボルは割愛させていただいています。
- お気付きの点、不明なところは管理人までお問い合わせください。
