チュートリアル/1-Web のきほん
開発者ツールであそんでみる
ブラウザを開く
まずブラウザを開こう（これをブラウザで見てるかも）
Web サイトを開いてみる
Ctrl + U でソースを見てみる
F12 開発者ツールを開く
DOM いじってみる
DOM は HTML （プログラミング言語）によって作られたデータ構造
オブジェクトや構造体のリテラルと実際のインスタンスみたいな関係
こんな感じに書き換えてみる
立命館フォントで遊ぼう
https://scrapbox.io/files/60c296e888a372001f23fe5e.png
CSS いじってみる
color: #cc0000 とか
Network タブを開いてみる
Web サイトを構成するファイルを観察してみる
rits.woff ←これとか
簡単なWebサイトを作ってみよう
今回作るWebサイト
VSCodeを開こう
HTMLを書いてみよう
.htmlファイルはWebサイトを表示させるのに絶対に必要
index.html を作る
!を入力してEnterでHTMLの雛形を生成してくれる
<タグ>が入れ子構造になっていることを確かめよう
<body></body>タグの中に<h1>こんにちは</h1>と書いてみよう
lang="en" のままだとブラウザが「これ英語のサイトなんやな。翻訳したろ」ってなるので必要
code:html
<body>
<h1>こんにちは</h1>
</body>
HTMLの言語定義をEnglishから日本語に変えよう
code:html
<html lang="ja">
...
</html>
Live Serverを建ててみよう
HTML文書ができたので次はWebページを表示させてみる
VSCodeの拡張機能のLive Severをインストールする
次のいずれかの手順でサーバを建てる
エディタ右下のGo Liveをクリックする
Ctrl+Shift+pからLive Server:open with Live Server
ブラウザが自動で立ち上がり，こんにちはと表示される
もうちょっとHTML
解説
<head>内ではHTMLの文書情報が記述される
<body>内ではブラウザの画面に表示するコンテンツが記述される
code:html
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
Tips : ↑はul>li*3>{リスト}と書くとEmmetが補完してくれる CSSを書いてみよう
これだけでもWebページは表示できるけど，デザインがない寂しいWebサイトに．．．
CSSでスタイルを適用してみる
HTML要素にCSSを適用する方法は３つある
要素のstyle属性に記述する方法
code:html
<h1 style="color: red">こんにちは</h1>
<head>内の<style>内で定義する方法
code:html
<head>
...
<style>
h1 {
transform: scale(1);
transition: 0.2s;
text-align: center;
}
h1:hover {
transform: scale(1.5);
}
</style>
</head>
CSSファイルを読み込む方法
HTMLとCSSを分離させたいので基本的にこれが使われる
style.cssというファイル名のCSSファイルを作成し，<link>で読み込む
code:html
<head>
...
<link rel="stylesheet" href="style.css">
</head>
CSSを書いていく
code:css
li{
color: tomato;
}
JavaScriptを書いてみよう
HTMLとCSSだけでコンテンツとデザインの適用されたWebサイトが作れるようになった
でも，ユーザとインタラクションしてHTMLの構造を書き換えたりはできない
JavaScriptというプログラミング言語で実現する
今回のチュートリアルではカウンターをJavaScriptで実装してみる
カウンターUIとなるHTMLを追加し，JavaScriptファイルを読み込む
code:html
<body>
<article>
<h1>カウンター</h1>
<div><span class="result">0</span></div>
<button class="button-plus">+</button>
<button class="button-minus">-</button>
</article>
<script src="index.js"></script>
</body>
注意：<script>タグは<body>の最後に書く
まだこの状態ではボタンを押しても何も起こらない
ここからJavaScriptを記述してカウンターの値を増減できるようにする
index.jsという名前でファイルを新規作成する
code:index.js
const result = document.querySelector(".result");
let count = 0; // 1
document.querySelector(".button-plus").addEventListener("click", () => { // 2
count += 1; // 3
result.innerText = count; // 4
});
document.querySelector(".button-minus").addEventListener("click", () => { // 2
count -= 1; // 3
result.innerText = count; // 4
});
document.querySelector()関数で，resultというCSSクラスをもったHTML要素を取得し，変数resultに代入
状態を保持するのにcountという変数を宣言
.button-plusというCSSクラスをもったHTML要素を取得し，addEventListener()関数でイベントを設定
addEventListener()関数の引数
第１引数にはイベントの種類を指定
第２引数にはイベント発火時に実行する関数を指定
count += 1では状態変数countの値を１増加
result.innerText = count;で，resultというCSSクラスをもったHTML要素のテキストをcountの値に更新
ここでは、↓のような構造になっているよ（伏線）
1. 状態を定義し、
2. （ユーザーからの）アクションがあると、
3. 状態を更新し、
4. DOM を更新する
ブラウザに表示されたボタンをクリックしてカウンターが変わっていることを確認しよう
おまけ
カウンターのスタイルを変えてみる
code:css
button {
background: red;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
}
button:focus {
box-shadow: 0 0 0 1px white, 0 0 0 2px red;
}