Pyxofy

Sign in Subscribe

CSS Art - Radial Gradient Techniques for Realistic Isometric Design - Part 2

CSS Art - Radial Gradient Techniques for Realistic Isometric Design - Part 2

Round, transparent, and 3D-like effects can be hard to make for the web. You’ll learn how to make all of the above in this step-by-step article.

スクラッチプログラミング - キャラクターをうごかす｜ジャンプ・かべキック

スクラッチプログラミング - キャラクターをうごかす｜ジャンプ・かべキック

Scratch (スクラッチ)で大人気(だいにんき)のゲーム、プラットフォーマーをつくるときにつかえる、ジャンプ、横(よこ)移動(いどう)、壁(かべ)キックのスクリプトを紹介(しょうかい)します。

CSS Art - Radial Gradient Techniques for Realistic Isometric Design - Part 1

CSS Art - Radial Gradient Techniques for Realistic Isometric Design - Part 1

Create a mesmerizing multi-colored gumball machine using only CSS! Follow our step-by-step tutorial to design this iconic, eye-catching machine

スクラッチプログラミング - 体力(たいりょく)ゲージのつくりかた

スクラッチプログラミング - 体力(たいりょく)ゲージのつくりかた

Scratch (スクラッチ)で体力(たいりょく) ゲージ(HPゲージ／ライフゲージ)をつくります。コスチュームはつかわずにペンで作成(さくせい)し、いろいろなゲームに再利用(さいりよう)できるスクリプトにします。

CSS Art - Isometric Image Design with CSS Transforms and Linear Gradients - Part 2

CSS Art - Isometric Image Design with CSS Transforms and Linear Gradients - Part 2

In Part 2 of this step-by-step article, let’s finish the isometric front-load washing machine image using multiple CSS properties and functions.

スクラッチプログラミング - さくらふぶきのアニメーション

スクラッチプログラミング - さくらふぶきのアニメーション

Scratch (スクラッチ)で桜(さくら)のはなびらがまうアニメーションをつくります。つかうブロックはおおくないので、初心者(しょしんしゃ)のかたでもつくりやすい作品(さくひん)です。

CSS Art - Isometric Image Design with CSS Transforms and Linear Gradients - Part 1

CSS Art - Isometric Image Design with CSS Transforms and Linear Gradients - Part 1

Join us in creating a three-dimensional (3D-ish) front-load washing machine using only CSS properties and functions in this step-by-step article.

$スクラッチプログラミング - けいさんドリル｜こたえあわせをする$

スクラッチプログラミング - けいさんドリル｜こたえあわせをする

Scratch (スクラッチ)でつくる計算(けいさん)ドリルを完成(かんせい)させます。ゲーム感覚(かんかく)でくりかえし「たしざん」「ひきざん」「かけざん」「わりざん」をまなべるようにしましょう。

CSS Animation - Isometric Cubes with Move and Text Glow Animation Effects

CSS Animation - Isometric Cubes with Move and Text Glow Animation Effects

How can you create moving isometric cubes, a radial gradient background, and glowing text? Join us in this step-by-step article to learn more.

$スクラッチプログラミング - けいさんドリル｜かけざん・わりざん$

スクラッチプログラミング - けいさんドリル｜かけざん・わりざん

Scratch (スクラッチ)で「たす」「ひく」「かける」「わる」の簡単(かんたん)な問題(もんだい)をランダムにつくります。わりきれない「わりざん」では、こたえを小数(しょうすう)ではなく「あまり」で表示(ひょうじ)するよう工夫(くふう)します。

CSS Art – Position Multiple Isometric Cubes using CSS

CSS Art – Position Multiple Isometric Cubes using CSS

You can create 3D objects, but do you know how to lay them out effectively? Learn to position isometric cubes in this step-by-step article.

$スクラッチプログラミング - けいさんドリル｜たしざん・ひきざん$

スクラッチプログラミング - けいさんドリル｜たしざん・ひきざん

計算(けいさん)問題(もんだい)を学習(がくしゅう)できるドリルを Scratch (スクラッチ)でつくってみましょう。算数(さんすう)をまなびはじめた小学生(しょうがくせい)にオススメのプロジェクトです。

CSS Art - Creating an Isometric Cube using CSS Transform

CSS Art - Creating an Isometric Cube using CSS Transform

Making 3D objects can be difficult and time-consuming. Learn how to combine CSS and isometric projection techniques in this step-by-step article.

スクラッチプログラミング - ゆきがふるアニメーション

