• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

伝わるデザインついて、瞬時に判断していくための知識を書き綴ります。デザイン探索

2021年6月21日(月曜日)  (村本 友梨)

slick.jsを使う際の注意点

みなさんこんにちは。
クリエイターの村本です。

今回は、「slick.jsを使う際の注意点」について
情報を共有したいと思います。


■slick.jsとは??
---------------------------------
Webサイトで、複数枚の画像を次々と切り替えて表示しているのよく見かけると思います。
このような見せ方をスライダーと呼び、JavaScriptで実装しています。

そして、このスライダーをより簡単に実装するためのプラグインの1つに
「slick.js」というものがあります。
「slick.js」はサイズや動き、見せ方が簡単にカスタマイズできて、
かつレスポンシブデザインにも対応した表示ができるため汎用性の高いプラグインだと感じています。

ですが、実際に利用しているといくつか注意点が出てきたのでまとめておきます。


■Slick.jsを使うメリット
---------------------------------

①レスポンシブ対応しやすい
「slick.js」は設置の仕方が簡単で、
複数枚の画像のうち、1画面に表示する画像の枚数を決めるだけ。

どんな画面サイズの端末でも、スライド画像の縦横比を保ったまま、
拡大・縮小を調整して見た目よく表示してくれます。

最近はスマホもPCも1つのHTMLで作成するレスポンシブデザインが多いので
スマホでもPCでも自動でサイズ調整してしてくれるのは助かります。

②オプションが多い
上記では「複数枚の画像のうち、1画面に表示する画像の枚数を決めるだけ。」
と書きましたが、もちろん、スピードや切り替え方法など細かい調整をすることも可能です。

このカスタマイズのために用意されているオプションの種類が多く
自身のデザインに合わせた、様々な場面、見せ方に調整にし易いのもメリットの1つです。


■Slick.jsを使う際の注意点
---------------------------------

①jQuery依存のため読み込みが遅い
「slick.js」はjQuaryを使って作られているため、事前にjQueryを読み込む必要があります。
jQueryは読み込みに時間が掛かるため、
これを使っている「slick.js」も読み込みが遅くなってしまいます。

実際、画像の表示や動き出しに時間がかかったりするため
ファーストビューで表示されるスライダーに使用する場合は、注意が必要です。

動き出しまでの間の表示が崩れないようcssで調整したり、
なるべく画像のサイズ(容量)を小さくして、画像自体の読み込みの負荷を減らす対応が必要です。
場合によっては「slick.js」を使わない
→jQuaryを使わない、JavaScriptだけで作成したスライダーを検討した方が良いかもしれません。

②ul、liタグを使ってマークアップすると、HTML構造がおかしくなる
複数枚の画像を並べて表示するので、ul、liタグを使ってマークアップしたくなるのですが、
divを使ってマークアップした方がよさそうです。

というのも、「slick.js」を使うと自動で生成されるdiv要素があり
これがul、liタグの親子関係の間に来てしまうからです。
現時点(2021/05/21)ではulタグ直下の子要素にはliタグしか入れられない!
というルールのため、構造的におかしいなことになってしまいます。
そのため、これを回避するにはdivを使ってマークアップした方がよさそうです。


<ul>
  <div>
    <li><img src="xxx.jpg" alt="xxxxx"></li>
    <li><img src="xxx.jpg" alt="xxxxx"></li>
    <li><img src="xxx.jpg" alt="xxxxx"></li>
  </div>
</ul>
↓↓
<div>
  <div>
    <div><img src="xxx.jpg" alt="xxxxx"></div>
    <div><img src="xxx.jpg" alt="xxxxx"></div>
    <div><img src="xxx.jpg" alt="xxxxx"></div>
  </div>
</div>

AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン