Pyxofy

Sign in Subscribe

CSS Art – Create 3D Shapes with Border Radius, Rotate and Gradients - Part 1

CSS Art – Create 3D Shapes with Border Radius, Rotate and Gradients - Part 1

Build a 3D‑looking isometric chair using only CSS. Learn how simple shapes, border-radius, and transform work together—step by step.

Swift Playground - コードを学ぼう1【for ループ】Part 2

Swift Playground

Swift Playground - コードを学ぼう1【for ループ】Part 2

Swift Playground「コードを学ぼう1」で for ループと関数の使い方をマスターしましょう。本記事ではプログラミング初心者にも分かりやすいように解説し、コードの正解例を掲載しています。

CSS Animation – Unique Rotate Effect Using clip-path and Animation Delays

CSS Animation – Unique Rotate Effect Using clip-path and Animation Delays

Build a spinning pyramid with only CSS! This easy step-by-step guide helps beginners master isometric shapes and professional animations today.

Swift Playground - コードを学ぼう1【for ループ】Part 1

Swift Playground

Swift Playground - コードを学ぼう1【for ループ】Part 1

Swift Playground「コードを学ぼう1」で for ループの使い方を学習しましょう。本記事ではプログラミング初心者にも分かりやすいように解説し、コードの正解例を掲載しています。

CSS Animation – Burst Effects Using Animation Delays, Transform and Gradients - Part 2

CSS Animation – Burst Effects Using Animation Delays, Transform and Gradients - Part 2

Burst effects add energy and impact. Learn how to blend key CSS properties and functions to create dynamic, eye‑catching animations for the web.

Swift Playground - コードを学ぼう1【関数】Part 2

Swift Playground

Swift Playground - コードを学ぼう1【関数】Part 2

Swift Playground「コードを学ぼう1」で関数の作り方をマスターしましょう。本記事ではプログラミング初心者にも分かりやすいように解説し、コードの正解例を掲載しています。

CSS Animation – Burst Effects Using Animation Delays, Transform and Gradients - Part 1

CSS Animation – Burst Effects Using Animation Delays, Transform and Gradients - Part 1

Ever wondered how burst animations are made? We break it down step by step so anyone can build one from scratch!

Swift Playground - コードを学ぼう1【関数】Part 1

Swift Playground

Swift Playground - コードを学ぼう1【関数】Part 1

Swift Playground「コードを学ぼう1」で関数の使い方を学習しましょう。本記事ではプログラミング初心者にも分かりやすいように解説し、コードの正解例を掲載しています。

CSS Art – shape() Function & Gradients: Create an Isometric Trophy - Part 2

CSS Art – shape() Function & Gradients: Create an Isometric Trophy - Part 2

Make shiny, eye‑catching effects! Follow this easy guide to create smooth highlights and shadows using pure CSS—perfect for beginners.

Swift Playground - コードを学ぼう1【コマンド】Part 2

Swift Playground

Swift Playground - コードを学ぼう1【コマンド】Part 2

Swift Playground「コードを学ぼう1」でデバッグに挑戦してみましょう。本記事ではプログラミング初心者にも分かりやすいように解説し、コードの正解例を掲載しています。

CSS Art – shape() Function & Gradients: Create an Isometric Trophy - Part 1

CSS Art – shape() Function & Gradients: Create an Isometric Trophy - Part 1

Learn clip-path and shape() basics to build modern, image-free UI designs—perfect for beginners. Draw curves and custom silhouettes with pure CSS

Swift Playground - コードを学ぼう1【コマンド】Part 1

Swift Playground

Swift Playground - コードを学ぼう1【コマンド】Part 1

Swift Playground「コードを学ぼう1」でコマンドの使い方をマスターしましょう。本記事ではプログラミング初心者にも分かりやすいように解説し、コードの正解例を掲載しています。

CSS Art – Using clip-path: polygon() for Building Responsive Isometric Pyramids

CSS Art – Using clip-path: polygon() for Building Responsive Isometric Pyramids

Want to build an isometric pyramid using only CSS? Follow our clear, step-by-step article and learn the techniques behind this striking 3D effect

Swift Playground とは？初心者向けプログラミング入門

Swift Playground

Swift Playground とは？初心者向けプログラミング入門

初心者でも簡単にプログラミングを体験できる無料の学習アプリ Swift Playground でプログラミングの基礎を学びましょう。本サイトでは「コードを学ぼう1・２」のレッスンを解説していきます。

