WEBプログラミングは無料で今すぐ独学できる !!

今回はメモ帳を使って、WEBプログラミングの基本言語であるHTMLとCSSとJavaScriptを学習する方法をお伝えします。

ローカルサーバーを立てたりとか、レンタルサーバーの契約をしたりとか、FTPファイルをインストール(かつ接続)したりとか、テキストエディタをインストールとたりとか、全て不要です。

Windowsであればメモ帳、Macであればテキストエディットだけでプログラミングをする方法です。

WEBプログラミングには、WordPressを例に取ると、HTML, CSS, PHP, JavaScriptが使われていますが、このうちPHPはHTMLタグを生成する前段階において通常はサーバー側で使われますので、パソコンだけで何の準備もなく簡単に活用というわけにはいきません。

しかし、驚くなかれ、HTMLとCSSとJavaScriptに関しては、あなたのパソコン、いわゆるクライアント側だけで作動しますから、実は、なーんにも下準備はいらないのですね。

ここではMacを使った方式をご説明しますが、Windowsでもほぼ同様ですので、やってみてください。

目次

  1. Macのテキストエディットでコードを書こう
  2. デスクトップに保存しよう
  3. プログラムを動かしてみよう
  4. 画像を貼り付けよう
  5. CSSアニメーションを付けてみよう
  6. JavaScriptで変化させてみよう
  7. まとめ

Macのテキストエディットでコードを書こう

では、画面上に青いボックスと、中に「BOX」と文字を書かせるプログラムを作ってみましょう。

まず、ファインダーの「アプリケーション」中に、「テキストエディット」というのがありますから、それをクリックしてください。

そして、メニューの中にある「フォーマット」から「標準テキストにする」を選択します。

それからもう一つ、準備をしてください。

拡張子が自由に書き換えられるように、Macの場合は、Finderの「環境設定」を開き、「「全てのファイル名拡張子を表示」にチェックを入れてください。

こうすると、Finderで開いた時も、デスクトップに表示される時も、ファイル名が拡張子付きで表示されるようになります。

この設定をすると、もうテキストエディットのアプリケーションを開かなくとも、直接、test.txtのファイルをダブルクリックするだけで、編集できるようになりますから楽です。

なお、デスクトップ上で拡張子を書き換える時は、ファイル名の上でゆっくりとダブルクリックすると編集できるようになりますから、そのようにしてください。

さあ、これでもう、コードを書く準備ができました。

ここに、HTMLとCSSとJavaScriptが書けるようになります。

では、まず一番簡単なコードから書いていきましょう。

少し長くて申し訳ないですが、あとで一つ一つ説明します。

