うにょママ 
復習をかねたプログラミング学習の記録と+αで調べた事の備忘録です。
Day9～10で学んだこと「デザインカンプからのコーディング」
【Day9】準備編・ヘッダーとメインビジュアルのコーディング
Web制作の仕事の流れ
１. ヒアリング
２. 仕様決定
３. デザイナーがデザインを作成
４. デザインデータから静的にコーディング
５. 案件によってはWPテーマ化など
６. 納品
・マークアップエンジニアが担当するのは主に４と５
ヘッダーとメインビジュアル
・sassの入力補完をしてくれるVSCode拡張機能（プラグイン）「SCSS Everywhere」を導入
【ロゴとメニューを横並びで配置➞”display: flex;”】
・両端に配置させるには、”justify-content: space-between;” が簡単だが、IEでバグが起きることが多いので、メニュー側から”margin-left: auto;” で押す形で実装する方が良い
positionとは？
「要素(ボックス)の位置を決める」ためのプロパティ。
このプロパティを使えば、思い通りの場所に画像を配置したり、画像に文字を重ねたり、ヘッダーを固定したりできる。
position: relative
本来の表示位置を基準に要素の場所を動かす時に使う
position: absolute
親要素を基準に要素の場所を動かす時に使う
親要素はrelativeにしておく
absoluteを使って位置調整するときは、親要素にposition:relative（またはfixed）を指定する。
これを忘れると基準位置がずれて思った場所に表示されない。
position: fixed
要素を特定の場所に固定する時に使う
(例：ヘッダーの固定)
「ウィンドウ全体」が基準となる。
要素の位置に関係なくtop: 0と指定したら画面の最上部に表示される。
z-indexとは
z-indexは要素(ボックス)の重なる順序を指定するプロパティ。
値が大きいものほど前面（手前）に表示される。
positionプロパティにabsoluteやrelative、fixedが指定された要素でのみ有効。
z-indexが指定されていないと同じ階層の要素では、基本的にソース上で後から書かれた要素が前面へ表示される。
transform: translateとは
要素に動きをつけられる。
〖下線の引き方〗
text-decoration、border、擬似要素の3パターンで書ける。
疑似要素を使うメリット
- CSSの記述だけで書ける
- 下線の位置や長さを自由に決めれる
【Day10】横並びカードのコーディング
【カードをフレキシブルに改行させる➞”display: flex;”と”flex-wrap: wrap;” 】
・カードの幅を出す計算式➞（100% / カード枚数 – 余白の幅 * 余白の数 / カード枚数 )
まとめ
初級編で学んできたはずなのに、いざ一人でコーディングとなると手が止まってしまいました。
回答例をみてコーディングし直しました。
よくわかっていなかった疑似要素や、position: relativeを使った要素の配置方法をだいぶ理解できました。