Loading...
HTML・CSS・JavaScript体験
HTML体験
この講座では、HTMLCSSJavaScriptという3つの言語を使って、プログラミングの基本を学んでいきます。
 
HTMLはWebページを作成するための言語です。
CSSではそのWebページのデザインをします。
JavaScriptはWebページに動きをつけます。
 
つまり、この3つの言語でWebページを作って、デザインして、表示を動かす、という内容です。
 
では早速、体験してみましょう。
まずHTMLという言語でWebページを作ります。
 
HTMLには決まった書き方があって、例えば「好きな内容を表示させよう。」と表示させるには、次のように書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>初めてのWebページ</title>
</head>
<body>
好きな内容を表示させよう。
</body>
</html>
 
「初めてのWebページ」と書かれた部分には、タイトルを記入します。
「好きな内容を表示させよう。」と書かれた部分に、Webページに表示させる内容を記入します。
 
英語を書いた文章は「英文」といいますが、プログラムを書いた文章は「プログラムコード」といいます。今書いているのはHTMLのコードです。
 
テキストエディタ
このHTMLコードをどこに書くかというと、テキストエディタというものに書き込みます。
レッスン画面の下にあるエリアの、左側がテキストエディタになっています。
 

 
下向きの矢印をクリックすると、下側のエリアへ移動できます。
 

 
上側へ戻るときは上向きの矢印をクリックします。
 
下側のエリアの左側は真っ黒ですが、ここがテキストエディタです。
 

 
index.htmlというタブが選択されています。
ここへ、先ほどのHTMLコードをコピーして貼り付けましょう。
右側にある教科書のコードの部分をコピーできます。
 
貼り付けるときは、キーボードでコントロールキーとVのキーを同時に押します。
WAO Let's Codeのエディタでは、マウスの操作で貼り付けはできません。
キーボードの「Ctrl」と「V」を同時に押して貼り付けてください。
 
コードを貼り付けたら、右上にある「実行」というボタンをクリックしましょう。
 

 
すると、右側に表示が出ます。
 

 
次に、「好きな内容を表示させよう。」の部分を別の文章に書き換えて、再度「実行」ボタンをクリックしてみましょう。とりあえず「むかしむかし浦島は」としてみます。
 

 
表示結果が変わりました。
この表示結果の部分が、作成したWebページにあたります。
 
Wordなどとは違って、Webページは表示画面と編集画面が別になっています。
テキストエディタはこの編集画面のことで、その<body>と</body>の間に記入した内容が、Webページに表示されます。
 
 
CSS体験
CSSという言語で、Webページのデザインを変更してみましょう。
 
CSSにも決まった書き方があって、例えば文字の色を青にする場合は、次のように書きます。
body{color:blue;}
 
このCSSもテキストエディタに記入します。
今度は、「style.css」というタブをクリックして選択します。
 

 
ここへ、先ほどのCSSコードをコピーして貼り付けましょう。
右側にある教科書のコードの部分をコピーできます。
 
キーボードの「Ctrl」+「C」でコピーして、「Ctrl」+「V」で貼り付けます。
 

 
次に、CSSのコードをHTMLとは別の場所に記入したので、HTMLとCSSの関連付けを行います。
この「文字の色を青にする」という指定が、先ほどのHTMLに適用されるようにするのです。
 
index.htmlのタブを選択して、HTMLコードを表示させます。
そして、次のように1行を追加してください。コピーして貼り付けて構いません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>初めてのWebページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
むかしむかし浦島は
</body>
</html>
 
この1行は書く位置が決まっています。
<head>と</head>の間のどこかに記入します。
今の例では、<head>と</head>の間の最後に記入しています。
 
ここまで出来たら「実行」ボタンをクリックしましょう。
 

 
文字の色はred、green、pinkなど、いろいろ変更できます。試してみましょう。
文字のサイズを変更する場合は、font-size: 50px; などと指定します。
 
style.cssのタブを選択して、以下のようにコードを修正しましょう。
コピーして貼り付けて構いません。
body{color:blue; font-size: 50px;}
 
実行ボタンをクリックすると、表示が変わります。
 

 
このCSSの内容は、HTMLのコードの中に書き込むこともできます。
style.cssのコードは消去して、index.htmlを次のように書きかえましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>初めてのWebページ</title>
<style>
body{color:blue; font-size: 50px;}
</style>
</head>
<body>
むかしむかし浦島は
</body>
</html>
 
先ほどの追加した1行の代わりに、この3行を記入します。
実行ボタンをクリックすると、先ほどと同じ表示が出ます。
 
 
JavaScript体験
JavaScriptという言語で、表示を動かしてみましょう。
 
JavaScriptにも決まった書き方があります。今回は、次のように記入します。
var count = 15;
var change = function() {
  document.body.innerHTML = '浦島は' + count + '歳';
  count++;
}
setInterval(change, 500);
 
このJavaScriptもテキストエディタに記入します。
今度は、「functions.js」というタブをクリックして選択します。
 

 
ここへ、先ほどのJavaScriptのコードをコピーして貼り付けましょう。
 

 
次に、JavaScriptのコードをHTMLとは別の場所に記入したので、HTMLとJavaScriptの関連付けを行います。このJavaScriptの指定が、先ほどのHTMLに適用されるようにするのです。
 
index.htmlのタブを選択して、HTMLコードを表示させます。
そして、次のように1行を追加してください。コピーして貼り付けて構いません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>初めてのWebページ</title>
<style>
body{color:blue; font-size: 50px;}
</style>
<script src="functions.js"></script>
</head>
<body>
むかしむかし浦島は
</body>
</html>
 
この1行は書く位置が決まっています。
<head>と</head>の間の最後か、<body>と</body>の間の最後に記入します。
今の例では、<head>と</head>の間の最後に記入しています。
 
ここまで出来たら「実行」ボタンをクリックしましょう。
 

 
最初は「むかしむかし浦島は」と表示が出ますが、0.5秒後には「浦島は15歳」という表示に変わり、その後、浦島はどんどん年をとっていきます。
 
このJavaScriptの内容は、HTMLのコードの中に書き込むこともできます。
functions.jsのコードは消去して、index.htmlを次のように書きかえましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>初めてのWebページ</title>
<style>
body{color:blue; font-size: 50px;}
</style>
<script>
var count = 15;
var change = function() {
  document.body.innerHTML = '浦島は' + count + '';
  count++;
}
setInterval(change, 500);
</script>
</head>
<body>
むかしむかし浦島は
</body>
</html>
 
先ほどの追加した1行の代わりに、この8行を記入します。
実行ボタンをクリックすると、先ほどと同じ表示が出ます。
 
 
まとめ
ここまでしてきたことをまとめます。
 
HTMLではWebページを作成します。
HTMLコードの<body>と</body>の間に書かれた内容が、Webページに表示されます。
 
CSSではWebページのデザインを指定します。
CSSのコードを書いてそれをHTMLへ読み込むと、Webページのデザインが変わります。
 
JavaScriptでは、Webページに動きをつけます。
JavaScriptのコードを書いてそれをHTMLへ読み込むと、Webページに動きをつけることができます。
 

 
そして、CSSやJavaScriptのコードは、HTMLのコードの途中に書き込むこともできました。
 

 
 

有料サービスです。

会員登録してログインすると「会費」ボタンが表示されます。
そこから支払い画面に進むことができます。

会員登録、ログインが必要なページです

下のボタンより会員登録、もしくはログインしてください。