Pyxofy - Pyxofy (Page 5)

Sign in Subscribe

Pyxofy

Empower Digital Natives through Education and Technology

JavaScript - ボタンクリックでメッセージを表示する方法【初心者向け】

JavaScript - ボタンクリックでメッセージを表示する方法【初心者向け】

ユーザーの操作をきっかけに動く JavaScript の書き方を紹介します。ボタンのクリックに反応するシンプルなコードを書きながら、要素の取得やイベント、イベントハンドラーやイベントリスナーなどの基本を解説します。

CSS Animation – Linear Path Animation

CSS Animation – Linear Path Animation

Recycle your old rulers and fully embrace CSS. Learn how to animate a circle shape along a straight, linear path in this step-by-step article.

JavaScript - 関数の基本 - 関数宣言と関数式【初心者向け】

JavaScript - 関数の基本 - 関数宣言と関数式【初心者向け】

プログラミングをする際、関数の知識は欠かせません。関数を使えば、同じコードを何度も書くことなく特定の処理を実行できるようになります。関数の書き方、パラメータや引数、return 文や戻り値、巻き上げなどの意味を学びましょう。

CSS Animation – Animate Along a Curved Path

CSS Animation – Animate Along a Curved Path

Squares are so last century. What do rounded corners, smooth curves and roller coasters have in common. Find out in this step-by-step article.

JavaScript - 条件分岐の基本 - if 文の書き方と true, false の意味

JavaScript - 条件分岐の基本 - if 文の書き方と true, false の意味

if 文は、「もし〇〇ならAをする、そうじゃなかったらBをする」のように、条件によって処理を分岐させるための文です。if 文を理解する際に必要になる、真理値（真偽値）の true と false についても、一緒に学んでいきましょう。

CSS Animation – Changing Color

CSS Animation – Changing Color

Viva Magenta, Molten Metallic or Tranquil Blue? You’ll learn how to use colors and more with CSS in this step-by-step article.

JavaScript - 変数の基本 - var, let, const【初心者向け】

JavaScript - 変数の基本 - var, let, const【初心者向け】

プログラミングを学習する際に、最初の段階で学んでおきたい基礎知識のひとつが、変数です。変数とは何か？なんのために使うのか？どうやって書くのか？など、初めて変数に触れる方の疑問に答えます。

CSS Animation – Fade In and Out

CSS Animation – Fade In and Out

Poof! Now you see it, now you don’t. Let’s learn how to make sophisticated fade effects and much more in this step-by-step article.

JavaScript - ダイアログの表示方法 - alert(), confirm(), prompt()

JavaScript - ダイアログの表示方法 - alert(), confirm(), prompt()

ポップアップで表示するダイアログを３つ紹介します。ユーザーに対してメッセージを表示する alert()、確認をする confirm()、入力を求める prompt() の使い方を学びましょう。

CSS Animation – Changing Size

CSS Animation – Changing Size

Make shapes bigger, make them smaller, then move them all around. You’ll learn how to do this, step-by-step, in this article.

JavaScript - 記述場所と読み込み方法

JavaScript - 記述場所と読み込み方法

JavaScript は HTML ファイル内に直接書くか、外部ファイルに書いて読み込みます。JavaScript をブラウザで動かすために、 <script> 要素で HTML に読み込む方法を学びましょう。

CSS Animation – Diagonal Movement

CSS Animation – Diagonal Movement

Zip to the bottom right, then to the upper left hand corner, then switch directions. Let’s learn how to do just that in this step-by-step article.

JavaScript - コードを書いてブラウザで動かすまでの手順

JavaScript - コードを書いてブラウザで動かすまでの手順

初心者の方向けに、JavaScript を記述して実行する手順をひとつずつ解説します。簡単なコードを書いて動かしてみることからプログラミングに挑戦してみましょう。

CSS Animation – Horizontal and Vertical Movement

CSS Animation – Horizontal and Vertical Movement

How can we move shapes from left to right, top to bottom on the internet? Let’s find out how in this step-by-step CSS animation article.

