日本国内のデバイス別ディスプレイサイズ（解像度）シェア【2023年3月】
日本国内のデバイス別のディスプレイサイズ（解像度）のシェア状況を調べてみましたので、デバイス別（デスクトップ、タブレット、スマートフォン）にそれぞれサイズとシェアをまとめておきます。
CSSのGrid Layoutを使って簡単なレイアウトを組む
CSSのGrid Layoutを利用すると、シンプルなレイアウトから複雑なレイアウトまで色々なレイアウトを作成することができます。 この記事では、CSSのGrid Layoutについてなるべくわかりやすさを優先して、行と列がきれいに整列しているようなシンプルなレイアウトを作成する方法についてお話ししていきます。
CSSでテキストに下線を引く3つの方法
今回は、テキストに蛍光ペンで引いたマーカーのようなアンダーラインを引きたい時に使用できる方法について調べたので、CSSでテキストに下線を引く時に使える3つの方法についてそれぞれまとめて紹介していきたいと思います。 それぞ […]
HTMLとCSSだけで作るツールチップ
HTMLとCSSだけを利用してツールチップを設置する方法について紹介していきます。 ツールチップ内に表示させる内容を取得する方法として、HTML要素を利用する場合と、CSSの attr() 関数を利用する場合の二通りの方法について紹介していきます。
CSSでグラデーションのテキストを作る
グラデーションのかかったテキストをCSSを利用して作成する方法を紹介します。CSSの「background:linear-gradient();」「 -webkit-background-clip: text;」「 -webkit-text-fill-color: transparent;」などのパラメータを利用します。
CSSのメディアクエリなしで作るレスポンシブレイアウト
レスポンシブなレイアウトを作成する方法としてCSSのメディアクエリが使われることが多いかと思いますが、今回はCSSのメディアクエリを使わずにレスポンシブなレイアウトを作成する方法について紹介していきたいと思います。 簡単な例として、ディスプレイ幅に応じてカラム数を変化させる場合の記述例などについて紹介していきます。
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です。