ググる！勉強会：HTML、CSS編【第１回】

# ググる！勉強会：HTML、CSS編【第１回】
本日は、ググる！勉強会にお越しくださいましてありがとうございます。

## 本勉強会の目的
「実際にプログラミングしながら、ソフトウェア開発に必要なググり力(Google検索力)を身につけることです。」

第一回では、ここまで作ります。

![](https://i.imgur.com/EbUM0ji.png)

下の空白部分は、第二回の「JavaScript」編で作ります。

**注：本勉強会では、ググり方のテクニックを詳しく取り扱いません。**
**検索するための考え方を勉強します。**

<u>Google検索の詳細</u>については、以下の記事が非常に参考になります。
[![](https://i.imgur.com/9MXDveh.png)](https://www.sejuku.net/blog/879)

## Webサイトを構成する言語について
### HTML
![](https://i.imgur.com/htJVhgu.png)

HTMLは、Webページの**文書の各部分が、
どのような役割を持っているのかを示す**(マークアップする)ための言語です。

例えば、見出し・段落など、
文書の中で各部分が果たしている役割が分かるように目印をつけます。 

### CSS
![](https://i.imgur.com/v7CCvvT.png)

CSSとは、HTMLに色や大きさや背景などを加えて見栄えを良くするための言語です。

## HTMLタグの説明
これはタグではありませんが、ブラウザにHTMLで書いていることを宣言します。

```html
<!DOCTYPE html>
```
`head`タグは**htmlファイルの概要**を表します。
`head`タグ内に内容(文字や画像)を表示させることは出来ません。

```html
<head>
    <title>ググる！勉強会！</title>
</head>
```
`title`タグで、サイトのタブの名前を決められます。

![](https://i.imgur.com/YCHlsDG.png)


## オンラインエディタ「liveweave」を使いコーディング
### オンラインエディタ「**[liveweave](https://liveweave.com/)**」

### HTMLで内容を表示させていく！
`body`タグは、実際にWebページに**表示される内容**を表します。

`h1`は、大きな**見出し**を作るためのタグです。
`h5`まであり、数字が大きくなるごとに大きさが小さくなります。

`p`タグは、**段落を表す**タグです。
文章を書くときに使います。

モダンなWebサイトでは、全てに`p`タグを使い、文章の空白をとり、見やすくするケースが多いです。

`html`タグで**全てのタグを囲みます**
ブラウザにhtmlで書かれていることを示します。

以上のことを踏まえて、下のHTMLをコピー＆ペーストします。

```html
<!DOCTYPE html>
<html>
<head>
    <title>HTML, CSS and JavaScript demo</title>
</head>
<body>
    <h1>ググる！勉強会！</h1>
    <p>Webページには、様々な技術が使われています。</p>
    <p>この勉強会では、HTML、CSS、JSなどの言語を使い、</p>
    <p>１からWebサイト公開までの工程を体験できます。</p>
</body>
</html>
```

![](https://i.imgur.com/nDUndU4.png)

## CSSで背景に色をつけてみます。

Google検索では、
「**背景**」と「**やりたいこと**」
を単語に分解して検索します。

```
【背景】
CSSを使っている

【やりたいこと】
背景に色を付ける
```
[![](https://i.imgur.com/G6svgep.jpg)](https://www.youtube.com/watch?v=nwW4CDGucVs)

とにかく検索してみましょう:mag:

```
css　背景 色
```
**[Material Design Colors](https://www.materialui.co/colors)**
から適当な色を選ぶと目に優しい配色ができます。
[![](https://i.imgur.com/RrPKROK.png)](https://www.materialui.co/colors)

HTMLの`<p></p>`、pタグに色を付けます。

```css

p {
  background-color: #303F9F;
}
```

しかし、上記の方法で背景に色を付けた場合、
シマシマ模様になってしまいます。

そこで、**タグをグループ化する**(まとめる)タグ、
`div`タグを使います。

```html
<body>
    <div>
        <h1>ググる！勉強会！</h1>
        <p>Webページには、様々な技術が使われています。</p>
        <p>この勉強会では、これらの言語を使い、</p>
        <p>１からWebサイト公開までの工程を体験できます。</p>
    </div>
</body>
```
CSSで`color`は**文字の色**になります。

```css
div {
  background-color: #303F9F;
  color: white;
}
```

## 背景に隙間ができる
検索キーワード

```
css 背景　隙間
```

ブラウザがもともと余白を作っているようです。

「リセットCSS」と検索すると、
さらに余白や文字の太さまでをきれいに消すためのテンプレートが出てきます。

```css
body {
  margin: 0;
  padding: 0;
}
```

## 文字を中央に寄せたい
検索キーワード

```
css 文字　中央
```

`text-align: center;`を付け加えます。

```css
div {
  background-color: #303F9F;
  color: white;
  text-align: center;
}
```

## タイトルの背景の色を変えたい
先程のように`text-align:center;`
をつけるのですが、ひと工夫必要です。

この場合、タイトルの`h1`タグに「**属性**」をつけると簡単です。

CSSには、「`class`」と「`id`」という２種類の**属性**
が存在します。

この属性をHTMLのタグの中に書き込みCSSに認識させます。

「**class**」は、**複数回**使えるため、使い回したい要素に適用します。
「**id**」は、**１回しか使えない**ため、１つだけにしか適用したくない場合に使います。

HTML

```html
<body>
    <div>
        <h1 class="title-class">ググる！勉強会！</h1>
        <p>Webページには、様々な技術が使われています。</p>
        <p>この勉強会では、HTML、CSS、JSなどの言語を使い、</p>
        <p>１からWebサイト公開までの工程を体験できます。</p>
    </div>
</body>
```

`font-size`で文字の大きさを決められます。

CSS

```css
.title-class {
    text-align: center;
    color: #303F9F;
    font-size: 50px;
    background-color: white;
}
```

文字を中央にすると同時に、
背景を白色にしてみました。


「**class**」では、`.`+クラス名 をつけることでCSSが反映されます。

「**id**」は、`#`をつけます。

## タイトル(文字)の上下の余白を設ける
検索キーワード

```
css 文字　上下　余白
```

`line-height: 100px;`
を使います。

CSS

```css

.title-class {
    line-height: 100px;
    text-align: center;
    color: #303F9F;
    font-size: 50px;
    background-color: white;
}
```

## 画像を表示してみる
検索キーワード

```
html 画像　表示
```

```html
<img src="https://i.imgur.com/L11kB5t.jpg">
```

```html

<body>
    <div>
        <h1 class="title-class">ググる！勉強会！</h1>
        <p>Webページには、様々な技術が使われています。</p>
        <p>この勉強会では、HTML、CSS、JSなどの言語を使い、</p>
        <p>１からWebサイト公開までの工程を体験できます。</p>
        <img src="https://i.imgur.com/L11kB5t.jpg">
    </div>
</body>
```

:bell: 画像(`img`タグ)を直接`text-align:center;`で中央に寄せることはできません。
そのため、`div`などのタグで囲んであげる事で、中央に配置できます。


## 全体の背景の色を変えたい
検索キーワード

```
css　全体　背景　色
```

```css
body {
  margin: 0;
  padding: 0;
  background-color: white;
}
```
## 青い背景の高さを指定したい
＝ `div`要素の高さを指定したい

検索キーワード

```
css 要素　高さ
```

```css
div {
  background-color: #303F9F;
  color: white;
  text-align: center;
  height: 500px;
}
```

高さの単位は`px`だけでなく、`%`や、ブラウザの高さ(ビューポート)の高さに対する割合`vh`もあります。

## 全コード
### HTML
```html

<!DOCTYPE html>
<html>
<head>
    <title>HTML, CSS and JavaScript demo</title>
</head>
<body>
    <div>
        <h1 class="title-class">ググる！勉強会！</h1>
        <p>Webページには、様々な技術が使われています。</p>
        <p>この勉強会では、HTML、CSS、JSなどの言語を使い、</p>
        <p>１からWebサイト公開までの工程を体験できます。</p>
        <img src="https://i.imgur.com/L11kB5t.jpg">
    </div>
</body>
</html>
```

### CSS
```css

div {
  background-color: #303F9F;
  color: white;
  text-align: center;
  height: 500px;
}

.title-class {
    line-height: 100px;
    text-align: center;
    color: #303F9F;
    font-size: 50px;
    background-color: white;
}

body {
  margin: 0;
  padding: 0;
  background-color: white;
}
```
![](https://i.imgur.com/ZacY7nd.jpg)


下の部分が寂しいですが、
次回の第２回JavaScript編でコンテンツを作ります。

JavaScript(JS)が使えると、下図のような画像スライダーが実装できたりします。

![](https://i.imgur.com/4flAKPT.png)

最後にアンケートにご協力ください。


デザインでやりたいことがわからないよ！
そんな人のために
[MUUUUU.ORG](https://muuuuu.org/)
[![](https://i.imgur.com/kHycg2l.png)](https://muuuuu.org/)

[SANKOU!　Webデザインギャラリー・参考サイト集](https://sankoudesign.com/)
[![](https://i.imgur.com/hvnio91.png)](https://sankoudesign.com/)
## 最後にアンケートにご協力ください

### [ググる！勉強会：第１回アンケート](https://forms.gle/mgBfL6gNYF336zUq6)

以上で、ググる！勉強会の第１回：HTML、CSS編を終わります。
**ありがとうございました。**

## 本勉強会で得られた知見
本勉強会は、外出自粛の影響でオンライン勉強会になりました。

Zoomで繋がり、[HackMD](https://hackmd.io/)で教材を配布しました。

### アンケートの実施
今回、本勉強会には、１１人の方が集まりました。
そのうち、８人の方がアンケートに答えて頂きました。

#### 年齢層
１年生：７５％
３年生：２５％
となりました。

`１年生推奨`と宣伝で書いたため、１年生が多かったのではないでしょうか。
３年生は、院生の先輩が呼び込んできてくれたおかげかと思います。
ありがとうございます:pray:

**意外な点：**
２年生が０人は意外でした。
理由は不明ですが、

- 対象：`１年生推奨`だから。
- HTML、CSSが簡単すぎる。

などの理由が考えられます。


次回勉強会では`JS`を題材にしますが、

- 対象：`全学年`
- 告知ページの技術力を高くする
- ２年生に直接声をかけてみる

事により興味を引けるのではないでしょうか。

### アンケートの結果
全体的に好評でした。
しかし、以下の様な意見も見られました。
`説明している設定の必然性があまりわからない`
`説明していない単語が多い`

これは、アンケート以外の意見ですが、
`専門知識が多くついていけない`
という意見もありました。


これらは、一言で言うと`説明不足`ですが、
`説明している設定の必然性があまりわからない`
ー＞行っている設定がどこで応用できるかを画像を付けて説明する。

`説明していない単語が多い`
ー＞心持ち、出てくる単語全てに説明するしかない、、、。

`専門知識が多くついていけない`
ー＞コードにコメントで補足する。

### 勉強会後に話し合って得られた意見
`宿題を出してみる。`
slackに１問だけググる問題出しておくと
勉強会直前に調べるのではないかと、、、。

`Zoomで反応を見るためPCを２台使う。`
いいですねこれ！

### オンライン勉強会のメリット・デメリット
#### メリット

- 起きてすぐ勉強会に参加できる。
- ネットが繋がる前提ができる。
ー＞繋がらないとZoomに参加できないため

#### デメリット
- 個別に見れない

#### 新しく得られた知見
遅刻する人が多い。
ー＞実際に行くよりも楽だからでしょうか。
だからこそ、興味を持って貰えるように工夫する必要があると考えました。

コピペ方式はオンラインでも割とうまく行く。
ー＞超初心者の方もおられましたが、順調に進みました。
コードの差分が分かりにくくなったため、何が違うかを明解に強調し、
説明する必要があると考えました。