has()疑似クラスでコーディングが変わる! CSS最新スタイリング - ICS MEDIA

has()疑似クラスでコーディングが変わる! CSS最新スタイリング - ICS MEDIA

CSSのhas()疑似クラスで今までできなかったような条件のでのスタイリングができるようになったこと、そしてその応用についての記事です。

カテゴリ:記事

https://ics.media/entry/240808/

GitHub - Crayfisher-zari/digital-agency-design-system

GitHub - Crayfisher-zari/digital-agency-design-system

デジタル庁のデザインシステムをVue.jsで実装してOSSとして公開しているリポジトリです。

カテゴリ:オープンソース

https://github.com/Crayfisher-zari/digital-agency-design-system

1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA

1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA

画像読み込みを早めるテクニックについて紹介した記事です。

カテゴリ:記事

https://ics.media/entry/221223/

Webアプリ系デザインとホームページ系デザイン

Webアプリ系デザインとホームページ系デザイン

Webサイトのデザインについての考察記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/5dd8ecc1a26c63

UUIDの衝突するまでの時間と仏教の無間地獄どちらが長いか?

UUIDの衝突するまでの時間と仏教の無間地獄どちらが長いか?

UUIDの衝突可能性時間と地獄の刑期のどちらが長いかについての小話です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/ffe5e4fc7657dc

【CSS Sticky & Flex】個人的によくやっている固定ヘッダー・フッターの方法

【CSS Sticky & Flex】個人的によくやっている固定ヘッダー・フッターの方法

ヘッダー固定するレイアウトテクニックについての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/a21ee98a71df3b

自分が技術記事を書くモチベーションとか、気をつけていることとか

自分が技術記事を書くモチベーションとか、気をつけていることとか

自分が技術記事を書くモチベーションなどのマインドについての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/90056f50057d38

gapの余白指定が便利! gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA

gapの余白指定が便利! gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA

flexboxにおけるgapプロパティを使ったレイアウト手法を紹介した記事です。

カテゴリ:記事

https://ics.media/entry/210628/

技術的負債リボ払いシミュレーター

技術的負債リボ払いシミュレーター

リボ払いのシミュレーターです。

カテゴリ:ウェブサイト

https://crayfisher-zari.github.io/revolving-simulator/

Nuxtの動的ルーティングのSSGと静的サイトホスティングの404

Nuxtの動的ルーティングのSSGと静的サイトホスティングの404

Nuxtにおけるホスティング環境による404ページ挙動の違いについての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/ed0a69e45f1057

wp-envとViteで作る爆速WordPress開発環境

wp-envとViteで作る爆速WordPress開発環境

WordPressの開発環境をViteを使って構築する方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/f2d38f536eaf02

グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA

グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA

Squooshを使って画像最適化をnode.jsで自動化する方法についての記事です。

カテゴリ:記事

https://ics.media/entry/220204/

ウェブの新機能はいつまで待てば実践投入できるか - ICS MEDIA

ウェブの新機能はいつまで待てば実践投入できるか - ICS MEDIA

次から次へと出てくるWebの新機能をどれくらいの普及すれば使えるのか、という問いに対する自分なりのアンサーです。

カテゴリ:記事

https://ics.media/entry/250422/

z-indexの値は「無限」と「2147483647」どちらが強いの?

z-indexの値は「無限」と「2147483647」どちらが強いの?

z-indexの上限値についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/d98a0aef6326a8

約20行!WordPressでプラグインに頼らないWebP対応

約20行!WordPressでプラグインに頼らないWebP対応

WordPressでWebP画像を配信するための設定についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/22eb4ad5ea6f0e

background-imageを使ったCSSのアニメーションテクニック - ICS MEDIA

background-imageを使ったCSSのアニメーションテクニック - ICS MEDIA

background-imageを使ったアニメーションテクニックです。

カテゴリ:記事

https://ics.media/entry/220602/

【CSS】自分が余白のための空タグ容認派になった理由

【CSS】自分が余白のための空タグ容認派になった理由

HTMLにおける空タグ実装について自身のスタンスを紹介した記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/a40a297b8e273b

スーパーマリオRPGのリメイク版の変更点からみるUX

スーパーマリオRPGのリメイク版の変更点からみるUX

スーパーマリオRPGの新旧のUIからみたUXの考察についての資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/supamariorpgnorimeikuban-nobian-geng-dian-karamiruux

オーブ集め - WebGPUデモ

オーブ集め - WebGPUデモ

WebGPUを使ったオーブ集めゲームです。Vibe Codingで作成しました。

カテゴリ:ウェブサイト

https://color-orb.pages.dev/

HTMLにちょい足しでできる! Vue.jsでサクッと動きをつける方法 - ICS MEDIA

HTMLにちょい足しでできる! Vue.jsでサクッと動きをつける方法 - ICS MEDIA

Vue.jsをバンドルツールなどなしに、少し使いたいときの方法についての記事です。

カテゴリ:記事

https://ics.media/entry/210908/

CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA

CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA

CSSを使ってデバッグする小技についての記事です。

カテゴリ:記事

https://ics.media/entry/200819/

君は真に理解しているか?z-indexとスタッキングコンテキストの関係 - ICS MEDIA

君は真に理解しているか?z-indexとスタッキングコンテキストの関係 - ICS MEDIA

ややこしいz-indexの挙動について解説した記事です。

カテゴリ:記事

https://ics.media/entry/200609/

意外? @propertyがCSSアニメーションを激変させる理由 - ICS MEDIA

意外? @propertyがCSSアニメーションを激変させる理由 - ICS MEDIA

CSSの@propertyによってCSS変数をアニメーションできるようになり、CSSアニメーションの幅が広がったことをテーマにした記事です。

カテゴリ:記事

https://ics.media/entry/241219/

Canvasだけじゃない!requestAnimationFrameを使ったアニメーション表現 - ICS MEDIA

Canvasだけじゃない!requestAnimationFrameを使ったアニメーション表現 - ICS MEDIA

requestAnimationFrameを使ったアニメーション表現を紹介した記事です。

カテゴリ:記事

https://ics.media/entry/210414/

知らないで使うとトラブルになるかも…プログラム・画像のライセンス(概要編) - ICS MEDIA

知らないで使うとトラブルになるかも…プログラム・画像のライセンス(概要編) - ICS MEDIA

画像やライブラリのライセンスについて紹介した記事です。

カテゴリ:記事

https://ics.media/entry/201216/

デザインとHTMLのズレを検出! Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ - ICS MEDIA

デザインとHTMLのズレを検出! Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ - ICS MEDIA

