jQueryプラグイン活用講座

circlifulのオプションでデザインを変える

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
設定にオプションを加えると、グラフや文字のデザインが変えられます。
講師:
05:28

字幕

このレッスンでは、プラグインのCircliful で作った円グラフにオプションの設定を加えて表示を少し変えてみたいと思います。オプションの設定については、Circliful のこのページでGitHub の方に飛んで、その REAME を見ると英語ですけれどもオプションの設定が書いてあります。結構たくさんあります。この中のいくつかを試してみたいと思います。Dreamweaver で開いたHTML ドキュメントには、Circliful の簡単な設定で円グラフを作っています。circliful のプラグインをjquery の後に読み込んでdiv 要素で設定を行うんですけれどもclass を定めてそして circliful の設定は2つ加えてあります。まず、円グラフの大きさというか数字ですね。それから、数字として実際に円グラフの中に書く文字です。実行するには jQuery の最初の初期化の function の中でselector でclass を指定してcircliful何も引数なしの () です。今どうなってるか、確認しておきましょう。「ファイル」で「ブラウザーでプレビュー」します。アニメーションでグラフが徐々に大きくなって、これが 65% の位置です。 それから 65% という数字が用意されています。このデザインを少し変えてみましょう。HTML ドキュメントに戻りまして、この div 要素に設定を加えていきます。Circiful の設定はdata- で始まる属性を加えていくんですけれどもまずは1つ。data-dimension。そして値はですね。240 とします。これは、円グラフ全体の大きさになります。デフォルトは 200 ピクセルなんですけれどもそれを少し拡大するということになります。「保存」しまして「ブラウザーでプレビュー」しましょう。円グラフが伸びていきました。大きくなったんだろうかと。先ほどのグラフが、まだタブで残っていますので比較しましょう。確かに大きくなっていますね。ではもう少し、設定を付け加えていきたいと思います。data で始まるオプションの属性を2つ追加します。data-width です。幅ということですけれども、何の幅かというとグラフの太さですね。デフォルトは 15 ピクセルなんですが、太く 30 ピクセルにします。そしてまた data- ですね。info と。これは、文字のパーセンテージの表示。65% ありますね。 あの下に、文字を表示することができます。New Clients としましょう。そして「保存」します。ブラウザウィンドウをリロードしましょう。太くなりましてそして New Clients という文字が、パーセンテージの下に現れました。後2つほど、オプションを加えてみたいと思います。HTML ドキュメントの div 要素にまた data- でオプションを加えます。fgcolor。これは foreground ですね。グラフの色です。先ほどは、モスグリーンのような色でしたけれどももうちょっと明るい色にしましょう。skyblue と。ここには css のカラーの設定と同じように、設定を加えることができます。ですから # マーク。2桁の後に、6桁の入力進数の数字を加えても結構ですしこのように、カラー名も設定しても大丈夫です。後もう1つは、data-fontsize です。これは言わなくても分かりますね。あの 65% という文字のところのサイズです。デフォルトでは 15 ピクセルとなっているんですが倍ぐらい、もうちょっと大きく36 というふうにしたいと思います。では保存しましょう。ブラウザウィンドウを再びリロードします。 真ん中のテキストが大きくなりましたし、この色がスカイブルーに変わりました。オプションについてさらに詳しくはGitHub の CirclifulREADME でこのオプションの説明をご覧になるといいでしょう。このレッスンでは Circliful の5つのオプションをご紹介しました。div 要素に加えたんですけれどもdimension すべて、data- で始まりますけどdimension はグラフ全体の大きさ。それから width は太さですね。info は加える文字。それから fgcolor がグラフの色。そして fontsize はテキストの部分のフォントの大きさでした。

jQueryプラグイン活用講座

jQueryは広く利用されているJavaScriptライブラリで、機能を拡張するプラグインも数多く公開されています。このコースではインターフェイスやアニメーションが簡単に作れるiQueryのプラグインを多数紹介します。パーティクルのアニメーションや切り替え効果を加えた写真表示、アニメーションするパーツなど多くの作例を実際にコードを書きながら詳しく説明します。

2時間36分 (31 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年01月17日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。