小中学生向けプログラミング講座　師匠のブログ: 10月 2014

2014年10月31日金曜日

テトリスで使用するようなブロックを描写する

このようなブロックをCanvas内で描写します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>square</title>
<script>
var canvas;
var ctx;

//四角の一辺の長さ
var SIDE = 20;

//ブロックの描写用に配列を用意する
var OBJECT = [
        [1, 1, 0, 0],
        [0, 1, 1, 0]
    ];

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");

    draw();
};

//四角を描く
function draw(){
    ctx.strokeStyle = "blue";
    for ( var y = 0; y < 2; y++) {
        for ( var x = 0; x < 4; x++) {
             if ( OBJECT[y][x] ) {
                ctx.strokeRect(x * SIDE, y * SIDE, SIDE, SIDE);
             }
        }
    }
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

二回のfor文で、

事前に用意した配列の画像の順にアクセスし、if ( OBJECT[y][x] )でアクセスした数字が1の場合はxとyの値を使って任意の箇所に四角を描写するという処理を行います。開始場所をx * SIDEとy * SIDEで指定することで、

配列の数字に対応して図形を描写することが出来ます。

var OBJECT = [
        [1, 1, 1, 0],
        [0, 0, 1, 0]
    ];

このような配列にすると

1の並び方に従って、上の画像のような描写になります。
(灰色のグリッドは表示されません)

2014年10月30日木曜日

同じ形を並べてたくさん描写する

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>square</title>
<script>
var canvas;
var ctx;

//四角の一辺の長さを変数に入れておく
var SIDE = 20;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
  
    draw();
};

//四角を描く
function draw(){
    ctx.strokeStyle = "blue";
    ctx.strokeRect(0, 0, SIDE, SIDE);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

strokeRectで四角を描写できます。strokeRectの引数には左から(X軸の開始点, Y軸の開始点, 幅, 高さ)を指定して四角を描写します。実行すると

この様に四角が表示されます。この四角を右にたくさん並べて表示してみます。

function draw(){
    ctx.strokeStyle = "blue";
    for ( var i = 0; i < 5; i++) {
        ctx.strokeRect(i * SIDE, 0, SIDE, SIDE);
    }
}

draw関数のstrokeRect関数の前にfor分で繰り返し実行をします。for ( var i = 0; i < 5; i++ )を書くと、0から1ずつ足して、内部のコードをiが5未満の数字になるまで実行するという意味になり、iの値は0, 1, 2, 3, 4でstrokeRectを行う。第一引数の開始点を20ずつずらすということで、i * SIDEで四角を並べるように描写することができます。このコードを実行すると

このようにforで指定した分だけ四角が表示されました。for ( var i = 0; i < 10; i++ )にすると、

四角が10個表示されました。

イベントリスナでタグにイベントハンドラを登録する

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event handler</title>
<script>
function exe(){
    window.alert("ボタンを押しました！");
}
</script>
</head>
<body>
    <input type="button" value="押す" onclick="exe();">
</body>
</html>

上記のコードのようなボタンのタグを追加して、タグ内にonclick="exe();"といったJavaScriptの関数とつなぎこむonclickのようなものをイベントハンドラと呼びます。
(他にはonkeyupやonkeydownとか)

今回のサンプルコードでは、ボタンのタグに直接記述していますが、JavaScriptのコードでボタンタグにイベントハンドラを追加することが出来ます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event handler</title>
<script>
window.onload = function(){
    var button = document.querySelector("#button");
    button.addEventListener("click", exe);
};

function exe(){
    window.alert("ボタンを押しました！");
}
</script>
</head>
<body>
    <input type="button" value="押す" id="button">
</body>
</html>

ボタンのタグをdocument.querySelectorで取得できるようにidを付与して、window.onload内でボタンのオブジェクトを取得して、イベントリスナ(addEventListener)でイベントハンドラを登録します。addEventListenerの第一引数には、登録したいイベントハンドラ(今回はclick)を入れ、第二引数には登録したイベントハンドラを実行した時に実行したい関数を指定します。これで、<input type="button" onclick="exe();">と同等の実装になりました。

特定のタグではなく、表示しているブラウザ全体にイベントハンドラを追加したい時、

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample</title>
<script>
window.onload = function(){
    document.addEventListener("click", exe);
};

function exe(){
    alert("クリックしました！");
}
</script>
</head>
<body>
</body>
</html>

documentオブジェクトでaddEventListenerを実行して、イベントハンドラを登録すれば実行できるようになります。

2014年10月28日火曜日

キーを押して、箱を任意の方向に動かす

今まで作成してきた動く箱を、好きな方向に動かせる様にキーボードの矢印キーに対応して、矢印キーを押した方向に箱が動くように修正します。箱の動作をキーに連動させるためには、documentオブジェクトにあるaddEventListenerでキーを押した時と、キーを離した時の処理を追加します。

<script>
var canvas;
var ctx;

var mx = 20;
var my = 20;

//どのキーを押しているかを記録しておくための変数
var keyCode;

var dx;
var dy;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
  
    //キーを離した(keyup)時の処理。キーの記録の変数の値を消す(nullにする)
    document.addEventListener("keyup", function(event){
        keyCode = null;
    });
  
    //キーを押した(keydown)時の処理。キーの番号を記録しておく
    document.addEventListener("keydown", function(event){
        keyCode = event.keyCode;
    });
  
    setInterval(draw, 40);
};

