タグ

2020年8月29日のブックマーク (2件)

  • 「slick.js」を滑らかに動かす方法を解説。jqueryスライダーを完璧に! | WATSUNBLOG

    みなさんこんにちは!ワトスンです。 今回は、、 「slick.jsを使用してスライダーを実装したいが、スライドが滑らかに流れない。。カクつかずに滑らかに流れすにはどうすればいいの?」 という疑問に答えます。 slick.jsを滑らかに動かした例 実際にslick.jsを使用して複数の画像を滑らかにスライドさせた状態をお見せします。 デモサイト このように滑らかにスライドさせていきます。 slick.jsでスライドを滑らかに動かすオプション 「slick.js」には様々なオプションがあり、とても便利です。 「slick.js」の詳しいオプションの使い方は「slick.jsのオプション一覧」からご確認ください。 今回はこのオプションの「autoplaySpeed」「cssEase」を使用してスライドを滑らかにしていきます。 実際にjsファイルに記述する場合は以下のように記述します。 *clas

    「slick.js」を滑らかに動かす方法を解説。jqueryスライダーを完璧に! | WATSUNBLOG
  • 【CSS】ボックスを[height:100%;]で画面全体に表示させる方法。

    CSSを使ってボックスを画面全体に表示させたいとき、通常は[height:100%;]と指定するだけなのですが、なぜか思いどおりの高さにならず、1時間近くもハマってしまいました。 ウェブ制作者ならば誰もが一度は陥るであろうこの問題の解決策を、個人的な備忘録も兼ねて紹介します。 例えば以下のような html があったとします。 <html> <head> <title>ボックスを[height:100%;]で画面全体に表示させる方法。</title> <body> <div id="main"> <h1>親要素の高さに合わせる</h1> 親要素の高さに合わせるには親要素に具体的な高さが設定されている必要がある。 </div> </body> </html> ここで <div id="main">〜</div> の高さをウィンドウのサイズに合わせたいとき。 一見すると body 要素の高さがウ

    【CSS】ボックスを[height:100%;]で画面全体に表示させる方法。