文字を表示してみよう!

はじめに

皆様、お疲れ様です。
プログラミングスクールADVANCEの福島です。

Scratchが小学校の授業にも導入されるようになり、Scratchでのゲームクリエイターが増えてきました。
そして、来年以降は中学校・高等学校でもプログラミングの授業を追加することが予定されています。

ということで、僕の担当回ではScratchより難しい、文字で作成する本格派プログラミングを担当させていただきますので、よろしくお願いしますね♪

今回の内容

前回前々回はエディター「VSCode」のことを学びましたので、そろそろ本題となるプログラミングを始めていきたいと思います。
その前に、当校の授業・ブログでは「VSCode」を使った説明をさせていただくことになりますので、インストールをお勧めします。

それではまず、もっとも取っ付きやすいであろうHTML/CSSを学んでいきましょう!

HTML/CSSとは

詳しく説明すると長くなるので簡単に説明すると、「みなさんが今みてくださっているブログを始めとする、web上にあるページを作る言語」です。

つまり、これを学ぶとホームページやブログページを自作することができるのです。
もちろん、当校ホームページも手作りです。

HTMLとCSSはセットで扱われますが行うことは全く別で、HTMLで基盤を作成し、それを整形するのがCSSとなります。
このブログでいうと、文字の部分がHTML文字の色を変えたり太くしたりするのがCSSです。

ただ、当ブログでは少しの間はCSSを置いておいてHTMLばかりの更新となります。
その理由はおいおいわかると思います。

というわけで、HTMLを書いていくわけですが、もちろん書き方があります。
それは、タグというもので囲みます
このタグで囲ったものがそのタグの影響を受けます。

と、説明ばかりではわからないと思うので、実際にプログラミングしてみましょう。

実際にコーディング!

それでは、実際にプログラミングしましょう。
今回は、文字を表示する簡単なプログラムです。

文字を表示するためには<p>タグというものを使います。
実際の動作は以下の動画をご覧ください。

以下のコードをコピペしてもOK♪

<p>Hello World</p>

以下のzipファイルにhtmlファイルや解説等の必要データをまとめていますので、ダウンロードしましょう!

今回は、《文字の表示.html》というファイルを用意していますので、動画と同じ様に動かしていただければ大丈夫です。
手順は「記述→保存→表示の確認」となります。

保存したファイルは「Google Chrome」などのブラウザで開くと見ることができます。
動画ではすでにChromeを開いていたので、更新ボタンで更新しています。
また、書き足したりした場合でもファイルを上書き保存しないと更新されないので、ご注意ください。

さいごに

今回はHTMLの基礎と<p>タグについてお話をさせていただきました。
タグはまだまだいっぱいあるので、次回の更新をお待ちください!

それでは、ご覧いただきありがとうございました!

ADVANCEでは

ゲーム制作をメインとして小学生・中学生・高校生に向けてのプログラミング教室を運営しております。

無料のイベント(アクティビティ)も開催しているのでご覧くださいね☆

↓↓↓

アクティビティ詳細

また、解説ブログは随時更新!
更新日時は公式ホームページでご確認ください☆