1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門

HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座(こうざ)、第9弾です。

これまでの講座(こうざ)では、JavScriptの基本(きほん)について学び、キャラクターの操作(そうさ)ができるようになりました。
ここからはゲーム開発(かいはつ)の中級編(ちゅうきゅうへん)へと入っていきます。すこし内容(ないよう)は難(むずか)しくなりますが、ここまでの講座をしっかり勉強(べんきょう)してきた君ならできるはず!

山田

山田

諸君(しょくん)……よくここまで頑張った……べ


りこ

りこ

はっ、なんか、山田先生がいつもと雰囲気(ふんいき)がちがう!


アル

アル

なんだなんだ


山田

山田

これまで、この講座(こうざ)はJavaScript入門としておこなってきた……べ。しかし、これからは中級編(ちゅうきゅうへん)に入る……べ


アル

アル

必死(ひっし)に「べ」って言わないようにしてるのに言っちゃってる


山田

山田

てやんでぇ、べらぼうめ! 言ってない……べ。これからはもう少し深いところまで、解説(かいせつ)していくべ。ついてくるべ


りこ

りこ

はーい!


アル

アル

はーい!

目次
  1. ディレクトリについて
  2. HTML5を使ってみよう!
  3. Canvas(キャンバス)を使ってみよう!
  4. Canvasで画像を表示してみよう!
  5. メインループを作ろう!
  6. りこちゃんのオブジェクトをImageオブジェクトと組み合わせて作ろう!
  7. キーボードでりこちゃんを操作(そうさ)できるようにしてみよう!
  8. りこちゃんの残像(ざんぞう)が残(のこ)らないようにしよう!
  9. まとめ

ディレクトリについて

まずは今回からHTML5とcanvasを使って開発(かいはつ)していくしていくためのディレクトリ構成(こうせい)をみていきましょう。

アル

アル

ディレクトリってなぁに?


山田

山田

ディレクトリってのは、まぁ、フォルダと置(お)き換(か)えて考えると分かりやすいべ。なのでディレクトリ構成(こうせい)は、フォルダやファイルがどのように置かれているかということだべ

ディレクトリ構成(こうせい)は以下のように作っていきます。

game
├ index.html
├ img/
│ └ rico.png
└ js/
  └ script.js

rico.pngは、こちらをお使(つか)いください。
りこ

HTML5を使ってみよう!

これまでの講座(こうざ)では、一番簡単(かんたん)なHTMLを使ってきました。
しかしHTMLにはバージョンがあり、今ではHTML5を使うのが当たり前になっています。

なにやらとても難(むずか)しいことを言っているようですが、ぜんぜん難しくはありません。
HTML5を使いたいと思ったら、一番最初(さいしょ)に<!DOCTYPE html>を入力(にゅうりょく)してあげるだけです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML5を使ってみよう!</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>というのは「これがHTML5で書かれてますよ」という宣言(せんげん)です。

また、文字エンコーディングの指定(してい)もしておきましょう。

<head>タグ内に<meta charset="UTF-8">というタグを入れます。
これは文字エンコーディングを指定(してい)するものです。多くのサイトではUTF-8が使われていますので、「UTF-8」に設定(せってい)します。
これをすることで、ページを公開(こうかい)したときの文字化けを防(ふせ)ぐことができます。

アル

アル

HTMLにバージョンがあるなんて、覚えられないよ


山田

山田

今はもうほとんどのサイトがHTML5で作られているから、HTML5だけ覚えればいいと思うべよ

Canvas(キャンバス)を使ってみよう!

今回からはCanvas(キャンバス)を使ったゲーム開発(かいはつ)方法に移(うつ)っていきたいと思います。
CanvasをJavaScriptと合わせて使うことで、ブラウザ上に簡単に図形を表示したり、画像を扱(あつか)いやすくしたりすることができるようになります。

Canvasを使うには、bodyタグ内に、canvasタグを書いてあげればOKです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Canvasを使ってみよう!</title>
</head>
<body>
	<canvas id="canvas"></canvas>
</body>
</html>

さらに、canvasタグの下にJavaScriptファイルを読み込むためのScriptタグをかいていきます。

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Canvasを使ってみよう!</title>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

