Pyxofy

Sign in Subscribe

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 コードを掲載しています。

CSS Animation – steps() Function Multi-Step Animation

CSS Animation – steps() Function Multi-Step Animation

Smooth animations are delightful to look at, but sometimes, you may want to control each keyframe with CSS. Learn how in this step-by-step article.

JavaScript - ピンポンゲームの作り方 Part 2 - ボールを動かす

JavaScript - ピンポンゲームの作り方 Part 2 - ボールを動かす

ピンポンゲームのボールを動かして、当たり判定と点数を加算する方法を紹介します。コードを分解して分かりやすく丁寧に解説していますので、一緒に JavaScript でのゲーム作りに挑戦してみましょう。

CSS Art – Combining Gradients and Custom Properties – Part 2

CSS Art – Combining Gradients and Custom Properties – Part 2

Fireworks are dazzling, spectacular, and enjoyable to observe for any celebration. Join us and learn how to create them step-by-step using CSS.

JavaScript - ピンポンゲームの作り方 Part 1 - キーで操作する

JavaScript - ピンポンゲームの作り方 Part 1 - キーで操作する

JavaScript でピンポンゲームを作成します。キーで操作する方法や衝突判定、ゲームループなどを３回に分けて解説します。今回の Part 1 では、キー押下でパドルを動かせるようにコーディングします。

CSS Art – Combining Gradients and Custom Properties – Part 1

CSS Art – Combining Gradients and Custom Properties – Part 1

Sunshine and sizzling heat are the whole mark of summer. Using CSS, learn how to keep cool by creating a Japanese Furin wind chime, step-by-step.

JavaScript - 矢印キーで動かす方法

JavaScript - 矢印キーで動かす方法

HTML のキャンバス <canvas> に描いたオブジェクトを JavaScript で動かすコードを解説します。ゲームでプレイヤーを操作するように、キーを押してオブジェクトを移動させる方法を学びましょう。

CSS Animation – SVG Motion Path with offset-path – Part 2

CSS Animation – SVG Motion Path with offset-path – Part 2

Matters of all forms and sizes can attract each other. Learn how to accelerate or decelerate this attraction with CSS in this step-by-step article.

JavaScript - お絵描きアプリの作り方【機能追加編】

JavaScript - お絵描きアプリの作り方【機能追加編】

今回は、【基本編】で作ったシンプルなお絵描きアプリに機能を追加します。線の太さをスライダーで変更したり、色をカラーピッカーから選択できるようにして、より楽しく遊べるアプリを作ってみましょう。

CSS Animation – SVG Motion Path with offset-path – Part 1

CSS Animation – SVG Motion Path with offset-path – Part 1

In this step-by-step article series learn how to make SVG and CSS images, as well as learning how to animate them to move along a motion path.

JavaScript - お絵描きアプリの作り方【基本編】

JavaScript - お絵描きアプリの作り方【基本編】

HTML のキャンバス <canvas> と JavaScript でシンプルなお絵描きアプリを作ります。線の描画機能と消去ボタンのみの最低限のコードで、自由に描画するための基本的な方法を学びましょう。