ヘッドレスブラウザのPuppeteerを使って実装とデザインを見比べる手法についての記事です。

カテゴリ:記事

https://ics.media/entry/220331/

お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA

お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA

フォームのアクセシビリティを高める方法についての記事です。

カテゴリ:記事

https://ics.media/entry/201016/

CSSひとつで印象が変わる! スクロールでふわっと出るアニメーション - ICS MEDIA

CSSひとつで印象が変わる! スクロールでふわっと出るアニメーション - ICS MEDIA

Webデザインでよく見る、ふわっと出てくるアニメーションのコツについて解説した記事です。

カテゴリ:記事

https://ics.media/entry/250221/

CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方 - ICS MEDIA

CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方 - ICS MEDIA

CSSの疑似クラスを応用したインタラクティブ手法について記事です。

カテゴリ:記事

https://ics.media/entry/200413/

【CSS】positionでleftとrightを同時指定したらどうなる?

【CSS】positionでleftとrightを同時指定したらどうなる?

CSSのpositionにおけるレイアウト挙動についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/9250541f7d0515

【アンケート】WordPressのローカル開発環境に何使っている?

【アンケート】WordPressのローカル開発環境に何使っている?

どのようなWordPressのローカル開発環境を使っているかのアンケート結果の記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/018778bbcfbb1dc10a57

【JavaScript】関数名をclose()にするのは気をつけろ

【JavaScript】関数名をclose()にするのは気をつけろ

close()という名前の関数を作ったときに陥った落とし穴についての体験談です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/204f212c84c0a0

マイクロインタラクションからクリエイティブ表現まで!Tween24.jsを使った演出表現 - ICS MEDIA

マイクロインタラクションからクリエイティブ表現まで!Tween24.jsを使った演出表現 - ICS MEDIA

Tween24.jsを使ったアニメーション表現を紹介した記事です。

カテゴリ:記事

https://ics.media/entry/211209/

2023 CSS

2023 CSS

2023年に使えるようになったCSSの機能についての資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/2023-css

正確な文字数カウント

正確な文字数カウント

JavaScriptで絵文字を含む正確な文字数カウントをするサイトです。校正機能付きです。

カテゴリ:ウェブサイト

https://exact-word-count.pages.dev/

【HTML・CSS】ダークモードで適した画像に切り替える方法

【HTML・CSS】ダークモードで適した画像に切り替える方法

画像をダークモード・ライトモードで出し分ける方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/51a5add64ef5b7

GitHub - Crayfisher-zari/simpleScrollTrigger

GitHub - Crayfisher-zari/simpleScrollTrigger

GSAPのScrollTriggerライクなシンプルなスクロールで発火するライブラリのリポジトリです。

カテゴリ:オープンソース

https://github.com/Crayfisher-zari/simpleScrollTrigger

GitHub - Crayfisher-zari/liquid-glass-like-css

GitHub - Crayfisher-zari/liquid-glass-like-css

Appleが発表したLiquid GlassのようなデザインをCSSで実装したリポジトリです。

カテゴリ:オープンソース

https://github.com/Crayfisher-zari/liquid-glass-like-css

ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA

ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA

透過のある動画の書き出し形式や実装する方法についての記事です。

カテゴリ:記事

https://ics.media/entry/221007/

ちょい足しVueでWordPressをプチSPA化

ちょい足しVueでWordPressをプチSPA化

ちょい足しVueを使ってWordPressの一部をSPA化する方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/9fdfea174f2ab6

vue_component_from_composable

vue_component_from_composable

Vueコンポーネントをコンポーザブル関数から返してコンポーネントの責務を分離する方法についての資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/vue-component-from-composable

頑張らない3D表現! WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA

頑張らない3D表現! WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA

3DといえばWebGLを思い浮かべますが、WebGLを使わない3D表現のテクニックです。

カテゴリ:記事

https://ics.media/entry/230519/

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出 - ICS MEDIA

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出 - ICS MEDIA

ライブラリなどを使用せず、モダンなCSSとJavaScriptだけで作る全画面スクロール演出についての記事です。

カテゴリ:記事

https://ics.media/entry/191211/

mask-compositeでつくるCSSの新しい表現方法 - ICS MEDIA

mask-compositeでつくるCSSの新しい表現方法 - ICS MEDIA

CSSのmask-compositeで複雑なマスクが作れるようになったことを紹介する記事です。

カテゴリ:記事

https://ics.media/entry/241025/

意外と奥深いCSSのfont-weightの話 - ICS MEDIA

意外と奥深いCSSのfont-weightの話 - ICS MEDIA

よく使うfont-weightプロパティですが、意外と挙動について難しいところがある話です。

カテゴリ:記事

https://ics.media/entry/230830/

API通信一切なし!Nuxt Composition APIで作る完全静的サイト - ICS MEDIA

API通信一切なし!Nuxt Composition APIで作る完全静的サイト - ICS MEDIA

バージョン2.1系時代のNuxtを使って完全に静的サイトを作成する方法についての記事です。

カテゴリ:記事

https://ics.media/entry/210120/

GitHub - Crayfisher-zari/is-font-available

GitHub - Crayfisher-zari/is-font-available

フォントがローカルファイルから利用可能かどうかを判定するライブラリのリポジトリです。

カテゴリ:オープンソース

https://github.com/Crayfisher-zari/is-font-available

リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA

リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA

インタラクティブな要素におけるユーザービリティやアクセシビリティを改善するためのテクニックです。

カテゴリ:記事

https://ics.media/entry/221208/

【CSS】z-index管理の3指針

【CSS】z-index管理の3指針

z-indexの値を管理をするための指針について紹介した記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/2e8633a6da3ce9

Web Motion Catalog

Web Motion Catalog

Webの動きのアイデアを紹介するサイトです。

カテゴリ:ウェブサイト

https://web-motion-catalog.com/

【Vue】v-html部分のaタグをルーター遷移に変える小技

【Vue】v-html部分のaタグをルーター遷移に変える小技

v-htmlを使ってHTML内のaタグをルーター遷移に変える小技についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/d890673933167d

1歩踏み込んでみる! CSSグラデーションのマニアックな世界 - ICS MEDIA

1歩踏み込んでみる! CSSグラデーションのマニアックな世界 - ICS MEDIA

CSSのグラデーションを応用したテクニックを紹介する記事です。

カテゴリ:記事

https://ics.media/entry/200212/

JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA

JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA

Intersection Observerを使ってスクロール演出を実装する方法についての記事です。

カテゴリ:記事

https://ics.media/entry/190902/

HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS

HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS

HTMLとCSSだけでリアルな画像を作る方法について登壇したときの資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/how-to-make-a-realistic-picture-only-html-and-css/