山田

山田

これでCanvasを使う準備(じゅんび)ができたべよ


りこ

りこ

まだまだ、難(むずか)しくないね

次に、JavaScriptを書いてみましょう。
2行目〜4行目で、Canvasの設定(せってい)をします。
7行目でコンテキストを取得(しゅとく)します。
10行目でx座標(ざひょう)が0、y座標が0の位置(いち)に、縦横(たてよこ)30pxの正方形(せいほうけい)を描きます。

js/script.js

//canvasの設定(せってい)
var canvas = document.getElementById('canvas');
canvas.width = 640;	//canvasの横幅(よこはば)
canvas.height = 640;	//canvasの縦幅(たてはば)

//コンテキストを取得(しゅとく)
var ctx = canvas.getContext('2d');

//x=0, y=0 の位置(いち)に縦横(たてよこ)30pxの正方形(せいほうけい)を描く
ctx.fillRect(0, 0, 30, 30);

Canvasを使ってみよう!

りこ

りこ

黒い正方形が描かれてる!


アル

アル

コンテキストってなぁに?


山田

山田

色んな意味(いみ)で使われる言葉(ことば)だべからな。この場合(ばあい)、プログラムを動かすのに必要(ひつよう)な情報(じょうほう)のことだべ

Canvas(キャンバス)はこのように、図形(ずけい)を描くことができるものですが、これを使うとゲーム開発がとてもやりやすくなります。

Canvasで画像を表示してみよう!

では、Canvasを使って画像(がぞう)を読み込んでみましょう。
Canvasを使った画像表示(がぞうひょうじ)にはdrawImage();を使います。

ここで、ひとつ注意点(ちゅういてん)があります。
例えば、以下のようにしても画像は表示されません
リロード

js/script.js

//canvasの設定(せってい)
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅(よこはば)
canvas.height = 640;	//canvasの縦幅(たてはば)

//コンテキストを取得(しゅとく)
var ctx = canvas.getContext( '2d' );

//画像(がぞう)のオブジェクトを作成
var img = new Image();
img.src = 'img/rico.png';

//画像の表示
ctx.drawImage( img, 0, 0 );

これは画像のロードに時間がかかり、drawImage();までに画像を読み込めていないからです。
なので画像の表示は、画像の読み込みが完了(かんりょう)するまで待つ必要(ひつよう)があります。

そんな時は、addEventListeneronloadを使います。
今回はaddEventListenerを使った方法(ほうほう)を紹介(しょうかい)します。

js/script.js

//canvasの設定(せってい)
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅(よこはば)
canvas.height = 640;	//canvasの縦幅(たてはば)

//コンテキストを取得(しゅとく)
var ctx = canvas.getContext( '2d' );

//画像(がぞう)のオブジェクトを作成
var img = new Image();
img.src = 'img/rico.png';

//ページと依存(いぞん)している全てのデータが読み込まれたら、画像を表示
addEventListener('load', function() {
	ctx.drawImage( img, 0, 0 );
}, false);

無事(ぶじ)画像が表示(ひょうじ)されました。
Canvasを使ってみよう!

山田

山田

drawImage()は画像(がぞう)を表示するものだべだけど、画像がロードされるのに時間がかかるべから、それまで待たなきゃダメなんだべ。


りこ

りこ

むむっ、ちょっと難(むずか)しいけど、とにかく待つ必要(ひつよう)があるってことね

メインループを作ろう!

では、第10回目の講座(こうざ)と同じように、メインループを作っていきましょう。

画像表示(がぞうひょうじ)の部分(ぶぶん)は、このメインループの中に入れます。
また、メインループは、addEventListenerを使って呼び出します。

function main() {
	//画像を表示
	ctx.drawImage( img, 0, 0 );

	requestAnimationFrame( main );
}
ページと依存(いぞん)している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);

script.js全体はこのようになっています。

js/script.js

//canvasの設定(せってい)
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅(よこはば)
canvas.height = 640;	//canvasの縦幅(たてはば)
 
//コンテキストを取得(しゅとく)
var ctx = canvas.getContext( '2d' );
 
//画像(がぞう)のオブジェクトを作成
var img = new Image();
img.src = 'img/rico.png';
 
