【30代からのプログラミング】絶対わかる！初心者がjQueryでスライダーを作るための備忘録。

こんにちは、現在Progateでプログラミングを学習中です。30代主婦の超初心者ですが、同じようにプログラミング学習を始めた方のために忘備録を書いてみようと思います。（ホントは自分のために）
Progateのみで終わらせないように実際にエディターでプログラミングをしてみましょう！

理解する！jQueryで作るスライダー

目標：PREV /NEXT　ボタンで４つのイラストを一枚ずつ表示させる
言語：HTML、CSS、jQuery
レベル：初心者(progateーjQuery上級編を攻略済み）

最初の一歩：HTMLを書く

さて、まずはHTMLを作らねばですよね。まずは構成を考えてみようと思います。デザインはもっとカッコいいものができるようになりたいですが、まずは仕組みから理解できるようにしたいです。

１：HTMLの骨組みを作る

まずは骨組みをつくります。PREVとNEXTのボタンでスライドさせます。スライドさせたいイラストはリストにします。

２：PREVとNEXTにクラス名をつける

jQueryの記述では、この２つの共有クラス名と、個々のクラス名が必要になります。
それぞれ<div>で囲みます。赤のchangeが共有のクラス名になります。
<div class="wrapper">
   <div class="change btn-prev">PREV</div>
   <div class="change btn-next">NEXT</div>
</div>

3: リスト４つのクラス名をつける

4つのイラストの<img>ですが、4つとも共通のクラス名をリスト内につくります。
<ul>
    <li class="slide"><img src="...">
    <li class="slide"><img src="...">
    <li class="slide"><img src="...">
    <li class="slide"><img src="...">
</ul>

次に最初のイラストにだけ、activeのクラスをつくります。あとからこのactiveをjQueryでつけたり外したりして、イラストの表示／非表示をさせませす。
<ul>
    <li class="slide active"><img src="...">
    <li class="slide"><img src="...">
    <li class="slide"><img src="...">
    <li class="slide"><img src="...">
</ul>

ちょこっとメモ
グーグルドライブ内の画像を使うことができる！
詳しくは：Codepenの無料会員で画像を使うには
Codepenを利用するにあたって発見したのですが、他にも利用できそうなので覚えておくとよいかもしれません。

CSSを設定する

CSSでの役割は大きく２つです。

  1. 選択されていないイラストは非表示にする。
  2. 選択されたイラストだけを表示させる。
です。

1:まずは、イラストの非表示ですがこれはかんたん。slideをdesplay: none;で隠すだけです。
.slide{
    display: none;
}

2: 表示させたいクラスはactiveになります。あとから選択されたイラストにとactiveのクラスが付与されるようにjQueryで記述します。とにかく今は、
.active{
    display: block;
}

あとは、お好きなようにCSSで装飾などして下さい。

jQueryでスライダーファンクションをつくる！

さて、やってきました。こいつをやっつけてしまいましょう。まずは、jQueryを使う前にヘッダーにjQueryのCDNのスクリプトが記述されていること、</body>の前に、script.jsがリンクされているかどうか、確認しましょう。そして、script.js内では、jQueryは、function(){ .....}の中に書くことをもう一度思い出しましょうね。

私は、忘れていましたー。(￣∇￣;)ハッハッハ　
初めはちゃんとPathが通っているかどうか＜ｈ１ id=hoge＞などのテキストの色を変えてみて確認してみることをお勧めします。
$('#hoge').css('color' 'red');
こんな感じで。無事＜ｈ１＞のテキストが赤くなったら安心してコーディングしていきましょう。

１：クリックファンクションを作る。

PREV　/　NEXT　のボタンがクリックされたときに、イラストをスライドさせたいので、
まずは、クリックファンクションですね。この中に、色々細かな設定をしていきます。
PREV/NEXTの共通クラスの changeを使います。

$('.change').click(function(){ ...});

2:クリックによって、.activeが前／次の<li>に移動するようにします。


$('.change').click(function(){

var display(←任意の変数です）=$('.active');
display.removeClass('active'); (←まずはactiveを取ってしまいます。【.】が要らないことにも注目です。こいつにどれだけ苦しめられたことか。）

３：if｛｝else｛｝と.addClassをつかって.activeを移動させます。

$('.change').click(function(){
     var display = $('.active')
    display.removeClass('active')

  if($(this).hasClass('btn-next')){ (←クリックされたボタンがNEXTの時ということ）

        display.next().addClass('active');（←次の<li>にactiveをつけろということ）
  
} else{（←その他。ここではPREVが押されたとき）
       
        display.prev().addClass('active');　（←前の<li>にactiveをつけろという事）
  }
});

どうでしょう出来ましたか？

Codepenで今回の内容をコピペ学習できます。

今回の内容とプラス＠をCodepenで公開しております。progateで学習した内容とほぼ同じになりますが、学習用によければコピペでもなんでもお使いください。イラストの著作権は私にあります、お好きにご利用ください。2次配布しないでくれれば、何に使ってもOKです。
See the Pen jQueryでスライド by ponmama (@ponmama) on CodePen.
実際にエディターを使って復習してみると、より理解がふかまりますので、おススメですよ。 今回初めてCodepenを使いましたが、もっといろいろ活用していきたいですね。 それでは、また書きます！

コメント

コメントを投稿

このブログの人気の投稿

素人でもAdobe Stockでの副業で売り上げを出す方法を考察

イメージ
お小遣い稼ぎとして目を付けたのがストックフォト販売。クラウドワークスなどで仕事を受注する前に、ストックフォトで実力を磨けるのでは？と考えました。アドビストックでは、写真、イラスト、ベクター、そして映像の作品を売ることができます。販売を開始するのもアカウントをつくる（無料）だけ。しかし問題はそこから先、稼げるかどうかの前に、売れる作品をつくらなければいけません。 そこで今回はアドビストックのコントリビューターで売れる作品は何なのか考えていきたいと思います。 Adobe Stockで作品を売るために知っておくこと プロのイラストレーターや写真家などクリエイティブ界の戦士たち必須アイテムのアドビ。アドビのイラストレーターやフォトショップはあまりにも高額で手を出すことができない存在なのですが、Adobe Stockで作品を販売することは無料でできます。 基準を超えていればAdobeのソフトを使用して作品を作る必要はありません。私が使っているのはクリップスタジオとCoral Proです。 （売れるかどうかは別） では、あなたの作品を買う人はどんな人たちだと思いますか？　Adobe Stockの購入者の側からサイトを見てみればわかることなのですが、質は高いものが多いですね。そして他のストックフォト系のサイトに比べると、購入するためのお値段はかなり高め。つまりあなたの作品を買うお客様はプロフェッショナル界で活躍するデザイナーさんだったり、デザイン会社、あるいは広告主であったりするのではないでしょうか。フリー素材を必要としているブロガーやYouTuberさんなどは恐らく利用しないであろうサービスです。なかなか超えていくべき敷居が高そうです。 フタが付いたままだよ まずは基本を押さえたい どんなに頑張っても基本が抑えられてなかったら結果は伴いませんよね。まず抑えるところをユーザーガイドからリストしてみたいと思います。 写真とイラストのストック必須項目リスト JPEGであること 画素は４MP以上１００MP（メガピクセル）以下であること ファイルサイズは４５MB（メガバイト）以下 ウォーターマークや日付は付けない さて、ピクセルの画素数とファイルサイズに指定があるのはわかったのですが、素人の私はここで引っ掛かります。画素ってど...
続きを読む

プロフィール

イメージ
ファイナルファンタジーシリーズと、愛犬のポメラニアンをを愛してやまないただの主婦、白圭望です。 髪切りました 現在 CLIP STUDIO pro でデジタルアートを勉強中。できた作品オンラインショップで配信しています。もっと画力を上げたいです。 このブログでは、クリップスタジオの使い方、デジタルアートのあれこれと、たまにゲームやアニメそしてファイナルファンタジーについて書いていこうと思います。 ちなみに今現在は夫の仕事の都合でアメリカのロスに住んでおります。日本が恋しいです。
続きを読む

【30代からのプログラミング】Progateでとにかく勉強してみる編

イメージ
こんにちは、結婚して仕事を辞め家でのほほんと過ごしている主婦です。ブログをぼちぼちやってみたり、デジタルアートに手を出してみたり、ワードプレスで自分のウェブサイトを作ってクラッシュしてみたりしながら過ごしております。そんなこんなでふと興味を持ったのがプログラミング。 なんの経験もない主婦がプログラミングなんてできるのでしょうか？ 見つけた！これなら安心して誰でも学べるプログラミング！ プログラミング自体は前から興味はあったのですが、実際何がどうなっているのかがミステリーでした。HTML／CSSはちょっぴり触ったことがあったのですが、JavaとかC+やPythonなどの呪文に聞こえる言語たち。いったい何から学べばいいのかなんかイマイチわからず。とりあえずJavaなのか？JavaとJavaScriptは違うの？同じなの？なんなの？　という状態から抜け出せず・・・。”Glasshopper”というJavaScriptを学べるアプリをやってみたものの早い段階で挫折。 そんななか出会ったのは　 ”Progate” というサイトです。 Progate おすすめの理由 難しい環境設定がいらない、Web上で勉強できる！ 何を勉強すればいいのかわかりやすい”目的別コース” 色々な言語が学べる 実際にコードを打ち込んで勉強できる 説明やキャラがカワイイ ゲーム感覚で進められる 無料コースも充実している ドットインストールも独学者には有名どころですね。３分のビデオ講習なので、ちょっとした空き時間にこちらを利用するのも良いと思います！ 私は、ゲーム感覚でできるProgateがかなり自分に合っていました。基本飽き性なのですが、ゲーム好きが幸いしました。課題をこなすほどにポイントがもらえたりレベルが上がったりすること、かわいいキャラクターが出てきて飽きにくいですね。 ３０代主婦が実際Progateを挑戦してみた感想 一言：面白い！わかる！できる！ です。今現在の私はHTML／CSSの中級編を勉強しています。Lv.87です。 やはり記憶力がだいぶ落ちているのでノートを取りながら、たまにグーグルで調べながらコースを進めています。寝る前のゲームはProgateの携帯アプリに変わりました。ゲーム感覚でスイスイ進められます。 何を勉...
続きを読む