はじまりのプログラミング|~うさタブとの出会い~

HTML

プログラミングをはじめよう! ……とその前に。

学習のポイント

 JavaScriptプログラミングを学ぶには、まずホームページやブログを作る基礎きそとなるHTMLCSSれなければいけません。

 今回は、最初のステップとして、実際にHTMLのコード(命令文)を書き、HTMLファイルを作ってみましょう。

そもそもHTMLって何?

ユウキ
ユウキ

ていうか、HTMLって何?

うさタブ
うさタブ

HTMLは、この場所みたいなホームページ・・・WEBサイトやアプリを作るときの基礎きそッピ。

チビっ子大好きYouTubeやNetflixだって、このHTMLで作られているッピ!

ユウキ
ユウキ

じゃあCSSは?

うさタブ
うさタブ

CSSはホームページの見た目をキレイにするものッピ。

HTMLが家の土台なら、CSSは屋根に色をつけたり、壁に絵を描いたり、花を飾ったり、オシャレするようなもんッピネ。

まあ、まだコレは覚えなくても良いッピ。

ユウキ
ユウキ

ふーん・・・

ユウキ
ユウキ

あれ?? それじゃあ【JavaScriptって??

うさタブ
うさタブ

よくぞ聞いてくれたッピ!

JavaScript】とはズバリ、ホームページやブログ・・・WEBアプリを動かす素敵な魔法ッピヨ~~!

ユウキ
ユウキ

アプリを動かす魔法~!?

HTMLコーディングとJavaScriptプログラミングの違い

うさタブ
うさタブ

プログラミング】とは、コンピュータが自分で動いたり・変化することができる装置』を作ること。

対してHTMLCSSは、誰かがアップデートをしなければ変化できない、いわば見た目だけの看板かんばん状態ッピ。

これはプログラミングとは言えないッピヨ・・・。

ユウキ
ユウキ

なんかピンとこないな・・・

うさタブ
うさタブ

スマホゲームがアップデートされないと、新しいステージで遊べないッピね? あれと一緒ッピ。

うさタブ
うさタブ

ホームページやブログ・・・

HTMLというものは、誰かがそのたび命令文(コード)をかいて、更新しない限り、ず~っと同じ物を表示し続けるッピネ。

ユウキ
ユウキ

むむむっ・・・(サッパリわからん)

うさタブ
うさタブ

しかーし!

JavaScript】を使用することによって、

ホームページにアクセスするごとに画像を変更したり、

時間ごとに表示される文字を自動的に変えられる装置』(プログラム)を組み込めるッピネ!

ユウキ
ユウキ

あ~~っ、わかった!

『YouTube』で毎回違う『動画』が最初に出てくるヤツでしょ?

うさタブ
うさタブ

そのとおりッピ!!

ユウキ
ユウキ

うーん。用語がイッパイで意味ワカンナイな~。

アタマがゴチャゴチャするよ・・・

うさタブ
うさタブ

全部いっぺんに覚える必要はないッピ!

少しずつ覚えていけば良いッピネ。

うさタブ
うさタブ

今はHTMLは家、JavaScriptは家にある電球エアコンみたいなものと覚えていれば良いッピヨ。

プログラミング】は、家に帰って来たら勝手に電気がつく『装置』づくり・・・と覚えておけば良いッピ!

ユウキ
ユウキ

OK、グーグル ただいま~!

電気とエアコンがつくみたいな?

うさタブ
うさタブ

だいたい合ってるッピ。

うちはアレクサとGoogle Homeの両方ッピヨ!

必要な道具を用意しよう!

うさタブ
うさタブ
用意するもの
  • メモ帳

必要なものは【メモ帳】だけッピ。

メモ帳は最初からパソコンに入っているから、探してアプリを起動するッピ。

うさタブ
うさタブ

Windowsなら左下の検索ふぉーむから、メモ帳と入力すれば出るッピネ。

Macなら【メモ】という名前で、黄色いラインが入ったノートのアイコンが見つかるはずッピヨ~!

うさタブ
うさタブ

まずはこの【メモ帳】を使って、HTMLのコード(命令文)を書いていくッピヨ。