function draw(){
 //処理は省略
}
</script>

document.addEventListenerはイベントというユーザがブラウザ上で何か操作した時に処理を開始する(ハンドラ－)ために用意しておくもので、addEventListenerの第一引数にkeyup、keydownやclick等の操作を入れて、第二引数には実行したい処理を関数の形式で用意しておきます。document.addEventListener(“keydown”, 実行したい関数名);で何のキーを押した時に実行される処理を追加します。今回はキーを押すか、離すかで用意したkeyCode変数に現在の状況を入れてます。キーボードにある各キーには番号が振り分けられており、下矢印のキーには38が当てられています。event.keyCodeで各キーの番号を取得できます。次にsetIntervalでセットされているdraw関数を見ていきます。

function draw(){

    //今押しているキーから、どの向きに箱を移動するかを設定する関数を実行する
    changeDirection();

    //処理の順番を方向を決めた直後に変更する
    mx = mx + dx;
    my = my + dy;
  
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);
  
    ctx.beginPath();
    ctx.moveTo(mx, my);
    ctx.lineTo(mx, my + 20);
    ctx.lineTo(mx + 20, my + 20);
    ctx.lineTo(mx + 20, my);
    ctx.lineTo(mx, my);
    ctx.strokeStyle = "blue";
    ctx.stroke();
}

function changeDirection(){
  
    //ボタンを押してない時の挙動、keyCodeにはundefinedかnullが入っている
    if(keyCode == undefined || keyCode == null){
        dx = 0;
        dy = 0;
    }
  
    //左のカーソル(37のキー)を押したとき
    if(keyCode == 37){
        dx = -1;
    }
  
    //上のカーソル(38のキー)を押したとき
    if(keyCode == 38){
        dy = -1;
    }
  
    //右のカーソル(39のキー)を押したとき
    if(keyCode == 39){
        dx = 1;
    }
  
    //下のカーソルを押したとき
    if(keyCode == 40){
        dy = 1;
    }
}

draw関数の最初にchangeDirectionという関数を追加して、addEventListener内でkeyCodeに入れたキーの番号を元にdxとdyの数字を決定させ、その後に四角い箱用のmxとmyを変更して四角を描きます。

このコードを追加したことにより、キーに対応して箱が動くアニメーションになります。

2014年10月27日月曜日

Canvas上で動かしている箱が端に到達した時に移動の向きを逆にする

前回のコードだと、箱がCanvasの右端に到達後、フェードアウトで消えていきます。せっかくなので、端に到達したら逆向きに移動するようにコードを変更してみます。前回のコードでは、draw関数の最後の行でmx変数に1足して、次の描写で1px右で箱を描写しています。逆向きに移動するにはmx変数に1引くことで実現でいます。向きの数字が変更ということで、新たに向きに関するdxという変数を追加して、右端に到達したら、向きについてを変更してみます。

<script>
var canvas;
var ctx;

//X軸の位置が変更できるようにXの値を入れる変数を用意する
var mx = 20;

//移動の向きに関する値を入れる変数
var dx = 1;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
    setInterval(draw, 20);
};

function draw(){
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    ctx.beginPath();
    ctx.moveTo(mx, 20);
    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();
  
    //mxにdxを加える
    mx = mx + dx;

    //右端は400pxになるので、mxが400よりも大きければ右端にいると見なす
    if(mx > 400){
        //向きの値に-1をかけて、逆向きの指示にする。次のdrawの実行から有効
        dx = -1 * dx;
    }
}
</script>

