最初の基礎を一緒に乗り越えて、基礎部分を繰り返して自分のものにすればそこからは自分で調べる事も容易になり、そこから本を読む事も全く知識0よりめちゃめちゃ頭に入ります。
まずは自分が作りたい物を作り上げて楽しいと感じて欲しい！という思いから、講座の内容をミニマムにしています。
丁寧に分かりやすく過保護に(w)説明します
このブログのコンセプトである、最初の壁を一緒に乗り越えましょう！
目次
プラグインの使い方
まず、プラグインを使うのに大体英語のドキュメント でびっくりしますよね。英語を読める必要はありません。かく言う私も全く読めません。
初学者の場合はまずは公式を見に行き、公式の通りにいちど組んでみましょう。
他の記事を読んだり、カスタマイズはその後です。
まずは公式の通りのCDNをコピペし、公式の通りにHTMLをコピペし、必要であればCSSやjs(JavaScriptやjQuery)もコピペしてみましょう。
プラグインにはjQueryに依存するものと依存しないものがあるので、読み込む必要があるかどうかをドキュメントを翻訳機にかけて確かめます。
私のおすすめは、まずはCDNで動きを確認し、もしダウンロードする場合は実装の時にする事です。
以下に、CNDとHTML CSS JSを入力する箇所を示します。
とにかく最初はカスタマイズせずに、公式の通りにやって動作を確認しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
// CDN .css
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
// 公式のCSSがあれば、上記 style.css か、動作確認であれば内部CSSでここにコピペして確認するのもお手軽でおすすめ
</style>
</head>
<body>
// 必要であれば CDN jQuery
// CDN .js
<script>
// 公式に初期化のjsがあればここにコピペ
</script>
</body>
</html>これで、公式と同じく動けばOKです。
動かなければコードが間違っているので、それぞれ確認しましょう。
まずは試して欲しいプラグイン
- Slick jQuery依存の簡単なスライダー Slick公式
- LightBox2 ライトボックスを実装できます。カスタムデータ属性を揃える事でグループ化 Lightbox公式
- Swiper jQueryに依存しない高機能なスライダー カスタマイズしやすいので、Slickに慣れたらこちらも使ってみましょう Swiper公式
コメント