Webサイトを公開する前の準備【備忘録】
Webサイトを公開する前の準備【備忘録】:
この記事は、Webサイトを公開する前に最低限しなければならないコーディングにおいての準備（というかそもそもWebサイトを作り始める時にしなければならないことな気がするけど）をまとめたものです。
投稿者本人が自分の備忘録として書いているため、一切解説していません。
Webデザイン・フロントエンドがちょいとできる方に、ふわっと参考になれば幸いです。
（間違っていたり分かりづらかったら、ごめんなさい
）
※臨時更新予定
ポートフォリオ
言語を日本語にする
全てにかかってしまっている
それぞれブレイクポイントを作る
デバイスを縦向きにしたとき
なにかと読み込み時に実行させたいんだ。
こちらを参考にさせていただきました
まず、はじめに。
この記事は、Webサイトを公開する前に最低限しなければならないコーディングにおいての準備（というかそもそもWebサイトを作り始める時にしなければならないことな気がするけど）をまとめたものです。投稿者本人が自分の備忘録として書いているため、一切解説していません。
Webデザイン・フロントエンドがちょいとできる方に、ふわっと参考になれば幸いです。
（間違っていたり分かりづらかったら、ごめんなさい
）※臨時更新予定
参考
ポートフォリオ
HTML
その1 「HTMLを展開」
!をEmmet（Tabキー）で展開index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
その2 「日本語のサイトにする」
言語を日本語にするindex.html
<html lang="ja">
その3 「viewport」
headタグ内に記述metaタグindex.html
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
その4 「説明文」
headタグ内に記述metaタグindex.html
<head>
<meta name="description" content="ERIRIN PORTFOLIO">
</head>
その5 「OGPタグ」
headタグ内に記述metaタグ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>
その6 「タイトル」
headタグ内に記述index.html
<head>
<title>portfolio</title>
</head>
その7 「CSS」
headタグ内に記述linkタグindex.html
<head>
<link rel="stylesheet" href="css/style.css">
</head>
その8 「ファビコン」
headタグ内に記述linkタグindex.html
<head>
<link rel="shortcut icon" href="images/favicon.png">
</head>
その9 「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
その1 「CSSリセット」
全てにかかってしまっているmarginとpaddingをリセットするstyle.css
* {
margin: 0;
padding: 0;
}
その2 「フォント」
@font-faceでフォントを読み込むstyle.css
@font-face {
font-family: "DIN Alternate";
src: url('../fonts/DIN Alternate Bold.ttf') format('truetype');
}
その3 「Media Queries」
それぞれブレイクポイントを作るstyle.css
@media screen and (min-width:最小値) and (max-width:最大値) {
}
おまけ
デバイスを縦向きにしたときstyle.css
@media screen and (orientation:portrait) {
}
JavaScript
その1 「jQuery」
script.js
$(function () {
});
その2 「ページ読み込み時の実行」
なにかと読み込み時に実行させたいんだ。script.js
$(function () {
// JavaScriptの場合
window.onload = function () {
}
// jQueryの場合
$(window).on('load', function () {
});
}
コメント
コメントを投稿