CSS Animation – How to Use Keyframes and steps() to Animate an Analog Alarm Clock - Part 2

CSS Animation – How to Use Keyframes and steps() to Animate an Analog Alarm Clock - Part 2

Learn to rotate, scale, and fade in elements with pure CSS! Follow this step-by-step article to create stunning and visually catchy animations.

CSS Animation – How to Use Keyframes and steps() to Animate an Analog Alarm Clock - Part 1

CSS Animation – How to Use Keyframes and steps() to Animate an Analog Alarm Clock - Part 1

Learn to animate an analog alarm clock using only CSS! Spin the clock hands and dynamically scale the clock body in this step-by-step article.

Welcome 2026!

（English below Japanese）新年あけましておめでとうございます。おかげさまで、Pyxofy (ピクソファイ) は開設５周年を迎えることができました。皆様に学びの場を提供することで、私たちも同じく成長していくことができています。2026年も Pyxofy と一緒に自己研鑽に励んでいきましょう！メインコンテンツ * Swift Playground 日本語の新たなコンテンツとして Swift Playground を紹介していきます。Swift Playground はプログラミング言語の Swift を学習できるアプリです。プログラミング初心者向けのチュートリアルが充実しており、ゲーム感覚で気軽に取り組むことができます。 * CSS 英語の記事は引き続き CSS について解説します。様々なファンクションやプロパティを用いた魅力的なアート・アニメーションを紹介していきます。一緒に CSS での表現の幅を広げていきましょう。メンバー限定コンテンツ Pyxofy メンバーの方のみがご覧いただけるコンテンツを配

スクラッチプログラミング - ゲームのつくりかた｜おすすめトップ10

スクラッチプログラミング - ゲームのつくりかた｜おすすめトップ10

Pyxofy (ピクソファイ)で人気(にんき)のゲーム記事(きじ)をピックアップしました。車(くるま)のゲームやプラットフォーマーなど、簡単(かんたん)なものからむずかしいものまで、いろいろなゲームのサンプルをのせてあります。

スクラッチプログラミング - フラッピーゲームのつくりかた

スクラッチプログラミング - フラッピーゲームのつくりかた

フラッピーバード風(ふう)のゲームを Scratch でつくる方法(ほうほう)を紹介(しょうかい)します。マウスやタッチで操作(そうさ)するので、キーボードなしのタブレットなどでもあそぶことができるモバイル対応(たいおう)のゲームです。

CSS Art - How to Build a Pure CSS Analog Clock with Gradients & Variables - Part 2

CSS Art - How to Build a Pure CSS Analog Clock with Gradients & Variables - Part 2

The clock is ticking—finish this iconic, timeless design using only CSS. Experiment with CSS properties and functions, let your creativity shine.

CSS Art - How to Build a Pure CSS Analog Clock with Gradients & Variables - Part 1

CSS Art - How to Build a Pure CSS Analog Clock with Gradients & Variables - Part 1

Level up your front-end skills by building an analog clock from scratch. Master CSS Variables (Custom Properties) and Gradients in this step-by-step guide.

スクラッチプログラミング - ペンで図形(ずけい)をえがく

スクラッチプログラミング - ペンで図形(ずけい)をえがく

Scratch をつかって円(えん)や多角形(たかっけい)をえがいてみましょう。円(えん)はペンをぐるりと一周(いっしゅう)うごかし、多角形(たかっけい)は「まっすぐ線(せん)をひく」と「むきをかえる」をくりかえしてえがきます。

スクラッチプログラミング - 3Dテニスゲームのつくりかた

スクラッチプログラミング - 3Dテニスゲームのつくりかた

Scratch でテニスゲームをつくる方法(ほうほう)を紹介(しょうかい)します。マウスやタッチでプレイヤーをうごかすので、キーボードなしのタブレットなどでもあそぶことができるモバイル対応(たいおう)のゲームです。

CSS Animation – Mastering Split Animations using CSS Translate and Keyframes

CSS Animation – Mastering Split Animations using CSS Translate and Keyframes

Create stunning CSS animations that group and split like magic! Follow our step-by-step article and bring your designs to life.

スクラッチプログラミング - ボールのリアルな落下(らっか)・はねかえり

スクラッチプログラミング - ボールのリアルな落下(らっか)・はねかえり

ボールがおちたり、バウンドしたり、だんだんゆっくりになったりするうごきを Scratch でつくります。はねかえりを色(いろ)で判定(はんてい)するので、応用(おうよう)のきくスクリプトになっています。