【サンプルコード付き】はじめてのHTML入門 #1

2023年5月22日2023年5月28日

はじめてのHTML入門 #1

HTMLファイルのテンプレート

HTMLファイルは最初に以下のようなものを書きます。これはテンプレートのようなものなので、HTMLファイルを作成する際にはじめに記述しておきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<h1>タグ：見出しの作成

h1タグでは見出しを追加します。以下の内容をbodyタグ内に加筆してください。

<h1>これは見出しを表すh1タグで囲まれた内容です。</h1>

加筆したHTMLファイルを保存して開くと、「これは見出しを表すh1タグで囲まれた内容です。」という文字列が書かれていることが確認できます。

見出しは<h1>から<h6>まであり、数字が小さいほど見出し文字は大きくなります。実際に先ほど加筆した部分を下に置き換えると分かりやすいと思います。

<h1>これは見出しh1です。<h1>
<h2>これは見出しh2です。<h2>
<h3>これは見出しh3です。<h3>
<h4>これは見出しh4です。<h4>
<h5>これは見出しh5です。<h5>
<h6>これは見出しh6です。<h6>

<p>タグ：段落の作成

段落を追加するには<p>タグを使います。bodyの中身を以下のコードで置き換えてください。

<h1>これは見出しh1です。</h1>
<p>これは段落を表すpタグで囲まれた内容です。</p>

<a>タグ：リンクの作成

文字にリンクを埋め込む場合は<a>タグを使います。bodyの中身を以下のコードで置き換えてください。

<a href="https://edaha-room.com/">えだはの部屋へのリンク</a>

これで「えだはの部屋へのリンク」という文字をクリックすると、href=の後ろにあるダブルクォーテーションで囲まれた先のリンクに飛ぶことができます。

えだはの部屋へのリンク ←こういうやつ！

<img>タグ：画像の表示

画像を表示するには<img>タグを使います。はじめに「test.png」という適当な画像ファイルをhtmlファイルと同じフォルダに用意してください。その後、bodyの中身を以下のコードで置き換えてください。

<img src="test.png">

これで用意した画像ファイルであるtest.pngが表示されたと思います。

「img src=」のあとに入れる内容を絶対パス（web上の画像があるリンク先）にすれば、ファイルパス先の画像が表示されるようになります。
例を挙げると、このブログの著者紹介で使っている画像を表示するには以下のように入力します。

<img srd="https://edaha-room.com/wp-content/uploads/profile-1.png">

Chromeの場合、絶対パスは画像を右クリックしたときに出る「画像アドレスをコピー」で入手することができます。

<li>タグ：リストの作成

リストを作成する際には<li>タグを使います。bodyの中身を以下のコードで置き換えてください。

<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>

なお、リストの内容をまとめるには<ul>タグや<ol>タグを使います。まずは例を見てみましょう。

<ul>
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
</ul>

<ol>
    <li>リストa</li>
    <li>リストb</li>
    <li>リストc</li>
</ol>

<ul>タグで囲まれたリストは黒点でリストが表示されます。表示は下みたいな感じです。

リスト１
リスト２
リスト３

一方、<ol>タグで囲まれたリストは数字の連番でリスト表示されます。表示は下みたいな感じです。

リストa
リストb
リストc

<ul>タグについて意味が無いと感じるかもしれませんが、リストを一括に処理したいときなどに<ul>タグで囲んでおくと処理が楽になります。

コメントアウト

HTMLファイルにコメントアウトしたい場合は「<!–　–>」で囲います。例を下に挙げておきます。

<!-- カレーに使う野菜リスト -->
<ul>
    <li>じゃがいも</li>
    <li>玉ねぎ</li>
    <li>人参</li>
</ul>

上記の例ではリストの内容を明確にするために、１行目の「カレーに使う野菜リスト」をコメントアウトしています。

確認問題

ここでは、「はじめてのHTML入門 #1」で学んだ内容をまとめた確認問題を掲載します。

事前準備

まず以下の手順に沿って事前準備をしてください。

任意の場所に「Test_HTML」というフォルダを作成
フォルダTest_HTML内に「Test１」というフォルダを作成
フォルダTest1内に「test1.html」というHTMLファイルを作成
下にある画像１を「test1_picture.png」という名前でフォルダTest1内に保存

作成するもの

下にある「test1_sample」という名前のHTMLファイルをTest1フォルダ内に保存し、Webブラウザで開いてください。

test1_sample ダウンロード

今回はこのHTMLファイルと同じ内容になるようにtest1.htmlファイルをコーディングしてください。

難しいと感じる方は記事を見返しても全然構わないので、実際に手を動かして内容を復習しましょう！

解答例

実際にtest1.indexのコーディングが終わったら、以下のプルダウンをクリックして解答例を確認しましょう！

解答例

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>はじめてのHTML入門 #1</h1>
    <img src="test1_picture.png">
    <h2>今回の学習内容</h2>
    <p>今回は<a href=https://edaha-room.com/html_class1/1320 />このサイト</a>を使ってHTMLで使う基本タグについて学習した。学習内容は以下の通り。</p>
    <ul>
        <li>見出しを作成する"h1"タグ</li>
        <li>段落を作成する"p"タグ</li>
        <li>リンクを作成する"a"タグ</li>
        <li>画像を表示する"img"タグ</li>
        <li>リストを作成する"li"タグ</li>
        <li>コメントアウトの記述方法</li>
    </ul>
    <h2>次回学習内容</h2>
    <p>次回は表などの作成方法について学習予定。</p>
</body>

</html>

上記はあくまで解答例なので、空白やインデントの挿入の違いについては気にしなくても大丈夫です！

リンク