1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Scratch
  6. »
  7. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

こんにちは! 今日きょうもプログラミングのお勉強べんきょうをはじめていきますよ!

前回の「Scratchの使い方と、ゲーム作りの基礎知識を学ぼう!」では、Scratchスクラッチってどうやって使うのか、ってことを学びました。
なんと、今回からは、実際じっさいにゲームを作っていきます。

今回は、じゃんけんゲームを作ってみましょう。

目次
  1. プロローグ
  2. じゃんけんゲームにつかう素材そざい
  3. プロジェクト名を変更へんこうする
  4. Scratchスクラッチに画像を読み込もう
  5. スプライトを縮小しゅくしょうして綺麗きれい配置はいちしよう
  6. スプライトを複製ふくせいしてみよう
  7. スプライトの向きを変えよう
  8. 変数へんすうを作ろう!
  9. ボタンがされたときに、自分の手を表示ひょうじするようにしよう
  10. 相手の手のプログラムを作ろう
  11. 乱数らんすうを使ってみよう
  12. ゲームの初期化しょきかをする
  13. 「じゃんけんぽん」としゃべらせてみよう
  14. じゃんけんのけを判定はんていしよう
  15. 変数へんすう非表示ひひょうじにする
  16. エピローグ

プロローグ

アル

ちぇっ……、体育係たいいくがかりやりたかったのにじゃんけんで負けて、音楽係おんがくがかりになっちゃったよ

りこ

あらら。でもいいじゃない、音楽係

アル

やだよ、女の子ばっかりだもん!

りこ

そんなの気にしなくていいのに

アル

じゃんけんさえつよければなー。トレーニングしようかな

山田

それならScratchでじゃんけんゲームを作るといいべよ

りこ

山田先生だ!

アル

山田先生! うん、ぼくじゃんけんゲーム作って、トレーニングするよ!

りこ

……じゃんけんってトレーニングで強くなるの?


今回、作るゲームはこちらです。
アルくんは、これを作ってじゃんけんのトレーニングをしていきます。

アル

がんばるぞー!

じゃんけんゲームにつかう素材そざい

まず、今回使う素材そざいについてです。

山田

まず、今回のじゃんけんゲームで使う素材だべよ。
下のリンクからまとめてダウンロードするか、さらにその下の画像をひとつずつ右クリックして、「名前を付けて画像を保存」で、自分のパソコンに保存ほぞんしてほしいんだべ

じゃんけん画像


チョキボタン

グーボタン

パーボタン

チョキ

グー

パー

山田

ちなみにこの素材は、「自分が作りました」と言わないかぎり、どう使ってもいいべよ。
ただ、ほかのサイトとかで公開こうかいされてる素材は、その条件じょうけんが決まっていることが多いから、ちゃんと確認して使うといいべ

※素材を使って生じたいかなる損害そんがいも、山田先生も管理人も一切責任せきにんいません。
報告ほうこく不要ふようです。しかし「使ったよ」といっていただければ、山田先生と管理人は喜びます。

プロジェクト名を変更へんこうする

Scratchスクラッチを開いたら、ログインしておいてください。

まず、プロジェクト名を変更へんこうします。
今回は「じゃんけんゲーム」としておきましょう。

アル

じゃんけんゲーム……わくわく

Scratchスクラッチに画像を読み込もう

では、さきほど保存した画像を、Scratchスクラッチに読み込んでいきましょう。
まず、あらかじめ作られている、ねこちゃんのスプライトは、画面右下のスプライトリストから削除さくじょしておきます。

スプライト右上の「×」をクリックして削除しましょう。

山田

この猫はわだずの永遠のライバルだべよ

りこ

そうなんだ……

スプライトリスト右下のねこ(いぬ?)のマークにマウスカーソルを合わせて、そこに出てきた「スプライトをアップロード」のボタンをクリックします。

さきほど保存ほぞんした画像をドラッグで全て選択し、「開く」をクリックします。

スプライトリストに、画像が読み込まれ、ステージにもその画像が表示されました。

アル

でもステージに対して画像が大きくない?

りこ

画像がおさまりきらないよね

山田

ふっふっふ。じつはScratch上で画像を大きくしたり小さくしたりすることができるんだべよ

スプライトを縮小しゅくしょうして綺麗きれい配置はいちしよう

では、スプライトを綺麗きれい配置はいちしてみましょう。Scratchスクラッチ上で、スプライトの拡大かくだい縮小しゅくしょうをすることもできます。

スプライトの大きさを変えよう

ではまず、スプライトを小さくしてみましょう。
スプライトリストから小さくしたいスプライトを選択せんたくし、その上の「大きさ」のあたいを小さくします。今回は30にしました。

スプライトを選択して大きさを変更する

同じように、顔のスプライトや、グーのスプライト、そしてパーのスプライトの大きさも30にします。
ボタンのスプライトの大きさはそのままで大丈夫です。

するとこのようにステージ上のスプライトが小さくなります。

スプライトを綺麗きれい配置はいちしよう

つづいて、スプライトを綺麗きれい配置はいちしてみましょう。

山田

ステージ上のスプライトは、ドラッグで動かせるべ。綺麗に配置はいちしてみるべよ

りこ

うん!

山田

こういうふうにしてほしいんだべ

アル

グー、チョキ、パーのスプライトは同じ位置いちくんだね!

スプライトを複製ふくせいしてみよう

これで、じゃんけんの手を配置はいちすることができましたが、このままでは自分の手しか表示されません。
そこで、手を複製ふくせいして、相手の手も作ってみましょう。

グー、チョキ、パーのスプライトをそれぞれ複製します。

まずはチョキのスプライトを右クリックして、「複製」を選んでください。

右クリックで複製を選択

同じように、グーのスプライト、パーのスプライトも、右クリックして「複製」を選びます。
するとこのように、グー、チョキ、パーのスプライトがもうひとつずつ表示されます。

3つのスプライトが複製された

ステージにも複製されたスプライトが表示されます。

りこ

この複製された手が、相手がわの手になるのね!

スプライトの向きを変えよう

つづいて、スプライトの向きを変えていきます。

アル

うーん、なんかこのままだと、相手の手か自分の手か分からないよね

りこ

そっか。向きがちがうんだ!

山田

ふっふっふ。ちゃんと向きも変えられるだべよ

ではまず、複製ふくせいしたチョキのスプライトを選択せんたくし、向きのあたいを-90に変更してみましょう。

複製したスプライトを選択して向きを変更する

おなじように、さきほど複製したグーとパーのスプライトの向きも、値を-90に変更します。
すると、ステージ上のスプライトの向きが、反対はんたい向きになりました。

そして、さきほどと同じように、相手の手の位置いちを、画像のように全て同じ位置に配置はいちします。

りこ

見た目はじゃんけんゲームっぽくなったね

アル

でもまだ動かないよ

山田

これからゲームを動くようにしていくべからな

変数へんすうを作ろう!

では今度は変数へんすうを作っていきます。

りこ

変数はいろんな値を入れておけるんだよね

山田

そうだべ。じゃあ、変数を作るべよ

まずは、自分の手が何を出しているのかを覚えさせておく変数を作ります。
画面左から「変数」を選び、「変数を作る」をクリックします。

変数名は「自分の手」とし、OKをクリックします。

今度は「相手の手」という変数を作ります。これは相手の手が何を出しているのかを覚えさせておく変数です。
同じように「変数を作る」をクリックします。

変数名は「相手の手」と入力し、OKをクリックします。

これで「相手の手」という変数が作成されました。

そしてもう一つ「ランダム数字」という変数を作ります。これは相手の手をランダムに表示ひょうじさせるために、ランダムの数字を入力しておく変数です。
ランダムというのは、そのときによってちが、という意味いみです。

