DAY32.デザインカンプからコーディング編 ヘッダーとメインビジュアルのコーディング

01.デザインデータからコーディング

Web制作の流れ
①ヒアリング
②仕様決定
③デザイナーがデザインを作成
④デザインデータから静的にコーディング
⑤案件によってはWPテーマ化など
⑥納品

マークアップエンジニアが担当するのは主に④と⑤

マークアップエンジニアにとって
デザインデータからコーディングするスキルは必須

02.ヘッダーとメインビジュアルのコーディング

実案件でデザインカンプはPC版のみで、レスポンシブは制作者が調整
というのはよくあるパターン

分からないなりに必死に考えたり調べたりする過程で自力がついていく

1.フォルダの作成

・index.html
・sassファイル＞style.scss
・imgファイル
・cssファイル

2.雛形の作成

! + tabで雛形作成

link でcssを指定する

3.共通で使うcssを設定する

$main-colorなどの変数を指定

ブレークポイントの指定

inner幅などの共通の幅を変数で指定

4.cssを初期化する

*, *::before, *::after {
　box-sizing: border-box;
}
幅を指定したときにpaddingとボーダーを一緒に計算する

html,body {
　padding: 0; margin: 0;
}

body {
　font-family: "游ゴシック体", YuGothic, "游ゴシック Medium",
　"Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
　font-size: 16px;
　line-height: 1.6;
　background: #fff ; color: $color-text;
}

img {
　max-width: 100%;
　height: auto;
}

ul,ol {
　list-style: none;
　padding: 0;
　margin: 0;
}

h1,h2,h3,h4,h5,h6 {
　padding: 0;
　margin: 0;
}

a {
　color: inherit;
}
inherit 親要素を継承する

5.要素の指定

&:first-child　最初の要素を指定
&:not:〇〇　指定した要素以外
&:nth-child()　()内の条件を満たす要素を指定(n + 1 や n * 2など計算可能)

6.インナー幅を把握

ホームページは基準となる幅が決まっている
デザインカンプを見る際はまずどこが基準となる幅かを把握する必要がある

width: 〇〇px;の固定幅に対して、
”margin-left: auto;” と ”margin-right: auto;” を指定することによって
中央に配置される

7.ロゴとメニューを横並びで配置

display: flex;

両端に配置させるには、”justify-content: space-between;” が簡単
IEでバグが起きることが多い

メニュー側から”margin-left: auto;” で押す形で実装する
”margin: auto;” は「押す」というイメージ

8.上下左右中央に配置する書き方

position: absolute;で上下左右中央に配置する
①親要素にposition: relative;を指定して相対位置の起点
②position: absolute;
③top: 50%;
④left: 50%;
⑤transform: translate(-50%, -50%);

上下中央にしたい場合は、top: 50%; transform: translateY(-50%);

左右中央にしたい場合は、left: 50%; transform: translateX(-50%);

9.ヘッダーの配置方法

”position: absolute;” はメインビジュアルにメニューを被せたい場合

”position: fixed;” はそれに加えて、常にページ上部で固定させたい場合
position: fixed;
top: 0;
left: 0;
width: 100%;