デイトラweb制作中級編 DAY12
nakano
Webカンプからコーディング
Web制作の仕事の流れ
１. ヒアリング
２. 仕様決定
３. デザイナーがデザインを作成
４. デザインデータから静的にコーディング
５. 案件によってはWPテーマ化など
６. 納品
デザインデータからコーディングするスキル は必須
（クラウドソーシングなどに掲載されてるコーディング案件の多くが「４」以降を依頼）
今回はヘッダーとメインビジュアルをコーディング ↓
①リセットCSS
// ======== ⑴ ========
*,
*::before,
*::after {
box-sizing: border-box;
}
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 {
margin: 0;
padding: 0;
}
// ======== ⑵ ========
a {
color: inherit;
}⑴「box-sizing」
「box-sizing: border-box;」
→ paddingとborderを幅と高さに含める
他の使い方
・「box-sizing: content-box;」・・・ 初期値、paddingとborderを高さに含めない
・「box-sizing: inherit;」・・・ 親要素のborder-boxの値を引き継ぐ
⑵ 「inherit」
a {
color: inherit;
}
→ 「a」タグの色が親要素と同じになる
②ヘッダー
.header {
background: $color-main;
height: 100px;
}
.header__inner {
display: flex;
align-items: center;
margin-left: auto;
height: inherit;
}
.header__logo {
width: 205px;
// ======== ⑴ ========
img{
display: block;
}
}
.header__nav {
display: flex;
align-items: center;
margin-left: auto;
// ======== ⑵ ========
li {
&:not(:first-child){
margin-left: 40px;
}
a {
color: #fff;
text-decoration: none;
position: relative;
&.is-active {
// ======== ⑶ ========
&::after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
width: 100%;
height: 2px;
background: $color-accent;
}
}
}
}
}⑴ ブロック要素、インライン要素
ブロック要素
→ <h1>~<h6>、<div> など
インライン要素
→ <img>、<a> など
ブロック要素
・要素が設置されているレイアウト枠一杯に幅が広がる
・要素を連続させると縦に連なる
・幅（width）と高さ（height）を指定できる
・marginやpaddingなどの余白を指定できる
インライン要素
・要素の幅は常に中身と同じ幅になる
・要素を連続させると横並びになる
・幅（width）と高さ（height）は指定できない
・marginやpaddingなどの余白が指定できない
→ 今回は「img」を「display: block;」でブロック要素に変更
⑵「:not」+「:first-child」
:not (:first-child) {
最初の要素以外に適用したいCSS
}
⑶ 「::after 」+「content: ""」
::after {
content: "文字（空白でも可）";
〜適用したいCSS〜
}
→ 今回は「.is-active」の後に赤線を適用した
③メインビジュアル
.main-visual {
height: 600px;
width: 100%;
// ======== ⑴ ========
background: url(../img/mainvisual.png) no-repeat center center / cover;
position: relative;
}
.main-visual__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
.main-visual__title {
font-size: 64px;
font-weight: 700;
// ======== ⑵ ========
white-space:nowrap;
}
.main-visual__lead {
font-size: 24px;
font-weight: 700;
margin-top: 24px;
}
.main-visual__button {
margin-top: 36px;
a {
display: inline-block;
width: 390px;
height: 83px;
line-height: 83px;
font-size: 32px;
font-weight: 700;
text-align: center;
color: #fff;
background: $color-main;
border-radius: 12px;
// ======== ⑶ ========
box-shadow: 0 3px 6px rgba(#000, 0.16);
text-decoration: none;
}
}⑴ 「cover」前の「/」
「background-size」と「background-position」の区別のため
メンターさんのお答え
backgroundのショートハンド（複数のプロパティを一括で記述する記法）の場合
どちらも%での指定ができるため「/」をつけることで、ブラウザが「background-size」の設定だと認識できる
⑵「white-space:nowrap;」
nowrap
→ ソース中の連続する半角スペース、タブ、改行を一つの半角スペースにまとめて表示、自動的な折り返しはしない
「white-space:nowrap;」を入れない場合 ↓
「white-space:nowrap;」を入れた場合 ↓
⑶ 「box-shadow」
box-shadow: x y blur spread shadow-color;
x ・・・ 横
y ・・・ 縦
blur ・・・ぼかす度合い
spread ・・・ 広がり度合い
shadow-color ・・・ 色
→ rgba(#000, 0.16)はXDでカンプを作った際の標準の影の指定
まとめ
今回はデザインカンプからヘッダーとメインビジュアルのコーディングをしました！
Day12になってからまた一段と難しくなったような気がします。
自分だけの力でコーディングしようとなったとき、何から手を付けるかなぁとか考えているうちに長い時間がたってました。
最後は動画を見ながら仕上げましたが、本当に一人の力で作業をするとなったときのことを考えると、少し不安なのでもう少し勉強する時間をとりたいなぁと思います。
