昨日および本日は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を適用することができる
・要素を左右に配置する
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業界の働くイメージを明確化
マインドアップ作成