2019/11/20

今日の日報

学んだこと 

これまでの疑問解決を進める

CSS基礎学習において「わからなかったこと・疑問」にあげていた内容について調べた(Shoota先生のコメントにて解決したものに関しては記載していない)

 

末尾につく「;」は閉じタグ的な存在なのかな

ー#04 フォントを設定していこう 

わかったこと

  • 宣言が1つの場合はセミコロンは不要
  • 宣言が複数の場合は「;」で区切る必要がある

 

  • 指定フォントがなかった場合というのは、環境的に持っていないということなのかな(古いPCだと持ってなかったり、ということなのかしら)

  • なかった場合のゴシック体も環境によって様々になるのかな…(windowsだったらMSゴシックとか、Macだったらヒラギノ角ゴとかそういうこと?)

ー#04 フォントを設定していこう 

わかったこと

  • 設定されたフォントが表示されるかどうかは閲覧側の環境による
  • PCに指定したフォントがなければ、ブラウザのデフォルト設定になる

わからなかったこと、疑問

  • MacWindowsのデフォルトではいっているシステムフォント一覧を見たかったのだけれど見つからなかった…(2017年の情報はあった↓)

    mw-s.jp

 

CSSのボックスモデルの説明(概念)が全然理解できなかった…(とりあえず進めてみて、理解できるかもしれないので一旦置いておこう…)

ー#05 CSSのボックスモデルを確認しよう 

わかったこと

  • HTML内に記述したタグはコンテンツを表示するための四角い領域を生成する
  • これ(↑)を「ボックス」という
  • 「ボックス」は4つの領域で構成されている(「content area」「padding」「border」「margin」)
  • content area …実際の内容が表示される部分
  • padding …要素の中に保持される余白(content areaとborderの間にある領域)
  • border …要素の境界(content areaとpaddingを囲んでいる枠線)
  • margin*1 …隣接する要素との余白(borderと他の要素の間にある領域)
  • このような要素が展開する領域の考え方を「ボックスモデル」と呼ぶ

 

各要素が四角の中に入っていて、divタグに入れるとさらに大きな四角にいれるみたいな感じなのかな

ー#05 CSSのボックスモデルを確認しよう

わかったこと

  • divタグは単体では意味を持たない
  • divタグで囲った要素をブロック要素としてグループ化できる

shoota先生の講座を受けて

わかったこと

  • Cascadingは「階段状の滝のような」「連鎖的に伝わる」という意味
  • CSSは上流で定義されたものが下流へ引き継がれて文書に適用される(上書きされる)
  • マークアップしただけでスタイルがかわるのは、ブラウザが標準で持っているCSSがあるため(文字色は黒とか)
  • HTML=表示するものの構造を示すもの(書式を指定)(まとまりをつくる=構造化)(スタイルには関与しない)

  • classはあらゆるHTMLタグにつけられる
  • HTMLの中にCSSをかくことはできるけど、別ドキュメントでつくる(複数ページで共通のスタイルを使うときに効率的)
  • gitはバージョン管理システム
  • git学習のあとは、はてなブログの記事文をHTMLで書いてみる予定(答えを見ながらやる=見た目とタグの一致)

本日の感想

  • 調べる中でそのものの意味を理解できたこともよかったけれど、それよりもわからなかった部分が明確化できたのがよかった
  • Flexboxについては明日調べる
  • わかっているつもりのことが言葉にできるレベルの理解に至っていないことに気づいた
  • 対面(?)で教えてもらえるありがたさよ…

*1:色の指定ができない