架空のカフェサイトを作りました。クロスフェードスライダー。プログラミング独学の軌跡プログラミング独学の軌跡ド素人がプログラミングを独学していく記録です。未解決テックアカデミーが初心者向け副業コースを始めました。テックアカデミーで無料メンター相談ができる。CSS初心者が稼ぐならココナラがおすすめ。クラウドワークスは難しい。架空のカフェサイトを作りました。クロスフェードスライダー。CSS学習本(前回の記事参照)で作るサンプルサイトを参考に、架空のカフェのサイトを作りました。画像は、無料画像素材サイトの「写真AC」から取ってきてます。出来栄えはこんな感じ↓ここの画像はクロスフェードスライダー(画像が徐々に切り替わる)になっていて、それも前回同様jQueryのプラグイン「slick」で作りました。slickはカルーセルスライダー(画像が横にスライド)でもクロスフェードスライダーでも作れるので、最強のスライダープラグインです。あとで詳しく解説します。ナビがアコーディオン。以下、またPC画面↓グーグルマップも貼り付けた↓バナーは適当に自作↓スマホ画面、PC画面合わせて約1週間で完成です。目次jQueryのスライダー系プラグイン「slick」は最強。疑似クラス(nth-childやnth-of-type)が効かない!今後の予定。jQueryのスライダー系プラグイン「slick」は最強。先ほども書きましたが、jQueryのプラグイン「slick」は少しカスタマイズするだけでカルーセルスライダー(画像が横にスライド)もクロスフェードスライダー(画像がふわっと切り替わる)も作れるので最強です。前回模写したゴディバのサイトではカルーセルスライダーを作ったので、今回はクロスフェードスライダーにしました。いっても少しコードをいじればいいので簡単です。/*切り替わるスピード*/});こうすればカルーセルスライダーからクロスフェードスライダーに簡単に切り替えられます。疑似クラス(nth-childやnth-of-type)が効かない!例えば、リスト要素の2番目に何かしたくて、「ul:nth-child(2)」と書いてもうまく効きません。正しくは「li:nth-child(2)」です。親要素にではなく子要素そのものに疑似クラスを付けて下さい。:nth-child(2)」という風に、ulの後に半角スペースを入れて下さい。これはnth-of-typeにも言えます。:first-of-type」という風に、親要素のdlの後に半角スペースを入れて書けばうまく効きます。こんなことは今までどの教材も教えてくれませんでした。実際やってみてわかったことです。今後の予定は、Photoshopの勉強をしようかなと思っています。実際案件を受注するとPhotoshopでデザインが送られてくることが多いそうです。Photoshopが使えないと話になりません。Photoshopは有料(月1000円くらい)ですが、必要な投資なので購入します。模写コーディングシェアするTwitterFacebookはてブPocketLINEコピーハルトをフォローするハルトプログラミング独学の軌跡ゴディバのサイトを模写しました。jQueryのプラグイン、「slick」スライダー。PAS-POLサイトの背景画像をスライドショーにしました。jQuery.BGSwitcherの使い方。ホーム模写コーディングプロフィールプロフィール管理人のハルトです。