HTMLの書き方を練習しよう〜素材の準備と基本構造 | SkillhubAI（スキルハブエーアイ）

HTMLの書き方を練習しよう〜素材の準備と基本構造

HTMLを使って架空の動物園サイト「ズロッパ」を作ってみよう！

こんにちは、今回はHTMLの基礎を学びながら、架空の動物園「ズロッパ」のウェブサイトを作成していきます。HTMLの基本タグやツールの使い方を紹介していきますので、ぜひ一緒に実践してみてください！

1. 必要な素材とツールの準備

まずは、HTMLを記述するためのテキストエディターが必要です。おすすめのツールは「Sublime Text 2」です。初心者でも使いやすく、非常に軽量で優れたエディターです。無料で使えますが、購入のアラートが表示されることがありますので、必要に応じて購入を検討してください。サブライムテキスト以外にも、Windowsでは「Sakuraエディター」、Macでは「mi」などのエディターも使えます。

次に、今回作成するサイトの素材（画像など）をダウンロードして準備してください。

2. HTMLファイルの作成

まずは、サブライムテキストで新規ファイルを作成し、HTMLファイルを作成していきます。ファイルの名前は「index.html」とし、以下の基本構造を入力してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ズロッパ東京</title>
</head>
<body>
    <!-- コンテンツはここに追加します -->
</body>
</html>

HTMLの基本構造

  1. <!DOCTYPE html>：これはHTML5の宣言です。ウェブページがHTML5で記述されていることをブラウザに伝えます。
  2. <html>タグ：HTMLドキュメント全体を囲むタグです。
  3. <head>タグ：ページのメタ情報やタイトル、スタイルシートなどがここに含まれます。
  4. <body>タグ：ページに表示されるコンテンツはすべてこの中に書きます。

このファイルを、デスクトップ上のフォルダ「ズロッパ」に保存してください。

3. タイトルの追加

HTML文書にはタイトルを設定する必要があります。タイトルはブラウザのタブに表示される重要な部分であり、検索エンジンにも影響します。<title>タグを使って、次のようにタイトルを追加します。

<title>ズロッパ東京</title>

保存してブラウザで確認すると、タブに「ズロッパ東京」と表示されるはずです。

4. 見出しと段落を追加する

次に、ウェブページの本文を作成します。まずは、ページの見出しとして「ズロッパ東京」という大見出しを追加しましょう。HTMLの見出しタグは<h1>から<h6>まであり、<h1>が最も重要な見出しです。

<h1>ズロッパ東京</h1>

また、段落を表す<p>タグも使って、ページの説明を追加してみましょう。

<p>ズロッパ東京は日本最大級の動物園です。</p>

5. 画像を表示する

ウェブページには画像を表示することができます。今回は、ダウンロードした素材から「トップ画像」を表示してみましょう。画像を表示するためには<img>タグを使います。

<img src="top.jpg" alt="動物園のトップ画像">
  • src属性には画像のファイル名を指定します。
  • alt属性には画像の説明を記入します。これは検索エンジンや、画像が表示されなかった場合に役立ちます。

また、画像のサイズを指定することも可能です。例えば、幅を200pxにしたい場合は以下のように記述します。

<img src="top.jpg" alt="動物園のトップ画像" width="200">

6. リストの作成

ウェブページでリストを表示したい場合には、<ul>（順序なしリスト）や<ol>（順序ありリスト）を使います。今回は、動物のリストを作ってみましょう。

<ul>
    <li>パンダ</li>
    <li>ライオン</li>
    <li>ゾウ</li>
</ul>

このコードで、パンダ、ライオン、ゾウが順序なしリストとして表示されます。もし順序を付けたい場合は、<ul>を<ol>に変えると、リストに番号が表示されます。

7. リンクを作成する

最後に、リンクを作成して、ページ間を移動できるようにしましょう。リンクを作成するには、<a>タグを使います。例えば、パンダのページにリンクを作成するには以下のようにします。

<a href="panda.html">パンダのページへ</a>

このコードをクリックすると、panda.htmlという別のページに移動します。リンクの設定はとても重要で、ナビゲーションの役割を果たします。

8. まとめと次のステップ

今回は、HTMLの基本的なタグを使って、架空の動物園「ズロッパ」のトップページを作成しました。HTMLの基本構造やタグの使い方を学び、簡単なウェブサイトを作るための第一歩を踏み出しましたね。

次回は、さらにCSSを使ってページのデザインを整えていきます。ウェブページをより魅力的にするための方法を学んでいきましょう。

