JavaScriptをHTMLとCSSの組み合わせで展開するので、HTMLとCSSでの必要最低限の記述を整理してみました。もちろん状況によって色々変更が必要ですが・・・。
■HTMLは必要最低限の記述が少しだけ有ります。
<!-- index.html -->
↑ソースファイルの1行目と最終行にコメント文で
ファイル名を記述するのは単なる私の癖です。
<!DOCTYPE html>
<html lang="ja">
<!-- 日本語のHTML宣言 -->
<head>
<title>name</title>
<meta charset="UTF-8">
<!-- ユニコード指定 -->
</head>
<body>
</body>
</html>
<!-- index.html -->
あくまでも必要最低限です。
HTML内にCSSファイルを指定する場合は<head></head>の中、JavaScriptを指定する場合は<body></body>の中に記述します。
■必要最低限の記述にCSSとJavaScriptを指定した場合。
<!-- index.html -->
<!DOCTYPE html>
<head>
<title>name</title>
<html lang="ja">
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
<!-- CSSファイルの指定 -->
</head>
<body>
<script src="links/action.js"></script>
<!-- Javaファイルの指定 -->
</body>
</html>
<!-- index.html -->
※HTML内のコメント文（処理に影響しない記述部分）は
「<!--」と「-->」で囲むだけです。
■CSSは必要最低限の記述が多いのですが、
ひな形として理解＆処理（コピー&ペースト）すれば良いと思います。それが以下です。細かい説明はその更に下にまとめました。
/* rule.css */
/* rule.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
html {
overflow-y:scroll;
}
body *, ::before, ::after {
box-sizing: border-box;
}
.clearfix::after {
content: " ";
display: block;
clear: both;
}
body {
background-color: lightpink; /* #ffb6c1 */
text-align: center; /* 状況により */
font-family: Arial, Helvetica, sans-serif; /* 状況により */
color: mediumvioletred; /* #c71585 */
font-size: 100%; /* サイズは状況により */
line-height: 1.5; /* サイズは状況により */
-webkit-text-size-adjust: 100%;
}
/* rule.css */
※CSS内のコメント文（処理に影響しない記述部分）は
「/*」と「*/」で囲むだけです。
HTML内に埋め込む場合も<style></style>の中なので同じです。
構造は・・・
セレクター {
プロパティ: 値;
}
コロン、セミコロンを間違えないように注意です。
h3 {
margin-top: auto;
font-size: 14px;
color: blue;
}
下のように1行にまとめて半角スペースを削除しても問題ありませんが
デバッグ時に苦労するのでお薦めしません。
h3{margin-top: auto;font-size: 14px;color: blue;}
簡単に解説すると・・・
/* rule.css */
↑ソースファイルの1行目と最終行にコメント文で
ファイル名を記述するのは単なる私の癖です。
@charset "UTF-8";
/*文字コードはUnicode UTF-8*/
* {
/*「*」は全てのHTML_要素を設定できるセレクタで、
ここではブラウザ毎のmarginとpaddingの差異を解消*/
margin: 0px;
/*外側の余白無し*/
padding: 0px;
/*内側の余白無し*/
}
html {
/*overflow-y:visible;*/
/*内容は切り取られずに
パディングボックスの上下辺より外側に表示*/
/*overflow-y:hidden;*/
/*垂直方向のパディングボックスに合わせる場合は
内容を切り取り、スクロールバーは表示されない*/
/*overflow-y:clip;*/
/*hiddenと同様で、更にすべてのスクロールを禁止する*/
overflow-y:scroll;
/*垂直方向のパディングボックスに合わせる場合は
内容を切り取りスクロールバーは常に表示*/
/*overflow-y:auto;*/
/*内容がパディングボックス内に収まる場合は
visibleと同じで
内容があふれる場合はスクロールバーを表示*/
}
body *, ::before, ::after {
/*疑似要素タグ*/
/*box-sizing: content-box;
width:100%;*/
/*CSS標準で規定されている初期値および既定値*/
/*box-sizing: content-box;
width:100%
border.solid #ff0000 5px;
padding: 5px*/
/*width、heightは、パディング、境界、
マージン領域は含まない
幅=コンテンツの幅、高さ=コンテンツの高さ*/
box-sizing: border-box;
/*width:100%
border.solid #ff0000 5px;
padding: 5px;*/
/*width、heightは、パディング、境界、
マージン領域を含む
幅=境界+パディング+コンテンツの幅、
高さ=境界+パディング+コンテンツの高さ*/
}
.clearfix::after {
/*float設定要素の周りにイメージとして
透明なバリアを張るCSSコード*/
content: " ";
/*このコードは必須ですが「” “」の間に文字を書かなくてOK*/
display: block;
/*指定された範囲をブロック要素に変換*/
clear: both;
/*入力された側に寄せられた要素に対する回り込み解除で、
leftは左寄せ、rightは右寄せ、bothは左右どちらかに寄せられた
全ての要素に対する回り込みを解除*/
}
body {
background-color: lightpink; /* #ffb6c1 背景色 */
text-align: center; /* 文字の配置 */
font-family: Arial, Helvetica, sans-serif; /* 書体の種類 */
color: mediumvioletred; /* #c71585 書体の色 */
font-size: 150%; /* 書体のサイズ */
line-height: 1.5; /* 文字の行間 */
-webkit-text-size-adjust: 100%;
/*iPhoneやAndroidで、
縦向きと横向きの文字サイズ自動調整する機能を制御
ただし絶対にnoneを設定してはいけない*/
}
/* rule.css */
■JavaScriptは必要最低限の記述は特に何もありません。
/* action.js */
/* ↑ソースファイルの1行目と最終行にコメント文で
ファイル名を記述するのは単なる私の癖です。*/
/* action.js */
※JavaScript内のコメント文（処理に影響しない記述部分）は
CSSと同様に「/*」と「*/」で囲むだけですが
「//」以降改行するまでという指定方法もあります。
なお、HTML内に記述する場合も
<script></script>の中なので同じです。