mxの中の値を見て、箱が右端にいることが分かれば、向きdxの値の符号を逆にする。この処理により、

箱が右端に到達したら、向きを逆にして、移動を開始します。次に左端に到達したら先ほどと同様にフェードアウトしてしまうので、左端でも折り返す処理を追加します。

function draw(){
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    ctx.beginPath();
    ctx.moveTo(mx, 20);
    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();
  
    //mxにdxを加える
    mx = mx + dx;

    if(mx < 0 || mx > 400){
        //向きの値に-1をかけて、逆向きの指示にする。次のdrawの実行から有効
        dx = -1 * dx;
    }
}

mxが左端に到達、つまりは0以下になった時も逆向きにするという処理を追加して

箱が往復し続けるアニメーションができました。Y軸でも同様の処理を追加すると箱が縦横無尽に移動するアニメーションになります。

<script>
var canvas;
var ctx;

var mx = 20;
var my = 20;

var dx = 1;
var dy = 1;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
    setInterval(draw, 20);
};

function draw(){
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    ctx.beginPath();
    ctx.moveTo(mx, 20);
    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();
  
    mx = mx + dx;
    my = my + dy;

    if(mx < 0 ||mx > 400){
        //向きの値に-1をかけて、逆向きの指示にする。次のdrawの実行から有効
        dx = -1 * dx;
    }

    //Y軸の下の端は300なので、0と300を判断する
    if(my < 0 ||my > 300){
        //向きの値に-1をかけて、逆向きの指示にする。次のdrawの実行から有効
        dy = -1 * dy;
    }
}
</script>

Canvasで箱が横に移動するアニメーションを作る

Canvasに今まで使ってきたコードを組み合わせるとアニメーションを作成することができます。今回はCanvas内で描写した青い箱を横に移動したいと思います。はじめにアニメーションの仕組みですが、Canvas上で箱を描いて、すぐにその箱を消す。消した直後に少しずらした位置にサイズの同じ箱を描写すれば動いている様に見えます。setIntervalで指定した時間毎に作成したdraw関数を実行する様にしましょう。

<script>
var canvas;
var ctx;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
  
    //0.02秒毎にdraw関数を実行する
    setInterval(draw, 20);
};

function draw(){
    ctx.beginPath();

    ctx.moveTo(20, 20);

    ctx.lineTo(20, 40);
    ctx.lineTo(40, 40);
    ctx.lineTo(40, 20);
    ctx.lineTo(20, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();  
}
</script>

前回のdraw関数をsetInterval関数で0.02秒(指定は20)毎に実行する様にします。この状態では、同じ箇所に重ねる様に何度もdraw関数を実行するという指示しかありません。次に箱の位置を少しずらすコードを追加します。

<script>
var canvas;
var ctx;

//X軸の位置が変更できるようにXの値を入れる変数を用意する
var mx = 20;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
  
    setInterval(draw, 20);
};

function draw(){
    ctx.beginPath();
  
    ctx.moveTo(mx, 20);
  
    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();
  
    //mxに1加える
    mx = mx + 1;
}
</script>

X軸の値用にmxという変数を用意して、drawを実行する度にmxに1を足す様にして、mxの値を利用して四角を描写します。(mx + 20にすることで右辺の位置を指定できる様になる)

しかし、現時点でのコードだと、描写した四角を消さずに少しずらした点で再度四角を書くという処理が続くため、この画像の様にバー状の描写になります。次に四角を描写する度に四角を削除するという処理を追加します。

function draw(){

    //塗りつぶしの指示(パスを使っていないので、beginPathはいらない)
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    //ここから四角の描写
    ctx.beginPath();

    ctx.moveTo(mx, 20);

    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);

    ctx.strokeStyle = "blue";
    ctx.stroke();

    //mxに1加える
   mx = mx + 1;
}

draw関数の最初にfillStyleで白にしていて、fillRect関数でcanvasを塗りつぶしています。fillRect関数の引数は左から(Xの開始点, Yの開始点, 幅, 高さ)の指定なので、左端の0, 0からcanvasタグの属性に入れたwidthの400pxとheightの300pxを指定してcanvasタグを元のまっさらな状態に戻して、その後に青い四角を描写します。

これで四角が右側に移動するアニメーションができました。

<script>
var canvas;
var ctx;

var mx = 20;
var my = 20;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
  
    //0.02秒毎にdraw関数を実行する
    setInterval(draw, 20);
};

