HTML + CSS を初心者に教えてみた

# はじめに

HTMLを触ったことない、CSSを触ったことない初心者の方へ、実際にHTMLとCSSを書いて表示されるところまでを紹介したいと思います。

---

# HTMLとは

- HTML（Hyper Text Markup Language）
- ハイパーテキストを記述すためのマークアップ言語の1つ
- webページを表示する為の言語
- コンピュータに文書の意味（文書構造）を理解してもらうために、タグ付け（Markup：マークアップ）と言われる、`<>`（大なり小なり）の記号で、文書をその意味ごとに囲んで作成していきます。

---

# CSSとは

- CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語
- CSSは、HTMLと組み合わせて使⽤
-  HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定する

---

# 実践

---

# サンプルコードを書いてみよう

1. デスクトップに`html-training`というディレクトリを作成
2. テキストエディターを開く
3. 下記のサンプルコードを記載し`sample.html`で`html-training`の中に保存

```html:sample.html
<!DOCTYPE html>
<html>
  <head>
    <title>サンプル</title>
    <meta http-equiv="content-type" charset="utf-8" />
  </head>
  <body>
    <h1>タイトル</h1>
    <p>本文</p>
  </body>
</html>
```

---

# サンプルコードをブラウザで表示しよう

1. ブラウザを開く（Chrome,Firefox,Edge等）
2. `sample.html`をブラウザにドラッグアンドドロップ
3. ブラウザで表示されていることを確認

---

# コードを少し変えてみよう

1. HTMLを修正、保存
2. ブラウザでページを再読み込み(F5)

```diff:sample.html
<!DOCTYPE html>
<html>
  <head>
    <title>サンプル</title>
    <meta http-equiv="content-type" charset="utf-8" />
  </head>
  <body>
-    <h1>タイトル</h1>
+    <h1>好きな文字に変えてみよう</h1>
    <p>本文</p>
  </body>
</html>
```

---

# HTMLの書き方の基本

1. タグではさむ

> `<タグ名>タグの中身</タグ名>`

- `sample.html`に書いたように `<ほげ>や</ほげ>`がたくさん使われていました。
- この`ほげ`を`タグ`と呼びます。
- タグの始まりから終わりまでのカタマリを要素と呼びます。
- タグの中身は、はさんでいるタグの種類によって役割が変わります。

---

# 段落・見出し

> `<p>段落内の文章</p>`

- 段落で表示したい場合、`p`タグではさむ

> `<h1>見出し文</h1>`

- 見出しで表示したい場合、`h1`タグではさむ
- 見出しタグは`h1` ~ `h6`の6種類あり、見出しの大きさが異なる。
- `h1`が一番大きい見出しで`h6`が一番小さい見出し

---

# タグの中にタグを書く

- タグの中にタグを入れる入れ子構造で書く

```html
<html>
  <body>
    <h1>...</h1>
    <p>...</p>
  </body>
</html>
```

---

# 開始タグに属性を書く

> `<タグ名 〇〇="△△">~</タグ名>`

- 開始タグの中に情報を入れることが出来る。

> `<a href="リンク先のURL">~</a>`

- `a`タグはリンクを表します。
- 開始タグの中にリンク先のURL情報を入れている。

---

# リンクを書いてみよう

```html
<!DOCTYPE html>
<html>
  <head>
    <title>サンプル</title>
    <meta http-equiv="content-type" charset="utf-8" />
  </head>
  <body>
    <h1>タイトル</h1>
    <p>本文</p>
    <a href="https://www.google.com/">URL先のページへジャンプ！</a>
  </body>
</html>
```

- URL、リンク名は何でも構いません。
- `URL先のページへジャンプ！`というリンクが表示され、押すと`href`に書いたURLのページへ遷移します。

---

# classとidを理解しよう

1. `id`や`class`を書く = タグに管理名をつける

```html
<タグ名 class="class名">~</タグ名>
<タグ名 id="id名">~</タグ名>
```

- `id`はHTML文書内でユニークな名前を付けるようにします。

---

# cssを読み込んでデザインを変えてみよう

## 構成

```
Desktop/HTML_sample/
├── css
│   └── sample.css
└── css_sample.html
```

---

# cssを読み込んでデザインを変えてみよう

