【学習アウトプット】

#今日の目標(やること)
昨日勉強した分を復習がてら簡易にまとめる。
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にとりかからなきゃ（汗）