//メインループ
function main() {
	//画像を表示
	ctx.drawImage( img, 0, 0 );
 
	requestAnimationFrame( main );
}
//ページと依存(いぞん)している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);

りこ

りこ

画像表示(がぞうひょうじ)をループさせてるだけだから、動(うご)きは今のところ変わらないね

りこちゃんのオブジェクトをImageオブジェクトと組み合わせて作ろう!

まずは第9回目でりこちゃんのオブジェクトを作ったときと同様(どうよう)に、オブジェクトを作ってみましょう。

var rico = new Object();
rico.x = 0;
rico.y = 0;

それをImageオブジェクトと組み合わせて使ってみましょう。

var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;

するとdrawImage()は以下のように置(お)き換(か)えることができます。

ctx.drawImage( rico.img, rico.x, rico.y );

山田

山田

りこちゃんのオブジェクトを作って、その「rico.img」にImageオブジェクトを作っているんだべ。そうすると、実際(じっさい)に画像(がぞう)を表示(ひょうじ)したときに分かりやすくなるべよ

script.js全体はこのようになります。

js/script.js

//canvasの設定(せってい)
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅(よこはば)
canvas.height = 640;	//canvasの縦幅(たてはば)
 
//コンテキストを取得(しゅとく)
var ctx = canvas.getContext( '2d' );
 
//りこちゃんのオブジェクトを作成
var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;
 
//メインループ
function main() {
	//画像を表示
	ctx.drawImage( rico.img, rico.x, rico.y );
 
	requestAnimationFrame( main );
}
//ページと依存(いぞん)している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);

キーボードでりこちゃんを操作(そうさ)できるようにしてみよう!

つづいて、キーボード入力でりこちゃんを操作できるようにします。
第11回目で紹介(しょうかい)した方法で、りこちゃんを操作(そうさ)できるようにしていきます。

まず、どれだけりこちゃんを動かしたいかというプロパティを、りこちゃんのオブジェクトに追加します。

var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;
rico.move = 0;	//追加

キーボードのオブジェクトも作ります。

var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;
key.push = '';

メインループのなかに、キーボードが押されたときと、放(はな)されたときの関数(かんすう)を呼び出すお願いを書きます。

addEventListener("keydown", keydownfunc, false);
addEventListener("keyup", keyupfunc, false);

メインループのなかに、りこちゃんが移動(いどう)するためのお願いを書きます。

//方向キーが押されている場合(ばあい)は、りこちゃんが移動する
if ( rico.move === 0 ) {
	if ( key.left === true ) {
		rico.move = 32;
		key.push = 'left';
	}
	if ( key.up === true ) {
		rico.move = 32;
		key.push = 'up';
	}
	if ( key.right === true ) {
		rico.move = 32;
		key.push = 'right';
	}
	if ( key.down === true ) {
		rico.move = 32;
		key.push = 'down';
	}
}
//rico.moveが0より大きい場合は、4pxずつ移動(いどう)を続ける
if (rico.move > 0) {
	rico.move -= 4;
	if ( key.push === 'left' ) rico.x -= 4;
	if ( key.push === 'up' ) rico.y -= 4;
	if ( key.push === 'right' ) rico.x += 4;
	if ( key.push === 'down' ) rico.y += 4;
}

最後(さいご)に、キーボードが押された時に呼び出される関数(かんすう)を書きます。

//キーボードが押されたときに呼び出される関数(かんすう)
function keydownfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = true;
	if( key_code === 38 ) key.up = true;
	if( key_code === 39 ) key.right = true;
	if( key_code === 40 ) key.down = true;
	event.preventDefault();
}

//キーボードが放(はな)されたときに呼び出される関数
function keyupfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = false;
	if( key_code === 38 ) key.up = false;
	if( key_code === 39 ) key.right = false;
	if( key_code === 40 ) key.down = false;
}

script.js全体はこのようになります。

js/script.js

//canvasの設定(せってい)
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅(よこはば)
canvas.height = 640;	//canvasの縦幅(たてはば)
 
//コンテキストを取得(しゅとく)
var ctx = canvas.getContext( '2d' );
 
//りこちゃんのオブジェクトを作成
var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;
rico.move = 0;