タイムスタンプ

0:01 [音楽] 0:09 はいじゃあえっと今日はHMLを書いて 0:12 みようというのをやってみたいと思います 0:14 どうもよろしくお願いしますお願いします 0:17 はいえっとですね今日はえっとhtmlを 0:20 書いてみようということで実際にhtml 0:23 を作ってみたいと思いますはいじゃあ行き 0:26 ますよまずはですね書く前にHTMLのに 0:30 ついてちょっとえご説明します今日やる 0:33 こと今日やることは架空の動物園ズロッパ 0:37 というサイトをえっと作っていきますでえ 0:41 素材などはですねサイトの方に用意して 0:44 ますのであのダウンロードして使って 0:47 くださいで今日の内容というのはHML 0:50 ページの作り方の基礎をやりますえこの 0:54 サイトを作っていくことによってHMの 0:56 何かを知るということと基本的なツールの 0:58 使い方とあとは基本的にHTMLタグと 1:01 いうものがありますのでそれを理解して 1:03 くださいでえっとじゃあま素材の準備です 1:08 ねえサイトのダウンロードと書いてある 1:11 とこからダウンロードして 1:13 くださいはいでHTMLエディターHTM 1:17 エターですね色々あるんですけれどもこの 1:20 講座ではえっとここに書いてあるサブライ 1:23 テキスト2というのを使っていきますこれ 1:26 はあのフリーとは少し違うんですよねあの 1:29 途中で買ってくださいというまアラートが 1:31 出るんですけどもえま買いたい人は是非 1:34 買っていただいてままだちょっとお金払い 1:36 たくないなという人はえっとま後でみたい 1:39 なものをしていただければそのまま使い 1:41 続けることができますで非常に優秀な 1:44 ソフトなのでこれを使ってくださいまだの 1:47 人はですねこのサブライムテキスト2と 1:49 検索してダウンロードしてくださいあとま 1:53 お好みでサクエディターとか 1:54 Windowsの人はねMacだったら 1:56 MIとかっていうのがありますのでえっと 1:59 こちらを使ってもいいでしょうではトップ 2:03 ページを早速作っていきますのでよろしい 2:06 ですかサブライムテキストの用いは 2:08 よろしいでしょうかはいはいじゃあえ 2:12 サブライムテキスト 2:15 でちょっとあらかじめちょっと出ちゃって 2:17 ますけども最初から作っていきますねはい 2:20 えこれはこっちやりましてではではえ 2:25 サブライムテキストのファイルメニュー 2:28 から新規ファイルを作っていただいてここ 2:31 にhtmlを作ってみましょうかこ 2:34 HTMLまずお決まりのものを書いていき 2:39 ますねHTMLの中に今度は2行目に移動 2:44 して 2:45 ヘッドかこヘッドの会場にいる皆さんやっ 2:49 てください 2:50 ねかこスラッシュ 2:54 ヘッド 2:56 で5行目に移動してボディかこスラッシュ 3:00 ポディはいちょっとねま高速でやって 3:03 しまってるんでえーまあまあ難しいかも 3:07 しれないですけどちょっとスクリーンの方 3:09 見てくださいねこれはHTML文書の基本 3:13 行動ですまず何はとわれこれを書くんです 3:16 よねHTMLの中に頭ヘッドとなる部分と 3:21 体ボディとなる部分を作りますで保存し 3:27 ますじゃあですねデスクトップに 3:32 フォルダーを適当に作っていただいて今回 3:34 はまズロッパというのを作ってますねそこ 3:38 にindxド 3:41 HTML必ず拡張子はド 3:45 HTMLで保存しますじゃあ保存 3:49 ねはいはいそうするとサブラムテキストは 3:53 この文書がHTMLだよっていうことを 3:55 認識して青になりましたはいついてこれ 3:59 ない方はですねあのまず見ましょうこれを 4:03 ねはいHTMLボディでこのまずヘッドの 4:09 中にですねこの文書のタイトルをつけるん 4:13 ですね 4:14 タイトルでこの中にはえじゃあ 4:19 ロパトキと書いておきますそうですこれは 4:24 ですねあのそのページを表すような 4:27 タイトルをけます例えばなんかが 4:29 Googleで検索するとここにタイトル 4:32 に書いてある文字が検索結果として出て 4:34 くるので非常にタイトルのけ方は 4:38 重要じゃあこれでえっとブラウザーでです 4:41 ねどうなってるか見てみましょうか 4:43 ブラウザーでえ右クリックするとオープ 4:48 インブラウザーというのが出ますの 4:50 でMacの方は2本指でタップすると 4:54 オーイブラウザーていうのが出てきますの 4:56 でこれを見てみましょうするとですですね 4:59 規定のブラウザが開きましてえ結果が出る 5:04 んですけどまも何も書いてありませんいい 5:06 んですまだですねえっとこのタイトル 5:12 部分に書いたものっていうのはえー皆さん 5:17 がいつも見ているようなところには表示さ 5:19 れませんじゃあえっとじゃあ左に 5:24 ブラウザーで右にコードにしてみましょう 5:28 かはい 5:30 でこのタイトルに書かれた部分っていうの 5:33 このタブには表示されてますねじゃあ今度 5:36 は 5:37 ボディ今度はボディに同じように 5:43 ズッパ 5:47 東京と書きますま上と同じなんですけども 5:51 これは保存して保存はコマンドS 5:55 Windows型コントロSブラウザーを 5:58 更新してみるとじゃちょっと見てください 6:00 ねこう出てき 6:02 ます今ねこのボディの中にこう書いてあん 6:07 ですこのボディの中に書かれているものは 6:11 皆さんがいつもブラウザーで見ている部分 6:15 に表示されますでこれは見出しなのでH1 6:20 というタグで囲みますこうするとH1これ 6:26 はみしなんだよっていうこと東京を大見 6:31 だしなんだよという意味を付与したことに 6:33 なりますでブラウザの更新ボタンをして 6:37 みるとうんこのテキストエディター保存し 6:41 てブラウザを更新すると太くて大きな文字 6:44 になってこれはまH1になりました 6:47 見出しじゃあ次はですねえっとこのH1の 6:52 下 6:53 に写真を入れてみますね写真は実は 6:57 まあまあデスクトップの 7:00 皆さんがダウンロードしていたいただいた 7:02 素材の中にライオンとかパンダとかトップ 7:08 とかが入ってますでこの画像をま表示し 7:12 たいんですけれど 7:14 もちょっとやってみますねじゃあ分かり 7:18 やすいように会議しましてかこIMG 7:22 スースSRC=WCOのえTOP.jp 7:30 でかこ閉じるこう書いてあげると画像を 7:34 表示しなさいということになりますので 7:36 画像が出てきますじゃブラウザーを更新し 7:40 てみましょうかうん出てきまし 7:42 た 7:44 このIMG択を書くことによってえ 7:48 ブラウザの中の画像を表示することが 7:50 できるんです 7:52 ねで大きさも変えられますwiidTH= 7:57 例えば200にすると 7:59 ちっちゃくなりますね横幅で高 8:03 さハイト=じゃあ400とかしてみると 8:10 高くなりますまでもこの通りこう幅と高さ 8:14 を変えることができるんですけども見ての 8:17 通り画像が結構荒れちゃいますよねだから 8:21 あんまりここのウとハイトではこのまHM 8:26 ではですね高さとか大きさ変えないんです 8:29 ね 8:29 もし写真の大きさを変えようとする場合に 8:32 はPhotoshopなどで変更して 8:35 もらってその実寸台まその通りの大きさを 8:39 表示するのがいいまじゃあ今日はこのウと 8:43 ハイトはなしにしといてでもう1つ必要な 8:50 オルトタグというのオルト属性というのが 8:53 あるんですねオルトこれはえっとその画像 8:58 の説明を書きます 9:01 動物円の画像ですっていうのはこれは絶対 9:07 書いといた方が 9:08 いいまここに何も変わったことはないん 9:11 ですけどもこのオルト属性っていうのを 9:14 つけることによってこの画像はどんな画像 9:17 かって意味を与えることができるんですだ 9:20 からまあまあ検索にね引っかかりやすいと 9:24 いうかま検索エンジンも理解しやすいよう 9:27 になるので画像に対しては必ずこのオルト 9:30 を書 9:31 ことはいじゃあえっと今日のですね最後 9:35 もう1つだけURタグというリストタグと 9:38 いうのがあり 9:40 ますアンオーダーリストと言うんですけも 9:43 例えば今回動物の名前を列挙してでそのま 9:49 表示したいという場合例えばですねじゃあ 9:53 えっと 9:55 パンダ 9:56 うんとライオン 9:59 えゾまこの3つがこの3種類の動物を表示 10:06 するとしたらですねま今こう書いて保存し 10:09 てブラウザーで更新するとま横にこう表示 10:12 されちゃいますよねこれはま過剰書きに 10:15 なっここでは過剰書きのように見えます 10:18 けどブラウザそ理解してないんですねで 10:21 どうするかと言うとタグというのを作り 10:24 まし 10:28 て 10:29 でその中にですねこれを書いていくえっと 10:35 そうさらにこの項目ごとにLiというのが 10:38 必要なんですけど 10:41 も例えばこういうことですね 10:44 パンダLi 10:47 ライオンスLi 10:51 Liちょっとめどくさいようにね感じるか 10:54 もしれないですけどもLiこういう風にし 10:57 て書いてあげないとこの下のを消してき 11:00 ましょう過剰がきになんないちょっと更新 11:03 してますねうんこうなりましたこのUL 11:07 タグとULタグの中にLiを入れることに 11:11 よってこういう風に過剰書きになるんです 11:14 よで例えばこれアンオーダーリストULな 11:18 んですけどOLっていうのに変えてみる 11:21 とうんここが番号になり 11:26 ますそうですねこれがえっとリストタグ 11:32 よく使えますんで覚えてみてくださいあと 11:34 もう1つだけ今日はリンクまでやってみ 11:37 ましょうねリンクというのがありまして 11:40 ですねえっと非常に重要なんで見てみます 11:45 ね 11:46 えっとじゃ 11:49 パンダパンダのページ作りましょうまず 11:52 これじゃあコピーしちゃいまし 11:56 てえパンダに買いますロッパ東京っての 12:00 パンダ全部パンダにし 12:04 ますでパンダの写真がありますのでえ 12:08 Panda 12:10 ドPanda.jpgでオルトタグが 12:14 Pandaえじゃ 12:16 Panda.HTMLで保存しますオルト 12:21 もパンダの写真 12:25 ですいいでしょうはいはい 12:29 でちょっとじゃスクリーン見てくださいね 12:31 今こう作ったもの 12:34 を見てみるとこうパンダのページができ 12:36 ましたあすごいでですねパンダのページが 12:41 できてチャイムがなってますけどもこの 12:45 パンダのページとINDEX.HM生きさ 12:48 せたいんですねまどういうことかって言う 12:50 とまトップページできたじゃないですか 12:53 こういう感じでね動物それぞれのページを 12:56 作ってでパンダをクリックするとパンダの 12:59 ページに行ってトップウをクリックすると 13:02 元に戻ってくるっていうのを作りたいん 13:04 です 13:05 ねどうするかと言いますとですねあはい 13:09 じゃあまずうパンダページこのタブで開い 13:13 てパンダに戻ると 13:19 戻ると書いてます今戻るって書い 13:23 てえっとこう見てみると戻るって出てる 13:28 じゃないですかでもこれクリックしても 13:30 まだね何もアクションが起こらないです 13:32 けどこれはリンクタグをつけてないから 13:34 ですねえじゃあこのサブライムテキストの 13:37 戻るのもの左にカーソル置いてかこASP 13:41 href=あダブコーテーションかこ 13:46 閉じるスシュAこう書いてあげるでこう 13:50 するとリンクタグになるんですけれども 13:53 ほらなんか出たじゃないですかでも 13:56 クリックしても何もアクション出ませんよ 13:59 ねなぜかて言うとこのダブル 14:01 コーテーションの間に何も書いてないから 14:03 ここに表示したいファイル名を書いて 14:06 あげるトップページっていうのは 14:09 INDEX.HMと名前をつけましたなの 14:12 でここにinx.HMと書いてあげる 14:17 と更新してみる 14:19 とうん戻ったじゃないですかそうじゃ今度 14:25 はINDEX.HMPandaをクリック 14:27 したら 14:29 Pandaページに行くようにするために 14:31 はINDEX.HTMLのPandaの 14:34 PAAにカソhref=Panda. 14:42 HTMLW括通るPandaの後ろにか 14:46 スシュAか投こう書いてあげると更新し 14:50 ましたPandaなりましよねPanda 14:52 クリックするとパンダページ行ってモル 14:54 クリックするとモルになりますはいなので 15:00 これができるように今日はなりましょうお 15:03 はいじゃあやり方はですねあのページの下 15:06 の方に書いてありますのでそこを読み 15:08 ながらえ実際にやってみて 15:11 くださいどうもありがとうござい 15:18 [音楽] 15:21 ます

前のレッスン 次のレッスン
レッスン一覧へ