More than 3 years have passed since last update.

Webサイトを公開する前の準備

Last updated at 2020-05-18Posted at 2019-01-04

#まず、はじめに。
この記事は、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 デザインレシピ集

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up