JavaScript/jQuery

Googleスプレッドシート(Google Spreadsheets)内にあるデータをGoogle Chartsを利用してWebページ上でグラフ化する方法について、具体的な記述例も交えながら紹介していきます。

WebDesign

古いバージョンのPhotoshopでは、WebP画像を扱うことができませんでしたが、2022年2月リリースのPhotoshop 23.2からはWebP画像を扱うことができるようになりました。古いバージョンのPhotoshopにプラグインをインストールしてWebP画像を扱う方法や、新しいPhotoshop 23.2でWebP画像を扱う方法などについて紹介していきます。

JavaScript/jQuery

Google ChartsはGoogleが提供するグラフ描画のJavaScriptライブラリです。今回は、Webサイトに色々な種類のグラフを設置することができるGoogle Chartsの基本的な使い方と折れ線グラフ、棒グラフ、円グラフの設置例について紹介していきたいと思います。

WebDesign

今回は、画質の変化を確認しながら画像のファイルサイズを圧縮したいときなどに便利な”Squoosh”を紹介したいと思います。“Squoosh”とは、ブラウザ上でも動作するGoogle製の画像圧縮・変換ツールです。

JavaScript/jQuery

jQueryのプラグイン「StickyStack.js」の使い方を紹介します。スクロールした時にスタッキング要素が固定されて表示されるので、下からスクロールアップしてくる要素が上に重なっていくような視覚効果を実現することができます。

JavaScript/jQuery

”Animate.css”と組み合わせることでスクロールに応じたアニメーションを簡単に設置することができるJavaScriptのライブラリ”wow.js”を紹介します。Animate.cssがバージョンアップしてv4系となったことで変更すべき点もありますのでその点も含めて紹介していきたいと思います。

WordPress

WordPressで制作したサイトで、WordPressに元々含まれていない外部のCSSやJavaScriptのファイルを読み込ませて利用する際の方法として、推奨されているやり方について紹介していきたいと思います。CDN経由でのファイル読み込み方法とサイトに設置したファイルの読み込み方法についてそれぞれ紹介します。

JavaScript/jQuery

jquery.inviewはディスプレイのビューポート内(画面内)に入った要素に対して、何らかの処理を実行させることができるライブラリです。
今回はこのjquery.inviewを使ってスクロールで画面内に現れた要素にCSSでフェードインなどの動きをつける方法と記述例を紹介します。

JavaScript/jQuery

jQueryをWebページに読み込ませる方法について、ダウンロードしてサイトに設置する場合とCDNを利用する場合それぞれの方法を紹介していきます。

HTML/CSS

Animate.cssは、HTMLの要素にクラス名を指定するだけで簡単にアニメーションを利用することができるCSSライブラリです。
今回はこのAnimate.cssのバージョン4系の使い方について紹介していきます。