<!DOCTYPE html>
<html>
<head>
<style>
   .mybox {width: 200px; height: 40px; background-color: #00F;}
</style>
</head>
<body>
   <div class="mybox">BOX</div>
</body>
</html>

これは、幅200ピクセル 、高さ40ピクセルで、#00F、つまり青色の背景色のボックスを描き、その中に「BOX」という文字を入れるコードです。

<!DOCTYPE html>はHTML5におけるドキュメントタイプの宣言で、これは省略可能ですが、バージョンが変わるとレイアウト崩れなどが発生する可能性があるため、一応つけておいた方が良いようです。

まず、全体がhtmlのコードであることがわかるように全体を<html></html>で挟みます。

<>はhtmlでタグと呼ばれます。

<○○○> </○○○>がワンセットのタグで、○○○のところは同じ文字が入ります。

後ろの</○○○>の必要のないタグもたまにありますが、多くはこのようにセットになっています。

<html>と</html>によって全体が挟まれて、中は、<head></head>と<body></body>の二つの部分に分かれています。

<body></body>の部分には、画面上に表示される要素について示したhtmlタグを書き込みます。

一方、<head></head>のところは、それ以外の諸々の約束事を書いているというぐらいの理解で良いのではないかと思います。

この<head>の中には色々なものが入りますが、差し当たり、『最小限』は何もいりません。しかし、上記の通り、何かスタイルの指定をしたいとなると、<style></style>のタグを入れます。

この<style>タグに書かれる言語がCSSです。

CSSは次のような書式で書きます。

セレクタ　{プロパティ名: 値;}

セレクタのところで、スタイルを指定したい要素を選び、プロパティ名で色や大きさなどスタイルの何を指定したいかを決め、「値」で具体的な数値などを設定しています。

このスタイル指定は、外部ファイルから読み込むこともできますが、初心者のうちは、head内に書く方式で良いのではないかと思います。

<body>タグの中の、<div>のタグで挟まれたところが、実際のボックスを書かせているところです。

<div>はhtmlでは最も汎用性の高いタグです。

<div></div>に挟まれた部分にはテキストを書くことができ、そのままボックス内に表示されます。

「class=”mybox”」というのは、このdivタグにスタイルなどを適用させるために、クラス名を指定しています。

「mybox」はなんでもいいです。(ただし、最初が数字になっていたりするとダメです。)

この「mybox」というクラス名が付けられたdiv要素にスタイルを指定するために、<style>タグのところに、「.mybox {width: 200px; height: 40px; background-color: #00F;}」と書き込んでいます。

.mybox {
　　width: 200px;
　　height: 40px;
　　background-color: #00F;
}

このように縦に分けて書いても構いません(普通はこのように縦に長く書いているサイトがほとんどですが、数が増えてくると、かなり縦長になってしまいますので、私は横につなげて書いています。)

「#00F」は、色を示す番号です。通常は6桁で表しますが、このように3桁で表すことも可能です。「#00F」は「#0000FF」と同じ意味です。

これはRGBの方式で示した色番号で、最初の「00」がRed、次の「00」がGreen、最後の「FF」がBlueに対応しています。

ご存知のように、Red, Green, Blueという光の三原色の組み合わせで色を指定しており、この場合、Blueが最大値の「FF」で他がゼロですから、青一色ということになります。

デスクトップに保存しよう

では、上のコードを書いたら(コピーでも良いです)、早速デスクトップ上に保存してみましょう。

まず、メニューの「ファイル」から「保存」を選択してください。

すると次の画面が現れます。

ここで、「名称未設定」となっているところに、「test.html」と書き換えましょう。

「test」のところはなんでも良いですが、ファイル名を指定します。

「.html」は拡張子です。

この状態で、「保存」ボタンを押して保存します。

「標準拡張子は.txtです」がいいですかと尋ねてきますが、気にすることなく「”.html”を使用」をクリックします。

次に、読み込む時ですが、htmlファイルをテキストエディットでは読み込めないため、デスクトップでファイルの拡張子.htmlを.txtに書き換えてください。

そして、そのテキストファイルをダブルクリックすると、テキストエディットの画面が開きます。

保存する時は、.txtのまま保存し、デスクトップで.htmlに書き換えます。

そのhtmlファイルをダブルクリックすると、個々のタグの表示は消えて、通常のWEB画面として表示されます。

プログラムを動かしてみよう

さて、これでもうプログラムを動かす準備ができました。

あとは、デスクトップ上でアイコンの「test.html」をダブルクリックすれば、このプログラムが動きます(つまり、ファイルが開いてコードが読み込まれ、画面に反映されます)。

こんな風になっていたら成功です。

少し見えにくいですが、青いボックスの左上に「BOX」の文字も見えます。

では、次に、これをもう少しそれらしいものに変えていきましょう。

ここでは、1.文字を白色に、2.文字サイズを大きく、3.文字を中央配置に、4.ボックスを中央の方に移動させる、5文字を日本語に置き換えるという5つのことをやってみましょう。

1.文字色を白色に

文字色は単に「color」というプロパティで指定できます。

RGB値で#FFFFFFが白色で、これは#FFFと同じ意味ですから、

color: #FFF;

を付け加えましょう。

2.文字サイズを大きく

フォントサイズは、そのままですが、「font-size」で指定します。

ここでは26pxとしてみましょう。(26ピクセル と読みます。)

font-size: 26px;

3.文字を中央配置に

文字を左右中央配置にするには、

text-align: center;

とします。

上下の中央配置の方法はいくつかありますが、行高さをボックスの高さと同じにすると上下中央配置になります。

line-height: 40px;

4.ボックスを中央の方に移動させる

今のままでは左上隅に押し込められた感じですので、少し余裕を持たせます。

そのために上と左にマージンを指定します。

margin-top: 100px;

margin-left: 200px;

margin-top: 100pxで、ボックスの上に100pxの隙間ができ、margin-left: 200px;で、ボックスの左側に200pxの隙間ができます。

5.文字を日本語に書き換える

<head>タグ内にこれを入れましょう。
<meta charset="UTF-8">

メタタグというような言い方をしますが、そこに、charset、つまりキャラクターセットという意味でしょう。今普通に使われている文字コードとしてUTF-8を指定しておけば、日本語も文字化けすることなく表示されるようになります。

以上の指定を全て反映させると次のようなコードになります。

<html>
<head>
   <meta charset="UTF-8">
<style>
   .mybox {margin-top: 100px; margin-left: 200px; width: 200px; height: 40px; font-size: 26px; color: #FFF; text-align: center;　line-height: 40px; background-color: #00F;}
</style>
</head>
<body>
   <div class="mybox">ボックス</div>
</body>
</html>

次のようになれば成功です。

画像を貼り付けよう

次に、画像を貼り付けてみましょう。

画像は、HTMLでは、imgタグを使います。

<img src=”sample.jpg”　alt=”景色のサンプル”>

というような書き方をします。

srcで画像ファイル名を書きます。もし、プログラムファイルと同じデスクトップ上なら、このようになります。

例えば、画像ファイルがデスクトップの「img」という名前のフォルダ内にあれば、src=”./img/sample.jpg”となります。

全く別のところであれば、https://などから始まるフルパスで書きます。

また、「alt」は「alternative」の略だと思いますが、代替テキストと言われます。目の不自由な人にも何の写真や画像であるかわかるように、記載することが推奨されています。

さらに、ここでは画像のスタイルを指定できるようにクラス名をつけましょう。

<img class=”sample” src=”sample.jpg”　alt=”景色のサンプル”>

これを入れると全体は次のようになります。

<html>
<head>
   <meta charset="UTF-8">
<style>
   .mybox {margin-top: 100px; margin-left: 200px; width: 200px; height: 40px; font-size: 26px; color: #FFF; text-align: center;　line-height: 40px; background-color: #00F;}
　 .sample {margin-top: 10px; margin-left: 200px; width: 300px;}
</style>
</head>
<body>
　　<div class="mybox">ボックス</div>
　　<img class="sample" src="sample.jpg"　alt="景色のサンプル">
</body>
</html>

さあ、htmlファイルに書き換えて、ダブルクリックして開いてみましょう。次のようになるはずです。

CSSアニメーションを付けてみよう

「えっ、アニメーションもできるの?」と思われるかもしれませんが、できるんです。CSSアニメーションはクライアント側のことですから、サーバーは不要です。

どんな動きでも良いのですが、ここでは、写真を左右に裏返してみましょう。

写真の上にマウスオーバーすると、写真が裏返るという、ホバーエフェクトを使います。

まずCSSの.sampleに、transition: 1s;をつけます。これをつけると、1秒かけてアニメーションが起こるようになります。

そして、.sampleの次の行に、.sample:hover {transform: rotateY(180deg);}を書き足します。

これが、裏返りつつある途中の(笑)画像です。

(ここでは、話がやや高度になるので採用しなかったですが、親要素にperspective: 1000;のように指定すると、奥行きが出て、本当に回転している感じが出ます。)

アニメーションも実に簡単ですね。

この方法でいろんなアニメーションを試してみてください。

JavaScriptで変化させてみよう

最後にJavaScriptまで試しちゃいましょう。

「えっ、JavaScriptまでメモ帳でできちゃうの?」と思われる方もあるかもしれませんが、JavaScriptはあなたのパソコン、つまりクライアント側の言語なので、問題なくできるわけです。

ここでは、簡単に、「ボックス」の文字を「北海道の風景」に書き換えてみましょうか。

JavaScriptはhead内でも、どこでもいいのですが、私は、最後に書くようにしています。

まず、divタグのところを次のように書き換えます。

<div id=”mybox” class=”mybox” onclick=”MyClick()”>ボックス</div>

クラス名だけでなく、id名も付け加えました。

クラス名だけでも可能ではあるのですが、JavaScriptで要素を選択する時、id名を使うのがもっとも普通ですので、id名も付け加えます。

それから、onclick=”MyClick()”を付け加えます。

これは、このボックスがクリックされた時に、反応するようにするためです。

「クリックイベント」に「発火」するようにするというような言い方をします。

最後に、このクリックイベントに反応するように、Javascriptとして次のように付け加えます。

<script>
function MyClick(){
 document.getElementById("mybox").innerText="北海道の風景";
};
</script>

functionとは関数のことですね。

JavaScriptはこのように、ほとんどのコードを関数の形で書きます。

まとまった仕事を外注する時に、関数名で発注するというような理解で良いと思います。

MyClcikの後に無駄に()がついているように見えますが、これは何らかのデータを引き渡したい時にこのカッコの中に入れます。何もない時は、このように空欄になります。

発注する時に、「お願い!」と言うだけでなく、「これをお願い!」と具体的に処理してほしいデータを渡す時に使うわけです。

なお、関数によって処理する範囲を{ }で囲みます。

書き換えたところも含めて、全部書き直したコードを最後に書いておきます。

<html>
<head>
   <meta charset="UTF-8">
<style>
   .mybox {margin-top: 100px; margin-left: 200px; width: 200px; height: 40px; font-size: 26px; color: #FFF; text-align: center;　line-height: 40px; background-color: #00F;}
   .sample {margin-top: 10px; margin-left: 200px; width: 300px; transition: 1s;}
   .sample:hover {transform: rotateY(180deg);}
</style>
</head>
<body>
   <div id="mybox" class="mybox" onclick="MyClick()">ボックス</div>
   <img class="sample" src="sample.jpg"　alt="景色のサンプル">
</body>
</html>
<script>
function MyClick(){
 document.getElementById("mybox").innerText="北海道の風景";
};
</script>

さあ、このコードで、ボックスをクリックしてみてください。

「ボックス」の文字が、サッと「北海道の風景」に書き換わると思います。

このようにJavaScriptは、与えられたWEB画面を自由に書き換えることができるのです。

これが、どれだけプログラム作りに役立つか、想像してみてください。きっといろんな可能性が見えてきて夢が膨らむと思います。

まとめ

いかがでしたでしょうか。

これまで、プログラムも勉強したいけど、「ローカルサーバー」を立てるとか面倒そうだし、まだ身につくかどうかもわからないのにレンタルサーバーと契約するのもリスクがあるなぁという方が多かったのではないでしょうか。

ここでは、そんな心配は一切不要で、ほんの1分で、プログラミング学習ができるようになる方策をお伝えしました。

つまり、開発環境設定に手間取らないというわけです。

残念ながらPHPまではできませんが、HTML, CSS, JavaScriptは基本的に全てこの方式で学べるだろうと思います。

また、JavaScriptの書式をもっと簡単に書けるJQueryは便利でお勧めしたいところですが、これはライブラリを読み込まないといけないので、この方式には馴染みません。(ただ、デスクトップにJQueryを読み込んで、それを読み込むようにすれば、できなくもないかもしれませんので、もしご要望があれば検討します(笑))

この方式であれば、ファイルを友達に送り合って交換したりして、切磋琢磨しながら、簡単にプログラミング学習をすることも可能となります。

プログラミング学習に一円たりともかけず、全くインストールのような面倒なことをせずにできる方法として、この方法をご活用いただければ幸いです。