岡山市立福浜公民館・クラブ活動 岡山WEB研究会

cite:http://okayama-web.cool.ne.jp/

WEBページのヘッダーを画像を使用して製作する方法:小さい画面サイズに対応するため オーバーフローを設定

ヘッダーの製作

文章の構造は、ヘッダー、コンテンツ、フッターなどで構成され、コンテンツは、さらに見出しと、段落で、 表現されます。

ヘッダー
ロゴ、タイトル名、などを表示する部分
コンテンツ
文章の本文
フッター
制作者、製作日、連絡先などの制作者情報の表示部分

このほかにも、閲覧者が、情報を簡単に見つけるための、検索、ナビゲーション、などを加え、 より良いページにする必要があります。

ココでは、上記に表示されている、岡山WEB研究会のヘッダーを例に、その製作方法について説明します。

このヘッダーは、4枚の画像を組み合わせ製作されています。

  1. ロゴ
  2. 岡山市立福浜公民館・クラブ活動
  3. 岡山WEB研究会
  4. cite:http://okayama-web.cool.ne.jp/

考慮する事項

この画像をどのように配置するかは、CSSに記述します。
xhtmlには、文章構造のみ記述します。

この様なヘッダーを製作する場合、いくつかの考慮する点を考えてみましょう。

  1. 各ブラウザの解釈により表示方法がことなる。
  2. 閲覧するユーザーの、画面サイズ、表示サイズ、に対する配慮、これには相対値を使用する。

以上のような配慮をし、OS、機種、表示サイズ、などが異なっていても、情報が正しく伝わる。 これがWEBの基本であることを、忘れないで、製作しましょう。

WEBは、あなたのパソコン画面ではなく、まず、ネットワークを通して見ている、閲覧者のパソコンを基準に、 考える事が、大切なのです。