初心者でもブラウザ上で表示できるHTMLページを作ってみる

こんにちは、なかなか自分の書きたいジャンルが定まらないmushkinokoです。最初のうちは、思いついたことをじゃんじゃん書いていこうと思います。

今日は、初心者でもWebサイトのようなページが作れるようになるような記事です。

注意：この記事は、Windowsを対象に書いています。Mac OSをお使いの方は、その都度自分の環境にあわせて読み替えてください。また、この記事の内容は、実際にWeb上に公開するものではなく、ローカル上に表示するだけなので、実際に公開したい場合はレンタルサーバーなどを利用してください。

Webサイトってどうやって作るの？

Webサイトは、HTMLという言語でできています。HTMLはプログラミング言語ではなくマークアップ言語と言い、ハッカーが一日中打っているような難しいものではなく、初心者でもとっつきやすいようになっています。

準備するもの

パソコンを持っていることは前提として話を進めていきます。

TeraPad (http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html)
HTML5対応ウェブブラウザ（主要なブラウザの最新版を使えばいいよ）

とにかくやってみよう！

1. 適当なのを作ってみる

さっきダウンロードしたTeraPadはテキストエディタで、これからこのエディタを使ってHTMLを書いていきます。

以下の文章を打ち込んでみてください。

クラムボンはわらったよ。
クラムボンはかぷかぷわらったよ。
クラムボンは跳ねてわらったよ。
クラムボンはかぷかぷわらったよ。

そうしたら保存するのですが、注意することがあって、最初に保存するときに文字コードをUTF-8にする必要があります。ファイルメニューから「文字/改行コード指定保存」を押して、文字コードをUTF-8にします。

なぜこのようにするのかは、また別の記事で説明します。

一度上のように保存したファイルを上書き保存する場合は、そのまま上書き保存をして大丈夫です。また、ファイルの拡張子を「.html」にする必要があります。

では、出来たファイルをブラウザで開いてみましょう！Firefoxの場合こんな感じになるはずです（なんかこの画像だけユーザー名隠してる）。

あれ？さっき改行をいれたはずなのに。。。HTMLはただ改行をしただけでは改行して表示してくれません。じゃあどうすればいいのかを下に書いておきます。変更が終わったら上書き保存してください。

クラムボンはわらったよ。<br>
クラムボンはかぷかぷわらったよ。<br>
クラムボンは跳ねてわらったよ。<br>
クラムボンはかぷかぷわらったよ。

「<br>」というおかしな物が入りました。文章の位置から分かるように、このおかしな物は改行を表していることになります。

このおかしな物を「タグ」といい、HTMLを書く上でものすごく重要な物です。これ以外にも様々なタグがあります。試しに、さっきのタグを好きなところにいれてみてください。これで、あなたもHTMLで改行をすることができました！

2. タグをもっと詳しく

ここからはタグの詳しい説明です。

タグは、大なり小なり見たいなやつで囲んだやつです。HTMLはタグをたくさん使って作っていきます。タグは大文字で書いても小文字で書いても問題ありません。この記事ではすべて小文字で表記していきます。

さっき紹介したタグは「brタグ」と言い、改行を表すものです。

その他の主なタグについても説明していきます。

pタグ

「pタグ」は、文章の段落を表すタグで、開始タグと終了タグというもので段落を囲って使います。開始タグはbrタグの時と表し方は変わりませんが、終了タグはタグの名前の前にスラッシュをつけて表します。

<p>クラムボンはわらったよ。クラムボンはかぷかぷわらったよ。</p>
<p>クラムボンは跳ねてわらったよ。クラムボンはかぷかぷわらったよ。</p>

h1〜h6タグ

このタグは、見出しを表すタグで、見出しの大きさ順にh1, h2, h3, h4, h5, h6といった感じで使っていきます。

<h1>mushkinokoのブログ</h1>
<h2>記事一覧</h2>
<h2>カテゴリ一覧</h2>

ここで注意してもらいたいのは、h1〜h6タグを見ための大きさで使い分けないことです。フォントサイズの変更は別の方法でできるので、また今度別の記事で説明します。

aタグ

HTMLの中でも重要な機能の一つのリンク（正確にはハイパーリンクといいます）を表示するためのタグです。これを使うことで、あらゆるページに移動することができます。使い方は、

<a href=”URLを書く”>リンクに表示したい文字を書く</a>

といった感じです。これも使用例を下に示しておきます。

<a href="https://i-bitzedge.com">ぜひクリックしてね！</a>

なんか覚えることばかりで大変だと思いますが、何事も最低限の物を覚えることは大切なので、頑張っていきましょう！

今回覚えたことの確認

一回整理するために、HTMLを書いておきましょう。

<h1>○×のブログ</h1>
<h2>7/20 散歩をしたよ</h2>
<p>今日は散歩をしました。どこかの海岸沿いを<br>ずーっと歩きました。</p>
<p>また明日もどっか行きたいなー。</p>
<a href="https://i-bitzedge.com">iBitzEdgeはこちら</a>

こうなれば成功です。

しかし、HTMLはまだ覚えることがたくさんあります。実は今日書いたHTMLはまだ不完全で、HTMLのルールを守っていない部分がたくさんあります。

もし、僕のやる気がのこっていたら、HTMLの厳密なルールについてまた記事を書きたいと思います（っていうかここで終わらせたらすごく中途半端になるね）。これから、一緒にHTMLを勉強していきましょう！では、また次回。

この記事を書いた人
最新の記事

mushkinoko

mushkinokoです。~~最近、ママチャリで走り回っています。~~ロードバイクはじめました。

最新記事 by mushkinoko (全て見る)