シンプルなスクロールで発火するJavaScriptライブラリを開発しました

シンプルなスクロールで発火するJavaScriptライブラリを開発しました

Simple Scroll Triggerの紹介記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/9e5fe881a3b150

独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック! - ICS MEDIA

独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック! - ICS MEDIA

transformの値として指定していたscale、rotate、translateをそれぞれ別のプロパティで指定できるようになり、より細かくアニメーション制御できるようになったことを紹介する記事です。

カテゴリ:記事

https://ics.media/entry/230309/

【妄想】AIコーディング時代のWebサイト

【妄想】AIコーディング時代のWebサイト

生成AI時代におけるWebサイトの作り方や存在について妄想してみた記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/6a62e9000b7677

アニメーション中の色が濁ってしまう原因と対処法

アニメーション中の色が濁ってしまう原因と対処法

CSSのグラデーションにおける色の補完に関する記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/a831a5cffb38ea

【Vue.js】コンポーネントをComposable関数(カスタムフック)から提供する

【Vue.js】コンポーネントをComposable関数(カスタムフック)から提供する

Vueコンポーネントをコンポーザブル関数から返してコンポーネントの責務を分離する方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/7946414921fe42

【CSS】 <table>タグをCSS gridで実現する

【CSS】 <table>タグをCSS gridで実現する

<table>タグのレイアウトをCSS Gridの挙動で行なう方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/8453a78fba5803

WordPressのGPL周りの疑問とその答え

WordPressのGPL周りの疑問とその答え

WordPressのGPLライセンスについて調べた記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/05d6e818a146a8

ノーコードツールを使ってどこかで見たことあるゲームを作ってみた

ノーコードツールを使ってどこかで見たことあるゲームを作ってみた

2023年のクソアプリアドベントカレンダーで作ったScratchで作ったゲームの紹介記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/a386ba947a6d07

デザインとエンジニアリングの断絶

デザインとエンジニアリングの断絶

デザインとエンジニアリングの間にある溝についての考察です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/9db4f6655fcdd7253e90

【クソアプリアドベントカレンダー】技術的負債リボ払いシミュレーター

【クソアプリアドベントカレンダー】技術的負債リボ払いシミュレーター

2024年のクソアプリアドベントカレンダーで作った「技術的負債リボ払いシミュレーター」の紹介記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/5093d8773aec55

background-imageの表示ラグ問題を(ほぼ)CSSのみで実装するCSS遅延読み込みで解決

background-imageの表示ラグ問題を(ほぼ)CSSのみで実装するCSS遅延読み込みで解決

background-imageの画像を予め遅延読み込みして、表示時のラグを減らす方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/24273afb875d1d

defineModelを使って気軽にコンポーネントのv-modelをやろう

defineModelを使って気軽にコンポーネントのv-modelをやろう

Vue.jsのdefineModelをによって難易度の下がったコンポーネントのv-modelについての登壇資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/definemodelwoshi-tuteqi-qing-nikonponentonov-modelwoyarou

Webデザインのモーション集サイトを作りました

Webデザインのモーション集サイトを作りました

Web Motion Catalogのサイトを作ったときの紹介記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/ac3ade95d83ccd

数値や日付をさまざまな形式の文字列に! toLocaleString()を使ってスマートに変換しよう - ICS MEDIA

数値や日付をさまざまな形式の文字列に! toLocaleString()を使ってスマートに変換しよう - ICS MEDIA

JavaScriptのtoLocaleString()を使って意外と面倒な表示の整形について解説した記事です。

カテゴリ:記事

https://ics.media/entry/240529/

エルデンリングに学ぶ道に迷わないUIと世界観

エルデンリングに学ぶ道に迷わないUIと世界観

ゲーム エルデンリングのUIについてダイエジェティックな視点について考察です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/erudenringunixue-budao-nimi-wanaiuitoshi-jie-guan/

速くて安いWebサイトを作る

速くて安いWebサイトを作る

速くて安いWebサイトを作る方法についてのLT資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/su-kutean-iwebsaitowozuo-ru

新卒1年で辞めて、スクール通って、コーダーからフロントエンドエンジニアになった話、そして…

新卒1年で辞めて、スクール通って、コーダーからフロントエンドエンジニアになった話、そして…

自分のフロントエンドエンジニアになった経緯についてです。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/8639056241c23e7158d4

has()疑似クラスでコーディングが変わる! CSS最新スタイリング - ICS MEDIA

has()疑似クラスでコーディングが変わる! CSS最新スタイリング - ICS MEDIA

CSSのhas()疑似クラスで今までできなかったような条件のでのスタイリングができるようになったこと、そしてその応用についての記事です。

カテゴリ:記事

https://ics.media/entry/240808/

GitHub - Crayfisher-zari/digital-agency-design-system

GitHub - Crayfisher-zari/digital-agency-design-system

デジタル庁のデザインシステムをVue.jsで実装してOSSとして公開しているリポジトリです。

カテゴリ:オープンソース

https://github.com/Crayfisher-zari/digital-agency-design-system

1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA

1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA

画像読み込みを早めるテクニックについて紹介した記事です。

カテゴリ:記事

https://ics.media/entry/221223/

Webアプリ系デザインとホームページ系デザイン

Webアプリ系デザインとホームページ系デザイン

Webサイトのデザインについての考察記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/5dd8ecc1a26c63

UUIDの衝突するまでの時間と仏教の無間地獄どちらが長いか?

UUIDの衝突するまでの時間と仏教の無間地獄どちらが長いか?

UUIDの衝突可能性時間と地獄の刑期のどちらが長いかについての小話です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/ffe5e4fc7657dc

【CSS Sticky & Flex】個人的によくやっている固定ヘッダー・フッターの方法

【CSS Sticky & Flex】個人的によくやっている固定ヘッダー・フッターの方法

ヘッダー固定するレイアウトテクニックについての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/a21ee98a71df3b

自分が技術記事を書くモチベーションとか、気をつけていることとか

自分が技術記事を書くモチベーションとか、気をつけていることとか

自分が技術記事を書くモチベーションなどのマインドについての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/90056f50057d38

gapの余白指定が便利! gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA

gapの余白指定が便利! gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA

flexboxにおけるgapプロパティを使ったレイアウト手法を紹介した記事です。

カテゴリ:記事

https://ics.media/entry/210628/

技術的負債リボ払いシミュレーター

技術的負債リボ払いシミュレーター

リボ払いのシミュレーターです。

カテゴリ:ウェブサイト

https://crayfisher-zari.github.io/revolving-simulator/

Nuxtの動的ルーティングのSSGと静的サイトホスティングの404