function draw(){
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    //ここから四角の描写
    ctx.beginPath();

    ctx.moveTo(mx, my);

    ctx.lineTo(mx, my + 20);
    ctx.lineTo(mx + 20, my + 20);
    ctx.lineTo(mx + 20, my);
    ctx.lineTo(mx, my);

    ctx.strokeStyle = "blue";
    ctx.stroke();

    //mxに1加える
    mx = mx + 1;

    //myに1加える
    my = my + 1;
}
</script>

こうすることで、箱が右下に移動するアニメーションが作成できます。

2014年10月26日日曜日

Canvasで絵を書こう

HTMLのCanvasという機能とJavaScriptで絵を描くことができます。HTMLで描くためのcanvasタグでキャンバスのエリアを指定し、JavaScriptでcanvasタグのオブジェクトを取得して、コードを使って書くという手順です。今回は赤い四角を描いてみます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>

<canvas id="canvas" width="400px" height="300px"></canvas>

</body>
</html>

はじめにHTMLのbodyタグの中にcanvasタグを追加します。この時、キャンバスの大きさをwidthとheightもしくはスタイルシートで指定しておきます。さらにJavaScriptでcanvasオブジェクトを取得できるようにidを付与しておきます。

それでは早速キャンパスに絵を描いてみます。

<script>
//キャンバスタグのオブジェクトを入れる変数
var canvas;
//お絵かきするためのオブジェクトを入れる変数
var ctx;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    //描写を2D(平面)にして、お絵かき用のオブジェクトを取得
    ctx = canvas.getContext("2d");
};

</script>

HTML内にscriptタグを追加し、お絵かきするためのオブジェクトを取得して、ctx変数に入れます。この時、キャンバスオブジェクトにあるgeteContext関数で描写用のオブジェクトを取得しますが、getContext()の引数に平面の描写なら2d、立体の描写なら3dと入れてオブジェクトを取得します。描写用のオブジェクトが取得出来たら、早速、ctx内のオブジェクトで四角を書いてみましょう。

<script>
var canvas;
var ctx;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
    
    //四角を描く
    draw();
};

//描写用の関数
function draw(){
    
    //今から描写用のコードを書きます宣言
    ctx.beginPath();
    
    //描写開始点の指定、左の数字がx軸で、右の数字がy軸
    ctx.moveTo(20, 20);
    
    //描写の点の指定
    ctx.lineTo(20, 40);
    ctx.lineTo(40, 40);
    ctx.lineTo(40, 20);
    ctx.lineTo(20, 20);
    
    //線の色を青にする
    ctx.strokeStyle = "blue";
    
    //ここではじめて指定したパスで描く
    ctx.stroke();
}
</script>

ctxに入っている描写用のオブジェクトで描く手順として、最初にbeginPath関数で今から描写するというコードを書き、moveTo関数で描写するポイントを指定します。引数の中にある数字は(x軸, y軸)を意味していて、

左上を0, 0として20, 20に開始点を定めます。lineTo関数はどのような軌道になるかを指定して、引数にはmoveTo関数と同様にx軸とy軸の指定をします。今回のlineToの動きは

赤い線で描いたような指示になっています。注意する点はこの時点ではあくまで軌道を維持しただけで、四角はまだ描写されていません。この後にstrokeStyleプロパティで線の色を指定し、stroke関数ではじめて、今まで書いた指示に従って四角を描きます。このコードの実行結果は

青い正方形が描写されました。

Canvasの詳しい説明
Canvas – HTML Mozilla Developer Network

2014年10月22日水曜日

書いたスタイルシートのコードを外部のファイルに外出しする(外部CSSファイル)

<style>
#click_button{
    border-radius:10px;
    font-size:20px;
}
#result_area{
    //ここに要素を追加する
}
>/style>

HTMLファイル内に上記のようにスタイルシートのコードを書いたとします。コードが長くなってHTMLの記述が読み難くなった時、新しいファイルを作成して、記述を外出しします。

今回はstyle.cssというファイルを生成して、コードを移行します。

切り出し前のファイルをindex.htmlだとすると、index.htmlがあるフォルダ内にcssフォルダを作成し、cssフォルダ内にstyle.cssファイルを作ります。style.cssファイルには、

#click_button{
    border-radius:10px;
    font-size:20px;
}
#result_area{
    //ここに要素を追加する
}

切り出し元のindex.htmlに記述されていたスタイルシートのコードから、を抜いたものを記載し、

index.htmlの方は、

<link rel="stylesheet" href="./css/style.css" type="text/css">

