Webサイトにグラフを設置することができる”Google Charts”の使い方【基本編】
Google ChartsはGoogleが提供するグラフ描画のJavaScriptライブラリです。今回は、Webサイトに色々な種類のグラフを設置することができるGoogle Chartsの基本的な使い方と折れ線グラフ、棒グラフ、円グラフの設置例について紹介していきたいと思います。
紙芝居のようにスクロールできる”StickyStack.js”の使い方
jQueryのプラグイン「StickyStack.js」の使い方を紹介します。スクロールした時にスタッキング要素が固定されて表示されるので、下からスクロールアップしてくる要素が上に重なっていくような視覚効果を実現することができます。
“wow.js”と”Animate.css(v4)”を組み合わせてスクロール連動のアニメーションを実装する方法
”Animate.css”と組み合わせることでスクロールに応じたアニメーションを簡単に設置することができるJavaScriptのライブラリ”wow.js”を紹介します。Animate.cssがバージョンアップしてv4系となったことで変更すべき点もありますのでその点も含めて紹介していきたいと思います。
”jquery.inview”を使って画面内に現れた要素にフェードインなどの動きをつける方法
jquery.inviewはディスプレイのビューポート内（画面内）に入った要素に対して、何らかの処理を実行させることができるライブラリです。
今回はこのjquery.inviewを使ってスクロールで画面内に現れた要素にCSSでフェードインなどの動きをつける方法と記述例を紹介します。
アニメーションを簡単に実装できる”Animate.css”(v4)の使い方
Animate.cssは、HTMLの要素にクラス名を指定するだけで簡単にアニメーションを利用することができるCSSライブラリです。
今回はこのAnimate.cssのバージョン４系の使い方について紹介していきます。
ソースコードをシンタックスハイライト表示できる”Prism.js”の使い方
シンタックスハイライトとは、ソースコードなどの文字列の可読性を上げるために、属性などに応じて色分けをして表示することです。 今回は、自動でソースコードのシンタックスハイライト表示ができるJavaScriptライブラリ”Prism.js”の使い方を紹介していきます。
“Pure.css”でサクッとレスポンシブなレイアウトを作る
軽量なCSSフレームワークの「Pure.css」の一部のファイルを使って、手軽さ最優先でレスポンシブなグリッドレイアウトの枠組みを作る方法を紹介します。
タイピングアニメーションを設置できる”iTyped.js”の使い方
指定した文字列を一文字ずつタイピングしているようなアニメーションを表現できるJavaScriptライブラリの”iTyped.js”の使い方を紹介します。
Webフォントを軽量化（サブセット化）してセルフホスティングで読み込ませる方法
ページの読み込み速度を改善するために、軽量化（サブセット化）したWebフォントを自分のサーバーにアップロードしてWebページで読み込ませる（セルフホスティング）方法について紹介していきます。