第2章　ＥＣ千葉のホームページ

一番難しいのは何を伝えるか

「ホームページ作成の基本」とやや改まって大上段に構えた表現ですが、これまで約10年間学校の同窓会のＨＰ、このＨＰや個人的なＨＰを作成してきた経験からの個人的な意見と捉えて下さい。
私は、ホームページ作成を「xxyyyホームページ作成講座」などで系統的に学習したことはありません。先輩から聞きながら、実務といくつかの本、そして情報の殆どはインターネットから入手しました。したがって、実務的に「ホームページはどのようにしたら読んでもらえるか」に立脚した意見です。独善と偏見、その上に間違っている意見もあります。

• インターネット上にあるホームページ作成方法記事の多くは、ＨＰ作成ビジネスとしている人が、SEO（検索エンジン最適化）を意識して、検索順位アップ・上位表示に結びつける対策をすることに主眼を置いています。
• そのため、ややもすると奇抜なデザインや画面が動く、読者と双方向でやり取りができるページ構成（問い合せ、申し込み、ポップアップ）等が多くなります。画像や色を多く使うなどのデザイン重視で記載されています。
• ところが、このＨＰのように、閲覧して欲しい人が主として会員あるいは環境など我々の活動に関心のある人に限定している場合には状況が異なります。
• まず、どのような情報を提供すれば良いかが最重要です。
• 営利目的ではなく読者が読みやすすく、かつホームページ作成に手間とお金を掛けないが基本となります。
• また、ここに掲載してあるのはＨＰ作成の最低限ハウツーであって、ホームページ作成教本ではありません。
• 「ＨＴＭＬを知らないでもＨＰは作成できる」と広告に載っていますが、まず無理です。ただし、最低限のＨＴＭＬを覚えれば作成できます。それは難しくありません。

2.1　ＥＣ千葉ホームページの構成

ＥＣ千葉のトップページ（ホームページ）構成は下図のようになっています。

ヘッダー部：画面幅の100％；ＥＣ千葉のロゴ

<header>と</header>に囲まれ、ロゴ画像などで構成されています。
<header>があると、ブラウザーは機器幅の100％で表示するのが初期設定（default）です。

ナビ部：画面幅の100％；ページ全体の構成とリンク

<nav>と</nav>に囲まれ、ウエブページ構成の案内（ナビゲーション）です。各センターの名前をクリックするとそのページを表示します。
<nav>があると、ブラウザーは機器幅の100％で表示するのが初期設定（default）です。

特別連絡：画面幅の100％；特別連絡事項（通常は非表示）

<div class="col-12">と</div>に囲まれた範囲で、環境カウンセラー登録の更新時期であるとかの重要な会員への連絡事項を記載します。通常時は、全体を<--　と　-->で囲うことで非表示してあります。ブラウザーは、<--この間のHTTMLは無視をします-->
class="col-12は、後で説明します（スマホ対応策です）。

左側記事

<div class="col-4">と</div>に囲まれた範囲で、左側の記事部分です。
<section>と</section>に囲まれた範囲は「例えば、ここは政治面ですよ」とブラウザーに通知するだけで、ブラウザーは何もしません。
<article>と</article>に囲まれた範囲は「ここに一つの記事がありますよ」とブラウザーに通知するだけで、ブラウザーは何もしません。
現在は、左側には行事予定表、その下に変更の少ない記事を掲載しています。

右側記事

<div class="col-8">　　</div>に囲まれた範囲で、右側の記事部分です。
<section>　　</section>に囲まれた範囲は「例えば、ここは経済面ですよ」とブラウザーに通知するだけで、ブラウザーは何もしません。
<article>　　</article>に囲まれた範囲は「ここに一つの記事がありますよ」とブラウザーに通知するだけで、ブラウザーは何もしません。各記事ひとつひとつを「article」で囲っていますが、無くてもかまいません。

フッター部：画面幅の100％；連絡先や著作権等

<footer>と</footer>に囲まれ、ロゴや著作権、連絡先などで構成されています。
<footer>があると、ブラウザーは機器幅の100％で表示するのが初期設定（default）です。