メモ帳でホームページを作ってみよう!

うさタブ
うさタブ

それでは【メモ帳】を開くッピ。

開くというのは・・・

ユウキ
ユウキ

アプリを起動するってことだろ?

そんくらい知ってるよ。バカにすんなよな~!

うさタブ
うさタブ

初心者のために説明してるのに、なんて言い草ッピか!

まあ良いッピ。 とにかく起動するッピ!

ユウキ
ユウキ

できた!

うさタブ
うさタブ

これからここに、HTML命令文・・・【コード】を書いていくッピヨ~!

うさタブ
うさタブ

最初は何を書いてるかわからないかもしれないッピが、心配ないッピ!

算数や数学の『』を覚えるように「こういうものなんだ~」とながめるくらいで丁度良いッピヨ~!

HTMLのコードを書いてみよう!

<html>
<head></head>
<body>

</body>
</html>
うさタブ
うさタブ

まずはメモ帳に上の通りにアルファベットを書くッピ。

半角英数字で書くッピよ。

アルファベットと日本語入力の切り替えは、ESCキーの下にある、半角/全角|漢字キーから変更できます。

文字を打ったあと、F10キーを押して日本語から変換することもできます。

うさタブ
うさタブ

この<body></body>の間に、Hello Worldと入力するッピ。

ぶっちゃけこの下の文をコピー&ペーストするだけでも良いッピネ~!

<html>
<head></head>
<body>

Hello World

</body>
</html>
ユウキ
ユウキ

できた!

テキストをHTMLファイルとして保存しよう

うさタブ
うさタブ

データをHTMLファイルとして保存するッピヨ~

ファイルから『名前をつけて保存』を選ぶッピ。

うさタブ
うさタブ

名前は『1st.html』にするッピ。

.htmlとつけるこでHTMLファイルを作ることができるッピ!

うさタブ
うさタブ

このとき【ファイルの種類】を

すべてのファイルに変更して保存するッピよ~!

ユウキ
ユウキ

変更できたよ~!

うさタブ
うさタブ

1st.html】ファイルができてるはずッピ。

HTMLファイルをダブルクリックするッピネ! ホームページができてるッピよ~

うさタブ
うさタブ

できないときはファイルを右クリックして

【プログラムから開く】→【Microsoft Edge】または【Safari】、【Google chrome】を選ぶッピガッピ!

ユウキ
ユウキ

おお! なんか文字が出てる!

うさタブ
うさタブ

ふふふふ、これがプログラミングのちからッピよ~!

次からはもっと、いろんなことをしていくッピ!

上に出てきた<body></body>などのタグの解説もしていくッピネ。

楽しみにしているッピよ~

確認テスト

うさタブ
うさタブ

まだまだ勉強したい人は下の関連記事をクリックするっピよ~!

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うさタブ!

オレ、もっと本格的にゲームが作りたいんだ

アイカ
アイカ

私もだわ!

もっとたくさん実用的なコードを

学ぶことってできないかしら?

うさタブ
うさタブ

おお、2人ともやる気ッピね!

ゲームの作り方を学ぶなら、コレとかどうッピか?


うさタブ
うさタブ
Udemy」テレビでも有名な動画教材
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

2DアクションRPG脱出ゲーム

3Dゲーム制作講座まで

買い切り講座だからいつでも勉強し放題ッピよ~!

ユウキ
ユウキ

お!いいじゃん!

アイカ
アイカ

あと、どこか素敵な素材を売っているところはないかしら? 公式の素材販売だと、クレカ支払いしかなくて・・・

ユウキ
ユウキ

小学生じゃクレカで支払えないぜ~

うさタブ
うさタブ

ゲームの素材を買いたいなら、

DLsiteBoothとかどうッピか?

うさタブ
うさタブ

素敵なドット絵や音楽素材がいっぱい売ってるッピ!

うさタブ
うさタブ

しかもUnityアセットストアと違って

クレカ支払いじゃなく、コンビニ支払いができるのもポイントッピ!

ユウキ
ユウキ

すげーカッコいい素材がいっぱいある!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク
HTMLプログラミング入門の最初のページ
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました