2019/11/12
今日の日報
学んだこと
はじめてのCSS
#03 色の表現方法を学んでいこう
わかったこと
- １つのセレクターに対して、複数のプロパティを設定した場合、後から書いた方が優先される
- rgbのカラー指定は各色を0から255の数字で指定する
- 16進数*1で指定する方法もある（#を書いた後に16進数を書く）
- red、green、blueで同じ文字が続く場合は、それぞれを一文字で表現してもOK（例 #00ff00 → #0f0）
- 透明度の設定、色相彩度、明度を指定する方法もある
- CSSでコメントを書きたい場合は /* */で囲う（HTMLと同様のショートカットが使える→command+/）
#04 フォントを設定していこう
わかったこと
- 文書全体のスタイルはbodyに書く
- font-familyを使ってフォントの指定ができる
- font-family: Verdana, sans-serif; ←Verdanaを使ってね。なかったらゴシック体フォントを使ってね、という意味になる
わからなかったこと、疑問点
- 末尾につく「;」は閉じタグ的な存在なのかな
- 指定フォントがなかった場合というのは、環境的に持っていないということなのかな（古いPCだと持ってなかったり、ということなのかしら）
- なかった場合のゴシック体も環境によって様々になるのかな…（windowsだったらMSゴシックとか、Macだったらヒラギノ角ゴとかそういうこと？）
#05 CSSのボックスモデルを確認しよう
わかったこと
- 背景色の指定は「background-color」というプロパティで指定できる
わからなかったこと、疑問点
- 「HTML で書いたそれぞれの要素がブラウザで表示されるときにはこのような四角い領域を確保してくれます」？？？どのような…？？？
- CSSのボックスモデルの説明（概念）が全然理解できなかった…（とりあえず進めてみて、理解できるかもしれないので一旦置いておこう…）
→#7を見て「このような四角い領域」というのは、各要素が四角の中にいるということなのかなと思った（四角が並んでいるという風に考えるということ？なにも設定をしていなければ）
#06 marginで外側の余白を設定しよう
わかったこと
- マージンはmarginを使って上下左右設定できる
- 上：margin-top
- 下：margin-bottom
- 右：margin-right
- 左：margin-left - 上下左右が同じ数値の場合は「margin: 0px;」でまとめて設定できる
- 0pxの場合は単位を省略することも多い
わからなかったこと、疑問点
- 0px以外は単位を省略できないのか
→別の数値で試してみたら反映されなかった
#07 divタグを使ってみよう
わかったこと
- HTMLではレイアウトのためのdivタグというものが用意されてる
- 入れたい要素をdivタグで囲う
- どのdivかを判別できるように識別子をつけてあげる（例 div class="任意のクラス名"）
- スタイリングのための識別子にはClass属性が使われる
- CSSのセレクターでは、Class属性をつけた要素を .クラス名 で表現できる
- 中央寄せにしたいときは、左右のmarginをautoに設定するテクニックがよく使われる
- margin-right: auto;
margin-left: auto;とすると余った領域を左右に均等に割り当ててくれる
わからなかったこと、疑問点
- 各要素が四角の中に入っていて、divタグに入れるとさらに大きな四角にいれるみたいな感じなのかな
先生のお言葉
CSSはhtmlよりも覚えることがおおく、基礎的な知識と実践の距離が比較的大きいので、混乱することもあるかもしれないけども、ひとつずつ経験して理解できていくから、自分がわからないことをしっかり掴んで言語化できるとよいですね
本日の感想
- HTML基礎より理解に時間がかかる。（HTML基礎は聞いてスッと理解できたけど、CSS基礎は一度噛み砕く作業が必要…）
- これはHTMLに書く、これはCSSに書く、という違いがわからなくてちょっと混乱している。
*1:16進数とは、0から9までの10個の数字と、AからFまでの6個のアルファベットを使って数値を表現する方法である。
2019/11/11
今日の日報
学んだこと
はじめてのCSS
#01 はじめてのCSSを書いてみよう
わかったこと
- CSSの書き方は色々ある
- 方法のひとつとして、head要素の中にstyleタグで書いていく方法がある
- 該当のタグを指定して、{}の中に設定を書く（例 h1 {color: red;} ）
- VScodeは色見本を表示してくれる
- CSSはどこにどのようなスタイルをあてていくかの設定
- どこに＝「セレクター」、どのような＝「プロパティ」
- 別ファイルで管理しても良い（style内の記述が長くなってしまう場合）
- 別ファイルの場合は、CSSファイルを読み込むためのタグをhead要素内に書く
<link rel="stylesheet" href="css/styles.css"> - 新しく作ったCSSファイルにstyleタグ内に書いた内容をそのまま書けばOK
#02 デベロッパーツールを使ってみよう
わかったこと
- 設定したCSSがブラウザでどう解釈されたかデベロッパーツールで確認できる
- HTML/CSSの学習に限って言えば、Elementsパネルが使えればOK
- Elements パネルの左側ではブラウザが解釈した HTML、右側では CSS で設定されたスタイルを確認できる（私はデベロッパーツール右側に表示されたので、上下だった）
- 調べたい要素を右クリックして「検証」とやっても開ける
- user agent stylesheet＝ブラウザが標準で持っているCSS
- computedタブでは設定しているスタイルをまとめて一覧で見ることができる（アルファベット順に並んでいる）
- Show all チェックで親要素から引き継いでいるスタイルも含め、全てを見れる
本日の感想
- CSSの勉強がはじまった（全然進められなかった）
2019/11/10
今日の日報
学んだこと
はじめてのHTML
#11 sectionタグを使ってみよう
わかったこと
- sectionタグは汎用的に使える（sectionタグの中にsectionタグが入ることも大いにある）
- Hタグはsectionタグ内ごとでの優先順位でつける
わからなかったこと・疑問
- bodyタグ内のheaderタグ、footerタグ以外のかたまりはsectionタグになるのか？（今後他にもでてきそうだけど、いまのところsectionに対する使い方がそんな認識）
#12 ulタグでリストを表現してみよう
わかったこと
- ulタグ＝リストを表すタグ
- ul＝unordered list→順番のないリスト→箇条書き
- それぞれの項目はliタグで囲む
- li＝list item
- HTMLは文書の意味を考えて適切なタグを使う（見た目の調整はあとで行う）
#13 外部サイトへのリンクを設定しよう
わかったこと
- リンクはaタグを使う
- aタグ＝anchor
- リンク先の設定はhref属性を使う
- 別タブにしたい場合は、target属性を使って target="_blank" とする
わからなかったこと・疑問
- 初日にも思ったけれど、href属性の説明は特になく進んでいるのでどういう時に使うものなのか不明（調べてみよ）
#14 HTMLの仕様を確認してみよう
わかったこと
自分で調べたこと
- href属性について
いまのところ、経験と合わせるとリンクアンカーの移動先指定の際に使う属性という認識href 属性は、a 要素、area 要素、link 要素におけるリンクアンカーの移動先や base 要素における基準 URI の設定するための属性です。
- プログラミング用フォントについて
日本語対応フォント、英字フォントがある。それぞれ以下のように種類がある。（たしかかえるさんがRictyを使っていたような…）
（どれがおすすめか、shoota先生にお伺いをたててみよう）
日本語対応フォント
Source Han Code JP
Cica
Myrica
Ricty Diminished
VLゴシック
Migu 1M
英字フォント
Monoid
Hack
Fira Code
先生のお言葉
できるだけわからなかったこと、疑問を考えてみよう。
よいエンジニアは些細なことに疑問をもつ。
与えられた情報に対して、常に疑う心をもつと思考が深まる。
学習は
1.知らない
2.知ってるがわからない
3.わかるが、できない
4.できる
5.人に教えられる
といったステップを踏む
2から3のときにちゃんと疑問を質問にできるか、資質が問われる
5ができるかどうかはまた別
本日の感想
- HTML基礎が終了した。かなり基礎とはいえ、「ソースでなんとなく見たことある」ものの意味を知ることができてかなり感激＆進歩だった。
*1:MDNで調べられる
2019/11/09
今日の日報
学んだこと
はじめてのHTML
#08 文書の本文を書き込んでいこう
わかったこと
- Hタグは重要度に応じてh1、h2、h3…とする
- 複製したい行選択＋option＋shift＋矢印キー＝選択した行の複製
#09 コメントタグを使ってみよう
わかったこと
- コード内にメモを書きたいときは<!---->とすればブラウザ表示されることなくメモできる（ソースには表示されるので機密情報は書かない！）
- 実行結果に関係ないメモ書きを「コメント」という
- コメント切り替えはcommand＋/
#10 header､footerタグを使ってみよう
わかったこと
- 文書内のテキストをかたまりごとにまとめるためにheaderタグ、footerタグを使う
- headタグとheaderタグが混同されがちなので気をつける
- headタグ＝文書全体に対する情報を入れるもの
- headerタグ＝bodyタグの中で使うヘッダー的な要素を入れるタグ - headerタグ、footerタグは複数書くこともある
わからなかったこと・疑問
- VScodeでタグを入力するとき、閉じタグ自動的にでてくる？（毎回丁寧に入力しているのだけど、動画見ていると自動で閉じタグがでてきているようにみえたため）
本日の感想
- ちゃんと表示されなかったときどこが違うのかわからなくて焦った（画像のディレクトリをちゃんと書いてなかった）
- たのしい
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先生本当にありがとう…。
