「シンプルなリンクカードジェネレーター」の使い方
シンプルなリンクカードジェネレーターを作りましたので、使い方などについて紹介します。
シンプルなリンクカードジェネレーターは、リンクカードを作成したいページのURLを入力するとHTMLとCSSのコードを生成します。そのコードを貼り付けるだけでリンクカードを設置することができます。
日本国内のデバイス別ディスプレイサイズ（解像度）シェア【2023年5月】
日本国内のデバイス別のディスプレイサイズ（解像度）のシェア状況を調べてみましたので、デバイス別（デスクトップ、タブレット、スマートフォン）にそれぞれサイズとシェアをまとめておきます。
画像の圧縮形式変換やファイルサイズ圧縮ができる”Squoosh”の使い方
今回は、画質の変化を確認しながら画像のファイルサイズを圧縮したいときなどに便利な”Squoosh”を紹介したいと思います。“Squoosh”とは、ブラウザ上でも動作するGoogle製の画像圧縮・変換ツールです。
サムネイルに連動する画像表示をSwiperで作る
Swiperは、色々なスライダーをサイトに設置することができるJavaScriptライブラリです。 そのSwiperの少し変わった使い方として、サムネイルをクリックすると選択された画像が拡大されて表示される画像表示をSwiperを利用して簡単に設置する方法を紹介します。
高機能なスライダーを設置できる”Swiper”(v9)の使い方
“Swiper”を利用することで、色々なエフェクトのついたスライダーを簡単に実装したり、ブレイクポイントを設定してレスポンシブなスライダー表示にも対応させることができます。 今回は現行のバージョン9について設置の方法から、設定方法、簡単なカスタマイズ例まで紹介していきます。
CodePenを利用してコードや実行結果の埋め込みをホームページに表示させる
CodePenとは、ブラウザ上でHTML,CSS,JavaScriptのコードを記述し、その実行結果を確認したりすることができるサービスです。記述したコードや実行結果は、保存したり共有したりすることができます。今回は、CodePenで記述したコードや実行結果をホームページに埋め込む方法について紹介していきます。
CSSのGrid Layoutを使って簡単なレイアウトを組む
CSSのGrid Layoutを利用すると、シンプルなレイアウトから複雑なレイアウトまで色々なレイアウトを作成することができます。 この記事では、CSSのGrid Layoutについてなるべくわかりやすさを優先して、行と列がきれいに整列しているようなシンプルなレイアウトを作成する方法についてお話ししていきます。
CSSでテキストに下線を引く3つの方法
今回は、テキストに蛍光ペンで引いたマーカーのようなアンダーラインを引きたい時に使用できる方法について調べたので、CSSでテキストに下線を引く時に使える3つの方法についてそれぞれまとめて紹介していきたいと思います。 それぞ […]
HTMLとCSSだけで作るツールチップ
HTMLとCSSだけを利用してツールチップを設置する方法について紹介していきます。 ツールチップ内に表示させる内容を取得する方法として、HTML要素を利用する場合と、CSSの attr() 関数を利用する場合の二通りの方法について紹介していきます。