スクラッチプログラミング - ゆきがふるアニメーション

Scratch (スクラッチ)で雪(ゆき)のアニメーションをつくる方法(ほうほう)を紹介(しょうかい)します。雪(ゆき)がふりつもる様子(ようす)はスタンプで表現(ひょうげん)します。

CSS Animation - 3D Transforms with scale3d() Function

CSS Animation - 3D Transforms with scale3d() Function

Scaling and rotating squares to different 3D shapes is eye-catching and fun. Join us and learn scale3d() transforms in this step-by-step article.

スクラッチプログラミング - ランゲーム｜ほうせきをゲットする

スクラッチプログラミング - ランゲーム｜ほうせきをゲットする

Scratch (スクラッチ)でつくるランゲームを完成(かんせい)させます。はしるスピードをだんだんはやくしたり、宝石(ほうせき)があちこちにでてくるようにして、おもしろいゲームにしましょう。

CSS Art – scale3d() with rotate3d() Transforms

CSS Art – scale3d() with rotate3d() Transforms

Master CSS scale3d() and resize objects in 3D! Mix it with rotate3d() and create stunning web transformations in this step-by-step article.

スクラッチプログラミング - ランゲーム｜ゲームオーバーとスタートボタン

スクラッチプログラミング - ランゲーム｜ゲームオーバーとスタートボタン

障害物(しょうがいぶつ) をジャンプでよけながらはしりつづけるランゲームを Scratch (スクラッチ)でつくります。ゲームオーバーにする方法(ほうほう)やスタートボタンのつくりかたなどをまなびましょう。

CSS Animation – rotate3d() and 3D Cube Transforms

CSS Animation – rotate3d() and 3D Cube Transforms

Make 3D cubes spin and rotate! Learn to use CSS rotate3d() function and @keyframes to create exciting animation in this step-by-step article.

スクラッチプログラミング - ランゲーム｜はしりながらジャンプする

スクラッチプログラミング - ランゲーム｜はしりながらジャンプする

Scratch (スクラッチ)でたのしくあそべるランゲームをつくります。「どれだけながくはしりつづけられるか」をたのしむゲームです。ネコをずっとはしらせたり、ジャンプさせる方法(ほうほう)などをまなびましょう。

Welcome 2025!

（English below Japanese）新年あけましておめでとうございます。おかげさまで、Pyxofy (ピクソファイ) は開設４周年を迎えることができました。皆さまに学びの場を提供することで、私たちも同じく成長していくことができています。2025年も Pyxofy と一緒に自己研鑽に励んでいきましょう！メインコンテンツ * スクラッチプログラミング（Scratch）今年は、日本語の記事として、私たち Pyxofy の原点ともなっているスクラッチを紹介していきます。スクラッチは子ども向けのプログラミングソフトとして有名ですが、子どもだけでなく大人も楽しめるゲーム作りの記事などを配信します。 * CSS 英語の記事としては、引き続き CSS について解説します。今年は、平面２Dだけでなく、立体３Dを表現するアートやアニメーションを紹介していきます。メンバー限定コンテンツ Pyxofy メンバーの方のみがご覧いただけるコンテンツを配信いたします。是非

CSS Art – How to Make a 3D Cube With CSS

CSS Art – How to Make a 3D Cube With CSS

Why settle for two dimensions when you can have three? Learn how to make a three-dimensional CSS cube and then rotate it into multiple angles.

JavaScript - 神経衰弱ゲームの作り方 Part 2 - カードをめくって揃える

JavaScript - 神経衰弱ゲームの作り方 Part 2 - カードをめくって揃える

JavaScript で作る神経衰弱ゲームのコードを完成させます。今回の Part 2 では、クリックでカードを２枚選ぶ方法と、数字が揃った場合と揃わなかった場合で処理を分ける方法を紹介します。

CSS Animation – 3D Transforms Using translate3d()

CSS Animation – 3D Transforms Using translate3d()

2D? Nope. We live in a three-dimensional (3D) world! Learn 3D transforms using the CSS translate3d() and many more in this step-by-step article.

JavaScript - 神経衰弱ゲームの作り方 Part 1 - カードをシャッフルする

JavaScript - 神経衰弱ゲームの作り方 Part 1 - カードをシャッフルする

カードをめくって数字を揃える神経衰弱ゲームを作ります。今回の Part 1 では、カードを JavaScript で生成する方法と、配列で用意した数字をシャッフルする方法を紹介します。