---
# System prepended metadata

title: 2期生 演習内容 2020/10/11
tags: [SAiTech]

---

# 2期生 演習内容 2020/10/11 
###### tags: `SAiTech`

## 使用するプレゼンテーション
[SAiTechオリエンテーション①](https://docs.google.com/presentation/d/1PilD3w8ObHtLfQgba_VoHrf32TglnNyhY4Rsf5xjxc8/edit?usp=sharing)


## ワークショップ１

### 学校のレポートや会議用のプレゼン資料をつくる場面を想像してください。
### 見る人にできるだけ分かりやすく内容を伝えるためには、どのような工夫が必要でしょうか

| お名前      | 工夫すること |
| :--------: | ---------  |
| (例)上島 | 文字に色を付ける |
| 山崎さん   |   文字の大きさを変える 。画像、動画を載せる。余白をつける。フォントを揃える。        |
| 西郷さん   |   色使いをシンプルに。文はなるべく簡潔にまとめる。所々画像を入れる。フォントをシンプルなものにする。  改行。      |
| 加納さん   |フォントを工夫。色を付ける。改行。段落分け。画像、リンク貼り付け。生徒に対する問いかけを作る。エビデンスとなるデータ資料添付。参考文献。タイトル。            |
| 吉田さん   |分かりやすいようにイラストやグラフなどを多めにし、文字は最低限にする        |
| 金井さん   |余白を入れる、文字の大きさの調整、タイトル入れる            |
| 梅本さん   |            |　
| 椎谷さん   |内容に合わせて、段落分けをしっかり分ける　 文字だけではなく、図や表を入れる 　|
| 井口さん   |列を揃える。画像を入れる。色をつける。文字の太さ。フォントを揃える。            |
| 佐々木さん |            |
| 雨宮さん   |文字の大きさを変える、画像を入れる、文字色、段落等            |
| 鈴木さん |            |
| 吉岡さん |  あいうえお順にする。　列をそろえる。          |



## ワークショップ2

### 参考画像
![](https://i.imgur.com/LEtKNaV.png)

### 基本ソースコード
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Sample Page</title>
    <style>
      /* ここの下に書き込む */
      <style>
    </style>
  </head>
  <body>
    <h1>プログラミングとは</h1>
    <h1>Web開発のながれ</h1>
    <div>
      <h2>HTML概要</h2>
      <ol>
        <li>HTMLとは</li>
        <li>HTMLの文法</li>
      </ol>
    </div>
  </body>
</html>
```

- ３つ目の大見出し（HTML概要）だけ、文字色を赤色にしましょう
- ３つ目の大見出し（HTML概要）と、続く箇条書き（HTMLとは、HTMLの文法）を枠線で囲い、背景を黄緑にしましょう

黄緑...greenyellow

##### 参考（ヒント）
- https://www.w3schools.com/html/html_classes.asp
- https://www.w3schools.com/html/html_id.asp
- https://www.w3schools.com/html/html5_semantic_elements.asp


## 課題

#### 提出不要
[2020/10/10 HTML & CSS & Javascript課題](https://docs.google.com/spreadsheets/d/1yMbBHUUIHEhBaYIjUtEzKsCziF5ikFJBKVa2ZTn-SRY/edit#gid=1968886852)

#### オリジナル自己紹介ページ作成
#### 提出は次回
提出の仕方は次回の授業でやります。
第三回目の授業までには提出をしてもらいます。
