Pyxofy (Page 2)

Sign in Subscribe

JavaScript - <dialog> 要素でモーダルダイアログを作成する方法

JavaScript - <dialog> 要素でモーダルダイアログを作成する方法

HTML の <dialog> 要素を使って作成するダイアログは、CSS で見た目を自由にカスタマイズできます。showModal() メソッドまたは show() メソッドで自作のダイアログを表示する方法を学びましょう。

CSS Animation – Turntable – Part 2

CSS Animation – Turntable – Part 2

In part 2 of this two-part step-by-step article, join us in learning how to create and animate an audio meter, headshell light, and many more.

JavaScript - 自動で画像が切り替わるスライドショーの作り方

JavaScript - 自動で画像が切り替わるスライドショーの作り方

複数の画像を順番に表示するスライドショーを作ります。一定の間隔で自動的に画像が変わるだけでなく、クリックして表示を切り替えることもできるようにコーディングします。

CSS Animation – Turntable – Part 1

CSS Animation – Turntable – Part 1

Vinyl records are popping and crackling! Learn how to animate a record turntable with CSS step-by-step in this two-part article.

JavaScript - クリックで切り替わる画像スライダーの作り方

JavaScript - クリックで切り替わる画像スライダーの作り方

ボタンをクリックすると画像が切り替わる画像スライダーを作ります。画像をいくつか用意して、右矢印ボタンで次の画像を、左矢印ボタンで前の画像を表示するようコーディングします。

CSS Art – Japanese Boat – Part 2

CSS Art – Japanese Boat – Part 2

In part two, you’ll learn how to combine multiple linear gradients to complete the rest of the Japanese boat step-by-step.

JavaScript - スクロールで伸縮するプログレスバーの作り方

JavaScript - スクロールで伸縮するプログレスバーの作り方

ページがどれだけスクロールされているかを示すプログレスバーを作ります。横へ伸びたり縮んだりするプログレスバーをページの上部に設置して、スクロールの進捗率を表示する方法を学びましょう。

CSS Art – Japanese Boat – Part 1

CSS Art – Japanese Boat – Part 1

Boats are versatile, timeless modes of transportation. Using CSS, let’s learn how to create one, in this step-by-step article.

JavaScript - タイプライター風に一文字ずつ表示する方法

JavaScript - タイプライター風に一文字ずつ表示する方法

キーボードで入力しているかのようなタイピングアニメーションを JavaScript で作ります。左から一文字ずつ順番に表示したあとで、今度は右から一文字ずつ削除するようコーディングします。

CSS Animation – Tokyo Tower Neon Sign

CSS Animation – Tokyo Tower Neon Sign

Tokyo’s skyline is iconic, mixing the traditional and high-tech. Let’s make a CSS-animated Tokyo Tower neon sign in this step-by-step article.

JavaScript - トップへ戻るボタンの作り方

JavaScript - トップへ戻るボタンの作り方

scrollTo() メソッドや scroll イベントなどを使用して、ウェブページの一番上へ滑らかにスクロールするボタンを JavaScript で作ります。簡単なコードなので JavaScript 初心者の方もぜひ試してみてください。

CSS Art – Neon Sign

CSS Art – Neon Sign

Once upon a time, before LEDs, gas-powered neon signs illuminated our cityscapes. Join us! Learn how to make one in this step-by-step article.

JavaScript - タブメニューの作り方

JavaScript - タブメニューの作り方

ウェブページに表示する内容を簡単に切り替えることができるタブメニューを作ります。JavaScript の forEach() メソッドと for...of ループの反復処理でクラスの付け外しを行う方法を学びましょう。

CSS Animation – Hot Air Balloon Launch

CSS Animation – Hot Air Balloon Launch

Ever wondered how to make things launch and float using only CSS? Join us in this step-by-step article to learn how to launch a hot air balloon.

JavaScript - パスワード生成アプリの作り方

JavaScript - パスワード生成アプリの作り方

ランダムなパスワードを生成するアプリを JavaScript で作ります。数字や記号をパスワードに含めるかどうかを選べたり、パスワードの長さを自由に変えられる、そんなアプリを一緒に作ってみましょう。

CSS Art – Hot Air Balloon

CSS Art – Hot Air Balloon

Is it a bird or a plane? It’s a hot air balloon! Learn with us how to make a colorful hot air balloon using CSS in this step-by-step article.

JavaScript - ランダムなパスワードを自動生成する方法

JavaScript - ランダムなパスワードを自動生成する方法

この記事では、数字やアルファベットや記号を組み合わせたランダムなパスワードを JavaScript で作る方法を紹介します。初心者の方にも分かりやすいように簡単なコードで解説しますので、ぜひご覧ください。

CSS Animation – Space Shuttle Launch

CSS Animation – Space Shuttle Launch

Space, the final frontier! Join us in recreating the iconic space shuttle launch scene using CSS in this step-by-step article.

JavaScript - ボールが跳ね返るアニメーションの作り方

JavaScript - ボールが跳ね返るアニメーションの作り方

ボールが動き続けるアニメーションを JavaScript で作ります。requestAnimationFrame() メソッドの使い方や、キャンバスに図形を描画してアニメーションを作る基本的な方法を学びましょう。

CSS Animation – Car Driving Infinite Scroll - Part 3

CSS Animation – Car Driving Infinite Scroll - Part 3

In part 1 and part 2 of this article series, you learned how to animate a street and clouds. In part 3, let’s finish by making and animating mountains.

JavaScript - 乱数の作り方とランダムな色を生成するコード

JavaScript - 乱数の作り方とランダムな色を生成するコード

JavaScript の Math.random() と Math.floor() メソッドを利用して乱数を生成する方法を紹介します。乱数を使って RGB カラーをランダムに表示する簡単なプロジェクトも掲載しているので、ぜひご覧ください。

CSS Animation – Car Driving Infinite Scroll - Part 2

CSS Animation – Car Driving Infinite Scroll - Part 2

In part 1 of this multipart article, you learned how to animate the street. In part 2, we’ll make clouds and animate them step-by-step.

Welcome 2024!

（English below Japanese）新年あけましておめでとうございます。おかげさまで、Pyxofy (ピクソファイ) は開設３周年を迎えることができました。皆様に学びの場を提供することで、私たちも同じく成長していくことができています。2024年も Pyxofy と一緒に自己研鑽に励んでいきましょう！メインコンテンツ * JavaScript Programming 今年も引き続き JavaScript でのプログラミングを解説します。初心者の方にも分かりやすく楽しんでいただける記事を配信します。 * CSS アニメーション CSS アニメーションの作り方も引き続きご紹介していきます。思わず作ってみたくなるようなアニメーションを、複数の画像を使用し分かりやすく解説します。メンバー限定コンテンツ Pyxofyメンバーの方のみがご覧いただけるコンテンツを配信いたします。是非、Pyxofyメンバーへご登録を！メンバー登録は以下のリンクからお願いします。 PyxofyEmpower Digital Natives thru Education

JavaScript - setInterval() を使ったアニメーションの基本

JavaScript - setInterval() を使ったアニメーションの基本

この記事では JavaScript でアニメーションを作る方法を解説します。ポイントとなるのは setInterval() メソッドと clearInterval() メソッドです。ボタンをクリックしてアニメーションを動かしたり止めたりする方法を学びましょう。

JavaScript - ボタンを押して表示を切り替える方法

JavaScript - ボタンを押して表示を切り替える方法

ボタンをクリックしてコンテンツの表示 / 非表示を切り替えたり、ウェブページの表示をダークモードにする方法を解説します。CSS に切り替えたいクラスを追加して toggle() メソッドで切り替えるだけなので簡単です。