HTMLを書いてみよう～基礎編～

TOP
コラム
HTMLを書いてみよう～基礎編～

HTMLとは？

プログラミングを始めるうえで初心者向けとなるものが「HTML」です。正式には、「HyperText Markup Language」といいます。今からプログラミングを始めようと思う人は「HTMLって？」「HTMLでは何をするの？」という疑問が浮かぶと思います。ここでは初心者向けのHTMLの基礎を解説していきます。

簡単に言うとHTMLはWebページの作成を行います。文章中の各部分がどのような役割を持っているかということを表します。どこが見出しでどこが段落かということを見分けるために使うというと分かりやすいでしょうか。
Webページにある文字は基本的にHTMLで作られています。後ほどご紹介しますが、CSSという「HTMLのタグの中の文字色や大きさ配置や背景色をしてするための言語」も併せて使われます。

次にタグとは何かということについてご紹介します。

タグとは？

HTMLは<>コメント<>というように役割ごとにカッコで囲み文章を書いていきます。この<>にあたるものがタグです。よく使われる基礎のタグをいくつか挙げてみます。

・<h1>や<h2>といった<h>を使ったものは見出しを意味します。
このh1やh2の1や2の数字は見出しの大きさを意味しますので小見出しを付ける場合は数字を3や4に上げて使用することができます。

・<p>と</p>で囲ったものは段落を意味します。

・<ul>と</ul>または<ol>と</ol>で囲ったものは箇条書きを意味します。
どちらも<ul>間、<ol>間に<il>と</il>で囲ったものを書きます。この<il>で囲まれた中に箇条書きの内容を入力します。<ul>と<ol>はよく似ていますが、少し違いがあります。ulは、「・～～～」というように番号をふらない箇条書きです。olは、「①～～～」というように番号をふった箇条書きです。

・ <strong>と</strong>で囲ったものは太字の表示を意味します。
太字にするにも様々な方法がありますがより強調したい場合は<strong><mark>と</mark></strong>で囲います。この時、開始は<strong><mark>ですが、終了時は</mark> </strong>のようにstrongとmarkが入れ替わりますので注意が必要です。

※どのタグを使用するときもタグを終了す時には必ず/を付けてください。を忘れてしますとタグが正常に表示されないのでエラーが起きてしまったり正しく文章が表示されなくなったりします。

タグには他にもたくさんの種類がありますがまずは基礎的なタグをいくつかご紹介しました。文字で解説を見るだけでは分かりにくいと思いますので後ほど実際にHTMLを書いてみましょう。その前に次はCSSについて少しお話します。

CSSとは？

CSSとは先ほども少し触れましたが、HTMLのタグの中の文字色や大きさ配置や背景色を指定するために使われる言語です。HTMLのみを使用したWebページは基本的には白黒でシンプルな構成になりますがここでCSSを使うことによって文字に強弱が付き、カラフルなWebページを作ることができます。

ここではCSSについてはあまり詳しくご紹介しませんが、ご興味がある方は調べてみてください。

実際にHTMLを書いてみよう

では上記で挙げたタグを使って実際に基礎のHTMLを書いてみましょう。

①Windowsの方はメモ帳を、Macの方はテキストエディットを開いてください。(本記事では、Windowsで説明します。)
②メモ帳に以下の文章とタグを入力してみましょう。

<h2>HTMLを書いてみよう</h2>

<p>段落を付けたいときには<p>を使います。</p>

<ul>
<li> 一つ目のの項目です</li>
<li> 二つ目のの項目です</li>
</ul>

<strong> 太字にしてみましょう。</strong>

③名前を付けて保存します。左上のファイルから「名前を付けて保存」を選択します。
④デスクトップを選択し好きなファイル名の後に続けて「.html」と入力してください。
⑤そしてファイルの種類はすべてのファイルを選択してください。そして保存するとデスクトップ上に保存されます。

保存されたファイルを開いてみましょう。ちゃんと反映されたことが確認できたでしょうか？

まとめ

ここまでHTMLとは何かといお話からHTMLを実際に書いてみるというお話をしました。HTMLとは文章中の各部分がどのような役割を持っているかということをタグを使って表示させます。

アルファベットや記号が並んでいて難しいと思われる方も多いと思いますが筆者も始め全く仕組みが分かっていませんでした。基礎的なタグを覚えることで簡単なHTMLは書けるようになるので、どんどん練習してみてください。ここでご紹介したHTMLは初心者向けの基礎となる部分なのでもっとこれからHTMLを書いてみたいという人のきっかけとなるでしょう。