Font Awesome(v6)の使い方
Font Awesomeの中でも無料で利用できるFree版の使い方やアレンジの方法について、初めてFont Awesomeを利用する方でもわかりやすいように紹介していきたいと思います。Font Awesomeは簡単に利用でき、無料で利用できるFree版でも豊富な種類のアイコンを利用することができ、多くのサイトで利用されています。
画像の圧縮形式変換やファイルサイズ圧縮ができる”Squoosh”の使い方
今回は、画質の変化を確認しながら画像のファイルサイズを圧縮したいときなどに便利な”Squoosh”を紹介したいと思います。“Squoosh”とは、ブラウザ上でも動作するGoogle製の画像圧縮・変換ツールです。
CodePenを利用してコードや実行結果の埋め込みをホームページに表示させる
CodePenとは、ブラウザ上でHTML,CSS,JavaScriptのコードを記述し、その実行結果を確認したりすることができるサービスです。記述したコードや実行結果は、保存したり共有したりすることができます。今回は、CodePenで記述したコードや実行結果をホームページに埋め込む方法について紹介していきます。
WordPressのテーマファイルエディタでファイルを編集した時のsyntax error解決策
WordPress管理画面のテーマファイルエディタでfunctions.phpなどのファイルを編集した際に構文的には正しい記述のはずなのにもかかわらず、syntax errorとなってしまうことが何度かあったので、今回はそのような場合の解決策について紹介していきたいと思います。
Google Chartsを利用してWebサイト上でGoogleスプレッドシートのデータからグラフを作成する方法
Googleスプレッドシート(Google Spreadsheets)内にあるデータをGoogle Chartsを利用してWebページ上でグラフ化する方法について、具体的な記述例も交えながら紹介していきます。
PhotoshopでWebP画像を扱う方法
古いバージョンのPhotoshopでは、WebP画像を扱うことができませんでしたが、2022年2月リリースのPhotoshop 23.2からはWebP画像を扱うことができるようになりました。古いバージョンのPhotoshopにプラグインをインストールしてWebP画像を扱う方法や、新しいPhotoshop 23.2でWebP画像を扱う方法などについて紹介していきます。
Webサイトにグラフを設置することができる”Google Charts”の使い方【基本編】
Google ChartsはGoogleが提供するグラフ描画のJavaScriptライブラリです。今回は、Webサイトに色々な種類のグラフを設置することができるGoogle Chartsの基本的な使い方と折れ線グラフ、棒グラフ、円グラフの設置例について紹介していきたいと思います。
紙芝居のようにスクロールできる”StickyStack.js”の使い方
jQueryのプラグイン「StickyStack.js」の使い方を紹介します。スクロールした時にスタッキング要素が固定されて表示されるので、下からスクロールアップしてくる要素が上に重なっていくような視覚効果を実現することができます。
アニメーションを簡単に実装できる”Animate.css”(v4)の使い方
Animate.cssは、HTMLの要素にクラス名を指定するだけで簡単にアニメーションを利用することができるCSSライブラリです。
今回はこのAnimate.cssのバージョン4系の使い方について紹介していきます。
ソースコードをシンタックスハイライト表示できる”Prism.js”の使い方
シンタックスハイライトとは、ソースコードなどの文字列の可読性を上げるために、属性などに応じて色分けをして表示することです。 今回は、自動でソースコードのシンタックスハイライト表示ができるJavaScriptライブラリ”Prism.js”の使い方を紹介していきます。