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