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 を読み込みます。