HTML
CSS
JavaScript
初心者
備忘録

【初心者】Webサイトを作る準備をしよう。【HTML, CSS, JavaScript】

Webサイトをつくるために、
プロジェクトファイルを準備しよう。

HTML

名前をつけて保存する

.html拡張子にしないとHTMLとして認識されない。

index.html

ドキュメントタイプを宣言する

Emmetを使用している場合、!から展開できる。

index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

CSSとリンクさせる

headタグ内に記述。

index.html
<link rel="stylesheet" href="style.css">

JavaScriptとリンクさせる

プロジェクトフォルダー内にある、使用するJavaScriptをbodyタグ内の一番下に記述。

index.html
<script src="main.js"></script>

Jqueryをリンクさせる

headタグ内に記述。
CDN

index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

プラグインをリンクさせる

headタグ内に記述。
Jqueryより下に記述する。
プロジェクトフォルダー内から指定するか、CDNで読み込む。

メディアクエリを使用する

レスポンシブにする際に記述。

index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

CSS

名前をつけて保存する

.css拡張子にしないとCSSとして認識されない。

style.css

*(アスタリスク)からCSSをリセットする

デフォルトで全体に適用されているpadding marginをリセットする。

style.css
* {
    margin: 0;
    padding: 0;
}

レスポンシブのブレイクポイントを作る

min-widthは最小値。max-widthは最大値。

style.css
@media screen and (min-width: 700px) and (max-width: 1000px) {

}

JavaScript

名前をつけて保存する

.js拡張子にしないとJavaScriptとして認識されない。

main.js

あとがき

はじめてWebサイトを作る場合は、HTMLをつくってCSSをリンクするだけで良い。
自分の実力・進捗に合わせて臨機応変にしていこう。