2019/11/08
今日の日報
環境整備
インストールしたもの
- iTerm
- VSCode
開設したもの
学んだこと
はじめてのHTML
#01 プロフィールサイトを作ってみよう
わかったこと
- VScodeでサイトが作れる
- インターネット上に公開するためには別の勉強が必要
#02 ブラウザに名前を表示しよう
わかったこと
- 最初に表示されるファイルは「index.html」（一般的）
- VScodeはファイルを自動で保存してくれる（と言っていたけど、なってなかったので設定で自動保存にした）
- エディタ*1上で改行しても実際の表示では改行されない（タグが必要）
- VScode上のタブをブラウザにドラック＆ドロップすると表示される
#03 タグでマークアップしてみよう
わかったこと
- 見出しを表すHタグ（H＝Heading）
- 段落を表すPタグ（P=Paragraph）
- テキストをタグで意味付けすることをマークアップするという
#04 imgタグで画像を表示しよう
わかったこと
- imgタグはマークアップする文章がないため閉じタグがない
- src＝ソース
- フォルダの区切りは「/」を使う
- タグにつけるオプション情報を「タグの属性」と呼ぶ（例 imgタグの「width」「height」など）
- imgタグはaltタグをつけてあげると丁寧
- altタグは画像がうまく表示できなかった時の代替テキスト
- タグは大文字でも小文字でも良い（統一するのがよさげ）
#05 全角文字に気をつけよう
わかったこと
- 半角全角は気をつける（絶対半角！）（空白も要注意！！！！）
- プログラミング用フォントをインストールすると空白がわかりやすくて良い
わからなかったこと・疑問
- プログラミングようフォントなにいれたらいいんだろう（調べよ）
#06 文書全体につけるタグを見ていこう
わかったこと
- HTML文書には決まって最初に<!DOCTYPE html>*2と書く（閉じタグは不要）
- HTML文書は<html></html>で囲う
- 日本語文書という意味で、<html lang="ja">とする
- 文書自体に関する情報はheadタグで囲う
- 文書の本文はbodyタグで囲う
- headからbodyタグまでは字下げすると丁寧
- 字下げしたいテキストを選択＋tabキー＝一括字下げ
- 移動したいテキストを選択＋option＋矢印＝一括移動
#07 文書に関する情報を設定しよう
わかったこと
- headタグの中に、文字コード設定や、文書タイトル、favicon、文書の説明を明記しておく
- 文字コード*3はmetaタグ「utf-8」と書く*4
- 文書タイトルはtitleタグを使う（ブラウザのタブに表示されるテキストになる）
- chromeではfavicon.ico*5というファイルがあれば自動的にタブのアイコンにしてくれるらしい（なってなかった…）がちゃんとタグで明示しておくのが良い
- faviconはlinkタグを使う。ref属性をicon、href属性にファイル名を記載する。
- 文書の説明はmetaタグを使う。name属性をdiscription、content属性に説明を明記。*6
わからなかったこと・疑問
- ref属性、href属性、name属性、content属性というのが突然出てきたので、なんのときにどれを使えばいいのか今の所全然わからない
- faviconがlinkタグなのが謎だった（linkタグは名前の通りリンクを貼れるタグだと思っていたために）
目標
長期的目標
３０歳までに年収５００万（UIデザイナーとして）
短期的目標
静的なHTMLを書けるようになる
先生のお言葉
記憶を文字にする作業はエンジニアにとって呼吸と同じ
本日の感想
- たのしい。いちいち感激している。
- 英語がわからない。（翻訳にすぐ頼らないように頑張った）
- 英語を打ち間違えないか不安になる。
- shoota先生本当にありがとう…。
