HTML&CSSガイド−ホームページ制作に役立つ基本知識

HTML&CSSガイド

構造化したHTMLとCSSでホームページを作成するために、まずは基本的な知識を身に付けましょう。いきなり、ホームページ編集ソフトでワープロ感覚で作り出すと、見栄えだけの意味の伴わないタグが増えたり、後々の編集が複雑になるばかりか、ファイルサイズも増えてしまいます。

このページが、これから自社のホームページを作りたい方は、作る前の基本知識として、すでにあるホームページをリニューアルしたい方は、現在のホームページの構造確認や新たなCSSの導入などに少しでもお役立てば幸いです。

ホームページ作成の基本知識

これからホームページを作成したい!または今のページをリニューアルしたいとき、どんなことに気をつけたらよいのでしょうか?以下は知っておきたいホームページ作成ポイントの一例です。

ホームページ作成ソフトを使う前に!

  • ホームページの目的とは?何をアピールしたいのか
  • 期待する効果は?
  • ターゲットユーザーは?
  • 競合店や業界の状況などの情報収集は?
  • キーワードは何にするか?
  • 全体構造は?サイトマップや情報ツリーの構造は?
  • デザインの方向性は?
  • テーマカラーは?
  • 全体構造に基づくページのレイアウトは?
  • サイト構築に採用する技術は?何をどう表現するか?

上記は、ホームページを作成するときに、最初に考えなければいけないことです。すぐにでもホームページ編集ソフトで作り出したい!という思いはあるでしょうが、画像を配置したり、文字を入力する前の段階で、そのホームページを何の為に、どうしたいか?などサイト構築に必要な情報設計をしっかり考えましょう。

ウェブササドットコムは、お客様の「ホームページを自分で作る」を応援しています! ホームページ作成支援サポートを受けながら、安心してホームページ作成を進めることができます。

ワープロ感覚でホームページを作るとどうなる?

いまやホームページは、ホームページを構成するHTMLタグを意識することなく、ホームページ作成ソフトを使ってだれでも簡単に作成できるようになってきました。

個人の方の場合でも、ホームページ作成ソフトを使って、ホームページを構成するHTMLタグを意識することなく、ワープロと同じような操作・手順でだれでも簡単にホームページを作成できるというわけです。

ではその裏側で、ホームページ作成ソフトはどのようなタグを付けているのでしょうか?多くの人は、できればそんなことを気にせずにホームページが作れた方がいいと思っているかもしれません。しかも、一般的なユーザーが使っているブラウザで問題なく表示ができていれば、なおさらの事です。

しかし、結果として出来上がったページがどうなるかといえば、ホームページの見栄えを指定するタグも同時に、HTMLの中に組み込まれ、場合によっては構造を無視したタグが勝手に設定され、重く、遅く、ワープロ文書と同様の固定的なページになります。

このような結果とならない為に、ご自身で作成される方はもちろん、ホームページを制作会社に依頼される場合の知識としても、ホームページの作り方は重要です。

このページの先頭へ

ホームページ全体イメージを事前に準備

ラフデザインを作成する

ホームページを作るにあたって、これから作成するホームページ、リニューアルするホームページの全体イメージは事前に固めておきましょう。紙に手書きで全体のイメージや画像の位置、表示させる文章内容など、実際のホームページで表示させたい内容を書き込んでいきます。

全体のイメージ(ビジュアル的な見栄え)がまったくつかめていない!のでは、後々のHTMLやCSSの設定も迷う結果となりかねません。このとき注意したいのが、最初から複雑なデザインにすると、実際のホームページに表示させるとき、それを表現するタグやCSSが複雑となり、思うようにホームページが組めない?可能性があります。最初はシンプルなデザインでページ構成を作るとよいでしょう。

ラフデザインを基にイメージをPCで作成する

次に、ラフデザインでのイメージをパソコンの画像編集ソフトで作成します。このとき、カラーの設定はWeb表示用(画面表示用)のRGBモードに設定します。ラフデザインのイメージをより具体的に作成していきますので、この段階で、画像のスライス方法なども考慮しておくとよいでしょう。スライスとは、画像編集ソフトについている機能で、大きな画像を細かく分割してくれる機能のことです。

作成途中で多少の変更はあるとしても、全体イメージをまったく用意せず、いきなりホームページ編集ソフトで色を選択したり、画像などの素材も用意せず、行き当たりばったりでは、HTMLで正しい構造化の設定もむずかしい?と心得て、必ず、画像編集ソフトなどで全体イメージをつくりましょう。

迅速にロードできるイメージを作成する

インターネットの接続環境は、年々高速になっていますが、すべてのユーザーが同じ高速環境でホームページを閲覧しているとは限りません。その為、時代は変わっても、Webページを作成する場合の原則は、『常にユーザーがWebページを迅速にロードできるよう、イメージ・ファイルは小さく作成する必要がある』ということです。サイトで使用する個々のイメージサイズは、できるだけ小さくするように努め、1ページの全イメージの合計サイズも必ず確認が必要です。

このページの先頭へ

最も適切な形式でイメージを作成する

JPEG形式イメージGIF形式イメージイメージの種類によって、GIF形式の方が好適な場合と、JPEG形式の方が好適な場合があります。GIF形式は、平坦な色領域を含んでいるイメージに適しています。JPEGは、写真など、色調の変化が多いイメージに最適な形式です。右は同じ画像をGIFとJPEGで保存したものです。見た目はさほどの違いはありませんが、ファイルサイズはGIFがJPEGの約半分です。GIF1.39K JPEG2.62K

ホームページに使用するイメージ画像は、そのホームページの出来栄えに大きく影響します。 もちろんサイズの最適化は重要ですが、最終目標は、ファイルをできるだけ小さくする一方、十分なイメージ品質を保持することです。高品質のイメージを出発点とし、次第にカラー・パレットを小さくしながら複数のバージョンを作成し、イメージの劣化が明らかになったところでやめて、画像のサイズの最適化に努めるとよいでしょう。

すべてのイメージに代替テキストを使用する

すべてのイメージ要素に代替テキストを組み込む必要があります。代替テキストを使用すると、画面に実際のイメージが描画される前に、イメージの説明を表示できます。これにより、ユーザーはイメージのダウンロードを待たずに、そのイメージやページを表示する必要があるかどうかを判断できます。代替テキストは、アクセシビリティを考える意味でも大変重要です。

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

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

ウェブササドットコムはホームページにCSSを有効活用

ウェブササドットコムはホームページ制作にCSSを有効活用することにより、HTML構造からデザインを切り離しCSSの持つ魅力をお客様のサイト制作に活かします。

このページの先頭へ