【ゼロから学ぶHTML/CSS】Webページの要素と構成について【ディレクトリ/レイアウト/#3】

HTML/CSS
HTML/CSS

Webページの構成

Webページは基本的に以下のような要素で構成されます。

  • ヘッダー

ヘッダーは表示される最初の部分なので、WEBサイトの顔です。WEBサイトの名前やロゴ、メニューを表示させる場合が多いです。ナビゲーションと一体化する場合もあります。

  • ナビゲーション

ナビゲーションはWebサイトの主要ページへのリンクを表示させる場合が多いです。また、どのページにもナビゲーションを共通して設置する場合が多いです。

  • メインコンテンツ

メインコンテンツは名前の通り、Webサイトのコンテンツを表示します。トップページでは各Webページの一覧であったり、コンテンツページでは内容表示します。

  • サイドバー

サイドバーはメインコンテンツに関連する内容や、WEBサイトの補足的な役割が多いです。

  • フッター

フッターは一番最下部なので、各リンク一覧や補足事項、コピーライトを表示する場合が多いです。

レイアウトのパターン

WEBページはカラム(縦列)数でレイアウトが大きく変わります。

  • 1カラム

縦1列でWebページを構成します。Webページの横幅一杯を使い、縦にコンテンツを並べて表示します。スマホで表示する場合にはよく使われます。

  • 2カラム

縦2列でWebページを構成します。基本的にはメインコンテンツの列とサイドバーの列で構成することが多いです。PCで表示するような一般的なサイトでよく使われています。

  • 3カラム

縦3列でWebページを構成します。3列になると情報量が大きくなるので、情報量が必要なニュース系のサイトでよく使われるレイアウトです。

Webサイトのファイルについて

WebページはHTML形式で表示しますが、様々な形式のファイルを扱って、HTMLを構成しています。

htmlまたはhtm、css、js、画像(jpg/png/gifなど)、php、動画(mpg/aviなど)等があります。

また、WEBサイトにアクセスして表示されるページはURLで指定したページになります。例えば、https://vitbyte.jp/zerokara-htmlcss-01だと、「vitbyte.jp」の「zerokara-htmlcss-01」ページになります。

ちなみに「/」はディレクトリ(フォルダ)を意味します。例えば、「vitbyte.jp/about/aaa.html」だとvitbyte.jpサーバーのaboutディレクトリのaaa.htmlという意味になります。

コメント

タイトルとURLをコピーしました