昨日および本日はProgateで、HTML,CSSの初級を引き続きやった。

今日の学習内容の整理　アウトプットを兼ねて　

・レイアウトの基礎である、ヘッダー⇨メイン⇨フッターを学習。
　div要素をグループ化するために使用
　「header」、「main」、「footer」というclass名を持った3つのdiv要素でレイアウトを分割

・エディタの補完機能⇨タグ名を入力し、「Tab」キーを押すと終了タグまで補完してくれる。

・リストのマークをなくす
li要素にlist-styleプロパティを用いてnoneを指定すると、リストの先頭のマークを消すことができる。基本的に先頭の黒点は必要ない。
黒点なくす機能は、気になっていたから学習できて嬉しかった。

・ヘッダーの中身を横並びにする
HTMLで記述した要素は基本的に縦に並んでいくので、横並びにするにはCSSが必要
floatプロパティを用いることで、指定した要素を横並びにすることができる
float: left;を指定すると要素が左から順に横に並ぶ。

・ヘッダーの余白の調整について
『padding』内側の余白
padding: 〇〇px;　上下左右全ての方向に余白が追加される。
省略形①
padding: ２０px 10px 10px 10px;　上　右　下　左
省略形②
padding：　20px 10px；　上下　左右
個別指定
padding-top 　　上
padding-right　　　　右
padding-bpttom　　下
padding-left　　　　　　左

　『margin』（外側の余白）
paddingと基本的には使用方法は変わらない。

・入れ子のセレクタ
「.header-list」の後にスペースを空けてliと続けると、「header-list」の中の

要素にのみCSSを適用することができる。
これにより、ヘッダーの要素とフッターの要素に別々のCSSを適用することができる

・要素を左右に配置する
float: leftとfloat:rightを組み合わせることで、ロゴとリスト全体を左右に配置することができます。

・『span』要素
文中の一部にCSSを適用させたい場合は、要素で囲む。
下の図では、＜span＞タグにCSSを指定することで、文字の色を一部変えていく。
例）おにぎりの具は＜span＞ツナマヨ＜span＞です
ツナマヨの部分をCSSで色指定するとツナマヨだけ色を変えられる。

・（お問い合わせフォームのレイアウト）input,textareaについて
input要素は１行のテキスト入力を受け取るための要素
textarea要素は複数行のテキスト入力を受け取るための要素
input要素は終了タグは不要！

・送信ボタンを作る
送信ボタンにもinput要素を使う
input要素にはtype属性を指定することができ、type属性にsubmitを指定すると送信ボタンになる
input type="submit"

・value属性
input type="submit" value="保存"
value属性に任意の値を指定することで、ボタンに表示されるテキストを変更することができる。

・複数のセレクタに同じCSSを指定する
複数のセレクタをコンマ（,）で区切ることで、それらに同じCSSを適用することができる。
input,textarea{
boeder: 3px solid #ff0000
}

HTML＆CSS初級編が終了した。
見本を見て、コードのイメージとかはつかめてきている。
苦手なのは、余白について　margin padding部分が一から自分だけでコード書くのは無理かな
なぜか、苦手　上下左右とか理解しきれていない
あとは、送信ボタンのところが苦手なイメージ　課題でもミスしていた。

「感想、まとめ」
明日は、HTML&CSSの中級編をメインでやっていこうと思う。
並行して、IT業界でのキャリアプラン、そもそもなぜITなのか、visionを言語化して、IT業界の職種などについてもインプット・アウトプットしていく。
他の完全未経験者と差別化していく
会社だよりの受験者が多いはずやからとにかく、学習とIT業界の働くイメージを明確化
マインドアップ作成