ホームページ作成ビギナーズガイド

HTMLタグ目次

ホームページ作成によく使うHTMLタグの解説。論理的・構造的な意味や注意点など。
マークアップはこれらだけでほとんど足りると思います。

軽視されがちですが、HTMLでもCSSでも重要なこと。

ブロック要素とインライン要素

ホームページ作成ソフトについて

ホームページ作成ソフトの功罪

ワープロ感覚でホームページを作成できるWYSIWYG(What you see is what you get 見たままの意)のソフトが増えたことで、誰でもホームページを作成しやすくはなりました。

その反面、文法がメチャクチャなホームページが増えることにもなりました。

例えば、見出しをfontタグで文字を大きくして表現しようとしても、それは大きい文字を表すだけで、見出しという意味にはなりません。引用でない部分に、字下げ(インデント)のためにblockquoteを使えば、そこは引用部分であるという意味になってしまいます。

レイアウト・デザイン目次

レイアウトやデザインの注意点など。

CSS(スタイルシート) 目次

CSS(スタイルシート)入門講座

CSS(スタイルシート)を使ってホームページを作成する実践例です。
スタイルシートの外部化は検索エンジン対策でも重要。

CSS(スタイルシート)によるレイアウト

divタグとfloatプロパティ・positionプロパティを使った2段組・3段組レイアウトの作り方。

divとfloat

固定幅

可変幅

divとposition

ホームページの雛型と解説目次

ホームページを作成する前の土台作りです。

無料ソフト・無料ツール

ホームページ作成に役立つ無料ソフト・無料ツールを紹介します。

TeraPad: シンプルかつ高機能なテキストエディタ。様々な文字コードに対応。機能を拡張するプラグインもたくさんあります。個人的にはこれがホームページ作成ソフト。
bpTran: CSVデータをテンプレートの指定位置に書き込み、大量のHTMLファイルを自動作成。
HTMLエンティティ化: HTMLのソースをエンティティコード(数値文字実体参照)に変換。
FFFTP: FTPアップロードの定番ソフト。

HTML・CSSリファレンス

ホームページ作成リファレンス: W3C仕様書に忠実なHTML/XHTMLとCSSリファレンスがあります。
HTML辞典は関連する属性や、非推奨かどうかなどもまとめて載っているので便利。
他のコンテンツもweb標準に沿ったホームページ作成に役立ちます。
トップページ→SEO-Equation
NEXTindex: W3C勧告に忠実なHTML・XHTMLとCSSの解説があります。
XHTMLはW3C勧告の日本語訳もあります。
とほほのWWW入門: ホームページ作成に関する総合的な内容の有名サイト。
例文やサンプルが豊富でわかりやすいですが、HTML4.01で非推奨の書き方のものも多数あるので注意。
HTMLクイックリファレンス: シンプルで見やすいHTML・CSSリファレンス。
各ページに例文、サンプルがあります。HTML4.01では非推奨の書き方のものもあるので注意。

HTML・CSS文法チェック

HTML文法チェック

Another HTML-lint gateway: HTML文法が文書型定義に沿っているかだけでなく、アクセシビリティのチェックもできてしまう素晴らしいツール。エラーや警告はちゃんと意味のあるものなので、結果の解説をよく読みましょう。
The W3C Markup Validation Service: W3CのHTML文法チェックツール。英語。
一つの間違いに何重にもエラーが出るので、一カ所直すと一気に10個くらいエラーが消えたりします。
エラーが無い場合は、W3Cのバナーをホームページに掲載することを許可されます。
Another HTML-lint gatewayのほうが優秀。

CSS（スタイルシート）文法チェック

W3C CSS 検証サービス: W3CのCSS（スタイルシート）文法チェックツール。日本語。
一カ所直すと一気に多数のエラーが消えたりします。上から一つずつ直してみましょう。
エラーが無い場合は、W3Cのバナーをホームページに掲載することを許可されます。

Web標準リンク集

W3C関連サイトへのリンク集です。

Web標準総合

World Wide Web Consortium: Web標準の総本山、W3Cのホームページです。
W3C文書の日本語訳集: W3C文書の日本語訳リスト。英語の原文を読んだほうがわかりやすいところもあります。
日本語訳を読んで意味がよくわからないところは、英語・日本語両方読んでみましょう。

W3C勧告

原文と日本語訳。原文は最新版にリンクしていますが、日本語訳は最新版の和訳とは限りません。

HTML4.01

転送量とは

転送量とは、ユーザーからの呼び出しに応じてサーバーが転送したデータ量のこと。

要は50kbのHTMLページをユーザーが閲覧したら転送量が50kbということです。
そのページに画像を使っていたりすると、その画像の分だけ転送量が増えます。

転送量無制限の無料サーバだと自分のホームページの転送量がわからない場合が多いですが、転送量制限のあるレンタルサーバなら普通は管理者メニューで把握できるようになってます。

月間転送量○GBまでXXX円という契約の場合、その転送量を超えるとそのホームページにアクセスできなくなったり、追加料金が発生したり、「転送量が多すぎるので上位の契約に変更して下さい」みたいなメールがきたりします。

ホームページ作成ビギナーズガイド

HTMLタグ 目次

ホームページ作成ソフトについて

ホームページ作成ソフトの功罪

レイアウト・デザイン 目次

CSS(スタイルシート) 目次

CSS(スタイルシート)入門講座

CSS(スタイルシート)によるレイアウト

divとfloat

固定幅

可変幅

divとposition

ホームページの雛型と解説 目次

無料ソフト・無料ツール

HTML・CSSリファレンス

HTML・CSS文法チェック

HTML文法チェック

CSS（スタイルシート）文法チェック

Web標準リンク集

Web標準総合

W3C勧告

HTML4.01

転送量とは

HTMLタグ目次

レイアウト・デザイン目次

ホームページの雛型と解説目次