iPhoneやAndroidなどのスマートフォンをはじめ、PCサイトでもHTML5によるWEB制作を行う機会が増えてきました。
結構その場しのぎで記述することが多かったので、簡単にまとめたサイトを作りました。ちょっとした時のコピペ用ですので、本格的なコーディングのことは書いていません。専門書や学校で教わるほうが確実です。
また、サイト内で使われている用語についても、知り合い間で伝わる言い方をしているかもしれませんがスルーしてください。,
簡易初期設定
HTMLの書き出しとCSSの初期設定（ブラウザリセットやちょっとした設定）です。
コピペして使ってもらっても構いませんが、簡易ですので、必要に応じて設定を付け加えてください。
HTML5ベース（最小限）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<title>タイトル</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
コンテンツ
</body>
</html>
CSSベース（初期化含む）
/*
Josh's Custom CSS Reset --- more customized
https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}html,body{height:100%}body{line-height:1.0;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:inline-block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;font-size:100%}#root,#__next{isolation:isolate}
/* Initial setting */
html{
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: 62.5%;
}
body{
color: #444;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 1.6rem;
}
a{
background-color: transparent;
outline: 0;
text-decoration: none;
transition: all .5s;
}
a:link {color:#3366cc}
a:visited {color:#3366cc}
a:hover {color:#1a428c}
a:active {color:#99ccff}
br{letter-spacing:0}
ul, li{list-style:none}
img, a img{border:0; text-decoration:none}
mark{background:#ff0; color:#000}
b, strong{font-weight:bold}
My Custom CSS Resetを一部カスタムしています。