07
ウェブページの構成要素
【作成日】 2021/08/17 0:11 【更新日】
情報発信を目的とする中小企業のホームページなど、よくあるホームページを前提にウェブページの構成要素を考えると以下のような構成が考えました。

HTML で表現
上記の構成要素を HTML で書くと以下のようになります。
header は head タグであり、footer は body と html の終了タグだけになります。
index.htmlコピーしました
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no, viewport-fit=cover"> <meta name="apple-mobile-web-app-title" content=""> <title></title> <meta name="description" content=""> <meta property="og:title" content=""> <meta property="og:description" content=""> <meta property="og:type" content=""> <meta property="og:url" content=""> <meta property="og:site_name" content=""> <meta property="og:image" content=""> <meta property="fb:app_id" content=""> <meta name="twitter:card" content="summary_large_image"> <link rel="stylesheet" href="/assets/css/style.css"> <!-- <script async="" src="https://www.googletagmanager.com/gtag/js?id="></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag(‘js’, new Date()); gtag(‘config’, ‘’); </script> --> </head> <body class="light"> <div id="page" class="page"> <header id="header" class="header"></header> <div id="breadcrumb" class="breadcrumb"></div> <main id="main" class="main"></main> <aside id="aside" class="aside"></aside> <div id="backtotop" class="backtotop"></div> <footer id="footer" class="footer"></footer> </div> <div id="mask" class="mask"></div> <div id="drawer" class="drawer"></div> <div id="loading" class="loading"></div> <!-- common-js --> <script src="/assets/vendor/js/jquery-3.6.0.min.js"></script> <!-- /common-js --> <!-- page-js --> <script src="/assets/js/main.js"></script> <!-- /page-js --> <!-- footer --> </body> </html>
各ブロックの役割
- page … ウェブページ。
- page-header … ロゴやグローバルナビゲーション等が入ります(全ページ共通になる可能性が高い)。
- page-breadcrumb … パンくずリストが入ります。
- page-main … ウェブページの内容が入ります。
- page-aside … ウェブページの補足情報が入ります(カテゴリ毎に共通になる可能性がある)。
- page-backtoptop … ページの先頭に戻るが入ります(全ページ共通になる可能性が高い)。
- page-footer … ウェブページのフッターが入ります(全ページ共通になる可能性が高い)。
- mask … drawer や loading を表示しているときの背景。
- drawer … 画面の横幅が小さいとき等に使うドロワーメニュー。
- loading … 読み込み中に表示します。
- common-js … jQuery 等全ページで使う JavaScript を読み込みます。
- page-js … ページ固有の JavaScript を読み込みます。