架空のカフェサイトを作りました。クロスフェードスライダー。nth-childやnth-of-typeが効かない!

f:id:gharuto:20200807232210j:image

あるHTML CSS学習本(前回の記事参照)で作るサンプルサイトを参考に、架空のカフェのサイトを作りました。

画像は、無料画像素材サイトの「写真AC」から取ってきてます。

出来栄えはこんな感じ↓

f:id:gharuto:20200807221147p:plain

ここの画像はクロスフェードスライダー(画像が徐々に切り替わる)になっていて、それも前回同様jQueryのプラグイン「slick」で作りました。

f:id:gharuto:20200807233343p:plain

slickはカルーセルスライダー(画像が横にスライド)でもクロスフェードスライダーでも作れるので、最強のスライダープラグインです。

あとで詳しく解説します。

スマホ画面のトップ↓ ナビがアコーディオン。

f:id:gharuto:20200807221056p:plain

以下、またPC画面↓

f:id:gharuto:20200807222628p:plain

f:id:gharuto:20200807222735p:plain

グーグルマップも貼り付けた↓

f:id:gharuto:20200807222753p:plain

バナーは適当に自作↓

f:id:gharuto:20200807222846p:plain

スマホ画面、PC画面合わせて約1週間で完成です。

jQueryのスライダー系プラグイン「slick」は最強。

先ほども書きましたが、jQueryのプラグイン「slick」は少しカスタマイズするだけでカルーセルスライダー(画像が横にスライド)もクロスフェードスライダー(画像がふわっと切り替わる)も作れるので最強です。

前回模写したゴディバのサイトではカルーセルスライダーを作ったので、今回はクロスフェードスライダーにしました。

といっても少しコードをいじればいいので簡単です。

参考にしたのはこのサイト↓

【jQuery】スライダー系プラグイン slickの使用方法 – Qiita

とういわけで、jQuery部分をこうしました↓


$('.slider').slick({
arrows:false, /*左右の矢印をなくす*/
fade:true, /*画像をゆっくり切り替える*/
autoplay:true,
autoplaySpeed:3000,
speed:3000, /*切り替わるスピード*/
});

こうすればカルーセルスライダーからクロスフェードスライダーに簡単に切り替えられます。

疑似クラス(nth-childやnth-of-type)が効かない!

例えば、リスト要素の2番目に何かしたくて、「ul:nth-child(2)」と書いてもうまく効きません。

正しくは「li:nth-child(2)」です。

親要素にではなく子要素そのものに疑似クラスを付けて下さい。

もしくは、親要素に疑似クラス付けるのであれば「ul :nth-child(2)」という風に、ulの後に半角スペースを入れて下さい。

そうすれば効きます。

もちろんこれはnth-of-typeにも言えます。

これを応用すると、

dlリストの最初のdt要素とdd要素に何かしたいのであれば、

「dl :first-of-type」という風に、親要素のdlの後に半角スペースを入れて書けばうまく効きます。

こんなことは今までどの教材も教えてくれませんでした。

実際やってみてわかったことです。

今後の予定。

今後の予定は、Photoshopの勉強をしようかなと思っています。

実際案件を受注するとPhotoshopでデザインが送られてくることが多いそうです。

ですからPhotoshopが使えないと話になりません。

Photoshopは有料(月1000円くらい)ですが、必要な投資なので購入します。

コメント

タイトルとURLをコピーしました