CSSのメディアクエリなしで作るレスポンシブレイアウト
レスポンシブなレイアウトを作成する方法としてCSSのメディアクエリが使われることが多いかと思いますが、今回はCSSのメディアクエリを使わずにレスポンシブなレイアウトを作成する方法について紹介していきたいと思います。 簡単な例として、ディスプレイ幅に応じてカラム数を変化させる場合の記述例などについて紹介していきます。
日本国内のデバイス別ディスプレイサイズ（解像度）シェア【2022年9月】
日本国内のデバイス別のディスプレイサイズ（解像度）のシェア状況を調べてみましたので、デバイス別（デスクトップ、タブレット、スマートフォン）にそれぞれサイズとシェアをまとめておきます。
iPhoneのディスプレイサイズまとめ
iPhone 12シリーズの登場以降、iPhoneのディスプレイサイズはバリエーションが結構多い状態になっています。 そこで今回は各モデルのiPhoneのディスプレイサイズを、モデル毎とディスプレイサイズ毎とでそれぞれまとめて集計してみました。
サムネイル付きの画像表示を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画像を扱う方法などについて紹介していきます。