## HTMLの準備

```html:Desktop/HTML_sample/css_sample.html
<!DOCTYPE html>
<html>
  <head>
    <title>初級CSS</title>
    <meta http-equiv="content-type" charset="utf-8" />
    <link
      rel="stylesheet"
      type="text/css"
      href="C:\xxx\Desktop\HTML_sample\css\sample.css"
    />
  </head>
  <body>
    <div class="sample1"></div>
  </body>
</html>
```

- `css`ファイルの参照パスはルートディレクトリの出発点から記述しています。（絶対パス）
- `xxx`の部分は各自の`PC`で確認して、適宜修正してください。

---

# cssを読み込んでデザインを変えてみよう

## CSSの準備

- 下記の`css`ファイル作成後、`css_sample.html`をブラウザで表示し、確認してください。
- 赤塗りの正方形が表示されることが確認できます。

```css:Desktop/HTML_sample/css/sample.css
.sample1 {
  background-color: red;
  width: 100px;
  height: 100px;
}
```

- `class`に書いた名前は頭に`.`を付けます。
- `id`に書いた名前は頭に`#`を付けます。

---

# 画像を貼ってみよう

## 構成

```
Desktop/HTML_sample/
├── img            ← 追加
│   └── sample.png ← 追加
├── css
│   └── sample.css
└── css_sample.html
```

- `sample.png`は何でも構いませんが、サンプルを置いておきます。

![sample.png](https://qiita-image-store.s3.amazonaws.com/0/304414/e9bbd28e-bd43-8d7f-1765-48e76e83fd19.png)

---

# 画像を貼ってみよう

## imgタグを追加

```diff:Desktop/HTML_sample/css_sample.html
 <body>
   <div class="sample1"></div>
+  <img src="./img/sample.png">
 </body>
```

- `img`ファイルの参照パスはカレントディレクトリを起点として記述しています。（相対パス）

---

# おまけ(jQuery)

## jQueryとは

JavaScriptをシンプルに記述できるようにするためのライブラリです。

複雑なJavaScriptを簡潔に、短く表現できるようになります。

---

# おまけ(jQuery)

## jQueryを使えるようにしてみよう

```diff:Desktop/HTML_sample/css_sample.html
 <head>
     <title>初級CSS</title>
     <meta http-equiv="content-type" charset="utf-8" />
     <link rel="stylesheet" type="text/css" href="./css/sample.css" />
+    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
 </head>
```

jQueryの読み込み方法には、`WEB上から読み込む`、`ダウンロードして読み込む`の2種類があり、今回はWEB上から読み込みます。

---

# おまけ(jQuery)

## jQueryの使い方の簡単な説明

jQueryの基本構文は以下です。

```js
$(“セレクタ”).メソッド(“パラメータ”);
```

---

# おまけ(jQuery)

## jQueryを使ってみよう

## 構成

```
Desktop/HTML_sample/
├── js            ← 追加
│   └── sample.js ← 追加
├── img
│   └── sample.png
├── css
│   └── sample.css
└── css_sample.html
```

```diff:Desktop/HTML_sample/css_sample.html
 <head>
     <title>初級CSS</title>
     <meta http-equiv="content-type" charset="utf-8" />
     <link rel="stylesheet" type="text/css" href="./css/sample.css" />
     <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+    <script src="./js/sample.js"></script>
 </head>
```

```js:Desktop/HTML_sample/js/sample.js
$(function () {
  $("div").text("箱の中の文字");
});
```

---

# おまけ(jQuery)

## jQueryは他にも

文字色を変えたり

```js
$("div").css("color", "white");
```

クリックした時の処理を設定できたり

```js
$("div").click(function () {
  alert("クリックした！");
});
```

色々できます。
※JavaScriptでできることを簡潔に書けます。

---

# 最後に

- 社内で`HTML`、`CSS`の研修を行うときの題材にも出来るかと思います。
- 誰でも簡単に試すことが出来るので、これを期に興味を持って頂ける方がいれば幸いです。
- この記事を書きながら簡単に`HTML`と`CSS`を書いてみたので是非見てください。
  - [カラオケランキングページ - GitHub Pages](https://pure-adachi.github.io/html-training/)
  - [ソース - Github](https://github.com/pure-adachi/html-training)