元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事とブログのカスタマイズについて書いています。

 menu

HTML入門(Webサイトのページを構成する部品の名称)

もし、Webサイトの制作をどこかに依頼する(された)場合、ページを構成する部品の名称を知っているとスムーズにやり取りすることができるはずです。依頼者と制作者の意思疎通が円滑になり、無用なやり取りを防ぐことが期待できます。

Webサイトの1ページを構成する部品

Webサイトの1ページは、おおまかに分けると下図のような4つの部品で構成されます。部品はさらに細かくパーツ分けできます。

f:id:shiroyuki2020:20201223141750p:plain

ヘッダー

ヘッダーには、以下のようなものを配置します。

  • サイト名
  • ロゴ
  • グローバルナビゲーション(メニュー)
  • パンくずリスト
  • ログインボタンなど

サイト名を含んだロゴを作る場合は、ロゴのみを表示することもあります。必要に応じてパーツを追加したり、削除します。

メイン(コンテンツ)

メイン部分は、コンテンツと言ったり、メインコンテンツなどと言われることもあります。呼び方は、まちまちなのでその時々に合わせて呼んでください。メイン部分には、以下のようなものを配置します。

  • 記事
  • メイン画像など

ブログの場合は、記事がメインコンテンツになるなので記事の内容を表示します。サイトの種類によって、この部分の表示内容は変わります。メインとするものを載せますが、何を載せるのかは基本的に自由です。

サイドバー

サイドバーには、以下のようなものを配置します。

  • サブナビゲーション(サイト内リンク)
  • カテゴリー(サイト内リンク)
  • バナーなど

サイト内リンクやバナー広告を配置します。twitterのツイートを表示したり、記事の目次を表示したり、色々なものを配置します。サイドバーを設置しない場合もあります。

フッター

フッターには、以下のようなものを配置します。

大体のサイトで最低限、上記の2つを表示していると思います。

補足

サイトの部品の名称は、人や会社によって呼び方が多少異なります。決まった言い方が無いのは、どこかの協会や団体で名称を定義したわけではないためです。この記事では、一般的に呼ばれている名称で記事を書いています。