HTMLはシンプルに−HTML&CSSガイド−

HTML&CSSガイド

構造化したHTMLとCSSでホームページを作成するために、まずはシンプルなHTMLの記述を心がけましょう。

ホームページのHTMLはシンプルに構造化!

従来の典型的なホームページは、基本的にはHTMLだけで1ページずつ完結しており、内容としてはテキストなどのコンテンツと、その表示方法を指定するタグで占められていました。

しかし、これをテキストなどのページコンテンツとデザインを切り離して効率よく管理できるようにまずは、ページ全体の内容をテキスト原稿で用意します。

HTMLテンプレートHTMLの基本的な枠組みのあるテンプレートは事前に用意しておきます。

次に、構造を示す要素(タグ)を加えてHTML文書にする作業に入ります。テキスト原稿は、<body>〜</body>の間に入れ、その部分に構造を示すタグをつけるという手順になります。また、このとき、必要な部分を画像(img要素)にしたり、リンクの設定なども行っておくとよいでしょう。

HTML文書は、基本的にはここでひとまず終了します。この段階で、普通に読んで内容がわかるようになっているか?を確認しておきましょう。

ここで、気になるのがどのような表示になるのか?ということではないかと思います。CSSで100%デザインする場合にCSSでどのようにデザインするかが決まっていれば、この段階で「div要素」による内容のグループ化と「id属性やclass属性」によってデザインをするためのボックス化の作業に入ることも可能ですが、最初はこの段階では文字の大きさや行間などのデザインにかかわる部分は、ひとまず目をつむって気にしない!でおきます。後でCSS作成時に並行してHTMLのタグ付けをする方が、効率はともかくとして最初は取り組みやすいと思われます。

CSSの設定が不安なCSSビギナーズの方には、ハイブリッドデザインをお奨めします。ハイブリッドデザインを採用し、ホームページを作成される場合は、手順がすこし違ってきますが、基本的にシンプルな構造をもったHTMLを作ることには変わりありません。ハイブリッドデザインについては、「HTML&CSSガイドのハイブリッドデザイン」をご覧ください。

このページの先頭へ

文法チェックを忘れずに行う!

W3C文法チェックサイトHTML文書が完成したら、忘れずに文法のチェックを行いましょう!

HTMLの要素の付け方の不備でCSSがうまく機能しなかったり、思ったとおりに表示されないと、無用の時間を浪費することとなります。

文法チェックには「The W3C Markup Validation Service」(http://validator.w3.org/)が便利です。アップデート前のローカルファイルの内容もチェックできる無料の文法チェックです。ほかにも、ローカルで動作するフリーウェアやシェアウェアなど、作成される方の使いやすい文法チェックを利用して、必ず文法チェックをする習慣を付けておくと、将来的にXHTML文書に移行したときなどにスムーズに対応できるでしょう。

XHTMLってなんだ?

ここで何気なくXHTML文書と表現しましたが、XHTMLについて簡単にご説明いたします。 XHTMLはWebページを記述するためによく使われるHTMLを、XMLに適合するように定義し直したマークアップ言語です。

XHTMLは2000年にW3Cで作られた仕様で、2002年8月にXHTML1.0の第二版が公開されています。

ではなぜ、HTMLをXML準拠のものに更新したのか?

理由として、インターネットをはじめとしたオンラインでのデータの送受信にXMLが使用されることを想定し、HTML文書もXML処理系で統一的に扱える環境を整える必要があったことが挙げられています。

XMLの関連技術をHTMLに適用できるので、XMLに基づいたほかの言語を混在させた文書を作ったり、XML対応のソフトウェアを使ってHTML文書を操作したりできます。

文書を作る上でのHTMLとXHTMLの違いは?

XHTMLの各バージョンに共通したHTMLとの違いをいくつかあげると、タグ名がすべて小文字に統一される、XMLベースの他の言語(MathMLやSVGなどが想定されている)による記述を埋め込むことができる、終了タグをもたず単独で使用される「<br>」などのタグを「<br/>」ないし「<br />」と書く、などがあります。

最近流行の「ブログ」ページ、ココログ、エキサイトブログ、ALOダイアリー、楽天市場などもXHTMLでマークアップされているようです。実は、当サイトもXHTML言語でマークアップしています。

CSSファイルでデザインを一括管理

文法チェックが終わったら、いよいよCSSでのホームページデザインの作業を開始します。CSSが完成し各種ブラウザでの表示確認が終了すれば、ホームページの完成です。

CSSを効果的にホームページに使うと、SEO対策やアクセシビリティの向上など多くのメリットがあります。その反面CSSデザインは、ブラウザのバグ対策に多くの時間を使う可能性もあります。次ページCSSの活用では具体的なCSS活用の魅力をCSSの現実では、CSSの使用に際しての問題や注意点をご紹介しています。

このページの先頭へ