Nuxtの動的ルーティングのSSGと静的サイトホスティングの404

Nuxtにおけるホスティング環境による404ページ挙動の違いについての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/ed0a69e45f1057

wp-envとViteで作る爆速WordPress開発環境

wp-envとViteで作る爆速WordPress開発環境

WordPressの開発環境をViteを使って構築する方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/f2d38f536eaf02

グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA

グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA

Squooshを使って画像最適化をnode.jsで自動化する方法についての記事です。

カテゴリ:記事

https://ics.media/entry/220204/

ウェブの新機能はいつまで待てば実践投入できるか - ICS MEDIA

ウェブの新機能はいつまで待てば実践投入できるか - ICS MEDIA

次から次へと出てくるWebの新機能をどれくらいの普及すれば使えるのか、という問いに対する自分なりのアンサーです。

カテゴリ:記事

https://ics.media/entry/250422/

z-indexの値は「無限」と「2147483647」どちらが強いの?

z-indexの値は「無限」と「2147483647」どちらが強いの?

z-indexの上限値についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/d98a0aef6326a8

約20行!WordPressでプラグインに頼らないWebP対応

約20行!WordPressでプラグインに頼らないWebP対応

WordPressでWebP画像を配信するための設定についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/22eb4ad5ea6f0e

background-imageを使ったCSSのアニメーションテクニック - ICS MEDIA

background-imageを使ったCSSのアニメーションテクニック - ICS MEDIA

background-imageを使ったアニメーションテクニックです。

カテゴリ:記事

https://ics.media/entry/220602/

【CSS】自分が余白のための空タグ容認派になった理由

【CSS】自分が余白のための空タグ容認派になった理由

HTMLにおける空タグ実装について自身のスタンスを紹介した記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/a40a297b8e273b

スーパーマリオRPGのリメイク版の変更点からみるUX

スーパーマリオRPGのリメイク版の変更点からみるUX

スーパーマリオRPGの新旧のUIからみたUXの考察についての資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/supamariorpgnorimeikuban-nobian-geng-dian-karamiruux

オーブ集め - WebGPUデモ

オーブ集め - WebGPUデモ

WebGPUを使ったオーブ集めゲームです。Vibe Codingで作成しました。

カテゴリ:ウェブサイト

https://color-orb.pages.dev/

HTMLにちょい足しでできる! Vue.jsでサクッと動きをつける方法 - ICS MEDIA

HTMLにちょい足しでできる! Vue.jsでサクッと動きをつける方法 - ICS MEDIA

Vue.jsをバンドルツールなどなしに、少し使いたいときの方法についての記事です。

カテゴリ:記事

https://ics.media/entry/210908/

CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA

CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA

CSSを使ってデバッグする小技についての記事です。

カテゴリ:記事

https://ics.media/entry/200819/

君は真に理解しているか?z-indexとスタッキングコンテキストの関係 - ICS MEDIA

君は真に理解しているか?z-indexとスタッキングコンテキストの関係 - ICS MEDIA

ややこしいz-indexの挙動について解説した記事です。

カテゴリ:記事

https://ics.media/entry/200609/

意外? @propertyがCSSアニメーションを激変させる理由 - ICS MEDIA

意外? @propertyがCSSアニメーションを激変させる理由 - ICS MEDIA

CSSの@propertyによってCSS変数をアニメーションできるようになり、CSSアニメーションの幅が広がったことをテーマにした記事です。

カテゴリ:記事

https://ics.media/entry/241219/

Canvasだけじゃない!requestAnimationFrameを使ったアニメーション表現 - ICS MEDIA

Canvasだけじゃない!requestAnimationFrameを使ったアニメーション表現 - ICS MEDIA

requestAnimationFrameを使ったアニメーション表現を紹介した記事です。

カテゴリ:記事

https://ics.media/entry/210414/

知らないで使うとトラブルになるかも…プログラム・画像のライセンス(概要編) - ICS MEDIA

知らないで使うとトラブルになるかも…プログラム・画像のライセンス(概要編) - ICS MEDIA

画像やライブラリのライセンスについて紹介した記事です。

カテゴリ:記事

https://ics.media/entry/201216/

デザインとHTMLのズレを検出! Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ - ICS MEDIA

デザインとHTMLのズレを検出! Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ - ICS MEDIA

ヘッドレスブラウザのPuppeteerを使って実装とデザインを見比べる手法についての記事です。

カテゴリ:記事

https://ics.media/entry/220331/

お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA

お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA

フォームのアクセシビリティを高める方法についての記事です。

カテゴリ:記事

https://ics.media/entry/201016/

CSSひとつで印象が変わる! スクロールでふわっと出るアニメーション - ICS MEDIA

CSSひとつで印象が変わる! スクロールでふわっと出るアニメーション - ICS MEDIA

Webデザインでよく見る、ふわっと出てくるアニメーションのコツについて解説した記事です。

カテゴリ:記事

https://ics.media/entry/250221/

CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方 - ICS MEDIA

CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方 - ICS MEDIA

CSSの疑似クラスを応用したインタラクティブ手法について記事です。

カテゴリ:記事

https://ics.media/entry/200413/

【CSS】positionでleftとrightを同時指定したらどうなる?

【CSS】positionでleftとrightを同時指定したらどうなる?

CSSのpositionにおけるレイアウト挙動についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/9250541f7d0515

【アンケート】WordPressのローカル開発環境に何使っている?

【アンケート】WordPressのローカル開発環境に何使っている?

どのようなWordPressのローカル開発環境を使っているかのアンケート結果の記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/018778bbcfbb1dc10a57

【JavaScript】関数名をclose()にするのは気をつけろ

【JavaScript】関数名をclose()にするのは気をつけろ

close()という名前の関数を作ったときに陥った落とし穴についての体験談です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/204f212c84c0a0

マイクロインタラクションからクリエイティブ表現まで!Tween24.jsを使った演出表現 - ICS MEDIA

マイクロインタラクションからクリエイティブ表現まで!Tween24.jsを使った演出表現 - ICS MEDIA

Tween24.jsを使ったアニメーション表現を紹介した記事です。

カテゴリ:記事

https://ics.media/entry/211209/

2023 CSS

2023 CSS

2023年に使えるようになったCSSの機能についての資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/2023-css

正確な文字数カウント

正確な文字数カウント

JavaScriptで絵文字を含む正確な文字数カウントをするサイトです。校正機能付きです。

カテゴリ:ウェブサイト

https://exact-word-count.pages.dev/

【HTML・CSS】ダークモードで適した画像に切り替える方法

【HTML・CSS】ダークモードで適した画像に切り替える方法

