まず、はじめに。
この記事は、Webサイトを公開する前に最低限しなければならないコーディングにおいての準備（というかそもそもWebサイトを作り始める時にしなければならないことな気がするけど）をまとめたものです。
投稿者本人が自分の備忘録として書いているため、一切解説していません。
Webデザイン・フロントエンドがちょいとできる方に、ふわっと参考になれば幸いです。
（間違っていたり分かりづらかったら、ごめんなさい
）
※臨時更新予定
参考
HTML
01_HTMLを展開
!をEmmet（Tabキー）で展開
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
02_日本語のサイトにする
言語を日本語にする
index.html
<html lang="ja">
03_viewport
headタグ内に記述
metaタグ
index.html
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
04_説明文
ページの概要を記述
metaタグをheadタグ内に記述
index.html
<head>
<meta name="description" content="ERIRIN PORTFOLIO">
</head>
05_OGPタグ
metaタグをheadタグ内に記述
index.html
<head>
<meta property="og:title" content="portfolio" />
<meta property="og:type" content="website" />
<meta property="og:description" content="ERIRIN PORTFOLIO" />
<meta property="og:url" content="osawaeri.github.io/portfolio/" />
<meta property="og:site_name" content="portfolio" />
<meta property="og:image" content="images/thumbnail.png" />
</head>
06_タイトル
headタグ内に記述
index.html
<head>
<title>portfolio</title>
</head>
07_CSS
headタグ内に記述
linkタグ
index.html
<head>
<link rel="stylesheet" href="css/style.css">
</head>
08_ファビコン
headタグ内に記述
linkタグ
index.html
<head>
<link rel="shortcut icon" href="images/favicon.png">
</head>
09_JavaScript
headタグ内かbodyタグ最下部に記述
scriptタグ ※読み込み順に気をつける
index.html
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
CSS
01_文字コードをセット
文字化けを防ぐために、1行目に記述
style.css
@charset "UTF-8";
02_CSSリセット
全てにかかってしまっているmarginとpaddingをリセットする
style.css
* {
margin: 0;
padding: 0;
}
03_フォント
@font-faceでフォントを読み込む
style.css
@font-face {
font-family: "DIN Alternate";
src: url('../fonts/DIN Alternate Bold.ttf') format('truetype');
}
04_Media Queries
それぞれブレイクポイントを作る
style.css
@media screen and (min-width:最小値) and (max-width:最大値) {
}
おまけ
デバイスを縦向きにしたとき
style.css
@media screen and (orientation:portrait) {
}
JavaScript
01_jQuery
script.js
$(function () {
});
02_ページ読み込み時の実行
なにかと読み込み時に実行させたいんだ。
script.js
$(function () {
// JavaScriptの場合
window.onload = function () {
}
// jQueryの場合
$(window).on('load', function () {
});
}
03_デバイス判定
終わり
参考にさせていただきました。
HTML5&CSS3 デザインレシピ集