目次
授業の準備
Microsoft Teamsにログインし、授業の会議に参加してください。
前回の復習
前回の知識問題
- 白と黒で構成されたデザインで、強調するのに適していない色はどれですか
- 黒
- 赤
- 青
- 黄
- 緑
- 「危険」を知らせるのに適している色はどれですか
- 赤
- 青
- 紫
- 緑
- 白
- 「改行」を表すHTMLタグはどれですか
- br
- section
- p
- ul
- ol
- 「任意の範囲」を表すHTMLタグはどれですか
- span
- br
- body
- a
- html
- グループ化するためのHTMLタグはどれですか
- div
- body
- dd
- span
- head
色を数値で表す
RGBとCMYK
コンピューターなどで色を取り扱う際、色を表現するために用いる代表的な方法
| RGB | Red、Green、Blue 画面で出力する際に使います |
|---|---|
| CMYK | Cyan、Magenta、Yellow、Key Plate 印刷で出力する際に使います |
Webサイト制作と色
- RGBの組み合わせで色を表します
- それぞれ０〜255で指定できます
- つまり、256×256×256＝16,777,216色（約1,670万色）を表現することができる
- RGBの組み合わせの例（基本）
- Rが0、Gが0、Bが0 → Black
- Rが255、Gが255、Bが255 → White
- RGBの組み合わせの例（2つが0）
- Rが255、Gが0、Bが0 → Red
- Rが0、Gが255、Bが0 → Green
- Rが0、Gが0、Bが255 → Blue
- RGBの組み合わせの例（2つが255）
- Rが255、Gが255、Bが0 → Yellow
- Rが255、Gが0、Bが255 → Pink
- Rが0、Gが255、Bが255 → Light Blue
いろいろな色がどんな数値になるのか確認してみよう
16進数で色を表す
- 16進数（Hex：Hexadecimal）で色を表すこともできます
- 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F、の16桁
- 0が最小値、Fが最大値
- 「#」をつけて表現します
- HEXの例（基本）
- #000000 → Black
- #FFFFFF → White
- #FF0000 → Red
- #00FF00 → Green
- #0000FF → Blue
- #FFFF00 → Yellow
- #FF00FF → Pink
- #00FFFF → Light Blue
いろいろな色がどんな数値になるのか確認してみよう
コンピューターと画像
Webサイト作成で扱う画像形式
| JPEG（ジェイペグ） | 主に写真 |
|---|---|
| PNG（ピング） | 主にイラスト、写真も対応可、背景透過できる |
| GIF（ジフ） | 主にアイコン、アニメーション |
| WebP（ウェッピー） | 万能な新しい形式 |
| HEIC（ヘイク） | iPhoneで撮影した写真 |
| BMP | 古い形式、容量が大きい |
復習）拡張子について
ピクセルと解像度
ピクセル
画像は「ピクセル」という小さな点で作られています。各ピクセルはRGBの明度、位置、透明度などの情報を持っており、それらを組み合わせて一枚の画像が作られています。
解像度
1インチあたりのピクセル数のことを「解像度」といいます。
- 解像度が高い＝美しく詳細な画像
- 解像度が低い＝汚くぼやけた画像
- 解像度の単位は「ppi（pixel per inchi）」です
- Webサイトでは解像度が72ppi以上がおすすめ
- 印刷では解像度が300ppi以上がおすすめ
画像の大きさ
- 画像の大きさは縦横のピクセル数（px）で指定します
- 画素数（がそすう）＝総ピクセル数
- 例えば、フルHDの画像では1920px×1080px＝2,073,600px
いろいろな画像サイズ
| HVGA | 480×320 |
|---|---|
| VGA | 640×480 |
| フルHD | 1920×1080 |
| 4K（フルHDの4倍） | 3840×2160 |
| 8K（フルHDの8倍） | 7680×4320 |
HTMLタグ
実際に使われているHTMLタグを学んでいきましょう。
いずれも<body>タグの中に記述していきます。
「index_09.html」をダウンロードして、Visual Studio Codeから開きます。
HTMLタグ（画像）
- 「image」に由来
- src属性（source）：画像のURLを指定します
- alt属性（alternative）：画像を説明するテキストを指定します
- 終了タグ（</img>）は不要です
| <img> | 画像を表示する |
|---|
<img src="画像のURL" alt="画像の説明">- Googleで「自分の国の国旗の画像」を検索しましょう
- 画像形式を確認して、デスクトップに保存しましょう
- 画像の名前は画像形式に応じて「flag.jpg／flag.png／flag.gif」のいずれかにします
- 「index_09.html」を編集して、imgタグを使い画像を表示しましょう
- 保存したらWebブラウザから確認しましょう
課題の提出
課題を提出しましょう。
CampusApp
- 「出欠・課題」から提出しましょう
- 課題セクションにある今日の授業の欄から提出できます
知識問題
今日の授業内容を知識問題で復習しましょう。
CampusApp
- CampusAppの「CBT（知識問題）」から、知識問題にチャレンジしましょう
- 100点が取れるまで、繰り返し挑戦しましょう
- 期末の定期試験は知識問題の中から出題します
パソコンの再起動／シャットダウン
授業の終わりに必ずパソコンを再起動（次に他の授業がある場合）、またはシャットダウン（次に他の授業がない場合）してください。