中身を抜いた<style>タグに上記の様にhref=”./css/style.css”と追加すると、切り出したスタイルシートのコードを読み込み実行することができます。

他ページでも同じスタイルシートを使いたい場合に外部ファイルに切り出してまとめておくと便利です。

例:コードを切り出した後のindex.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>button</title>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<input type="button" id="click_button" value="押す">
</body>
</html>

2014年10月19日日曜日

スタイルシートの記述を一か所にまとめる

<input type="button" value="押す" style="border-radius:10px;font-size:20px;">

ボタンの装飾をするためにボタンタグの中にstyle属性を追加して、スタイルシート言語で装飾に関するコードを追加しました。この書き方ではコード数の少ない小さなアプリやWebサイトの場合は良いのですが、コード数が多くなると可読性が落ちることがあります。そんな時にタグに名前を付けて、別の箇所でスタイルシートを紐づけて、各装飾を一ヶ所にまとめる方法を紹介します。

タグに名前を付ける方法は、JavaScriptでHTMLと紐づける際に利用した

<input type="button" id="click_button" value="押す" style="border-radius:10px;font-size:20px;">

id="click_button"の様にタグにIDを付けます。ID付与後、ボタンタグに記載されているstyleの値を<style>タグで囲った箇所に移します。(<style>の位置は自由です)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hoge</title>
<style>
#click_button{
    border-radius:10px;
    font-size:20px;
}
</style>
</head>
<body>
<div id="result_area">
  何かを表示する
</div>
<input type="button" id="click_button" value="押す">
</body>
</html>

この様に書き換えてコードを実行しても、

書き換える前同様、ボタンにスタイルシートが反映されいてます。他のHTMLのタグにも反映させたい場合、

<style>
#click_button{
 border-radius:10px;
 font-size:20px;
}
#result_area{
 //ここに要素を追加する
}
</style>

各ID毎に対応したスタイルシートを上から順に書いていくだけで良いです。順は関係ありません。

2014年10月18日土曜日

HTMLで作成したボタンを装飾する(スタイルシートをタグに直書き)

HTMLで<input type="button">とすると、表示されるデザインは一パターンです。開発しているアプリによっては綺麗なボタンを設置したいということがあると思います。そんな時にはHTMLを装飾するスタイルシート（CSS）という言語です。今回はスタイルシートを利用して綺麗なボタンを設置してみます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ボタン</title>
</head>
<body>
<input type="button" value="押す">
</body>
</html>

上記のようなボタンが表示されます。たとえば、このボタンに表示されている文字を大きくして、ボタン全体を大きく表示したい場合、

<input type="button" value="押す" style="font-size:20px;">

ボタンのタグの中にstyle=""を追加して、その中に装飾したい内容を記載します。記述方法は、font-size:20px;の様に左側に装飾したい内容、今回はfont-sizeということで、フォント（文字）のサイズ、:（コロン）で区切って、右側に20pxという文字のサイズを指定して、最後に;（セミコロン）で終了します。ボタンのスタイルシートを変更した後でコードを実行してみると、

ボタンが大きくなりました。次にボタンの文字の色を赤に変えたい場合はstyle=""の中に書いた要素の;(セミコロン)の後に新たな要素を追加します。

<input type="button" value="押す" style="font-size:20px;color:red;">

サイズの指定の後にcolor:red;と追加することで、ボタン内のボタンが赤色になります。このコードを実行してみると、

ボタンの中の文字が大きいサイズのまま、文字色も変更されました。このようにボタンタグの中にstyle属性を追加して、属性の中にデザインに関する指示を書くことでタグの装飾を行うことが可能です。style属性の中に記述している要素:値;といった書き方をスタイルシート（CSS）と呼びます。

スタイルシートの他の例
・ボタンの色を変える場合 background-color:

<input type="button" value="押す" style="background-color:blue;">

・ボタンの角を丸くする border-radius:

<input type="button" value="押す" style="border-radius:10px;font-size:20px;">

スタイルシートでできること
CSS | Mozilla Developer Network

mov形式の動画ファイルを使い勝手の良いmp4形式の動画ファイルに変換する

デジタルビデオカメラで撮影した動画はファイルサイズが大きいです。これをHTMLのvideoタグで表示するには動画を圧縮しておいた方が良いことが多々あります。さらにアプリによってはmov形式の動画ファイルではなく、mp4の方が良い場合があるので、VLCメディアプレーヤーというオープンソースソフトウェアを使って、ファイルサイズの変更と動画のファイル形式の変更を行ってみます。