レイアウト用のタグ

ページのデザイン、つまりレイアウトをどのようにするか?は、製作者のセンスの問題になります。
しかし、どのような配置にするか?・・・を決めるため?には、それぞれの記事の塊<div>に、名前を付けておく必要があります。
しかしこのタグは、現在のHTMLには、存在しません!
そのため、クラス属性を使って名前を付けておく必要があります。
デザイナーは、wrapperという任意の名を、好んで使います、
そこに、row(列)という、クラスを用いることにします。

そのため、各記事(Article)の塊を、記事の塊(wrapper row class=””)で、
表示します。
HTML全体は、下記のような表示となります。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<title>Top</title>
<meta charset=”UTF-8″>
<meta name=”description” content=””>
<meta name=”keywords” content=””>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”apple-mobile-web-app-title” content=”http://www.8341web.com/favicon/favicon.ico”>
<meta name=”application-name” content=”http://www.8341web.com/favicon/favicon.ico”>
<meta name=”theme-color” content=”#ffffff”>
<!– CSS –>
<link href=”layout/styles/main.css” rel=”stylesheet” type=”text/css” media=”all”>
<link href=”layout/styles/mediaqueries.css” rel=”stylesheet” type=”text/css” media=”all”>
<!– Slider –>
<link href=”layout/scripts/responsiveslides.js-v1.53/responsiveslides.css” rel=”stylesheet” type=”text/css” media=”all”>
<!– webfont fontawesome –>
<script src=”https://use.fontawesome.com/e7651820af.js”></script>
<!– favicon –>
<link rel=”shortcut icon” href=”favicons/favicon.ico” title=”faviconの表示” type=”image/x-icon”>
<link rel=”apple-touch-icon” href=”favicons/apple-touch-icon.png” title=”apple用favicon” />
<link rel=”apple-touch-icon” sizes=”57×57″ href=”favicons/apple-touch-icon-57×57.png” title=”apple用favicon_57x57″>
<link rel=”apple-touch-icon” sizes=”72×72″ href=”favicons/apple-touch-icon-72×72.png” title=”apple用favicon_72x72″>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”favicons/apple-touch-icon-76×76.png” title=”apple用favicon_76x76″>
<link rel=”apple-touch-icon” sizes=”114×114″ href=”favicons/apple-touch-icon-114×114.png” title=”apple用favicon_114x114″>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”favicons/apple-touch-icon-120×120.png” title=”apple用favicon_120x120″>
<link rel=”apple-touch-icon” sizes=”144×144″ href=”favicons/apple-touch-icon-144×144.png” title=”apple用favicon_144x144″>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”favicons/apple-touch-icon-152×152.png” title=”apple用favicon_152x152″>
<link rel=”apple-touch-icon” sizes=”180×180″ href=”favicons/apple-touch-icon-180×180.png” title=”apple用favicon_180x180″>
<!–[if lt IE 9]>
<link href=”layout/styles/ie/ie8.css” rel=”stylesheet” type=”text/css” media=”all”>
<script src=”layout/scripts/ie/css3-mediaqueries.min.js”></script>
<script src=”layout/scripts/ie/html5shiv.min.js”></script>
<![endif]–>
</head>

<body>
<h1>大見出し</h1>
<div class=”wrapper row1″><!- ヘッダー領域 ->
<header>ヘッダー名</header>
</div>
<div class=”wrapper row2″><!- ナビゲーション領域 ->
<nav><!- ナビゲーション ->
<ul>
<li>menu_1</li>
<li>menu_2</li>
<li>menu_3</li>
</ul>
</nav>
</div>
<div class=”wrapper row3″><!- 本文コンテンツ ->
<article>
<h2>見出し</h2>
<p>段落</p>
<h3>見出し</h3>
<p>段落</p>
</article>
</div>

<h2>大見出し2</h2>
<h2>大見出し3</h2>
<h2>大見出し4</h2>
<h2>大見出し5</h2>
<h2>大見出し6</h2>
<aside>補足</aside><!- 補足領域 ->

<div class=”wrapper row4″></div><!- フッターnav領域 ->
<div class=”wrapper row5″></div><!- フッター領域 ->
<div class=”wrapper row6″></div><!- 著作権表示領域 ->

<!– Scripts –>
<script src=”http://code.jquery.com/jquery-latest.min.js”></script>
<script src=”http://code.jquery.com/ui/1.10.1/jquery-ui.min.js”></script>
<script src=”layout/scripts/jquery.backtotop.js”></script>
<script>
window.jQuery || document.write(‘<script src=”layout/scripts/jquery-latest.min.js”><\/script>\<script src=”layout/scripts/jquery-ui.min.js”><\/script>’)
</script>
<script>jQuery(document).ready(function($){ $(‘img’).removeAttr(‘width height’); });</script>
<script src=”layout/scripts/responsiveslides.js-v1.53/responsiveslides.min.js”></script>
<script src=”layout/scripts/jquery-mobilemenu.min.js”></script>
<script src=”layout/scripts/custom.js”></script>
<script src=”https://use.fontawesome.com/e7651820af.js”></script>

</body>
</html>

上記でもわかるように、タグは、すべて入れ子になっている!
HTMLに、記述するのは、これだけです
このほかの部分的デザイン要素はすべて、CSSに記述します
当然ですが、表示は、ベタです。
文章と画像が、順に表示されているだけの状態