Web Page Base

Page base

DEMO


<!DOCTYPE html>
<html dir="ltr" lang="ja-JP">
<head>
<!-- Google tag (gtag.js) -->

	<meta charset="UTF-8">
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="description" content="ページの概要">
	<meta name="msapplication-TileColor" content="#ee7836"><!--Windowsタイル画像の背景色-->
	<meta name="theme-color" content="#ffffff"><!--Windowsピン留め背景色-->

	<!-- Favicon -->
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon.ico">

	<!-- CDN -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

	<!-- CSS -->
	<link rel="stylesheet" href="/path/to/destyle_v3-0-2.css">
	<link rel="stylesheet" href="/path/to/style.css">
</head>

<body>
<h1></h1>
<header><!--=====Header=====--></header>

<main>
	  <!--=====Contents=====-->
</main>

<footer><!--=====Footer=====--></footer>

</body>
</html>


html {
	height: 100%;
	}
body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background: #ede5c9;
	}
header,
main,
footer {
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0;
	}
header {
	height: 10rem;
	background: #cff;
	}
main {
	background: #ffb6c1;
	}
footer {
	position: sticky;
	top: 100vh;
	height: 5rem;
	margin: 0;
	padding: 1rem;
	text-align: center;
	background: #cff;
	}

section {
	width: 100%;
	max-width: 1920px;
	background-color: #a5c285;
	margin: 0 auto 2rem;
	padding: 1rem;
	}
article {
	max-width: 1024px;	
	background-color: #fcd307;
	margin: 0 auto;
	padding: 1rem;
	}
h2 {
	max-width: 1024px;	
	margin: 0 auto;
}

終了タグ省略版

一時期、省略できるところはとことん省略する方がGoogle受けする…ということだったが今はもう推奨されていないようだ。

単にレガシーとして残しておく。

https://html.spec.whatwg.org/multipage/syntax.html#optional-tags


<!DOCTYPE HTML>
<meta charset="UTF-8">
<title>タイトル</title>

<link rel="stylesheet" media="screen" href="css/style.css">

<script src="pulgins/basic.js"></script>

<p><!--=====Contents=====-->
<p class="className"><!--=====Contents=====--></p>
<div><!--=====Contents=====--></div>

む〜ん…なんかキモイ…落ち着かない…www

タグの省略ルール

すべての要素 …属性を持つ場合、開始タグは省略できない。


<html>   ◯…最初の内容がコメントではない時は省略できる。
</html>  ×…直後がコメントである時は省略できない。

<head>   ◯…最初の内容が要素である か 内容が空である時は省略できる。
</head>  ×…直後がコメント・空白文字である時は省略できない。

<body>   ◯…最初の内容が要素である か 内容が空である か 空白文字ではない か コメントではない時は省略できる。
                      ×…最初が要素であっても、それが meta, link, script, style, template である時は省略できない。
</body>  ×…直後がコメントである時は省略できない。

</p>     ◯…直後に以下の要素が続く か、親要素にそれ以上内容がない時は省略できる。
			 	address, article, aside, blockquote, details, div, dl,
				fieldset, figcaption, figure, footer, form, 
				h1, h2, h3, h4, h5, h6, header, hgroup, hr, 
				main, menu, nav, ol, p, pre, section, table, ul 
				(つまりもともとpに内包できなかった要素が後に続くなら省略OK)
          ×…親要素が a, audio, del, ins, map, noscript, video である時は省略できない。

</rt> 	  ◯…直後に rt, rp 要素が続くか、親要素にそれ以上内容がない時は省略できる。
</rp>	  ◯…直後に rt, rp 要素が続くか、親要素にそれ以上内容がない時は省略できる。

【Tableタグ関連】
</thead>	◯…直後に tbody, tfoot 要素が続く時は省略できる。
<tbody>     ◯…最初の内容が tr で、直前に終了タグを省略した tbody, thead, tfoot 要素がない時は省略できる。
</tbody>	◯…直後に tbody, tfoot 要素が続くか、親要素にそれ以上内容がない時は省略できる。
</tfoot>	◯…親要素にそれ以上内容がない時は省略できる。
</caption>  ×…直後がコメント・空白文字である時は省略できない。

<colgroup>  ◯…最初の内容が col で 直前に終了タグを省略した colgroup 要素がない時は省略できる。
		     ×…空要素である時は省略できない。
</colgroup>  ×…直後がコメント・空白文字である時は省略できない。

</tr>	 ◯…直後に tr 要素が続くか、親要素にそれ以上内容がない時は省略できる。
</td>	 ◯…直後に td, th 要素が続くか、親要素にそれ以上内容がない時は省略できる。
</th>	 ◯…直後に td, th 要素が続くか、親要素にそれ以上内容がない時は省略できる。

【Listタグ関連】
</dt>	  ◯…直後に dt, dd 要素が続く時は省略できる。
</dd>  	  ◯…直後に dt, dd 要素が続くか、親要素にそれ以上内容がない時は省略できる。
</li>     ◯…直後に li 要素が続くか、親要素にそれ以上内容がない時は省略できる。

【Formタグ関連】
</optgroup>   ◯…直後に別の optgroup 要素が続くか、親要素にそれ以上内容がない時は省略できる。
</option>     ◯…直後に option, optgroup 要素が続くか、親要素にそれ以上内容がなければ省略できる

TOP