//キーボードのオブジェクトを作成
var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;
key.push = '';
 
//メインループ
function main() {
	//塗(ぬ)りつぶす色を指定(してい)
	ctx.fillStyle = "rgb( 0, 0, 0 )";
	//塗(ぬ)りつぶす
	ctx.fillRect(0, 0, 640, 640);

	//画像を表示
	ctx.drawImage( rico.img, rico.x, rico.y );

	addEventListener("keydown", keydownfunc, false);
	addEventListener("keyup", keyupfunc, false);

	//方向キーが押されている場合(ばあい)は、りこちゃんが移動する
	if ( rico.move === 0 ) {
		if ( key.left === true ) {
			rico.move = 32;
			key.push = 'left';
		}
		if ( key.up === true ) {
			rico.move = 32;
			key.push = 'up';
		}
		if ( key.right === true ) {
			rico.move = 32;
			key.push = 'right';
		}
		if ( key.down === true ) {
			rico.move = 32;
			key.push = 'down';
		}
	}
	//rico.moveが0より大きい場合は、4pxずつ移動(いどう)を続ける
	if (rico.move > 0) {
		rico.move -= 4;
		if ( key.push === 'left' ) rico.x -= 4;
		if ( key.push === 'up' ) rico.y -= 4;
		if ( key.push === 'right' ) rico.x += 4;
		if ( key.push === 'down' ) rico.y += 4;
	}
 
	requestAnimationFrame( main );
}
//ページと依存(いぞん)している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);

//キーボードが押されたときに呼び出される関数(かんすう)
function keydownfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = true;
	if( key_code === 38 ) key.up = true;
	if( key_code === 39 ) key.right = true;
	if( key_code === 40 ) key.down = true;
	event.preventDefault();
}

//キーボードが放(はな)されたときに呼び出される関数
function keyupfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = false;
	if( key_code === 38 ) key.up = false;
	if( key_code === 39 ) key.right = false;
	if( key_code === 40 ) key.down = false;
}

アル

アル

これで、前回まで作った部分(ぶぶん)を、HTML5とCanvasで作れたんだ……ってあれ!?


Canvasを使ってみよう!

りこ

りこ

きゃー、私が列になってる!


山田

山田

ふっふっふ、君たち、わだずが講座(こうざ)の第2回目で教(おし)えたことを覚えているべか?


アル

アル

なんだっけ?


山田

山田

ゲームは画面を表示する、消す、表示する、消す……というのをすごいはやさで何度も繰り返しているんだべ。これでは画面を表示だけして、消すというのをやっていないんだべ!

りこちゃんの残像(ざんぞう)が残(のこ)らないようにしよう!

ゲームでは画面(がめん)を表示(ひょうじ)する、消(け)す、表示する、消す……というのをすごいはやさで繰り返しています。
ですので、画面を消すお願いが必要(ひつよう)になります。

今回は640×640でCanvasを作っていますので、fillRect()で(0, 0 〜 640, 640)までの四角形を作って塗(ぬ)りつぶします。

//塗(ぬ)りつぶす色を指定(してい)
ctx.fillStyle = "rgb( 0, 0, 0 )";
//塗(ぬ)りつぶす
ctx.fillRect(0, 0, 640, 640);

fillStyle()で塗(ぬ)りつぶす色を指定(してい)できます。
rgb()のなかの数を変更(へんこう)することで、色が変わります。今回は黒にしたかったので、(0, 0, 0)を指定(してい)しています。

script.js全体はこのようになります。

js/script.js

//canvasの設定(せってい)
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅(よこはば)
canvas.height = 640;	//canvasの縦幅(たてはば)
 
//コンテキストを取得(しゅとく)
var ctx = canvas.getContext( '2d' );
 
//りこちゃんのオブジェクトを作成
var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;
rico.move = 0;

//キーボードのオブジェクトを作成
var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;
key.push = '';
 