では「変数を作る」をクリックします。

変数名は「ランダム数字」と入力し、OKをクリックします。

これで3つの変数が作成されました。

山田

「自分の手」は自分が選んだ手を、「相手の手」は相手が出す手を、「ランダム数字」は相手が何を出すか考えるときに使う変数だべよ

ボタンがされたときに、自分の手を表示ひょうじするようにしよう

つづいて、ボタンがされたときに、自分の手を表示ひょうじするようにしてみます。

グー、チョキ、パーの、ボタンのブロック

まず、①チョキボタンのスプライトを選択せんたくし、②イベントをえらびます。そして③「このスプライトが押されたとき」をスクリプトエリアにドラッグします。

つづいて「変数」を選択し、「ランダム数字を0にする」をドラッグして、「このスプライトが押されたとき」につなげます。

今ドラッグしてきたブロックは、「(自分の手)を(チョキ)にする」に変更します。

つづいて、「イベント」をクリックし、「メッセージ1を送る」をドラッグして、「自分の手をチョキにする」につなげます。

「メッセージ1」の部分をクリックし、「新しいメッセージ」を選びます。

メッセージ名は「手のボタンが押された」とし、OKをクリックします。

つづいて、グーボタンのスプライトを選択し、「このスプライトが押されたとき」をスクリプトエリアにドラッグします。

さきほどとおなじように「変数」を選択し、「ランダム数字を0にする」をドラッグして、「このスプライトが押されたとき」につなげます。

そして今ドラッグしてきたブロックは、「(自分の手)を(グー)にする」に変更します。

「イベント」を選んで、「手のボタンが押されたを送る」をスクリプトエリアにドラッグし、「自分の手をグーにする」に繋げます。

アル

ねぇ、これさっきとたようなことやってるけど、もっと楽な方法はないの? 次はパーボタンにもおなじのを作るんでしょ?

山田

ふっふっふ、じつはあるんだべ

次は、パーボタンのスプライトがされたときのものを作っていきたいのですが、これも、今作ったものととても似ています。
そんなときは、ほかのスプライトにブロックをコピーすることができます。
コピーしたいところの一番上のブロックを、コピー先のスプライトまでドラッグします。

今回はパーボタンのスプライトにコピーしてみましょう。

一番上のブロックを コピーしたいスプライトまでドラッグ

これでパーボタンのスプライトにコピーされました。

パーボタンのスプライトに コピーされている!

もちろん、パーボタンのスプライトの「自分の手をグーにする」ブロックは、「パー」に変更へんこうしておきましょう。

アル

こんなふうにコピーできるんだったら楽チンだね!

グー、チョキ、パーの、スプライトのブロック

つづいて、ボタンがされたときに、そのボタンに対応たいおうしたグー、チョキ、パーの、スプライトが表示ひょうじされ、それ以外いがいかくすようにしてみましょう。

まず、自分の手の方のチョキのスプライトを選択し、「はたマークが押されたとき」をスクリプトエリアにドラッグします。

今回の判定はんていは、つねに行なっておきたいので、「制御」から「ずっと」ブロックをドラッグし、「旗マークが押されたとき」ブロックにつなげます。

そして「もし◇なら でなければ」をドラッグして、「ずっと」の中に配置はいちします。

「演算」をクリックし、「◯=50」ブロックを「もし◇なら でなければ」ブロックの◇に入れます。

「変数」をクリックし、「自分の手」を「◯=50」ブロックの◯に入れます。

50の部分は「チョキ」に変更しておきましょう。

「見た目」をクリックし、下の方にある「表示する」と「隠す」ブロックを下の画像のようにドラッグします。
これで、「もし(自分の手)=(チョキ)なら(表示する) でなければ(隠す)」というふうになります。

作成したブロックの一番上を、自分の手の方の、グーのスプライトまでドラッグします。

