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