//メインループ
function main() {
	//塗(ぬ)りつぶす色を指定(してい)
	ctx.fillStyle = "rgb( 0, 0, 0 )";
	//塗(ぬ)りつぶす
	ctx.fillRect(0, 0, 640, 640);

	//画像を表示
	ctx.drawImage( rico.img, rico.x, rico.y );

	addEventListener("keydown", keydownfunc, false);
	addEventListener("keyup", keyupfunc, false);

	//方向キーが押されている場合(ばあい)は、りこちゃんが移動する
	if ( rico.move === 0 ) {
		if ( key.left === true ) {
			rico.move = 32;
			key.push = 'left';
		}
		if ( key.up === true ) {
			rico.move = 32;
			key.push = 'up';
		}
		if ( key.right === true ) {
			rico.move = 32;
			key.push = 'right';
		}
		if ( key.down === true ) {
			rico.move = 32;
			key.push = 'down';
		}
	}
	//rico.moveが0より大きい場合は、4pxずつ移動(いどう)を続ける
	if (rico.move > 0) {
		rico.move -= 4;
		if ( key.push === 'left' ) rico.x -= 4;
		if ( key.push === 'up' ) rico.y -= 4;
		if ( key.push === 'right' ) rico.x += 4;
		if ( key.push === 'down' ) rico.y += 4;
	}
 
	requestAnimationFrame( main );
}
//ページと依存(いぞん)している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);

//キーボードが押されたときに呼び出される関数(かんすう)
function keydownfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = true;
	if( key_code === 38 ) key.up = true;
	if( key_code === 39 ) key.right = true;
	if( key_code === 40 ) key.down = true;
	event.preventDefault();
}

//キーボードが放(はな)されたときに呼び出される関数
function keyupfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = false;
	if( key_code === 38 ) key.up = false;
	if( key_code === 39 ) key.right = false;
	if( key_code === 40 ) key.down = false;
}

Canvasを使ってみよう!

りこ

りこ

私の残像(ざんぞう)が消(き)えて、ちゃんと動くようになったね!


山田

山田

とにかく、基本(きほん)は表示する、消す、をすごいはやさで何度も繰り返しているんだべ

まとめ

今回は、いままで学んできたことをCanvasを使ってやってみました。
やっていることは今までと同じなので、分からない部分(ぶぶん)があれば今までの講座(こうざ)をもう一度、復習(ふくしゅう)してみてください。

山田

山田

こんかいはHTML5とCanvasを使ってみたべよ


アル

アル

もう普通に「べ」って言っちゃってるね


りこ

りこ

ほんとだ


山田

山田

……はっ! だべ! しまったべ


アル

アル

ねぇ、もっと、ゲームっぽいの作りたいよ!


りこ

りこ

こらアル、じっくりと色んなこと勉強(べんきょう)しながら作っていくんだから、焦(あせ)っちゃだめよ!


アル

アル

なんだよ……ちぇ


山田

山田

……諸君(しょくん)、これからももっと色々学んでいくから、しっかりとついてこいよ……


りこ

りこ

はっ、「べ」って言ってない


山田

山田

……だ……べ


アル

アル

言った


山田

山田

てやんでぇ、べらぼうめだべ! とにかく、これからも頑張るべ!


りこ

りこ

はーい!


アル

アル

はーい!

この企画の一覧はこちら

  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. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  15. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  17. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  18. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  19. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  21. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

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

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

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。 かといって、te

【 gulp 】 超便利! Sass で Normalize.css などをインポートする方法。

ふと立ち上がった瞬間に、ホットマットを猫に奪われる@It_is_Rです。 全然どいてくれない。 今回は gulp を使って、 Sass ファイルから Normalize.css などをインポー

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

gulp

gulp4完全攻略ガイド。インストールから使い方まで徹底解説!

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回はgulp4の使い方を、インストールか

おみくじゲームを作るべ!

JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門

さて、今日も楽しく、プログラミングを学んでいきましょう!今回はなんと、プログラミングでおみくじゲームを作ってみます。 そして今回から、Scratch(スクラッチ)より、少しレベルアップして、J

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

とってもかんたん!iPhoneアプリ開発

SwiftUIでじゃんけんゲームを作ろう。かんたんiPhoneアプリ開発入門

SwiftUIは、2019年にアップルが発表したフレームワークです。 SwiftUIを使って、iPhoneで遊べるじゃんけんゲームを作成してみましょう。 この入門ではXcodeを使いますので、

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

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

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

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