コピーしてきたグーのスプライトのブロックは、画像のように、「グー」に変更しておきます。

おなじように、自分の手の方のパーのスプライトにも、ドラッグしてコピーします。

コピーしてきたパーのスプライトのブロックは、「パー」に変更しておきます。

これでステージの旗マークをクリックすると、ボタンに応じて自分の手が表示されるようになります。

アル

ボタンを押すと手が切り変わるね。でもまだ相手の手はそのままだ

山田

じゃあ、次からは相手がわの手も変わるようにプログラミングしていくべよ

相手の手のプログラムを作ろう

つづいて、相手の手のプログラムを作っていきます。
相手の手は、ランダムに表示ひょうじされるようにしたいのですが、ランダムの数を作る方法ほうほうはあとから紹介しょうかいするとして、まずは条件分岐じょうけんぶんきによって相手の手が表示されるプログラムを作っていきましょう。

相手の手の、チョキのスプライトを選択し、「イベント」から「手のボタンが押されたを受け取ったとき」をスクリプトエリアへドラッグします。

ドラッグしてきたブロックの「手のボタンが押された」をクリックし、さらに「新しいメッセージ」をクリックします。

メッセージ名は「相手が何を出すか考えた」とし、OKをクリックします。

アル

これで「相手が何を出すか考えた」ってメッセージがおくられてきたときに、その下のブロックが実行じっこうされるんだね!

「制御」から「もし◇なら でなければ」をドラッグし、「相手が何を出すか考えたを受け取ったとき」につなげます。

「演算」から「◯=50」をドラッグし、「もし◇なら でなければ」の◇に入れます。

「変数」から「相手の手」をドラッグし、「◯=50」の◯に入れます。

50の部分は「チョキ」に変更へんこうします。

「見た目」から、下の方にある「表示する」と「隠す」ブロックを下の画像のようにドラッグします。
これで、「もし”相手の手”=”チョキ”なら”表示する” でなければ”隠す”」というふうになります。

りこ

そっか。チョキのスプライトに作ったブロックだから、「相手の手」がチョキのときだけ表示ひょうじするのね

作ったものを、相手のグーのスプライトにコピーします。
ブロックの一番上を、相手のグーのスプライトへドラッグしましょう。

相手のグーのスプライトを選択せんたくし、先ほどコピーしてきたブロックを、画像のように「もし相手の手=(グー)なら」に変更へんこうします。

さらにブロックの一番上を、相手のパーのスプライトへドラッグしてコピーします。

相手のパーのスプライトを選択し、「もし相手の手=(パー)なら」に変更します。

アル

コピーして、そのスプライトに合わせて変更するだけだから楽チンだよ!

乱数らんすうを使ってみよう

つづいて、乱数らんすうを使ってみたいと思います。
乱数というのは、ここからここまでの数字の中から、どれかがえらばれるということです。
変数へんすうを作るときに書いた、ランダムってやつです。

山田

乱数を使うと、どれが選ばれるか分からないプログラムを作ることができるんだべ

アル

そっか! じゃんけんは相手が何を出すか分からないから、この乱数を使うんだね!

まず、かおのスプライトを選択せんたくし、「イベント」から「手のボタンが押されたを受け取ったとき」をコードエリアにドラッグします。

「変数」から「ランダム数字を(0)にする」をドラッグし、「手のボタンが押されたを受け取ったとき」につなげます。

「演算」から「1から10までの乱数」をドラッグし、「ランダム数字を(0)にする」の(0)に入れます。

「ランダム数字を(1)から(3)までの乱数にする」に変更へんこうします。

りこ

1〜3のランダムの数字……そっか、グー、チョキ、パーの3つに対応たいおうさせたいから、1〜3なのね!

「制御」から「もし◇なら」をドラッグして、「ランダム数字を1から3までの乱数にする」につなげます。

