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

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

【今日学んだこと】未経験からエンジニアへの道「3日目」今日もHTML/CSS。1冊…ギリギリ終わらず

今日の所感

お話しにいったりとあるライブにいったりしていて昼間の稼働時間が泣 帰ってきてから夜にやってしまっている、、、リズムが、、、 がしかしライブ最高でしたので明日から頑張る。

やったこと

  • HTML5/CSSモダンコーディング」:230分 →一通りは終わったけどなんだかうまくいってない部分もあるので明日も見直しする
  • 基本情報技術者(午前):31分
  • この振り返りブログ:54分

学んだこと

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

f:id:pikahika:20190816173328p:plain
昨日のここから

f:id:pikahika:20190818005506p:plain
いわゆるLPみたいなのでページ1枚で下まで続いてるやつ

f:id:pikahika:20190818005653p:plain
スマホ対応の表示が一部なんか変なのは明日見直す。。。

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

  • background-size:背景画像の大きさの指定。画像に合わせて全部覆うか、元の比率を保つか、とか
  • display: table;:高さを揃えた横並びのレイアウトや縦方向への中央揃えが簡単にできる
  • table-layout:fixed;:display: table-cell;を指定した要素の内容物の横幅が異なる場合でも、横幅を均等にすることができる。
  • position:要素の配置の仕方を指定できる
  • x-index:要素の重ね順を指定できるプロパティ。値が大きい方が手前
  • アイコンフォント:画像だと拡大したらボケたりするのが綺麗に表示できるとか、アイコンのイメージで構成されたフォント。画像でもSVGというベクター形式のファイルにしたら画像でもボケないらしい。
  • input:type属性に指定する値によって、ボタンやチェックボックスなどの部品を表現できる。よくある電話番号入力用、メールアドレス入力用とかのテキストエリアもこれで表示できる。
  • HTMLの属性をCSSセレクタに使用する場合:[属性名=属性値]
  • viewport:スマートフォンで閲覧した時にどこからどこまでを何倍で表示するかをカスタマイズできる。
  • メディアクエリ:こういう場合はこのスタイルを有効にする、とかで閲覧環境によってCSSの有効無効を切り替えられる機能。

セレクタの詳細度が高いCSSが優先される 高い→低い HTMLのstyle属性(style="")→id(#sample)→class(.sample)、擬似クラス(:hover)、属性([type="submit"])→要素型(div)、擬似要素(::before)

クラス名を決めるときは、役割にフォーカスした名前にする →button-orangeではなくbutton-showy、とか。変更があった時にorangeの部分をたくさん変更することになってしまうから。

シングルクラス設計 →1つの要素に対して1つのクラスをつける

マルチクラス設計 →1つのクラスに対して、複数のクラスをつける→CSSの重複をまとめられるが、HTMLでのクラス指定が肥大化しやすい

CSSプリプロセッサ(Sass?やLESS?)→シングルクラス設計とマルチクラス設計を複合した方法が取れる。

基本情報技術者(午前)

スタック:後入れ先出し。LIFO(Kast In Fairst Out)。Uの形に上から入れていくやつ

Push→スタックへデータを格納する操作

Pop→スタックからデータを取り出す操作

キュー:先入れ先出しFIFO(First In First Out)。二の形に右から左に(左から右)に流す感じ

Enqueue(エンキュー)→キューにデータを格納する操作

Dequeue(デキュー)→キューからデータを取り出す操作

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

  • スマホ表示がなんだかうまくいっていない、何か抜けてるかな、、、
  • やっぱり写しているだけに等しいのでわからないことがわからない。見た目だけ見て、自分で書いてみる作業しないと覚えれなさそう。何かそれっぽいの自分で作ってみようかな。

明日の意気込みなど

明日は予定何もないので、ドットインストールはじめつつ、本のわからないところ確認していく。 明日こそは果物を食する。