WebDesign

Font Awesomeの中でも無料で利用できるFree版の使い方やアレンジの方法について、初めてFont Awesomeを利用する方でもわかりやすいように紹介していきたいと思います。Font Awesomeは簡単に利用でき、無料で利用できるFree版でも豊富な種類のアイコンを利用することができ、多くのサイトで利用されています。

WebDesign

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

WebDesign

CodePenとは、ブラウザ上でHTML,CSS,JavaScriptのコードを記述し、その実行結果を確認したりすることができるサービスです。記述したコードや実行結果は、保存したり共有したりすることができます。今回は、CodePenで記述したコードや実行結果をホームページに埋め込む方法について紹介していきます。

WordPress

WordPress管理画面のテーマファイルエディタでfunctions.phpなどのファイルを編集した際に構文的には正しい記述のはずなのにもかかわらず、syntax errorとなってしまうことが何度かあったので、今回はそのような場合の解決策について紹介していきたいと思います。

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の基本的な使い方と折れ線グラフ、棒グラフ、円グラフの設置例について紹介していきたいと思います。

JavaScript/jQuery

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

HTML/CSS

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

JavaScript/jQuery

シンタックスハイライトとは、ソースコードなどの文字列の可読性を上げるために、属性などに応じて色分けをして表示することです。 今回は、自動でソースコードのシンタックスハイライト表示ができるJavaScriptライブラリ”Prism.js”の使い方を紹介していきます。