「演算」から「◯=(50)」をドラッグして、「もし◇なら」の◇に入れます。

「変数」から「ランダム数字」をドラッグし、「◯=(50)」の◯に入れます。

「もし(ランダム数字)=(1)なら」に変更します。

「ランダム数字を0にする」を「もしランダム数字=1なら」の中に入れます。

「ランダム数字」を「相手の手」に変更します。

「相手の手を(チョキ)にする」に変更します。

「もしランダム数字=1なら」を右クリックし、「複製」を選択します。

この方法でもう一度複製ふくせいして、下につなげます。

画像のように、四角で囲った部分を変更します。

これで相手が出す手が決まった、ということになります。
「イベント」から「手のボタンが押されたを送る」をドラッグし、一番下につなげます。

「手のボタンが押された」を「相手が何を出すか考えた」に変更します。

これで、ステージの赤いボタンを押した後に旗マークを押し、どれか手のボタンをクリックすると、相手の手がランダムに表示されるようになりました。

アル

わー! じゃんけんしてるみたい。でもけが表示されないよ

山田

慌てなさんなだべ。勝ち負けの表示方法はもう少しあとに教えるべから、その前にゲームの初期化しょきかをしておきたいんだべ

りこ

しょきか?

山田

ゲームをはじめたとき、最初さいしょから変数にあたい代入だいにゅうされていてはこまるんだべよ。それに最初は手も非表示ひひょうじにしておきたいんだべ

ゲームの初期化しょきかをする

しかしこのままだと、はたマークをしたときも手が表示ひょうじされてしまっていて、ゲームとしてはかっこ悪いです。
そこで、ゲームがはじまったときに、変数へんすう初期化しょきかや、画像を非表示にするようにしましょう。

かおのスプライトを選択せんたくし、「イベント」から「旗が押されたとき」をスクリプトエリアにドラッグします。

「変数」から「ランダム数字を0にする」を2つドラッグし、一番下につなげます。

それぞれの変数を「自分の手」、「相手の手」として、あたいをどちらも空白くうはくにします。

これで自分の手は、最初さいしょだけ表示ひょうじされなくなりましたので、今度は相手の手も最初だけ表示されないようにします。
相手のチョキのスプライトを選択せんたくし、「イベント」から「はたマークが押されたとき」をスクリプトエリアにドラッグします。

「見た目」から「隠す」をドラッグして、「旗が表示されたとき」につなげます。

いま作った一番上のブロックを、相手のグーのスプライトと、相手のパーのスプライトへドラッグしてコピーします。

これでスタート時に、手が表示されなくなりました。

アル

スタートのときに手が表示されなくなったら、緊張感きんちょうかんすね!

「じゃんけんぽん」としゃべらせてみよう

つづいて、相手に「じゃんけんぽん」としゃべらせてみます。

山田

勝ち負けの表示の前にもう一つ。「じゃんけんぽん」としゃべらせてみるべ

アル

たしかに、「じゃんけんぽん」と言わなくちゃタイミングが分からないよね

かおのスプライトを選択せんたくし、「見た目」から「こんにちは!という」をドラッグして、「相手の手を◯にする」の下につなげます。

「(じゃんけん)と言う」に変更へんこうします。

こんどは「こんにちは!と2秒言う」を「相手が何を出すか考えたを送る」の下につなげます。

「(ぽん)と2秒言う」に変更します。

はたマークで「じゃんけん」と言い、手のボタンを押すと「ぽん」と言うようになりました。

りこ

ふふふっ、しゃべってる!

じゃんけんのけを判定はんていしよう

つづいて、じゃんけんのけの判定はんていを行います。

アル

やった、やっと勝ち負けが表示されるぞ!

かおのスプライトを選択せんたくしたままの状態じょうたいで、「制御」から「もし◇なら」をドラッグして、「ぽんと2秒言う」の下につなげます。

