KAT 初期トレ ３回目 １２・１７
こんにちは！たつきです！
昨日はKATの初期トレ3回目があったのでそれを振り返っていきたいと思います。
デザインの話もありましたが、実際に手を動かしながら勉強していきました。
画像ファイル
まず、学んだのは画像ファイルです。主に使われている画像ファイルの拡張子はこれらです。
Jpeg（.jpg）
主流。色移りがよく鮮明に保存できる。ただ圧縮すると画質等劣化することがある。iPhoneの画像もこの形式
Png（.png）
圧縮しても劣化しない。ウェブサイトにはこれが適している
Gif （.gif）
小さな画像に使いやすい、コマ送りができ、作成できる無料サイトもある。
https://www.bannerkoubou.com/anime/
この他にも次世代画像フォーマットというのがあり、さらに画質を良くしたものや読み込みを早くするため画質を劣化させあうにデータのサイズをさらに小さくしたものもあるそうです。
黄金比と白銀比
黄金比
黄金比とは1：1.618のことで人間が美しいと思う比率です。この比率はいろいろなところで使われており、Twitterのアイコンの体の丸みの部分やアップルのロゴの曲線にこの比率が使われています。
白銀比
白銀比は別名大和比とも呼ばれており、１：√2の比率となっています。大和比と呼ばれるように日本人になじみ深く、和風のデザインによく使われているようです。例でスカイツリーやキティちゃんがこの比率です。
今日学んだタグ
ここからは新しいタグを学んでいきました。
マウスを載せると画像が変わる
まず、したのは、
<imgsrc="./img/image1.png"
onmouseover="this.src='./img/image2.png'" onmouseout="this.src='./img/image1.png'">
です。この処理は、はじめサイト上に画像１を表示しておき、その画像にマウスを載せると、画像2に変わる。マウスを離すと画像1に戻るという動きになります。ホームページのバナーやボタンをクリックするときに使われています。
リスト化
次にしたのは、リスト化するタグです。
<ol>
<li>バイエルンミュンヘン
<li>パリサンジェルマン
</ol>
<ul>
<li>バルセロナ
<li>レアルマドリード
</ul>
<ol>は番号付きリストに、<ul>は箇条書きにしてくれます。
表
次に表を作るタグをしました。
<table border="1">
<tr>
<th>見出し</th><th>見出し</th>
</tr>
<tr>
<td>セル３</td>
</tr>
</table>
これによって、<tr>は表の行（横）を、<td>は表の列（縦）を、<th>は表の見出しを作ることが出来ます。
コメントアウトとyoutubeの埋め込み
<!--ここにテキストを書く -->
と書くとページには表示されない、コメントを残せます。他の人が見るときや自分が忘れてしまったときなどにその部分がどの要素か分りやすくするために使います。YouTubeの埋め込みは動画があるページの共有からコードをコピペすれば簡単に動画の紹介やリンク貼ることが出来ます。
HTMLの構造
もう一度復習がてら、構造について書きたいと思います。まず、htmlでは<head>タグと<body>タグに分かれます。<head> には、宣言文やタイトル、メタ情報を表します。<body>タグには見出しやメインコンテンツ、付随情報を表すところになります。僕たちが普段見ているホームページは、HTMLのボディの部分になるんですね。
ブロック要素とインライン要素
タグにはブロック要素とインライン要素があります。ブロック要素はhtmlの中でタグで表す部分が一つのブロックとして表され、ひとまとまりが分かりやすくなります。一方、インライン要素はまとまりにはなっていません。ブロック要素の中にインライン要素が入っている入れ子の関係にあります。ブロック要素は段落が変わるもの、インライン要素は段落が変わらないものとして覚えました！
まとめ
今日は少しデザイン的な話から新しく学んだタグ、HTMLの構造とブロック要素、インライン要素までを勉強しました。今日印象的だったのは黄金比と白銀比の話です。思ったよりもいろいろなところで使われていて、自分も動画を作るときに意識してみようかなと思いました。次の授業は1月26日の予定となっているので、HTMLをもう少し勉強するのとJavascriptも勉強していきたいと思います！
