プログラミング独学の軌跡

ど素人が独学でプログラミングを学んでいく記録です。

ゴディバのサイトを模写しました。jQueryのプラグイン、「slick」スライダー。

f:id:gharuto:20200801062612j:image

ブログの更新が空いてしまいましが、その間ゴディバのサイトを模写してました。

スマホ画面、PC画面両方作り、約3週間で完成。

 

なぜゴディバのサイトを模写?

最初はコーポレート(企業)サイトを模写しようと思っていたのですが、

ゴディバのサイトがコーポレートサイトの典型のようなデザインだということを知り、ゴディバにしました。

確かに、ヘッダーがあってナビがあってメインビジュアルがあって…と典型的なデザインになってます。

 

ゴディバのサイト模写の感想。

ゴディバの模写…難しかったです。

一番やっかいなのが、スマホ画面とPC画面とでデザインが全然違う所。

 

テキストも違っていたりするので、それぞれのテキストを用意したりと大変でした。

 

他にも細かい所で難しかったりします。

 

また、今回は横並びにするのに初めてflex-boxを使いました。

flex-box使いやすいですね。

もうfloatはあまり使わないと思います。

 

出来栄えはこんな感じ↓

(画像は変えてあります)

 

スマホ画面

f:id:gharuto:20200802155559p:plain

 

 

PC画面 

f:id:gharuto:20200730213412p:plain

 

このメインビジュアルの画像はスライドするのですが、これは「slick」というjQueryプラグインを使用しました。

 

slickはYouTubeで勉強しました。

少し難しいかもしれませんが、言われる通りにやれば大丈夫です。

 

slickはレスホンシブデザインに対応してるので超便利です。

 

 

このようなデザインもflex-boxを使えば簡単↓

f:id:gharuto:20200730213508p:plain

 

img要素の横に謎の余白。

他に学んだ点を書いていきます。

 

img要素を二つ並べた時に、本来は横にピッタリくっつくはずがなぜか少し余白ができてしまいます。

 

これなぜかというと、HTML上の改行が余白になってしまうからです。

 

例えばこのように書いたとします↓


    <img src="...">
<img src="...">

一つ目のimgタグの後に改行して二つ目を書いてますよね。

この改行がブラウザだと半角スペース分の余白になってしまうんです。

余白を作りたくないなら改行せずに書きましょう。

 

aタグのdisplay:inline-blockが効かない!

ここの部分↓

 

f:id:gharuto:20200731222449p:plain

 

リンク部分を要素いっぱいに効かせたかったので、aタグにdisplay:inline-blockを指定したのですがなぜか効きません。

これなぜかというと、この要素の高さをheightではなくpadding(上下)で作っていたからです。

 

padding部分はリンクが効かないんですね。勉強になりました。

 

aタグが効かない!

aタグを作ったのにカーソルを乗せてもポインター(指の形)にならないんです。

 

これなぜかというと、単純にhrefが抜けてました。

 

次の予定。

次は、この本↓で作る見本サイトを参考に、

 

f:id:gharuto:20200620104110j:plain

 

自分で考えたカフェのサイトを作ろうと思ってます。