「演算」から「◯=50」をドラッグして、「もし◇なら」の◇に入れます。

さらに「変数」から「自分の手」をドラッグし、「◯=50」の◯に入れます。

「自分の手=50」の50を「チョキ」に変更へんこうします。

「制御」から「もし◇なら」をドラッグし、「もし自分の手がチョキなら」の中に配置はいちします。

「演算」から「◯=50」をドラッグし、「もし◇なら」の◇に入れます。

「変数」から「相手の手」をドラッグし、「◯=50」の◯に入れます。

「相手の手=50」の50を「パー」に変更します。

「こんにちは!と言う」を「もし相手の手=パーなら」の中に入れます。

「こんにちは!と言う」を「(あなたの勝ち)と言う」に変更します。

「もし相手の手がパーなら」を右クリックして「複製」をクリックします。

複製ふくせいしたものは、「もし相手の手がパーなら」の下に配置します。

いま複製したブロックは、画像のように2箇所変更します。

「もし自分の手がチョキなら」を右クリックして「複製」を選択します。

複製したものを一番下に配置し、もう一度複製をかえして、さらに一番下につなげます。

画像のように6箇所を変更します。

「もし◇なら」をドラッグし、一番下につなげます。

「演算」から「◯=50」を「もし◇なら」の◇に入れます。

「変数」から「(自分の手)=(相手の手)」となるように配置します。

「見た目」から「こんにちは!と言う」を「もし自分の手=相手の手なら」の中に入れます。

「こんにちは!と言う」を、「(あいこだね)と言う」に変更します。

赤いボタンをして止めたあとに、旗マークを押して実行じっこうすると、「ぽん」と言った2秒後びょうごに勝ち負け(あいこ)を言うようになります。

アル

わーい! これで勝ち負けが出て、ゲームが楽しくなったよ!

変数へんすう非表示ひひょうじにする

最後に、変数へんすう非表示ひひょうじにしましょう。

非表示にしたい変数はこれです。

「変数」から、表示されている変数のチェックを外します。

チェックを外す

これでステージの変数が非表示になりました。

りこ

うん、ステージがスッキリしたね!

これでじゃんけんゲームの完成です。

エピローグ

今回はScratchスクラッチでじゃんけんゲームを作る方法を紹介しょうかいしました。

アル

よーし、じゃんけんのトレーニングするぞ!

りこ

じゃんけんはトレーニングじゃ強くならないよ!

アル

え?

りこ

それよりアル、明日の帰りの会のうたなににするの? ちゃんと決めた?

アル

ちぇ、うるさいなー。そんなのほかの子が考えるよ……りこちゃんには関係かんけいないだろ!?

りこ

あるわよ! 私も音楽係なんだから。あとから決まったんだけど

アル

そうなの!? りこちゃんが音楽係なら……音楽係もいいかな……

りこ

帰りの会の歌は、関ジャニ∞の曲にしましょ?

アル

ちぇ! またそれかよ!

山田

まぁまぁ、プログラミングも係活動かかりかつどうもがんばるべよ!

りこ

うん!

アル

うん!

この企画の一覧はこちら

  1. 小学生からのプログラミング入門。プログラミングってなぁに?
  2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  3. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  5. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  6. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  7. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  8. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  9. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  10. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  11. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  12. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  13. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  14. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  15. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  17. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  18. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  19. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  21. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  22. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法

※追記(2018/5/15) 殆ど意味のない例を使っての説明にのちのち後悔し、余分な部分を大幅に削除しました。 畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。 前回は全体的な機能とアラートの使い方を紹介しました。 今回はバッジの使い方を紹介していき

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

Scratchでピアノを 作ってみよう!

Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門

今回も、小学生からのScratch《スクラッチ》入門、はじめていきます。 前回、「Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門」では、Scratchを使ってシ

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

プログラミングのクラスってなぁに?

【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、第12弾です。 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「クラス」という機能を

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です