ブログの更新が空いてしまいましが、その間ゴディバのサイトを模写してました。
スマホ画面、PC画面両方作り、約3週間で完成。
なぜゴディバのサイトを模写？
最初はコーポレート(企業)サイトを模写しようと思っていたのですが、
ゴディバのサイトがコーポレートサイトの典型のようなデザインだということを知り、ゴディバにしました。
確かに、ヘッダーがあってナビがあってメインビジュアルがあって…と典型的なデザインになってます。
ゴディバのサイト模写の感想。
ゴディバの模写…難しかったです。
一番やっかいなのが、スマホ画面とPC画面とでデザインが全然違う所。
テキストも違っていたりするので、それぞれのテキストを用意したりと大変でした。
他にも細かい所で難しかったりします。
また、今回は横並びにするのに初めてflex-boxを使いました。
flex-box使いやすいですね。
もうfloatはあまり使わないと思います。
出来栄えはこんな感じ↓
(画像は変えてあります)
スマホ画面
PC画面
このメインビジュアルの画像はスライドするのですが、これは「slick」というjQueryのプラグインを使用しました。
slickはYouTubeで勉強しました。
少し難しいかもしれませんが、言われる通りにやれば大丈夫です。
slickはレスホンシブデザインに対応してるので超便利です。
このようなデザインもflex-boxを使えば簡単↓
img要素の横に謎の余白。
他に学んだ点を書いていきます。
img要素を二つ並べた時に、本来は横にピッタリくっつくはずがなぜか少し余白ができてしまいます。
これなぜかというと、HTML上の改行が余白になってしまうからです。
例えばこのように書いたとします↓
<img src="...">
<img src="...">
一つ目のimgタグの後に改行して二つ目を書いてますよね。
この改行がブラウザだと半角スペース分の余白になってしまうんです。
余白を作りたくないなら改行せずに書きましょう。
aタグのdisplay:inline-blockが効かない！
ここの部分↓
リンク部分を要素いっぱいに効かせたかったので、aタグにdisplay:inline-blockを指定したのですがなぜか効きません。
これなぜかというと、この要素の高さをheightではなくpadding（上下）で作っていたからです。
padding部分はリンクが効かないんですね。勉強になりました。
aタグが効かない！
aタグを作ったのにカーソルを乗せてもポインター(指の形)にならないんです。
これなぜかというと、単純にhrefが抜けてました。
次の予定。
次は、この本↓で作る見本サイトを参考に、
自分で考えたカフェのサイトを作ろうと思ってます。
コメント