has()疑似クラスでコーディングが変わる! CSS最新スタイリング - ICS MEDIA
CSSのhas()疑似クラスで今までできなかったような条件のでのスタイリングができるようになったこと、そしてその応用についての記事です。
カテゴリ:記事
https://ics.media/entry/240808/
GitHub - Crayfisher-zari/digital-agency-design-system
デジタル庁のデザインシステムをVue.jsで実装してOSSとして公開しているリポジトリです。
カテゴリ:オープンソース
https://github.com/Crayfisher-zari/digital-agency-design-system
1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA
画像読み込みを早めるテクニックについて紹介した記事です。
https://ics.media/entry/221223/
Webアプリ系デザインとホームページ系デザイン
Webサイトのデザインについての考察記事です。
https://zenn.dev/crayfisher_zari/articles/5dd8ecc1a26c63
UUIDの衝突するまでの時間と仏教の無間地獄どちらが長いか?
UUIDの衝突可能性時間と地獄の刑期のどちらが長いかについての小話です。
https://zenn.dev/crayfisher_zari/articles/ffe5e4fc7657dc
【CSS Sticky & Flex】個人的によくやっている固定ヘッダー・フッターの方法
ヘッダー固定するレイアウトテクニックについての記事です。
https://zenn.dev/crayfisher_zari/articles/a21ee98a71df3b
自分が技術記事を書くモチベーションとか、気をつけていることとか
自分が技術記事を書くモチベーションなどのマインドについての記事です。
https://zenn.dev/crayfisher_zari/articles/90056f50057d38
gapの余白指定が便利! gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
flexboxにおけるgapプロパティを使ったレイアウト手法を紹介した記事です。
https://ics.media/entry/210628/
技術的負債リボ払いシミュレーター
リボ払いのシミュレーターです。
カテゴリ:ウェブサイト
https://crayfisher-zari.github.io/revolving-simulator/
Nuxtの動的ルーティングのSSGと静的サイトホスティングの404
Nuxtにおけるホスティング環境による404ページ挙動の違いについての記事です。
https://zenn.dev/crayfisher_zari/articles/ed0a69e45f1057
wp-envとViteで作る爆速WordPress開発環境
WordPressの開発環境をViteを使って構築する方法についての記事です。
https://zenn.dev/crayfisher_zari/articles/f2d38f536eaf02
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
Squooshを使って画像最適化をnode.jsで自動化する方法についての記事です。
https://ics.media/entry/220204/
ウェブの新機能はいつまで待てば実践投入できるか - ICS MEDIA
次から次へと出てくるWebの新機能をどれくらいの普及すれば使えるのか、という問いに対する自分なりのアンサーです。
https://ics.media/entry/250422/
z-indexの値は「無限」と「2147483647」どちらが強いの?
z-indexの上限値についての記事です。
https://zenn.dev/crayfisher_zari/articles/d98a0aef6326a8
約20行!WordPressでプラグインに頼らないWebP対応
WordPressでWebP画像を配信するための設定についての記事です。
https://zenn.dev/crayfisher_zari/articles/22eb4ad5ea6f0e
background-imageを使ったCSSのアニメーションテクニック - ICS MEDIA
background-imageを使ったアニメーションテクニックです。
https://ics.media/entry/220602/
【CSS】自分が余白のための空タグ容認派になった理由
HTMLにおける空タグ実装について自身のスタンスを紹介した記事です。
https://zenn.dev/crayfisher_zari/articles/a40a297b8e273b
スーパーマリオRPGのリメイク版の変更点からみるUX
スーパーマリオRPGの新旧のUIからみたUXの考察についての資料です。
カテゴリ:登壇資料
https://speakerdeck.com/nishiharatsubasa/supamariorpgnorimeikuban-nobian-geng-dian-karamiruux
オーブ集め - WebGPUデモ
WebGPUを使ったオーブ集めゲームです。Vibe Codingで作成しました。
https://color-orb.pages.dev/
HTMLにちょい足しでできる! Vue.jsでサクッと動きをつける方法 - ICS MEDIA
Vue.jsをバンドルツールなどなしに、少し使いたいときの方法についての記事です。
https://ics.media/entry/210908/
CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA
CSSを使ってデバッグする小技についての記事です。
https://ics.media/entry/200819/
君は真に理解しているか?z-indexとスタッキングコンテキストの関係 - ICS MEDIA
ややこしいz-indexの挙動について解説した記事です。
https://ics.media/entry/200609/
意外? @propertyがCSSアニメーションを激変させる理由 - ICS MEDIA
CSSの@propertyによってCSS変数をアニメーションできるようになり、CSSアニメーションの幅が広がったことをテーマにした記事です。
https://ics.media/entry/241219/
Canvasだけじゃない!requestAnimationFrameを使ったアニメーション表現 - ICS MEDIA
requestAnimationFrameを使ったアニメーション表現を紹介した記事です。
https://ics.media/entry/210414/
知らないで使うとトラブルになるかも…プログラム・画像のライセンス(概要編) - ICS MEDIA
画像やライブラリのライセンスについて紹介した記事です。
https://ics.media/entry/201216/
デザインとHTMLのズレを検出! Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ - ICS MEDIA
ヘッドレスブラウザのPuppeteerを使って実装とデザインを見比べる手法についての記事です。
https://ics.media/entry/220331/
お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA
フォームのアクセシビリティを高める方法についての記事です。
https://ics.media/entry/201016/
CSSひとつで印象が変わる! スクロールでふわっと出るアニメーション - ICS MEDIA
Webデザインでよく見る、ふわっと出てくるアニメーションのコツについて解説した記事です。
https://ics.media/entry/250221/
CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方 - ICS MEDIA
CSSの疑似クラスを応用したインタラクティブ手法について記事です。
https://ics.media/entry/200413/
【CSS】positionでleftとrightを同時指定したらどうなる?
CSSのpositionにおけるレイアウト挙動についての記事です。
https://zenn.dev/crayfisher_zari/articles/9250541f7d0515
【アンケート】WordPressのローカル開発環境に何使っている?
どのようなWordPressのローカル開発環境を使っているかのアンケート結果の記事です。
https://zenn.dev/crayfisher_zari/articles/018778bbcfbb1dc10a57
【JavaScript】関数名をclose()にするのは気をつけろ
close()という名前の関数を作ったときに陥った落とし穴についての体験談です。
https://zenn.dev/crayfisher_zari/articles/204f212c84c0a0
マイクロインタラクションからクリエイティブ表現まで!Tween24.jsを使った演出表現 - ICS MEDIA
Tween24.jsを使ったアニメーション表現を紹介した記事です。
https://ics.media/entry/211209/
2023 CSS
2023年に使えるようになったCSSの機能についての資料です。
https://speakerdeck.com/nishiharatsubasa/2023-css
正確な文字数カウント
JavaScriptで絵文字を含む正確な文字数カウントをするサイトです。校正機能付きです。
https://exact-word-count.pages.dev/
【HTML・CSS】ダークモードで適した画像に切り替える方法
画像をダークモード・ライトモードで出し分ける方法についての記事です。
https://zenn.dev/crayfisher_zari/articles/51a5add64ef5b7
GitHub - Crayfisher-zari/simpleScrollTrigger
GSAPのScrollTriggerライクなシンプルなスクロールで発火するライブラリのリポジトリです。
https://github.com/Crayfisher-zari/simpleScrollTrigger
GitHub - Crayfisher-zari/liquid-glass-like-css
Appleが発表したLiquid GlassのようなデザインをCSSで実装したリポジトリです。
https://github.com/Crayfisher-zari/liquid-glass-like-css
ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA
透過のある動画の書き出し形式や実装する方法についての記事です。
https://ics.media/entry/221007/
ちょい足しVueでWordPressをプチSPA化
ちょい足しVueを使ってWordPressの一部をSPA化する方法についての記事です。
https://zenn.dev/crayfisher_zari/articles/9fdfea174f2ab6
vue_component_from_composable
Vueコンポーネントをコンポーザブル関数から返してコンポーネントの責務を分離する方法についての資料です。
https://speakerdeck.com/nishiharatsubasa/vue-component-from-composable
頑張らない3D表現! WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA
3DといえばWebGLを思い浮かべますが、WebGLを使わない3D表現のテクニックです。
https://ics.media/entry/230519/
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出 - ICS MEDIA
ライブラリなどを使用せず、モダンなCSSとJavaScriptだけで作る全画面スクロール演出についての記事です。
https://ics.media/entry/191211/
mask-compositeでつくるCSSの新しい表現方法 - ICS MEDIA
CSSのmask-compositeで複雑なマスクが作れるようになったことを紹介する記事です。
https://ics.media/entry/241025/
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
よく使うfont-weightプロパティですが、意外と挙動について難しいところがある話です。
https://ics.media/entry/230830/
API通信一切なし!Nuxt Composition APIで作る完全静的サイト - ICS MEDIA
バージョン2.1系時代のNuxtを使って完全に静的サイトを作成する方法についての記事です。
https://ics.media/entry/210120/
GitHub - Crayfisher-zari/is-font-available
フォントがローカルファイルから利用可能かどうかを判定するライブラリのリポジトリです。
https://github.com/Crayfisher-zari/is-font-available
リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
インタラクティブな要素におけるユーザービリティやアクセシビリティを改善するためのテクニックです。
https://ics.media/entry/221208/
【CSS】z-index管理の3指針
z-indexの値を管理をするための指針について紹介した記事です。
https://zenn.dev/crayfisher_zari/articles/2e8633a6da3ce9
Web Motion Catalog
Webの動きのアイデアを紹介するサイトです。
https://web-motion-catalog.com/
【Vue】v-html部分のaタグをルーター遷移に変える小技
v-htmlを使ってHTML内のaタグをルーター遷移に変える小技についての記事です。
https://zenn.dev/crayfisher_zari/articles/d890673933167d
1歩踏み込んでみる! CSSグラデーションのマニアックな世界 - ICS MEDIA
CSSのグラデーションを応用したテクニックを紹介する記事です。
https://ics.media/entry/200212/
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だけでリアルな画像を作る方法について登壇したときの資料です。
https://speakerdeck.com/nishiharatsubasa/how-to-make-a-realistic-picture-only-html-and-css/
シンプルなスクロールで発火するJavaScriptライブラリを開発しました
Simple Scroll Triggerの紹介記事です。
https://zenn.dev/crayfisher_zari/articles/9e5fe881a3b150
独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック! - ICS MEDIA
transformの値として指定していたscale、rotate、translateをそれぞれ別のプロパティで指定できるようになり、より細かくアニメーション制御できるようになったことを紹介する記事です。
https://ics.media/entry/230309/
【妄想】AIコーディング時代のWebサイト
生成AI時代におけるWebサイトの作り方や存在について妄想してみた記事です。
https://zenn.dev/crayfisher_zari/articles/6a62e9000b7677
アニメーション中の色が濁ってしまう原因と対処法
CSSのグラデーションにおける色の補完に関する記事です。
https://zenn.dev/crayfisher_zari/articles/a831a5cffb38ea
【Vue.js】コンポーネントをComposable関数(カスタムフック)から提供する
Vueコンポーネントをコンポーザブル関数から返してコンポーネントの責務を分離する方法についての記事です。
https://zenn.dev/crayfisher_zari/articles/7946414921fe42
【CSS】 <table>タグをCSS gridで実現する
<table>タグのレイアウトをCSS Gridの挙動で行なう方法についての記事です。
https://zenn.dev/crayfisher_zari/articles/8453a78fba5803
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の画像を予め遅延読み込みして、表示時のラグを減らす方法についての記事です。
https://zenn.dev/crayfisher_zari/articles/24273afb875d1d
defineModelを使って気軽にコンポーネントのv-modelをやろう
Vue.jsのdefineModelをによって難易度の下がったコンポーネントのv-modelについての登壇資料です。
https://speakerdeck.com/nishiharatsubasa/definemodelwoshi-tuteqi-qing-nikonponentonov-modelwoyarou
Webデザインのモーション集サイトを作りました
Web Motion Catalogのサイトを作ったときの紹介記事です。
https://zenn.dev/crayfisher_zari/articles/ac3ade95d83ccd
数値や日付をさまざまな形式の文字列に! toLocaleString()を使ってスマートに変換しよう - ICS MEDIA
JavaScriptのtoLocaleString()を使って意外と面倒な表示の整形について解説した記事です。
https://ics.media/entry/240529/
エルデンリングに学ぶ道に迷わないUIと世界観
ゲーム エルデンリングのUIについてダイエジェティックな視点について考察です。
https://speakerdeck.com/nishiharatsubasa/erudenringunixue-budao-nimi-wanaiuitoshi-jie-guan/
速くて安いWebサイトを作る
速くて安いWebサイトを作る方法についてのLT資料です。
https://speakerdeck.com/nishiharatsubasa/su-kutean-iwebsaitowozuo-ru
新卒1年で辞めて、スクール通って、コーダーからフロントエンドエンジニアになった話、そして…
自分のフロントエンドエンジニアになった経緯についてです。
https://zenn.dev/crayfisher_zari/articles/8639056241c23e7158d4