画像をダークモード・ライトモードで出し分ける方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/51a5add64ef5b7

GitHub - Crayfisher-zari/simpleScrollTrigger

GitHub - Crayfisher-zari/simpleScrollTrigger

GSAPのScrollTriggerライクなシンプルなスクロールで発火するライブラリのリポジトリです。

カテゴリ:オープンソース

https://github.com/Crayfisher-zari/simpleScrollTrigger

GitHub - Crayfisher-zari/liquid-glass-like-css

GitHub - Crayfisher-zari/liquid-glass-like-css

Appleが発表したLiquid GlassのようなデザインをCSSで実装したリポジトリです。

カテゴリ:オープンソース

https://github.com/Crayfisher-zari/liquid-glass-like-css

ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA

ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA

透過のある動画の書き出し形式や実装する方法についての記事です。

カテゴリ:記事

https://ics.media/entry/221007/

ちょい足しVueでWordPressをプチSPA化

ちょい足しVueでWordPressをプチSPA化

ちょい足しVueを使ってWordPressの一部をSPA化する方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/9fdfea174f2ab6

vue_component_from_composable

vue_component_from_composable

Vueコンポーネントをコンポーザブル関数から返してコンポーネントの責務を分離する方法についての資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/vue-component-from-composable

頑張らない3D表現! WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA

頑張らない3D表現! WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA

3DといえばWebGLを思い浮かべますが、WebGLを使わない3D表現のテクニックです。

カテゴリ:記事

https://ics.media/entry/230519/

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出 - ICS MEDIA

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出 - ICS MEDIA

ライブラリなどを使用せず、モダンなCSSとJavaScriptだけで作る全画面スクロール演出についての記事です。

カテゴリ:記事

https://ics.media/entry/191211/

mask-compositeでつくるCSSの新しい表現方法 - ICS MEDIA

mask-compositeでつくるCSSの新しい表現方法 - ICS MEDIA

CSSのmask-compositeで複雑なマスクが作れるようになったことを紹介する記事です。

カテゴリ:記事

https://ics.media/entry/241025/

意外と奥深いCSSのfont-weightの話 - ICS MEDIA

意外と奥深いCSSのfont-weightの話 - ICS MEDIA

よく使うfont-weightプロパティですが、意外と挙動について難しいところがある話です。

カテゴリ:記事

https://ics.media/entry/230830/

API通信一切なし!Nuxt Composition APIで作る完全静的サイト - ICS MEDIA

API通信一切なし!Nuxt Composition APIで作る完全静的サイト - ICS MEDIA

バージョン2.1系時代のNuxtを使って完全に静的サイトを作成する方法についての記事です。

カテゴリ:記事

https://ics.media/entry/210120/

GitHub - Crayfisher-zari/is-font-available

GitHub - Crayfisher-zari/is-font-available

フォントがローカルファイルから利用可能かどうかを判定するライブラリのリポジトリです。

カテゴリ:オープンソース

https://github.com/Crayfisher-zari/is-font-available

リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA

リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA

インタラクティブな要素におけるユーザービリティやアクセシビリティを改善するためのテクニックです。

カテゴリ:記事

https://ics.media/entry/221208/

【CSS】z-index管理の3指針

【CSS】z-index管理の3指針

z-indexの値を管理をするための指針について紹介した記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/2e8633a6da3ce9

Web Motion Catalog

Web Motion Catalog

Webの動きのアイデアを紹介するサイトです。

カテゴリ:ウェブサイト

https://web-motion-catalog.com/

【Vue】v-html部分のaタグをルーター遷移に変える小技

【Vue】v-html部分のaタグをルーター遷移に変える小技

v-htmlを使ってHTML内のaタグをルーター遷移に変える小技についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/d890673933167d

1歩踏み込んでみる! CSSグラデーションのマニアックな世界 - ICS MEDIA

1歩踏み込んでみる! CSSグラデーションのマニアックな世界 - ICS MEDIA

CSSのグラデーションを応用したテクニックを紹介する記事です。

カテゴリ:記事

https://ics.media/entry/200212/

JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA

JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA

Intersection Observerを使ってスクロール演出を実装する方法についての記事です。

カテゴリ:記事

https://ics.media/entry/190902/

HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS

HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS

HTMLとCSSだけでリアルな画像を作る方法について登壇したときの資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/how-to-make-a-realistic-picture-only-html-and-css/

シンプルなスクロールで発火するJavaScriptライブラリを開発しました

シンプルなスクロールで発火するJavaScriptライブラリを開発しました

Simple Scroll Triggerの紹介記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/9e5fe881a3b150

独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック! - ICS MEDIA

独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック! - ICS MEDIA

transformの値として指定していたscale、rotate、translateをそれぞれ別のプロパティで指定できるようになり、より細かくアニメーション制御できるようになったことを紹介する記事です。

カテゴリ:記事

https://ics.media/entry/230309/

【妄想】AIコーディング時代のWebサイト

【妄想】AIコーディング時代のWebサイト

生成AI時代におけるWebサイトの作り方や存在について妄想してみた記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/6a62e9000b7677

アニメーション中の色が濁ってしまう原因と対処法

アニメーション中の色が濁ってしまう原因と対処法

CSSのグラデーションにおける色の補完に関する記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/a831a5cffb38ea

【Vue.js】コンポーネントをComposable関数(カスタムフック)から提供する

【Vue.js】コンポーネントをComposable関数(カスタムフック)から提供する

Vueコンポーネントをコンポーザブル関数から返してコンポーネントの責務を分離する方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/7946414921fe42

【CSS】 <table>タグをCSS gridで実現する

【CSS】 <table>タグをCSS gridで実現する

<table>タグのレイアウトをCSS Gridの挙動で行なう方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/8453a78fba5803

WordPressのGPL周りの疑問とその答え

WordPressのGPL周りの疑問とその答え

WordPressのGPLライセンスについて調べた記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/05d6e818a146a8

ノーコードツールを使ってどこかで見たことあるゲームを作ってみた

ノーコードツールを使ってどこかで見たことあるゲームを作ってみた

2023年のクソアプリアドベントカレンダーで作ったScratchで作ったゲームの紹介記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/a386ba947a6d07

デザインとエンジニアリングの断絶

デザインとエンジニアリングの断絶

デザインとエンジニアリングの間にある溝についての考察です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/9db4f6655fcdd7253e90

【クソアプリアドベントカレンダー】技術的負債リボ払いシミュレーター

【クソアプリアドベントカレンダー】技術的負債リボ払いシミュレーター

2024年のクソアプリアドベントカレンダーで作った「技術的負債リボ払いシミュレーター」の紹介記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/5093d8773aec55

