Javascript

JavaScript Web制作

2020/7/12

【JavaScript】Swiperを使って端がちょっと見えるスライダーを実装する方法

数あるJavaScriptスライダープラグインの中で、 ・bxslider.js ・slick.js の著名ですが今回利用したのが「Swiper」です。 Swiperのメリット Swiperはオプションが多く、いろいろなスライダーを作ることができます。 ・IE11対応 ・jQueryが不要 ・スマホOKでタッチやスワイプにも対応 ・オプションがありすぎてちょっと面倒 とりあえず公式サイトにあるDEMOを見てみると実装できるスライダーの豊富さがわかります。 デモを見るだけでも大変です。IE11だと結構動作が ...

JavaScript Web制作

2020/7/12

【JavaScript】jQueryのSlideToggle()でアコーディオン開閉時にテキストを変更する。

アコーディオン処理を加えるときにとても楽ちんなのがjQueryのSlideToggle()です。 短い文でかんたんにアコーディオン開閉時を実装できます。 SlideToggle()とともに「もっと見る」「閉じる」のようなボタンのテキストを変化させたいことがあります。 今回はそのサンプルを紹介します。 javaScriptでやること ・SlideToggle()を実装する ・SlideToggle()の開閉を判別する ・テキストを変更する。 最初に必須なjQueryの読み込み方 jQueryをページに読み込 ...

スクロールしたらCSS3のグラフがアニメーションするようにする方法

JavaScript Web制作

2020/7/12

スクロールしたらCSS3のグラフがアニメーションするようにする方法

スクロールしたらCSS3のグラフがアニメーションするようにする方法 『アニメーションするグラフを作ってくれ』と言われてしました。 知らない間にアニメーションの需要が出てきているんですね。 少しWEBから遠ざかっていたのでこんなことができるようになっていたのは非常に驚いています。 たしかにアニメーションするグラフは見栄えが良いし、 企業のサイトを作成するとなると決算や社内状況を知らせるためグラフは不可欠な要素になります。 ちょっとリッチなページ、ひと目を引くページ作成で アニメーションをいれてくれと言われる ...

JavaScript Web制作

2020/7/12

【Chart.js】グラフを簡単に作れるJavaScriptライブラリ

Chart.jsはグラフをとても簡単に作っていくことができるJavaScriptライブラリです。 ・どのグラフにするか? ・どんな数値・メモリを入れていくか? と中身のデータを入れ替えていくだけでグラフが簡単に出来上がります。 エクセルなどのスプレッドシートでグラフを作る感覚に近いです。 グラフの初期テンプレートは用意されており色を変えるだけでなく、カスタマイズも出来ます。 グラフが表示されるときにアニメーションするのもポイントが高い点です。 グラフがアニメーションするとWEBページとしての見栄えも良いで ...

JavaScript Web制作

2020/7/12

【JavaScript】「next()」「prev()」でjQueryで要素の取得して画像を変更する。

JavaScriptのライブラリとして一般的になったのが「jQuery」です。 いまだにjQueryを使ったサイトの案件はたくさんありますので、 JavaScriptの勉強をしていく上では逃げられないライブラリになっています。 「ボタンをオン・オフしてjQueryで画像を変えたい!」と言う時困るのが ・そもそもの画像の変える書き方がわからない ・画像を変える要素を選択する書き方がわからない というところでしょうか。 初歩的な内容ですが、とても需要があり使うことが多いため書き方を覚えておくと便利です。 jQ ...

Javascript

Web制作

2020/7/12

古いサイトでたまに見かけるaタグ「javascript:void(0);」の意味【WEB制作】

Javascript 古いサイトの修正をするときに見かけることがあるのが 「javascript:void(0);」 aタグの画面遷移を無効化するために使われていますが、 どんなメリット・デメリットがあるのでしょうか。 「javascript:void(0);」のメリット ・aタグのhrefに書き込むとaタグの画面遷移を無効化 ・カーソルが「指カーソル」の形になるのでボタンの画像が視覚的に”押すもの”とわかりやすくなる。 ・表示枠をタブ化するときなどにURL欄に”#”などがつかない 「javascript ...

「Lity」の使い方。画像や動画を簡単に強制ポップアップ表示させるJSライブラリー【WEB制作】

Web制作

2019/3/14

「Lity」の使い方。画像や動画を簡単に強制ポップアップ表示させるJSライブラリー【WEB制作】

「Lity」の使い方。画像や動画を簡単に強制ポップアップ表示させるJSライブラリー【WEB制作】 LityはjQueryを利用したLightbox系のJavaScriptライブラリです。 ポイント ・画像、インラインコンテンツ、iframe、動画URLをポップアップ表示できる ・3kBと超軽量 ・レスポンシブ対応 ・利用にはjQuery本体が必要。 ・MIT license. Lityを使うとどうなる? ユーザーがボタンを押すと、対象の内容をポップアップ表示できます。 ポップアップ表示をすることで、自分の ...

Web制作

2019/7/30

【WEB制作】Lightboxの実装方法。かっこいい画像ギャラリーがJavaScriptの知識なしで簡単実装できる

LightboxはjQueryを利用したJavaScriptライブラリ。 最近は見かける機会が減ってきましたが、写真を押すと写真が拡大表示されて 黒背景に写真が等倍で表示される「写真の見栄えをよくできる」ライブラリです。 サムネイルを押すと、大きい画像が等倍にリサイズされながらフェード処理されて表示されるので 動きがあり非常に見栄えが良いのがポイント高いです。 JavaScriptの専門知識がまったくなくても簡単に導入ができるのでよく利用されています。 ライセンスは The MIT Licenseで商用・ ...

Web制作

2014/4/1

[Javascript]「?」を使ったif文の書き方-三項演算子

[Javascript]「?」を使ったif文の書き方-三項演算子

Copyright© さくらいらぼ , 2020 All Rights Reserved.