さわぴかのなんでもノート!

学びのアウトプット!なにについて書くかはわかりません!なんでもノートです!

【今日学んだこと】未経験からエンジニアへの道「2日目」今日もHTML/CSS

今日の所感

朝お腹痛くてゆっくりしてしまった、、、 けど、1章、2章が終わって、書き写しただけだけど2つもページができた!嬉しい。 午後は近くの図書館に行ってみた!静かだしエアコンもききすぎてるわけじゃなかったし、平日だからかな?人も少なくて居心地よかった。 このあとエンジニアさん数名とご飯に行きます!

やったこと

学んだこと

HTML5/CSSモダンコーディング」

f:id:pikahika:20190815184130p:plain
ここから

f:id:pikahika:20190816140308p:plain
f:id:pikahika:20190816140329p:plain
完成まで!

と、

f:id:pikahika:20190816165155p:plain
第2章は、0から最後まで!

と、

f:id:pikahika:20190816173328p:plain
第3章は初めのさわりだけ。背景のみ笑

出てきたプロパティとか要素とか用語とか学んだこととか

  • vertical-align:要素の横方向の配置の基準を指定できる。どこに合わせるか、の基準がいっぱいある。
  • transform:要素を移動、回転、変形できる。四角を45度回転させてひし形っぽくしたり、ぐるっと360度一周させるのもできる。
  • ベンダープレフィックス:意味的には接頭辞。ブラウザ毎にある。Internet Explorer(-ms-)、Google ChromeSafari(-webkit-)とか。
  • CSSカウンタ:値を増やしたり表示したりできる。
  • A B:A以下にあるBに全てかかる
  • A>B:Aの直下にあるBにだけそのスタイルが当たる
  • A+B:Aの直後にあるBに
  • A-B:Atoどう回想で、A以降にあるB
  • cursor:マウスポインタがその要素に重なった時の、カーソルの表示内容を指定できる。指のにしたり、?とかにしたりもできる
  • border-style:線の種類がいっぱいある。実線、二重線、破線など。
  • Korem ipsum......で始まる文:世界的によく使われるダミーテキスト。日本語の文章をダミーテキストにしたい場合は、著作権の切れた小説が使われるらしい。
  • inherit:どのCSSプロパティにも使えて、親要素の値を引き継ぐことを意味する
  • Masibry:指定した要素を可変グリッドレイアウトとして自動的に並び替えてくれるJavascripeライブラリ。2章のやつはこれで勝手に並び変わってる。
  • タイミング関数:transitionプロパティでアニメーション効果を指定する時、変化量の緩急とかを決めれる。

ul要素の直下にはli要素以外の要素はおけない。li要素の中に、別のul要素を置くことはできる。

::before擬似要素のdisplayプロパティの初期値はinlineだけど、その場合幅や高さの指定ができない→inline-blockにする

HTMLの描写が終わる前に実行する必要があるJavascript以外はなるべくbody要素の最後に記述する(推奨)

a:hover::affterにする(a::affter:hoverは×)

基本情報技術者(午前)

なんか普通に進数計算がわからなくてつまづいた、、、ので一旦さらっと飛ばして2章(データ構造とアルゴリズム)を読み始めた。

わからないこと、わからなかったこと

  • 1章、2章共に一通り書き終わってからのチャレンジの部分、わからなかったので先に進んでから戻ってくることにする。
  • ::beforeと::afterがよくわかってない
  • 読んで入るけど書いてる通りに写してるだけだから、幅の計算とかいまいちわかってない。自分で作ってみないと覚えれなさそう
  • 負数とか補数とかなんだったか完全に忘れてて思い出せず…足し算引き算もわからない泣

明日の意気込みなど

明日は予定がいくつか入ってしまっているので、ちょっとでも進めれるように短い時間で集中して頑張る。 「HTML5/CSSモダンコーディング」の本終わらせる!