西原 翼が担当した記事

西原 翼

建築関係出身のインタラクションデザイナー。デザインとエンジニアリングのつながりを探求したい。現実と虚構の狭間も好き。趣味はCG、工作、料理など。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出(2019年版)

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出(2019年版)

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

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