【実践】スライドショーの実装方法！HTML・CSS・jQuery
「スライドショーの実装方法」について実践・解説しています😊♪
HTML CSS、そしてjQueryベースのライブラリ「slick（スリック）」を使用してスライドショーを実装します😆❗️
🎥 この動画の構成 🎥
00:24 今回使用するもの
00:42 slick（スリック）って何？
01:22 ベースファイルの作成
02:54 スライドショー実装開始
03:16 slick（スリック）のダウンロード・配置
04:08 HTMLの記述
04:36 CSSの読み込み
05:06 jQuery・slick（スリック）の読み込み
06:01 発火スクリプトの記入
07:35 基本の実装完了
08:10 オプションについて
🗂 今回使用したファイル 🗂
www.craft.do/s/ikxbn7v4H4cBkp
ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
✅ 👇 『チャンネル登録』よろしくお願いします🙇♂️
kzread.info?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
/ hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.co.jp/hirocode/
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
✅ Apple Macbook Pro 16inch
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン？
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
#WEBデザイン #Figma #XD
Пікірлер: 19
ありがとうございます！！
@hirocode
6 ай бұрын
こちらこそコメントいただきありがとうございます😆❗️
ありがとうございました。slickフォルダをコピーする場所を間違えて（slideshowの外）苦戦してしまいました。最終的に画像が表示され良かったです。
@hirocode
Жыл бұрын
うまく行ったようでよかったです☺️ こちらこそ嬉しいコメントいただきありがとうございます🙇❗️
この動画のお陰で、スライドショーを入れることが出来ました！😭3枚全てに共通のロゴ画像(svg形式、真ん中に)入れたい場合はどのようにすれば良いでしょうか？またその下にh1で文字も入れたいです。
@hirocode
Жыл бұрын
上手く行ったようでよかったです😆♪ その場合、ボックスを使って画像の上に載せる形が良いかと思います！ 下記コード参考にしてみてください🙇❗️ テキスト テキスト テキスト .slide { position: relative; } .slide .text { width: 100%; height: 100%; position: absolute; inset: 0 auto auto 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .slide .text img { height: 40px; } .slide .text h1 { color: #fff; font-size: 48px; font-weight: 800; margin: .5em 0 0; }
@user-ke7qm5sp4k
Жыл бұрын
@@hirocode うおー！わざわざありがとうございます😭早速やってみます！
いつも動画を参考に勉強しています。分かりやすいので助かっています。 スライドショーも作成しました。プレビューではちゃんと動いているのですが、WEBサイト上では画像すら表示されていません。思い当たる原因はありますか。
@hirocode
2 жыл бұрын
コメントいただきありがとうございます🙇♂️ サーバー上に上げた段階でみれなくなったということでしょうか❓ スライドの部分のみ表示されない場合は、パスの指定に誤りがある可能性が高いです。ページ自体表示されない場合はアップロード自体に問題があるかもしれません！
@Aki-oy2rr
2 жыл бұрын
@@hirocode そうです。サーバー上に上げた段階で見れなくなっています。パスの指定、確認してみますね。ありがとうございます！
わかりやすい〜！ ヒロさんの落ち着いた声、背景のポップなBGM，プロの構築の速さと感覚が伝わってきて好きなチャンネルです( ´∀｀)
@hirocode
Жыл бұрын
好きなチャンネルと言っていただけてめちゃめちゃ嬉しいです😭❗️ありがとうございます🙇♂️
画像に対してリンクを貼りたいのですが、aタグだと飛んでくれません。 何か解決さくはありますか？
@hirocode
11 ай бұрын
コメントありがとうございます☺️♪ この動画で説明しているdiv.your-classの直下がそれぞれ1枚のスライドになるので、それをdivからaタグに変更すればOKです!
分かりやすい解説動画ありがとうございます。上手く行かなければコメントにと言っていただいたので、甘えさせてください。 ダウンロードしたファイル、オフラインではスライドしました。ただサーバーに乗せると動かないんです・・・画像が３枚表示されるだけ。何も手を加えずにアップロードしただけなのですが、何か原因はありますでしょうか？ちなみにサーバーはHetemlとx-server両方試しました。ブラウザもChromeとFirefoxで試しました。 お時間あるときで結構ですので、教えていただければ幸いです。不躾にごめんなさい。
@hirocode
5 ай бұрын
コメントありがとうございます😆❗️ jQueryを読み込んでいるscriptタグの src="code~ を src="//code~ に変更してみてください🙇❗️
@kaazuya2011
5 ай бұрын
@@hirocodeありがとうございます！一発で解決！！！助かりました！！！これからも拝見させていただきます。ありがとうございます。
動画最後の調整の仕方が知りたいです？
@hirocode
Жыл бұрын
コメントいただきありがとうございます😊♪ オプションの書き方としては、8:30で説明している{}の中に必要なオプションを記入していきます! 例えば、このような形で指定します。 $('.xxxxx').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3 }); いろんなオプションがあるので、必要に応じて使い分けてください😆❗️