background-imageの表示ラグ問題を(ほぼ)CSSのみで実装するCSS遅延読み込みで解決

background-imageの表示ラグ問題を(ほぼ)CSSのみで実装するCSS遅延読み込みで解決

background-imageの画像を予め遅延読み込みして、表示時のラグを減らす方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/24273afb875d1d

defineModelを使って気軽にコンポーネントのv-modelをやろう

defineModelを使って気軽にコンポーネントのv-modelをやろう

Vue.jsのdefineModelをによって難易度の下がったコンポーネントのv-modelについての登壇資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/definemodelwoshi-tuteqi-qing-nikonponentonov-modelwoyarou

Webデザインのモーション集サイトを作りました

Webデザインのモーション集サイトを作りました

Web Motion Catalogのサイトを作ったときの紹介記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/ac3ade95d83ccd

数値や日付をさまざまな形式の文字列に! toLocaleString()を使ってスマートに変換しよう - ICS MEDIA

数値や日付をさまざまな形式の文字列に! toLocaleString()を使ってスマートに変換しよう - ICS MEDIA

JavaScriptのtoLocaleString()を使って意外と面倒な表示の整形について解説した記事です。

カテゴリ:記事

https://ics.media/entry/240529/

エルデンリングに学ぶ道に迷わないUIと世界観

エルデンリングに学ぶ道に迷わないUIと世界観

ゲーム エルデンリングのUIについてダイエジェティックな視点について考察です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/erudenringunixue-budao-nimi-wanaiuitoshi-jie-guan/

速くて安いWebサイトを作る

速くて安いWebサイトを作る

速くて安いWebサイトを作る方法についてのLT資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/su-kutean-iwebsaitowozuo-ru

新卒1年で辞めて、スクール通って、コーダーからフロントエンドエンジニアになった話、そして…

新卒1年で辞めて、スクール通って、コーダーからフロントエンドエンジニアになった話、そして…

自分のフロントエンドエンジニアになった経緯についてです。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/8639056241c23e7158d4

has()疑似クラスでコーディングが変わる! CSS最新スタイリング - ICS MEDIA

has()疑似クラスでコーディングが変わる! CSS最新スタイリング - ICS MEDIA

CSSのhas()疑似クラスで今までできなかったような条件のでのスタイリングができるようになったこと、そしてその応用についての記事です。

カテゴリ:記事

https://ics.media/entry/240808/

GitHub - Crayfisher-zari/digital-agency-design-system

GitHub - Crayfisher-zari/digital-agency-design-system

デジタル庁のデザインシステムをVue.jsで実装してOSSとして公開しているリポジトリです。

カテゴリ:オープンソース

https://github.com/Crayfisher-zari/digital-agency-design-system

1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA

1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA

画像読み込みを早めるテクニックについて紹介した記事です。

カテゴリ:記事

https://ics.media/entry/221223/

Webアプリ系デザインとホームページ系デザイン

Webアプリ系デザインとホームページ系デザイン

Webサイトのデザインについての考察記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/5dd8ecc1a26c63

UUIDの衝突するまでの時間と仏教の無間地獄どちらが長いか?

UUIDの衝突するまでの時間と仏教の無間地獄どちらが長いか?

UUIDの衝突可能性時間と地獄の刑期のどちらが長いかについての小話です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/ffe5e4fc7657dc

【CSS Sticky & Flex】個人的によくやっている固定ヘッダー・フッターの方法

【CSS Sticky & Flex】個人的によくやっている固定ヘッダー・フッターの方法

ヘッダー固定するレイアウトテクニックについての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/a21ee98a71df3b

自分が技術記事を書くモチベーションとか、気をつけていることとか

自分が技術記事を書くモチベーションとか、気をつけていることとか

自分が技術記事を書くモチベーションなどのマインドについての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/90056f50057d38

gapの余白指定が便利! gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA

gapの余白指定が便利! gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA

flexboxにおけるgapプロパティを使ったレイアウト手法を紹介した記事です。

カテゴリ:記事

https://ics.media/entry/210628/

技術的負債リボ払いシミュレーター

技術的負債リボ払いシミュレーター

リボ払いのシミュレーターです。

カテゴリ:ウェブサイト

https://crayfisher-zari.github.io/revolving-simulator/

Nuxtの動的ルーティングのSSGと静的サイトホスティングの404

Nuxtの動的ルーティングのSSGと静的サイトホスティングの404

Nuxtにおけるホスティング環境による404ページ挙動の違いについての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/ed0a69e45f1057

wp-envとViteで作る爆速WordPress開発環境

wp-envとViteで作る爆速WordPress開発環境

WordPressの開発環境をViteを使って構築する方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/f2d38f536eaf02

グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA

グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA

Squooshを使って画像最適化をnode.jsで自動化する方法についての記事です。

カテゴリ:記事

https://ics.media/entry/220204/

ウェブの新機能はいつまで待てば実践投入できるか - ICS MEDIA

ウェブの新機能はいつまで待てば実践投入できるか - ICS MEDIA

次から次へと出てくるWebの新機能をどれくらいの普及すれば使えるのか、という問いに対する自分なりのアンサーです。

カテゴリ:記事

https://ics.media/entry/250422/

z-indexの値は「無限」と「2147483647」どちらが強いの?

z-indexの値は「無限」と「2147483647」どちらが強いの?

z-indexの上限値についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/d98a0aef6326a8

約20行!WordPressでプラグインに頼らないWebP対応

約20行!WordPressでプラグインに頼らないWebP対応

WordPressでWebP画像を配信するための設定についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/22eb4ad5ea6f0e

background-imageを使ったCSSのアニメーションテクニック - ICS MEDIA

background-imageを使ったCSSのアニメーションテクニック - ICS MEDIA

background-imageを使ったアニメーションテクニックです。

カテゴリ:記事

https://ics.media/entry/220602/

【CSS】自分が余白のための空タグ容認派になった理由

【CSS】自分が余白のための空タグ容認派になった理由

HTMLにおける空タグ実装について自身のスタンスを紹介した記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/a40a297b8e273b

スーパーマリオRPGのリメイク版の変更点からみるUX

スーパーマリオRPGのリメイク版の変更点からみるUX

スーパーマリオRPGの新旧のUIからみたUXの考察についての資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/supamariorpgnorimeikuban-nobian-geng-dian-karamiruux

オーブ集め - WebGPUデモ

オーブ集め - WebGPUデモ

WebGPUを使ったオーブ集めゲームです。Vibe Codingで作成しました。

カテゴリ:ウェブサイト

