クリ★スタ模写・中級でつまずいたところ①【day75】

HTML/CSS
2020.07.28
プログラミング独学day75のアウトプットは？

今日は、クリ★スタ模写・中級でつまずいたところ①をアウトプットしていきます。

こんにちは。プログラミングでweb制作ができるようになりたいharuです。

2歳0歳の育児をしながら、22時〜1時に独学しています！ わかったことや、気付きをログに残します。同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。 

クリ★スタ模写・中級でつまずいたところ①

現在、クリ★スタさん（@cresta_design）のXDデザインカンプをお借りして、模写コーディングに励んでいます。(模写コードはこちらで公開中→haruのGitHub)

つまずく→解決がたまってきたのでシェアします。

模写コーディングで同じくつまずいている方の参考になればうれしいです。

①buttonタグにリンクを貼る

トップページのボタンを<button>タグで作成しました。

こちらの黄色のボタンです。HTMLはこのように書きました。

<div class="btn--center">
        <button　onclick="location.href='./contact.html'"　class="btn--yellow">
              <p class="btn__txt">Contact</p>
        　</button>
</div>

ボタン自体は、<button>Contact</button>でできる。

しかし、これにリンクを貼る方法がわからなかったので、こちらで勉強しました。

inputタグ、buttonタグでの画面遷移の記述について - Qiita
#aタグ以外での画面遷移についてHTMLでの任意のページに画面遷移する際に一番最初に思いつくのはaタグですが、aタグでは表示がボタンではないため、見た目的にすこしアレな気がします。そこで、aタグ…
qiita.com

buttonタグの要素に、

onclickを追加すればOKです。linkは<a>以外にもこんな方法があるんだな。

ちなみに、href以下は相対パスで書かれていて、「./」は省略可能。

相対パスとは

「htmlファイルが置かれている場所」を基準として、指定するファイルの場所を示す方法。

今回の場合はcontact.htmlが、htmlファイルの置かれている場所と同じ階層にあったので、
①href=’./contact.html’
②href=’contact.html’
いずれかで書く。

./ は同じ階層。
../ はひとつ上の階層。
 
これで、contact.htmlにリンクを貼ることができました。
 
また、直前のページにリンクを貼りたい場合は、このように書きます。
<button onclick="history.back()">戻る</button>

 

画像の下にできる謎の余白を消す

画像の下に謎の余白ができることがあります。
デベロッパーツールで確認しても、paddingもmarginもついていない..
 
そんなときは、こちらのCSSで余白を解消できます。
vertical-align: bottom;

ちなみに、bottom以外でもtop,left,rightも指定可能です。

見にくいですが、before→afterです。

 

jQueryで固定ヘッダーの背景色を変える

jQueryでヘッダーの背景色を変える実装をしました。
練習のため、１からコードを書きました。

 

 

書いたコードは、以下の通り。

(このコードが正しいのか、きれいなのか判断ができないのが悲しいけど、ちゃんと動いてます…)

解説

「.header =fv画像」の高さをmainPosとして定義。

この高さより、topからのスクロール量が多くなった場合はtransformクラスをつける。
→スクロール量が少なくなったらクラスを外す。

transformクラスは、ヘッダーの色を変えるCSSが書かれています。

スクロール量で監視をして、クラスの付け外しをすることで背景色を変化させます。

 

あとがき

自分で書いたjQueryのコードがちゃんと動いてうれしい。
これを生のJavaScriptで書くには「Intersection Observer」を使うとよいと、もりけんさんが教えてくださった。8月からJavaScriptを勉強するので、しっかり使えるようになりたい。

 

あと、コードレビューをしていただきたいので、レビューの際に必要なものを調べなくては！
①GitHub
②実際のページ(どこかにベーシック認証？でアップしないとダメ？)
③デザインカンプ
があればいいのだろうか..

調べることも、学ぶこともいっぱいありますが、ひとつひとつですね..!

 

 Thanks：師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら

https://kenjimorita.jp
 
スポンサーリンク