【CSS】SVGで画像を切り抜いていく！

こんにちは、かずです。 タイトルの通り、SVGで自由な形で切り抜き（マスク）を行う方法をご紹介します。 というのも、もち...

CSSとHTMLのtableをAIに作ってもらった。

HTMLでこのようなテーブル（表）を作るのも地味に時間がかかりますよね。 そこで今回はAIに聞いたら思い通りのテーブルを...

サムネイルをクリックすると画像が拡大表示されるJavaScriptライブラリの「Luminous」

「Luminous」とは サムネイル写真をクリックすると拡大表示されるLightBox系JavaScriptライブラリで...

表示速度を改善する遅延ロード（Lazy Load）とは何か

前回、こちらの記事で意図せぬ動作の原因は「遅延ロード」だったと紹介しました。 Safariで「splide」のスライドの...

Safariで「splide」のスライドの高さが正しく認識されない原因と対処

軽量で多機能・アクセシビリティも配慮したスライダーが作成できる「splide」ですが、 safariのブラウザで確認した...

2024年5月のブラウザシェア

ごきげんよう！ 寒暖差に少しやられているナカノです。 皆様お気をつけください！ 月イチ恒例となりましたブラウザシェアの2...

軽量で多機能・アクセシビリティも配慮したスライダーが作成できる「splide」

ウィブ制作では画像をスライドで表示させる「スライダー」を頻繁に利用します。 以前このような記事を投稿しました。 使いやす...

みんなが使っているCSSのドレンドを知る！「State of CSS」

常に新しいCSSが生まれているWEBの世界ですが、 みんなが使っているトレンドのCSSを知る便利なサイトがあります。 そ...

【メリット有！】デバイスに合わせて画像の表示を切り替えるpictureタグについて

pictureタグとは <picture> は HTML の要素で、0 個以上の <source>...

2024年4月のブラウザシェア

ごきげんよう！ 寒暖差に少しやられているナカノです。 皆様お気をつけください！ 月イチ恒例となりましたブラウザシェアの2...

CSSのイージング作成ジェネレーター「Easings – Generate Cubic Bezier Easing Curves」の紹介

CSSのアニメーションは「ease-in-out」などあらかじめ定義された値を設定する他、 3次ベジェ曲線でイージングを...

404ページってなに？

みなさんはホームページの「404ページ」をご存じでしょうか。 404ページとは 該当のページが削除された・リンク切れなど...