https://color-orb.pages.dev/

HTMLにちょい足しでできる! Vue.jsでサクッと動きをつける方法 - ICS MEDIA

HTMLにちょい足しでできる! Vue.jsでサクッと動きをつける方法 - ICS MEDIA

Vue.jsをバンドルツールなどなしに、少し使いたいときの方法についての記事です。

カテゴリ:記事

https://ics.media/entry/210908/

CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA

CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA

CSSを使ってデバッグする小技についての記事です。

カテゴリ:記事

https://ics.media/entry/200819/

君は真に理解しているか?z-indexとスタッキングコンテキストの関係 - ICS MEDIA

君は真に理解しているか?z-indexとスタッキングコンテキストの関係 - ICS MEDIA

ややこしいz-indexの挙動について解説した記事です。

カテゴリ:記事

https://ics.media/entry/200609/

意外? @propertyがCSSアニメーションを激変させる理由 - ICS MEDIA

意外? @propertyがCSSアニメーションを激変させる理由 - ICS MEDIA

CSSの@propertyによってCSS変数をアニメーションできるようになり、CSSアニメーションの幅が広がったことをテーマにした記事です。

カテゴリ:記事

https://ics.media/entry/241219/

Canvasだけじゃない!requestAnimationFrameを使ったアニメーション表現 - ICS MEDIA

Canvasだけじゃない!requestAnimationFrameを使ったアニメーション表現 - ICS MEDIA

requestAnimationFrameを使ったアニメーション表現を紹介した記事です。

カテゴリ:記事

https://ics.media/entry/210414/

知らないで使うとトラブルになるかも…プログラム・画像のライセンス(概要編) - ICS MEDIA

知らないで使うとトラブルになるかも…プログラム・画像のライセンス(概要編) - ICS MEDIA

画像やライブラリのライセンスについて紹介した記事です。

カテゴリ:記事

https://ics.media/entry/201216/

デザインとHTMLのズレを検出! Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ - ICS MEDIA

デザインとHTMLのズレを検出! Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ - ICS MEDIA

ヘッドレスブラウザのPuppeteerを使って実装とデザインを見比べる手法についての記事です。

カテゴリ:記事

https://ics.media/entry/220331/

お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA

お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA

フォームのアクセシビリティを高める方法についての記事です。

カテゴリ:記事

https://ics.media/entry/201016/

CSSひとつで印象が変わる! スクロールでふわっと出るアニメーション - ICS MEDIA

CSSひとつで印象が変わる! スクロールでふわっと出るアニメーション - ICS MEDIA

Webデザインでよく見る、ふわっと出てくるアニメーションのコツについて解説した記事です。

カテゴリ:記事

https://ics.media/entry/250221/

CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方 - ICS MEDIA

CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方 - ICS MEDIA

CSSの疑似クラスを応用したインタラクティブ手法について記事です。

カテゴリ:記事

https://ics.media/entry/200413/

【CSS】positionでleftとrightを同時指定したらどうなる?

【CSS】positionでleftとrightを同時指定したらどうなる?

CSSのpositionにおけるレイアウト挙動についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/9250541f7d0515

【アンケート】WordPressのローカル開発環境に何使っている?

【アンケート】WordPressのローカル開発環境に何使っている?

どのようなWordPressのローカル開発環境を使っているかのアンケート結果の記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/018778bbcfbb1dc10a57

【JavaScript】関数名をclose()にするのは気をつけろ

【JavaScript】関数名をclose()にするのは気をつけろ

close()という名前の関数を作ったときに陥った落とし穴についての体験談です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/204f212c84c0a0

マイクロインタラクションからクリエイティブ表現まで!Tween24.jsを使った演出表現 - ICS MEDIA

マイクロインタラクションからクリエイティブ表現まで!Tween24.jsを使った演出表現 - ICS MEDIA

Tween24.jsを使ったアニメーション表現を紹介した記事です。

カテゴリ:記事

https://ics.media/entry/211209/

2023 CSS

2023 CSS

2023年に使えるようになったCSSの機能についての資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/2023-css

正確な文字数カウント

正確な文字数カウント

JavaScriptで絵文字を含む正確な文字数カウントをするサイトです。校正機能付きです。

カテゴリ:ウェブサイト

https://exact-word-count.pages.dev/

【HTML・CSS】ダークモードで適した画像に切り替える方法

【HTML・CSS】ダークモードで適した画像に切り替える方法

画像をダークモード・ライトモードで出し分ける方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/51a5add64ef5b7

GitHub - Crayfisher-zari/simpleScrollTrigger

GitHub - Crayfisher-zari/simpleScrollTrigger

GSAPのScrollTriggerライクなシンプルなスクロールで発火するライブラリのリポジトリです。

カテゴリ:オープンソース

https://github.com/Crayfisher-zari/simpleScrollTrigger

GitHub - Crayfisher-zari/liquid-glass-like-css

GitHub - Crayfisher-zari/liquid-glass-like-css

Appleが発表したLiquid GlassのようなデザインをCSSで実装したリポジトリです。

カテゴリ:オープンソース

https://github.com/Crayfisher-zari/liquid-glass-like-css

ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA

ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA

透過のある動画の書き出し形式や実装する方法についての記事です。

カテゴリ:記事

https://ics.media/entry/221007/

ちょい足しVueでWordPressをプチSPA化

ちょい足しVueでWordPressをプチSPA化

ちょい足しVueを使ってWordPressの一部をSPA化する方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/9fdfea174f2ab6

vue_component_from_composable

vue_component_from_composable

Vueコンポーネントをコンポーザブル関数から返してコンポーネントの責務を分離する方法についての資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/vue-component-from-composable

頑張らない3D表現! WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA

頑張らない3D表現! WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA

3DといえばWebGLを思い浮かべますが、WebGLを使わない3D表現のテクニックです。

カテゴリ:記事

https://ics.media/entry/230519/

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出 - ICS MEDIA

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出 - ICS MEDIA

ライブラリなどを使用せず、モダンなCSSとJavaScriptだけで作る全画面スクロール演出についての記事です。

カテゴリ:記事

https://ics.media/entry/191211/

mask-compositeでつくるCSSの新しい表現方法 - ICS MEDIA

mask-compositeでつくるCSSの新しい表現方法 - ICS MEDIA

CSSのmask-compositeで複雑なマスクが作れるようになったことを紹介する記事です。

カテゴリ:記事

https://ics.media/entry/241025/

意外と奥深いCSSのfont-weightの話 - ICS MEDIA

意外と奥深いCSSのfont-weightの話 - ICS MEDIA

よく使うfont-weightプロパティですが、意外と挙動について難しいところがある話です。

