日本国内のデバイス別ディスプレイサイズ（解像度）シェア【2022年7月】
日本国内のデバイス別のディスプレイサイズ（解像度）のシェア状況を調べてみましたので、デバイス別（デスクトップ、タブレット、スマートフォン）にそれぞれサイズとシェアをまとめておきます。
サムネイル付きの画像表示をSwiperで作る
Swiperは、色々なスライダーをサイトに設置することができるJavaScriptライブラリです。 そのSwiperの少し変わった使い方として、サムネイルをクリックすると選択された画像が拡大されて表示される画像表示をSwiperを利用して簡単に設置する方法を紹介します。
高機能なスライダーを設置できる”Swiper”(v8)の使い方
“Swiper”を利用することで、色々なエフェクトのついたスライダーを簡単に実装したり、ブレイクポイントを設定してレスポンシブなスライダー表示にも対応させることができます。 今回は現行のバージョン8について設置の方法から、設定方法、簡単なカスタマイズ例まで紹介していきます。
主要なCSSフレームワークでデフォルト設定されているブレイクポイントまとめ
主要なCSSフレームワークでデフォルト設定されているブレイクポイントについて調べたのでまとめてみました。紹介するCSSフレームワークは、Tailwind CSS, Bulma, Pure CSS, Skeleton, Bootstrap, Semantic UI, Materialize, UIkit, Foundationです。
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の基本的な使い方と折れ線グラフ、棒グラフ、円グラフの設置例について紹介していきたいと思います。
画像の圧縮形式変換やファイルサイズ圧縮ができる”Squoosh”の使い方
今回は、画質の変化を確認しながら画像のファイルサイズを圧縮したいときなどに便利な”Squoosh”を紹介したいと思います。“Squoosh”とは、ブラウザ上でも動作するGoogle製の画像圧縮・変換ツールです。