#30DAYSトライアル #2nd DAY1：XDからヘッダーとメインビジュアルのコーディング

2019年2月16日からスタートした #30DAYSトライアル #2nd。
#2ndの講師ははにわまんさん（@haniwa008）！
いつもHPこーどにお世話になっています。

DAY1の課題は『DAY1：XDからヘッダーとメインビジュアルのコーディング』です。

朝8時に課題が発表されるので、朝会社に向かう前にチェック。
課題内容をザッと見て、「こんな風にコードを書けばいいかな？」と考えておきます。

#30DAYSトライアル #2nd DAY1
デザインカンプ（XD）からのコーディング

ヘッダーの上部固定
ナビメニューの配置
リンクホバー時のアニメーション
ボックスシャドウ

▼躓いた箇所
画像をimgタグ使用→スタイルの指定できず→divで囲ってCSSでbg指定

ホバー時に要素が動く → ボーダー幅分の調整

— だりあ＠エンジニア (@engineer_dahlia) February 18, 2019

position: fixed; でナビゲーションバーを上部固定

ナビゲーションバーのページ上部固定は、この先コーディングのお仕事をしてく上で
めちゃくちゃ出てくると思っています。

なので1分でコードとスタイルを書き終わるくらいにはしておきたいですね。
（まだできなかった…ｗ）

position: fiexd; を使います。
私は画鋲みたいなイメージをしております。ナビゲーションメニューを壁の上（サイトの上部）にピン留めする感じ(^^)

他にもpositionプロパティは良く使うんだなと分かってきたので、サルワカさんのサイトはブックマーク必須です。
CSSのpositionを総まとめ！absoluteやfixedの使い方は？

flexboxのjustify-content: space-between; でナビゲーションバーの中身を配置

そして、ナビゲーションバーはflexbox（フレックスボックス）を使うと楽ちん。
DAY1の課題は、左にロゴ画像、右にメニューリストでしたね。

親要素を display: flex; にして
その親要素に justify-content: space-between;

という指定をすると、子要素が左右の端っこに分かれて配置できます。

画面の黄色いところ
縦横真ん中寄せしたいのに、前の要素にめりこんだりしてぐぬぅ…ってなってたの。
1時間くらい😒

そしたらさ、モニターの下に置いてあるflexboxのチートシートが目に入ってさ

⚡️💡

ってなったよね😆

これ本当に印刷するべしhttps://t.co/6k60GtNzyJ pic.twitter.com/VvzABro1sP

— だりあ＠エンジニア (@engineer_dahlia) February 14, 2019

webクリエイターボックスさんのチートシートを印刷して、
モニタの前に置いてあります。超便利！みんな印刷したほうがいいですよ！＼(^o^)／

a:hover( )でリンクホバーのアニメーションをつける

メニューのリンクは、デスクトップ（PC）で見た時にホバーアニメーションがあると良いですよね。なにもないよりも、一気にお洒落になります。ナウいです←

.navbar a {
    display: inline-block;
    color: #fff;
    font-family: "Yu Gothic";
    font-weight: lighter;
    padding: 5px 0;
}

.navbar a:hover {
    color: #fff;
    font-family: "Yu Gothic";
    font-weight: lighter;
    padding: 3px 0;
    border-bottom: 2px solid #E81919;
}

.navbar a {

display: inline-block;

color: #fff;

font-family: "Yu Gothic";

font-weight: lighter;

padding: 5px 0;

}

.navbar a:hover {

color: #fff;

font-family: "Yu Gothic";

font-weight: lighter;

padding: 3px 0;

border-bottom: 2px solid #E81919;

}

わたしはこんな感じでスタイルを書きました。

他にもCSSだけでできる素敵なアニメーションがたくさんあるので、どんどん覚えたいなあというところ(^^)

ホバー時に要素が動いちゃう→ borderのピクセル分の高さを調整すればOK

先程紹介したホバー時のスタイル、初めにコードを書いた時はどちらもpaddingを5px

にしていたんです。

すると、ホバーした時に

「何故か要素の位置がカクカク動いちゃう…なぜなの…」

という状態に陥りました。
要素が動く理由は、ボーダーを指定してるのでその分動いちゃうからです。

通常の a のスタイルは、paddingを5px指定しています。（6行目）
そして a:hoverの方は、paddingは3px。（13行目）

ホバーした時にborder-bottomに2pxの線が出るようにしてありますので、（14行目）
その高さ分のpaddingを引いています。
こうしておけば、カクカクしませんので試してみたください(^^)

box-shadowを使えば境界線がふわっといい感じに

ナビゲーションバーの下部分、ここにはbox-shadowが指定してあります。

そうすることで背景画像との境界線がふわっとぼやけていい感じに。
ふんわりした雰囲気を出したいときは box-shadowをつけてあげる。

クッキリはっきりデザインの時は不要です。
ここは案件によりけりで判断する所ですね(^^)

背景画像はbackground-img: URL()で指定【imgタグは使わないよ】

画像を入れたい時、ついimgタグを使いたくなってしまうのは私だけでしょうか…

ついつい<div>で囲って直下に<img>で画像を挿入してしまうのですが、
そうすると画像自体にスタイルを指定することができない><

ということで、背景画像として静止画を挿入するときは、
CSSに background-img: url( ); でスタイルをつけましょう。

まとめ｜ナビゲーションと背景画像は何も見ずにできるようになっておきたい

#30DAYSトライアル 1st（1月7日からの初めのデイトラ）では、Progateでナビゲーションメニューを作りました。

その時はProgateが予めあるべきコードを書いておいてくれたので、サクッとできましたが、
いざ自分で書くとなると案外わからなくて時間がかかる(^^;)
模写で練習してバッチリスラスラ書けるようにしておきたいです。

それから、背景画像の挿入はCSSで。
個人的に何度も間違えたので、さすがに覚えましたｗ

#30DAYSトライアル #2nd の課題はコーダーとして仕事をするための
かなり実践的な内容からスタートしました！

本業もありなかなか勉強時間の確保が難しいですが、なんとか30日、
参加する皆さんと切磋琢磨しながらがんばります！

#2nd #30DAYSトライアル