カテゴリ:記事

https://ics.media/entry/230830/

API通信一切なし!Nuxt Composition APIで作る完全静的サイト - ICS MEDIA

API通信一切なし!Nuxt Composition APIで作る完全静的サイト - ICS MEDIA

バージョン2.1系時代のNuxtを使って完全に静的サイトを作成する方法についての記事です。

カテゴリ:記事

https://ics.media/entry/210120/

GitHub - Crayfisher-zari/is-font-available

GitHub - Crayfisher-zari/is-font-available

フォントがローカルファイルから利用可能かどうかを判定するライブラリのリポジトリです。

カテゴリ:オープンソース

https://github.com/Crayfisher-zari/is-font-available

リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA

リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA

インタラクティブな要素におけるユーザービリティやアクセシビリティを改善するためのテクニックです。

カテゴリ:記事

https://ics.media/entry/221208/

【CSS】z-index管理の3指針

【CSS】z-index管理の3指針

z-indexの値を管理をするための指針について紹介した記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/2e8633a6da3ce9

Web Motion Catalog

Web Motion Catalog

Webの動きのアイデアを紹介するサイトです。

カテゴリ:ウェブサイト

https://web-motion-catalog.com/

【Vue】v-html部分のaタグをルーター遷移に変える小技

【Vue】v-html部分のaタグをルーター遷移に変える小技

v-htmlを使ってHTML内のaタグをルーター遷移に変える小技についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/d890673933167d

1歩踏み込んでみる! CSSグラデーションのマニアックな世界 - ICS MEDIA

1歩踏み込んでみる! CSSグラデーションのマニアックな世界 - ICS MEDIA

CSSのグラデーションを応用したテクニックを紹介する記事です。

カテゴリ:記事

https://ics.media/entry/200212/

JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA

JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA

Intersection Observerを使ってスクロール演出を実装する方法についての記事です。

カテゴリ:記事

https://ics.media/entry/190902/

HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS

HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS

HTMLとCSSだけでリアルな画像を作る方法について登壇したときの資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/how-to-make-a-realistic-picture-only-html-and-css/

シンプルなスクロールで発火するJavaScriptライブラリを開発しました

シンプルなスクロールで発火するJavaScriptライブラリを開発しました

Simple Scroll Triggerの紹介記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/9e5fe881a3b150

独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック! - ICS MEDIA

独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック! - ICS MEDIA

transformの値として指定していたscale、rotate、translateをそれぞれ別のプロパティで指定できるようになり、より細かくアニメーション制御できるようになったことを紹介する記事です。

カテゴリ:記事

https://ics.media/entry/230309/

【妄想】AIコーディング時代のWebサイト

【妄想】AIコーディング時代のWebサイト

生成AI時代におけるWebサイトの作り方や存在について妄想してみた記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/6a62e9000b7677

アニメーション中の色が濁ってしまう原因と対処法

アニメーション中の色が濁ってしまう原因と対処法

CSSのグラデーションにおける色の補完に関する記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/a831a5cffb38ea

【Vue.js】コンポーネントをComposable関数(カスタムフック)から提供する

【Vue.js】コンポーネントをComposable関数(カスタムフック)から提供する

Vueコンポーネントをコンポーザブル関数から返してコンポーネントの責務を分離する方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/7946414921fe42

【CSS】 <table>タグをCSS gridで実現する

【CSS】 <table>タグをCSS gridで実現する

<table>タグのレイアウトをCSS Gridの挙動で行なう方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/8453a78fba5803

WordPressのGPL周りの疑問とその答え

WordPressのGPL周りの疑問とその答え

WordPressのGPLライセンスについて調べた記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/05d6e818a146a8

ノーコードツールを使ってどこかで見たことあるゲームを作ってみた

ノーコードツールを使ってどこかで見たことあるゲームを作ってみた

2023年のクソアプリアドベントカレンダーで作ったScratchで作ったゲームの紹介記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/a386ba947a6d07

デザインとエンジニアリングの断絶

デザインとエンジニアリングの断絶

デザインとエンジニアリングの間にある溝についての考察です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/9db4f6655fcdd7253e90

【クソアプリアドベントカレンダー】技術的負債リボ払いシミュレーター

【クソアプリアドベントカレンダー】技術的負債リボ払いシミュレーター

2024年のクソアプリアドベントカレンダーで作った「技術的負債リボ払いシミュレーター」の紹介記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/5093d8773aec55

background-imageの表示ラグ問題を(ほぼ)CSSのみで実装するCSS遅延読み込みで解決

background-imageの表示ラグ問題を(ほぼ)CSSのみで実装するCSS遅延読み込みで解決

background-imageの画像を予め遅延読み込みして、表示時のラグを減らす方法についての記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/24273afb875d1d

defineModelを使って気軽にコンポーネントのv-modelをやろう

defineModelを使って気軽にコンポーネントのv-modelをやろう

Vue.jsのdefineModelをによって難易度の下がったコンポーネントのv-modelについての登壇資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/definemodelwoshi-tuteqi-qing-nikonponentonov-modelwoyarou

Webデザインのモーション集サイトを作りました

Webデザインのモーション集サイトを作りました

Web Motion Catalogのサイトを作ったときの紹介記事です。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/ac3ade95d83ccd

数値や日付をさまざまな形式の文字列に! toLocaleString()を使ってスマートに変換しよう - ICS MEDIA

数値や日付をさまざまな形式の文字列に! toLocaleString()を使ってスマートに変換しよう - ICS MEDIA

JavaScriptのtoLocaleString()を使って意外と面倒な表示の整形について解説した記事です。

カテゴリ:記事

https://ics.media/entry/240529/

エルデンリングに学ぶ道に迷わないUIと世界観

エルデンリングに学ぶ道に迷わないUIと世界観

ゲーム エルデンリングのUIについてダイエジェティックな視点について考察です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/erudenringunixue-budao-nimi-wanaiuitoshi-jie-guan/

速くて安いWebサイトを作る

速くて安いWebサイトを作る

速くて安いWebサイトを作る方法についてのLT資料です。

カテゴリ:登壇資料

https://speakerdeck.com/nishiharatsubasa/su-kutean-iwebsaitowozuo-ru

新卒1年で辞めて、スクール通って、コーダーからフロントエンドエンジニアになった話、そして…

新卒1年で辞めて、スクール通って、コーダーからフロントエンドエンジニアになった話、そして…

自分のフロントエンドエンジニアになった経緯についてです。

カテゴリ:記事

https://zenn.dev/crayfisher_zari/articles/8639056241c23e7158d4

にしはら

  • ホーム
  • プロフィール