TakahiroNakamori

TakahiroNakamori

中森崇博(ナカモリタカヒロ)

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>

各ブロックの役割