Pyxofy

Sign in Subscribe

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 で生成する方法と、配列で用意した数字をシャッフルする方法を紹介します。

CSS Art – Using polygon() and scale() Functions Together

CSS Art – Using polygon() and scale() Functions Together

Want your images to pop and stand out from the rest? Learn how to use CSS polygon(), scale(), drop shadows, and more in this step-by-step article.

CSS Art – Combining polygon() and drop-shadow() Functions

CSS Art – Combining polygon() and drop-shadow() Functions

Nonagon, decagon, or a plain old arrow? Learn to make them using the CSS polygon() and drop-shadow() functions in this step-by-step article.

JavaScript - 文字列のメソッド20と正規表現

JavaScript - 文字列のメソッド20と正規表現

JavaScript の文字列に対して使われる20のメソッドをピックアップしました。特定の文字にアクセスする方法や、変更を加えた文字列を作る方法、正規表現を使った高度な検索方法などを、サンプルコードと共に紹介します。

JavaScript - 配列のメソッド20

JavaScript - 配列のメソッド20

JavaScript の配列を操作する際によく使われる20のメソッドをピックアップしました。要素の追加、削除、コピー、並べ替え、検索、find(), filter(), map(), forEach() などを、サンプルコードと共に紹介します。

CSS Art – Making Irregular Shapes Using clip-path path() Function

CSS Art – Making Irregular Shapes Using clip-path path() Function

U.S. Route 66 is the Main Street of America. Join us in creating this legendary highway route sign using CSS in this step-by-step article.

JavaScript - アコーディオンメニューの作り方

JavaScript - アコーディオンメニューの作り方

シンプルなアコーディオンメニューを Javascript で作ります。複数のメニューを開いたままにできるタイプと、開けるのは一つのメニューだけで他の項目は自動的に閉じるタイプの２種類のコードを紹介します。

CSS Animation – Rotate and Transform Elements

CSS Animation – Rotate and Transform Elements

Rotate and transform animation sequences are easy to make with CSS. Learn how to apply them to multiple elements in this step-by-step article.

JavaScript - ピンポンゲームの作り方 Part 3 - ゲームループ

JavaScript - ピンポンゲームの作り方 Part 3 - ゲームループ

３回に分けて解説してきたピンポンゲームの作り方はこの記事が最終回です。ゲームの要となるゲームループ関数を作成し、ゲームを仕上げます。記事の最後にはすべての JavaScript コードを掲載しています。