JavaScript - コードを書くときの基本的なルール【初心者向け】

JavaScript - コードを書くときの基本的なルール【初心者向け】

JavaScript コードの基本的な書き方や、守らなければいけない記述ルールについて紹介します。プログラミング初心者の方は、こちらの記事を読んでから JavaScript でのコーディングを初めましょう。

CSS Animation – Web Animation

CSS Animation – Web Animation

Web animations can be helpful and, yes, sometimes plain annoying, but usually super fun. Let’s explore its history and evolution in this article.

JavaScript - プログラミングをする環境を整えよう

JavaScript - プログラミングをする環境を整えよう

JavaScript を学んでいくために必要なツールを紹介します。インターネットに接続されたパソコンを用意して、プログラミングをするための環境を整えていきましょう。

CSS Animation – Digital Animation

CSS Animation – Digital Animation

What is digital animation. Who invented computers, how did it influence animation. Let’s travel through time and find out in this article.

JavaScript プログラミングを始めよう

JavaScript プログラミングを始めよう

JavaScript（ジャバスクリプト）は、私たちが日常的に利用しているウェブサイトやウェブアプリなどで使われているプログラミング言語です。プログラミング初心者の方へ向けて、JavaScript について簡単に紹介します。

CSS Animation – Traditional Analog Animation

CSS Animation – Traditional Analog Animation

Animation techniques are abundant, from hand drawn to claymation, all the way to mechanical dinosaurs. Let’s explore all of them in this article.

CSS Animation – What is Animation

CSS Animation – What is Animation

Everyone loves animation! Let’s explore how animation works. When was it invented, who invented it and the science behind it in this article.

Welcome 2023!

（English below Japanese）新年あけましておめでとうございます。おかげさまで、Pyxofy (ピクソファイ)は開設2周年を迎えることができました。 2023年もPyxofy と一緒に自己研鑽に励んでいきましょう！新コンテンツ * JavaScript Programming 中学生以上の初心者向けに、JavaScript (ジャバスクリプト)でのプログラミングを解説します。 * CSSアニメーション CSSを使ったアニメーションの作り方を、初心者向けにご紹介。メンバー限定コンテンツ今年もPyxofyメンバーの方のみがご覧いただけるコンテンツを多数配信致します。是非、Pyxofyメンバーへご登録を！メンバー登録はこちらから。今年も引き続き、どうぞよろしくお願いいたします。 Happy New Year! Thanks to you, Pyxofy is celebrating its 2nd anniversary. Let's continue to improve o

Thank you for 2022

Thank you for 2022

（English below Japanese）今年も残すところ、あとわずかとなりました。いつも Pyxofy (ピクソファイ)にご訪問いただきありがとうございます。 2022年は、新たに英語のコンテンツとして、CSS アートの基本や有名なゲームキャラクターの作り方などを紹介しました。また、スクラッチプログラミングについては、Pyxofyメンバー限定でレベルアップしたプロジェクトを多く掲載してきました。たくさんの方にメンバー登録をしていただき、感謝の気持ちでいっぱいです。来年も引き続き、新たな学びの場として Pyxofy をご活用いただけると嬉しく思います。どうぞ、よいお年をお迎えください。 Just a few more days before year end. Thank you for visiting Pyxofy this year. In 2022, we introduced new English content such as the basics

スクラッチプログラミング - ライフ(HP)のつくりかた

スクラッチプログラミング - ライフ(HP)のつくりかた

ゲームでつかえるライフ(HP)のプログラムを紹介(しょうかい)します。ハートのスプライトでライフを表示(ひょうじ)して、ダメージをうけたときに1ポイントずつへるようにプログラミングします。

スクラッチプログラミング - ドッジボールゲームのつくりかた - Part 3

スクラッチプログラミング - ドッジボールゲームのつくりかた - Part 3

プレイヤーと対戦相手(たいせんあいて)にライフ(HP)を設定(せってい)して、ドッジボールゲームを完成(かんせい)させましょう。ボールにあたったらライフポイントをへらして、ライフがゼロになったらゲームをおわりにします。