HTML+CSS
【授業の方針】
最初はHTMLの部分のみをやっていく予定。
CSSも自習しやすいようにちょっとやっていくよ。
前回はサクラエディタの設定をやって、
first.html
second.htmlを作りました。
❤デフォルトのブラウザをクロームにする：（エッジの人はクロームにしましょう）
左下のWindowsアイコン→左の歯車アイコン→windowsの設定→アプリ→既定のアプリ→下のほうの「Webブラウザ」→Google Chromeに設定
❤エクスプローラー、second.htmlの上で右クリック
→プログラムから開く
→サクラエディタを選択
❤既定のブラウザ以外で開くときも同様
エクスプローラー、second.htmlの上で右クリック
→プログラムから開く
→Microsoft Edgeを選択
⭐UTF-8（ユーティーエフはち、ユーティーエフエイト）：
<meta charset="UTF-8">
文字コードをUTF-8にしてねーという話。（マルチバイト文字も使うよという宣言）
これを設定しないとシングルバイトしかちゃんと表示されず文字化けする。ざっくりいうと半角英数字記号がシングルバイト。それ以外がマルチバイト文字になる。（半角カタカナもマルチバイトになるとか。）
<html lang="ja">
ラング イコール ジェイエーと読む。
日本語ですよという話。
このサイトはどの言語ですというのを説明している。
「このサイトを翻訳しますか」と出てきたりするのは、このラングが英語(EN)だったりしたときに出てくる。
さっきグーグルクロームでは文字化けしないのにエッジでバクって表示された人がいたのはなぜか
→
クロームが気を聞かせて「これはUTF-8を入れ忘れたんだな」と考えた。
エッジはそういうことをしなかった。
<h1>2回目のhtml</h1>
一番目の見出しですよというマークアップ
じゃあこの終了タグを</h2>にしたらどうなるか？
→
これを確かめる手順：
１．サクラエディタで書き換える
２．ファイルを保存
３．ブラウザを「更新」すれば反映される
（サクラエディタがブラウザを立ち上げるというアイコンはないらしい）
→
実際書き換えてもエラーはでない！
→なぜか。
ちょっとした間違いであればブラウザが勝手に解釈して表示してくれる。（chromeさん「間違っていてほんとは</h1>のつもりだろう」）
→
だから逆にエラーがでないので、どこが間違っているか自分で突き止めないといけなくなるという、ちょっとありがた迷惑の側面もある。
自分でも授業のHTMLを変えてみて、どう挙動が変わるのかやってみるといい。
<!DOCTYPE html>
これは、ここから書いていくものは全部HTMLですよという宣言。
ここ以下、タグが使えるようになると思っていい。
グーグルクロームとエッジでみると字が違ってみえる。
→ブラウザのデフォルトで決まっているフォントが違うから。
クローム：ゴシック体で表示
エッジ：明朝体で表示
CSSのほうで「どのブラウザにしてもゴシックにしてね」ということができる。これ（フォント）は『見た目』の領域なので、CSSで設定する。
⭐インデント：
ソースコードを見やすくするために字下げすること。
ブラウザからしたらこれがあろうがなかろうが関係ない。表示は一緒になる。
タブキーでインデントするひとと、半角スペースキーでインデントする人がいる。日夜その両陣営で戦いが起こっている（冗談）
適当な場所で字下げをできて見やすくできるのもプログラミングの勉強の一部。
<!DOCTYPE html>
html5の書き方。別のバーしょんのHTMLならここの文章がまた変わる。
これはいわゆる「タグ」ではなく、ここから先HTMLですよという宣言なので、閉じるタグというのはない。
一方、<meta charset="UTF-8">にも終了タグはない。これは、範囲を指定する必要がないタグはこういうことがあるということ。
