模写コーディング（クリスタ中級編〜前編）
先日お話した”姉からの仕事依頼案件”ですが、
開始時期が8月に入りそうとのことなので、
それまで「クリスタ中級編」の模写コーディングを行うことにしました。
初級編にはなく、中級編で初登場したものは、主に以下４つですかね。
１．ヘッダーの固定と、少し下にスクロールするとヘッダーに背景が付く。
２．ページトップ部分の、自動で流れるスライダー画像３枚。
３．Service部分の、ホバーすると画像の色が変わる。
４．Contact部分の、ボタンを押すと別ページに飛ぶ。
１つずつ見ていきましょう。
１．ヘッダーの固定と、ｆｖを過ぎると背景に色を付ける
「ヘッダーの固定」については、Progateでしたことがありました。
header {
position: fixed; ←これで固定
z-index: 1; ←これで他の要素よりも上の階層に上げる
}
でしたよね。
でもね、確かこれだけじゃうまくできなかったんですよ。。。
だから、コチョコチョってして無理やり調整しました。
headerに、 { width: 1200px; margin: 0 auto; } を付けて中央寄せしてたんですが、固定にしたら左寄せになっちゃいました。なので、margin-leftを付けて無理やり中央に寄せてやりました😎（良い子はマネしないように！）
次に、「ｆｖを過ぎると背景色を付ける」ですが、まず、「『ｆｖ』ってなんだよ！」からですよね。
調べると、「ファーストビュー（First View）」、つまり、そのサイトに訪れたときに画面に見えている範囲のことです。その分スクロールしたらヘッダーに背景色を付けろ、と。
ムズッ！！！
「これはおそらくiSara模写のときにやった、『画面トップから○○pxより下に行ったら、画面右下に "画面トップに戻るための固定ボタン"を表示』という方法に似ているな。ってことは jQueryか。」と思いつつも、とりあえずここではスルーして先に進めました。
２．ページトップ部分の、自動で左から右に流れるスライダー画像３枚
はい、スルー。（「jQueryを使うんだろうなぁ．．．」）
３．Service部分の、ホバーすると画像の色が変わる
ふむふむ。これまで「:hover」でボタンの背景色を変えたりしたことはあるけど、画像の色は変えたことないぞ！
img:hover { background-color: grey; } など、いろいろ試みましたがうまくいきません。（これだと画像の後ろっ側がgreyになってるんだろうなぁ。）
調べると、imgの親要素に対して{background-color: grey; }、そしてimgに対して{opacity: 1; }とした上で、img:hover {opacity: 0.3; }のようにしていました。その通りにやってみました。ん？一見うまくいったようですが、各画像の上に重ねて乗っている文字（Hearingなど）の上にホバーすると反応しません。
んーーー。困った。とりあえずここではこの状態で良しとしました。
もっとわかりやすいやり方があると信じています。
４．Contact部分の、ボタンを押すと別ページに飛ぶ
実はこれまでの学習で、これ、やったことありませんでした。
同ページ内でのリンク移動はしたことありましたが、別サイトに飛ぶのは初です。
調べましたが、初歩の初歩すぎるためか、ドンピシャな参考サイトが見当たらなかったので、「おそらくこうするんだろうな。」という自分の予想を信じてやってみました。
まず「index.html」と同じ階層に「contact.html」を作る。
index.html内のContactボタンのところで、
<a href="contact.html" target="_blank">Contact</a>
としてみる。
「ボタンを、ポチッとな。」
別タブが開いた！よし、できたできた！
そして、「contact.html」内で、<!DOCTYPE html>から書き始める。
本当にこのやり方であってるのだろうか、と思いながらも、とりあえずうまく表示はされているのでこれで進めました。
cssファイルも同様に、「style-contact.css」という新規ファイルをcssフォルダ内に作って、そこに書き込んでいきました。
やり方は無茶苦茶かもしれませんが、
「ｆｖを過ぎるとヘッダーに背景色」と「自動で流れるスライダー画像」以外は、完成しました！
これからは、調べ倒しながら、
上記２つと、レスポンシブ対応にも取り掛かっていきます！
それでは、頑張るぞ！（次回に続く）
この記事が気に入ったらサポートをしてみませんか？