20210327_アウトプット（HTML・Rails）

アプトプット画像

やったこと

HTML（フィヨルド）３時間４５分
SPI　１時間３０分
Rails　１時間

学んだこと

HTML5の基本を理解する

HTMLを書くときに必ず必要な要素たち

<!DOCTYPE html>　🌟１・・DOCTYPE宣言
<html lang="ja">　🌟２・・属性で日本語指定
    <head>
        <meta charset="UTF8">　🌟３・・属性で文字コードを設定
        <title>HTMLを勉強したよ</title>　🌟４・・タイトルを入れる
    </head>
    <body>　🌟５・・ボディ内に本文記載
        ピヨ
    </body>
</html>

疑問１：なぜ、一番最初に< !DOCTYPE >って書くの？🤔

結論：「HTML5で記述します」という意味になるため。

宣言しないと、どの仕様書にそって書かれたHTMLか判断できないことから、「標準準拠モード」ではなく「互換モード」になってしまい、レイアウトが崩れてしまうことがある。
HTML5より前は、使用可能な要素や属性、要素の配置ルールを定めている仕様書を、厳格さによって指定しないとHTMLを使えなかった。
その仕様書をDTD(Document Type Definition)という。

プチ知識：HTMLの最近の歴史

年	内容	補足
1999	HTML4.01	HTMLは文書構造のみ、デザインはCSSに移行
2000	XHTML1.0	XMLの文法で再定義されたHTML（HXLの書き方も使えるhtmlのこと）
2014	HTML5	よりコンピュータにも理解しやすいHTML

疑問２：属性ってなんだっけ？🤔

結論：その要素が持つ性質（細かい設定）のこと。半角スペースで繋げていくつも指定できる。

<html lang="ja">
htmlの、言語は、日本語です。

<要素名　属性名="属性値">
　要素内容
</要素名>

疑問３：なぜUTF-8って書くの？文字コードを指定しないとどうなる？🤔

結論：テキストエディターと、ブラウザの文字コードを一致させるため。一致しないと文字化けする。

一般的にはタイトル要素の上に書く。（titileの文字コードにも関わってくるため）
UTF-8とは、世界的にも最もポピュラーな文字コード。
ちなみに、HTML5になって、文字コードの指定はスッキリしたけれど、HTML5より以前の文字コードの指定は異なるので注意。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

疑問４：（終了タグの先頭ではなく）たまに要素の最後にスラッシュがついているのは何？🤔

結論：XHTMLの空要素の書き方ルール。

そもそも、要素には終了タグが必要なものと、必要のないものがある。
必要なものは、「ここからここまではこの要素をあてるよ」（範囲の指定）が必要な場面で使う。
必要のないものは、部分的な要素の指定で使う。
終了タグが必要ない要素を「空要素」という。
XHTMLの空要素の時だけ、半角スペースと/(スラッシュ)が必要というルールがある。（つまり、HTML5のときには特段書かなくても大丈夫）

<空要素 />

 <meta charset="utf-8" />

HTML5の文章の階層構造

マークアップは「装飾」のためではなく、「意味づけ」のために行う。（🐶「意味づけ」をかっこよく英語で言うと「セマンティクス」と言う。）
「意味づけ」の役割を果たすために、大切な概念が「アウトライン」である。
「アウトライン」とは「文章の階層構造」である。

アウトラインってどうやって作るの？🤔

【大きく２つ】

hタグのhレベルで作る方法。
article（主要なコンテンツ）・section（章）・aside（余談・補足）などのブロックを使い、作る方法。

【ポイント】

一つの section（sectionに限らず、article、asideなどの場合も同様）の中に、同じhレベルであるh1は一つまで！
ブロックで区切った場合、見出しは、全てh1でも可能。
暗黙的アウトラインといい、sectionは見出しを必要とする。
入れ子構造にしたときに、階層レベルがごちゃごちゃにならないようにする。（例えば、「孫」の中に「子」を入れるはだめ！）

その他、勉強になったこと

timeタグ

日付と時間はtimeタグで表現すること👀！

<time datetime="2090/12/21T19:00">2090年12月21日 19:00</time> 〜 <time datetime="2090/12/21T23:00">23:00</time>

マークダウンを使ってHTMLを書く

表において、下記機能があるのを知らなかった👀！（フィヨルドブートキャンプの日報では結合出来なかったの方言でできるのと出来ないのがあるのかな？）
また、他にも結合の方法は方言があるようだと思ったので、使うときにその都度調べようと思った。

https://b1tblog.com/2019/10/08/vscode-markdown2/

adiaryマニュアルより↓

> : 右に結合
< : 左に結合
~ : 上に結合
_ : 下に結合

Railsについて

エラーメッセージ（Rails）

macのバージョンアップ後、新規でアプリ作成したところ、local3000でエラー。
調べたらMySQLについてバージョンを5.6から8.0にしたことによりエラーになってしまった様子。
１時間くらい詰まっていたが解決せず。明日に持ち越し。

感想

理解したつもりが、実際に書いてみたら見出しやセクションを書き間違えていた。実際に手を動かすことは大事。初めて提出物を出した。
今までドックタイプ宣言や、メタタグ（エンコーディング）意味を理解しないまま、書いていたところがあった。この機会に新しい学びになった。
「本気で学ぶHTML」のYOUTUBE分かりやすい！音声は、前回学んだターミナルで話しているのかな？
HTMLってこんな奥深かったんだと感じた。
構造がしっかりしているとcssで装飾しやすいと思うため、HTMLの構造について理解が深まって良かった。