こんばんは、kobasaです(´ω｀*)
今日から「基礎学習」の勉強が本格的に始まりました！
2日目の勉強内容
VSCode(VisualStudioCode)というテキストエディタを使って
HTMLとCSSのコードを書く
VSCodeについて
VSCodeは初めてだったけどDreamweaverを少し触ったことがあるので大丈夫そう。
最低限の設定方法の説明はあったけど、便利なショートカットーキーなどの説明はあまりなかった。
自分で調べるパターンかな？
覚えておきたいコマンド
コメントアウトしたい部分を選択して、command + /
Codeの差分比較方法
見本のコードをコピーして自分のコードがあるファイル上で
command + shift + p でコマンドパレットを開いて検索する。
Compare Artive File With Clipboard を選択。
すると自分のファイルとコピーしたファイルが並んで表示され
相違部分が赤字でハイライトされる。
HTMLとCSSについて
HTMLとCSSは昔に少し勉強したことがあったので懐かしい気持ちで勉強できた。
ただFlexBoxというのは初めてだった。FlexBoxとは、
「親要素の中にある子要素を横並びにして、上下左右の位置調整をする方法の総称」
よく使う方法らしいんだけど、プロパティの英単語が慣れないもので覚えにくい…
ある程度覚えておけばVSCodeがフォローしてくれるけど。いけるかな？
FlexBoxに使用するプロパティ
全て親要素に設定する
display: flex; を設定して子要素を横並びにする。
justify-content プロパティで水平方向にどのように並べるか指定する。
値が space-around なら両端が左右により子要素が等間隔に配置される。
このとき両端の余白と子要素間の余白が１：２になる。
align-times プロパティで垂直方向どのように並べるか指定する。
値が center なら中央揃えとなる。
文字だけでは分かり辛いですね(´･ω･`)
時間があるときに図を入れたい。時間あるかな。ではまた明日(・ω・)ノ
コメント