見出し画像

初心者でもできる！HTML/CSS/JavaScriptで創る、癒しのドットアート #2.5（補足回）HTMLタグの世界へようこそ！ - ウェブサイト作りの第一歩（前半）

code

【PR】

この補足記事では、第2回で学んだHTMLについて、さらに詳しく解説していきます。特に、よく使うHTMLタグと、それらを組み合わせた簡単なウェブサイトの作り方に焦点を当てて、初心者の方にもわかりやすく説明します。

第2回の内容を理解していれば、この補足記事は読み飛ばしても構いません。しかし、「もっとHTMLについて知りたい！」、「タグの使い方を詳しく学びたい！」、「簡単なウェブサイトを作ってみたい！」という方は、ぜひこのまま読み進めてみてください。

HTMLタグをもっと知ろう！

HTMLはタグを使って文書の構造を記述していく言語です。ここでは、ウェブサイト制作でよく使う代表的なタグを紹介します。

見出しタグ <h1> 〜 <h6>

見出しを表すタグです。<h1> が最も大きな見出しで、数字が大きくなるにつれて、<h2>、<h3>、<h4>、<h5>、<h6> と、見出しが小さくなっていきます。

<h1>これは最も大きな見出しです</h1>
<h2>これは2番目に大きな見出しです</h2>
<h3>これは3番目に大きな見出しです</h3>
<h4>これは4番目に大きな見出しです</h4>
<h5>これは5番目に大きな見出しです</h5>
<h6>これは最も小さな見出しです</h6>

段落タグ <p>

文章の段落を表すタグです。

<p>これは段落です。ここに文章を書きます。</p>
<p>これは別の段落です。段落を分けると、文章が読みやすくなります。</p>

改行タグ <br>

文章の途中で改行したいときに使うタグです。終了タグがないことに注意してください。

<p>この文章の途中で<br>改行します。</p>


リンクタグ <a>

他のページへのリンクを作成するタグです。href 属性でリンク先のURLを指定します。

<a href="https://www.google.com">Googleへ移動</a>

これは、「Googleへ移動」というテキストに、https://www.google.com へのリンクを設定しています。

画像タグ <img>

ウェブページに画像を埋め込むためのタグです。src 属性で画像のファイルパスを指定し、alt 属性で画像の説明文を記述します。終了タグがないことに注意してください。

<img src="image.jpg" alt="美しい風景">

この例では、image.jpg という画像ファイルを表示し、画像の説明文として「美しい風景」を設定しています。

リストタグ <ul>、<ol>、<li>

リスト（箇条書き）を作成するためのタグです。

  • <ul>: 順序のないリスト（unordered list）

  • <ol>: 順序のあるリスト（ordered list）

  • <li>: リストの項目（list item）

<!-- 順序のないリスト -->
<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

<!-- 順序のあるリスト -->
<ol>
  <li>手順1</li>
  <li>手順2</li>
  <li>手順3</li>
</ol>

表組みタグ <table>、<tr>、<td>、<th>

表を作成するためのタグです。

  • <table>: 表全体を表します。

  • <tr>: 表の行（table row）を表します。

  • <td>: 表のデータセル（table data）を表します。

  • <th>: 表の見出しセル（table header）を表します。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>出身地</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30</td>
    <td>東京</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>25</td>
    <td>大阪</td>
  </tr>
</table>


その他のよく使うタグ

  • <span>: テキストの一部にスタイルを適用したり、JavaScriptで操作したりするために使います。

  • <hr>: 水平の罫線を表示します。終了タグはありません。

  • <!-- コメント -->: コメントを記述します。コメントはブラウザには表示されず、コードの説明などを書くために使われます。

タグの属性

タグには、属性 を追加して、さらに詳しい情報を設定することができます。属性は、開始タグの中に 属性名="属性値" の形で記述します。

例えば、<a> タグの href 属性は、リンク先のURLを指定するための属性です。

<a href="https://www.example.com">リンク</a>

また、<img> タグの src 属性は、画像のファイルパスを指定するための属性です。

<img src="image.jpg" alt="画像の説明">

このように、属性を使うことで、タグの動作や表示を細かく制御することができます。

簡単なウェブサイトを作ってみよう

これまで学んだHTMLタグを使って、簡単なウェブサイトを作ってみましょう。以下の手順で進めていきます。

  1. テキストエディタを開く
    前回インストールした、VS CodeやAtomなどのテキストエディタを起動しましょう。

  2. 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>
    <h1>自己紹介</h1>

    <h2>私の名前</h2>
    <p>私の名前は、[あなたの名前]です。</p>

    <h2>趣味</h2>
    <ul>
        <li>読書</li>
        <li>映画鑑賞</li>
        <li>旅行</li>
    </ul>

    <h2>好きな食べ物</h2>
    <p>好きな食べ物は、ラーメンと寿司です。</p>

    <img src="profile.jpg" alt="プロフィール画像">

    <p><a href="https://www.example.com">他のサイトへのリンク</a></p>
</body>
</html>


出力イメージ

[あなたの名前] の部分は、自分の名前に書き換えてください。

また、profile.jpg は、ご自身で用意した画像ファイルに置き換えてください。画像は、HTMLファイルと同じフォルダに保存しておくと良いでしょう。

  1. HTMLファイルの保存
    dot-art フォルダの中に、my-first-website.html という名前でファイルを保存します。

  2. ウェブサイトの表示
    保存した my-first-website.html ファイルをダブルクリックするか、ウェブブラウザにドラッグ＆ドロップして開きます。

    1. 自己紹介文や画像などが表示された、簡単なウェブサイトが表示されれば成功です！

まとめ (前半)

今回は、HTMLの基本的なタグと、それらを使った簡単なウェブサイトの作り方について学びました。

  • HTMLはタグを使って文書の構造を記述する

  • 様々なタグを組み合わせて、ウェブページを作成できる

  • タグに属性を追加することで、さらに細かい設定ができる

後半予告

この補足記事の後半では、今回作成したウェブサイトにCSSを適用して、見た目を整える方法を解説します。また、HTMLの属性についても、さらに詳しく見ていきます。

さらに、今回紹介しきれなかった便利なHTMLタグも紹介する予定です。

お楽しみに！

この補足記事が、HTMLの理解を深める一助となれば幸いです。後半もぜひご覧ください！

【必読】Webデザインの入門書

  1. 『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』

  2. 『これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本』

  3. 『HTML/CSSブロックコーディング デザインをすらすら再現できる』

これらの書籍は、Webデザインの基礎を学ぶのに最適な入門書です。HTMLとCSSの基本的な知識から、デザインの実践的なテクニックまで、幅広くカバーしています。1冊目として、しっかりと基礎を固めたい方におすすめです。


いいなと思ったら応援しよう！