9/1 Tech Expert (事前学習) day 2 / html/css終わらずヒヤヒヤ中…

【学習アウトプット】

#今日の目標(やること)
昨日勉強した分を復習がてら簡易にまとめる。
HTML/CSSを終わらせる
Ruby半分くらいまではやる！

今日はもうちょっとノウハウをみて、明日からはしっかりタイムスケジュールを組もうと思う。

##昨日のまとめ

ページの構成を全て「箱とテキスト」して捉える
HTMLで文字や画像などの骨組みコンテンツツールをかきだし（陣地取り。ブロック。箱。）
CSSで色を大きさ、配置etcを整理してその“箱”を装飾
箱ごとに役割分担がある。（見出し、段落、リスト、画像etc）

“タグ”を使って箱の種類を表す
見出しタグ→<h1>〇〇</h1>
段落タグ→<p>〇〇</p>
リストタグ→<li>〇〇</li>
画像タグ→<img>
etc...

開始タグ< >と終了タグ >で囲まれるものと、
終了タグ無しで、開始タグのみのものとがある

###HTML構造
head要素とbody要素で成り立つ。
head要素:サイト全体にかかる、設定事項（言語の種類タグとか『このサイトはHTMLで構成されてるからね！』とブラウザに宣言するタグとか諸々）
body要素:目に見える部分。(見出しや文章、画像など、サイトの見た目そのまんま。)

<要素名 "属性名"=属性値>
例）
【リンク】 a href ="http://〇〇"
【その文章に関する情報】 meta charaset ="UTF-8"
【画像】img src = "〇〇"　alt = "〇〇（画像の説明）"

####コメント
<!-- 〇〇 -->

####head要素
title
meta
link
script(java script)
etc...

####body要素
(CSSとHTMLのイメージ勉強の為、大幅割愛)

“箱”の中に“箱”を入れることが出来、それぞれ親要素、子要素と表す。

####HTMLの箱の種類
ブロック要素:長方形の長い箱　div要素
インライン要素:一部範囲（連続して横に並べられる）　span要素

###CSS
HTMLファイルにCSSファイルを結びつける必要がある。
→htmlのheadに
　<link rel="stylesheet" href="style.css">

例)
h1{color:red;}
(htmlファイル内のh1のcolerをredに。)

####idとclass(属性)
htmlの“箱”とCSSを結ぶ役割。（htmlとcssで名を合わせる）

• idセレクタ(同じid名、文中で一回のみ) 　　htmlでは　id="〇〇" 　　cssでは　#〇〇　　　　　　　と記載
• classセレクタ(同じクラス名、文中で何度でもつかえる) 　　htmlでは　class="●●" 　　cssでは　.●●　　　　　　　と記載

####cssでの余白の指定
border
padding(borderより内側)
margin(borderより外側)

余白の設定を指定しなくても、ブラウザで余白ができてしまっていることがある。
→デフォルト設定の可能性が。 nomalize.cssを使用。
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
(style.cssより先に読み込ませたいから、その上に。)

##今日のまとめ
###CSS
セレクタ { プロパティ: 値; }

• 「box-sizing」プロパティ 　　「border-box」値　ボックス全体の大きさを変えず「内側」に余白を作る。（paddingだと、paddingの分だけ要素全体が大きくなった上で余白がつくられてしまう。）
• 「*」セレクタ　全ての要素
• 「color」プロパティ　フォントの色を指定
• 「text-align」プロパティ　横方向での位置を指定
• 「font-size」プロパティ　フォントサイズを指定
• 「letter-spacing」プロパティ　文字の間隔を調整
• 「display」プロパティ 　「inline-block」値　要素を横並びにした上で横幅と高さを指定することができます。 　「flex」値　指定した要素の子要素を横並びにします。
• 「border-radius」プロパティ　四角形の角を丸くする
• 「text-decoration」プロパティ 　「none」値　通常リンクには下線が引かれますが、今回は不要なためnoneを指定す
• 「background」プロパティ　背景画像 　「url('〇〇/jpg')」値　画像の指定 　「fixed」値　スクロールしても固定される
• 「background-size」プロパティ　背景画像の大きさ 　「auto」値 サイズは自動的に決まる 　「contain」値　縦横比を保ったまま、範囲内に全ての画像が入るように配置（縦か横に空白ができる） 　「cover」値 　縦横比を保ったまま、対象範囲を全て埋めるように配置（画像の縦かよこが切れる） 　「px」値 縦横を長さで指定 　「%」値 縦横を親要素に対する比率で指定
• 「margin」プロパティ
• 「line-height」プロパティ 行の高さを指定する
• 「text-align」プロパティ　〇〇揃え

  作品全体をworks-wrapperというクラスを持つ要素で囲って、その中のwork-boxで作品を表示しています。
  そして、親要素であるworks-wrapperにdisplay: flexを当てています。

• 「border」プロパティ　要素の周りに線を引く 　「none」値　なし（何も指定しないとnoneになる） 　「solid」値　１本線 　「dashed」値　破線 　「dotted」値　点線

  (下記「float」理解度５０％位。ムービー付きで説明されているから、繰り返し復習しよう。今は先にすすもう。)
  「float」プロパティ　その親要素の中で横並びに
  　「left」値
  .clearfix:after
  content: "";
  clear: both;
  display:block

  ##〜独り言(まとめやら感想やら)〜
  html/css→もうひと押しで終わりだが、思考がついていかない為ここで打ち切ろ。
  理解そのものが出来ず、進みがとても遅い…慣れて追い上げていければいいんだけど…
  明日こそはhtml/css終わらせてRubyにとりかからなきゃ（汗）