「HTMLの勉強を始めたいけどなかなか始められない」
「できれば独学でHTMLを学びたいけど、まずはどうすればいい？」
では、今この瞬間から10分だけやってみましょう！スマホでもOKです！
10分後には「なーんだ、こんなもんか」とHTMLが理解できています。
個人開発歴20年、大手のウェブ企業で部長を務め、
学生時代には情報の教員免許も取得していた僕がわかりやすくお伝えします。
早速作ってみる
「え！いきなり作るの？」
と思うかもしれませんが、
HTMLの歴史やお作法を語ってもつまらないので早速作り始めようと思います。
スマホでもOKです。
今回は記事を読みながら実際にプログラムを書いて結果を確かめられるように「やってみる」という機能を用意しました。
この先に出てくる緑色の「やってみる」エリアはリアルタイムにプログラムを書いて確かめられる場所ですので、記事を読みながら実際にプログラムを試してみましょう👍
文字の入力（1分）
HTMLを勉強する目的は様々あると思いますが、文字を利用しないページはほぼ無いと言っていいので、まずはHTMLで文字を入力してみます。
文字の入力はとても簡単です。
ただ単に好きな文字を入力すればそれでOKです。
ではさっそく「やってみる」エリアを利用して動作を確認してみます。
下の「ここにプログラム」にはすでに
こんにちは
と記載されていますので「プレビューへ反映」ボタンを押してみてください。
やってみる
プレビュー画面に「こんにちは」と表示されたはずです。
「こんにちは」を「こんばんは」に変えて「プレビューへ反映」を押すと、今度は「こんばんは」とプレビューに表示されるはずです。
「ここにプログラム」と「プレビュー」はそれぞれ下記を表しています。
- 「ここにプログラム」・・・プログラマーがプログラムを書く場所
- 「プレビュー」・・・パソコンやスマホで閲覧者がみる画面
文字を入力するのはこれだけです。
あれ？プログラミングって、英語とかよくわからない文字で書くんじゃないの？
と思われたかもしれません。
確かに、同じ処理をC言語という別のプログラミング言語で書く場合、
C言語の場合
#include <stdio.h>
int main(void){
printf("こんにちは");
return 0;
}
こんなふうに書かなければなりません。
でも、HTMLの場合は
HTMLの場合
こんにちは
だけで「こんにちは」と表示することができます。
後々あれこれ細かい話はありますが、今は「HTMLはめちゃ簡単」とだけ覚えておいてください。
文字の色を変える（1分）
文字の入力は簡単すぎてどこがHTMLなのか、逆によくわからなかったかもしれません。
そこで今度は文字の色を変えてみます。
さっきの「こんにちは」をこう書き換えます。
<span>こんにちは</span>
そして「プレビューへ反映」を押してみます。
やってみる
ここにプログラム
<span>こんにちは</span>
と記載したにもかかわらず、プレビューには
プレビュー
こんにちは
と表示され、<span>という部分と</span>という部分がプレビューからは消えたはずです。
この<>で囲んだ部分がHTMLな部分です。
では続いてこのように記載してみましょう。
<span style="color:red">こんにちは</span>
やってみる
「プレビューへ反映」を押してみるとどうなりましたか？
赤い文字で「こんにちは」と表示されたと思います。
お察しの通り
<span style="color:red"></span>
の部分が「こんにちは」という文字を赤くしてね、という指示の部分です。
- style
- color
- red
という単語が入っているので「スタイル（style）の設定は、色（color）を、赤(red)にする」ということかな、くらいに考えておいてください。この時点ではそのくらいのイメージで大丈夫です👍
ボタンを押したら色を変える（5分）
さて、今度はもう少し動きのあることをしてみようと思います。
「ここにプログラム」にこのように記載してみましょう。
<span style="color:red">こんにちは</span>
<button>青にするボタン</button>
やってみる
「プレビューへ反映」をすると「青にするボタン」というボタンが登場したと思います。
「こんにちは」は<span></span>で囲まれていましたが、<button></button>で囲むとボタンが出現します。
では、このボタンを押したら「こんにちは」という文字が青くなるようにプログラムを書き換えてみようと思います。
「ここにプログラム」に次のように記載してみましょう。
<span style="color:red" id="hello">こんにちは</span>
<button onclick="to_blue()">青にするボタン</button>
<script>
function to_blue(){
document.getElementById("hello").style.color = "blue";
}
</script>
ちょっと長いですがこれでプレビューへ反映してみましょう。
やってみる
プレビューへ反映すると赤い文字で「こんにちは」と表示され、
横には「青にするボタン」があります。
そこで「青にするボタン」を押してみましょう。「こんにちは」が青い文字になったはずです。
いったい何がどうなったのか？
最後の1つは少し長い文だったので何が何やらわからなかったかもしれません。
では細かくみていきたいと思います。
まず、プログラムは大きく分けて3つのパートに分けられます。
1つ目の部分から見ていきましょう。
<span></span>で囲まれた部分、style="color:red"の部分は先に見ていた例と変わりません。
新しい要素はid="hello"という部分です。
この部分は、<span></span>で囲まれている範囲を「hello」というIDにするという意味です。
IDを一意に設定することで、後でこの要素を指定した処理を行うことができます。
続いて2つ目の部分です。
ボタンの部分は先に出てきたボタンを作る設定と変わりません。
追加になっているのはこのボタンを押したらどんな処理をするか？という部分です。
ここでは、
このボタンを押したら「to_blue()」という処理をしてね
と指定しています。
ん？「to_blue()という処理ってなに？」
ということになりますが、
3つ目の処理で書かれているのがto_blue()の具体的な処理内容です。
3つ目の部分を見ていきましょう。
まずは、to_blue()という処理の内容をここに記載します、という宣言をします。
では、その具体的な処理はというと「IDがhelloの部分の文字色を青にすること」です。
ということで、3つの部分をまとめるとこうなります。
- 「こんにちは」という表示部分は「hello」というIDに指定
- 「青にする」ボタンを押したらto_blue()という処理を実行するように指定
- to_blue()の処理とは、helloというIDの部分の文字色を青にすること
何となく雰囲気をつかめたでしょうか？
まとめ
今回はHTMLの細い説明は抜きにして実践形式でHTMLに触れてみました。
「ボタンを押すと文字色が変わるHTMLが作れるようになった、ということ？」
いえいえ、実は今回学んだことでできるようになったことはたくさんあります。
なぜならば、HTMLで作成するものは今回学んだことの拡張ばかりだからです。
HTMLがどんなもんか大体わかった！もうちょっとやってみたい！
という方は、ぜひ第２回にお進みください！