まずはじめに
Progateやドットインストールなどをやって、
次に何をすれば良いかわからない人向けに、簡単で分かりやすく、
実際に通用するコーディングを練習していこうという内容です。
全3回の内、今回はその2回目の記事です。1回目の記事↓
コーディング練習 ブログトップページ編 1 / 3
コーディング練習 ブログトップページ編 3 / 3
完成品
See the Pen Design_Blog-top by engineerhikaru (@engineerhikaru) on CodePen.
今回やっていくこと
今回は、スライドのコーディングまでやっていきます。
この部分を作っていきます↓
コーディング
コーディングは前回作成したindex.htmlとstyles.cssを使っていきますので、
引き続きご用意ください。
HTML記述
スライド部分のHTMLを記述します。
前回のheaderタグの下に書いていきます。
<div class="bxslider">
<div><img src="https://placehold.jp/1000x400.png"></div>
<div><img src="https://placehold.jp/1000x400.png"></div>
<div><img src="https://placehold.jp/1000x400.png"></div>
</div>
今回作成するスライドは、bxsliderというjqueryプラグインを使います。
bxsliderは、シンプルにスライドを作れるので、初心者に良いと思いチョイスしました(^^)
bxslider
このようにスライドに限らず少し作成するのが面倒なパーツは、
プラグインやライブラリなどを使うのが一般的です。
現場でもそんな感じで、面倒なコードは一から作るので無く
便利なものは効果的に使うという考えをしますので、
勉強する段階でも、そういう考え方をしていきましょう！
スライドのプラグイン(ライブラリ)は他にも「Swiper」や「Slick」などがよく使われています。
画像は自由に変えて良いですが、画像サイズは全て同じにすると見栄えが良くなります。
CSS読み込み&記述
bxsliderプラグインのCSSの読み込みと、設定用のCSSを追加していきます。
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.css">
</head>
.bx-wrapper{
margin: 0;
border: none;
box-shadow: none;
}
.bx-controls{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.bx-controls-direction{
display: flex;
justify-content: space-between;
padding: 0 10px;
}
少し解説すると、bx-wrapperというクラスがbxsliderで自動的に
生成されるので、それの余白やボーダーや影などをなくします。
同じくbx-controlsというクラスが自動で生成され、
こちらはスライドを切り替えるボタンでその配置を中央にしています。
同じくbx-controls-directionは、両端に配置するようにしています。
JavaScript読み込み&記述
jQueryの読み込みとbxsliderのJavaScriptファイルを読み込み、
bxsliderの設定のJavaScriptの記述をしていきます。
jQueryとbxsliderの読み込みは、bodyタグの終了の直前で読み込むようにしてください。
これはJavaScriptファイルの読み込みはサイトが表示されてから
JavaScriptを読み込むという感じの処理で、サイト表示速度を速くしたりするために
するちょっとした小技みたいなものです。
CSSはheadタグ内、JavaScriptはbodyの終了タグ直前と思っていてください。※ただし、例外あり
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$('.bxslider').bxSlider({
auto: true,
pager: false
});
</script>
少し解説すると、まず1行目がjQueryの読み込みで、2行目がbxsliderの読み込みをしています。
JavaScriptの読み込みなので、script srcを使います。
続いてscriptタグで、どれをスライドにするかを設定し(ここではbxsliderクラスを指定)、
同時にオプションも設定してきます。ここでは、自動でスライドが切り替わる「auto」と
スライドが何枚目かを表示する「pager」を表示しないようにしています。
その他にも色々とオプションがあり、詳しくはbxsliderの公式ドキュメントをご覧ください。
bxsliderオプション
次回
次回は、記事一覧とサイドバー、フッターの部分を解説していきます。
全3回のラストです！お楽しみに！
ちなみに、今回作成したスライドのことは「カルーセル」と呼ぶことも多いので、
用語として覚えておきましょう。
この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)