初めてホームページを作る時にやるべきHTMLの学習

HTMLとは、Webページを作成するための言語の1つで、ハイパーテキストマークアップランゲージと呼ばれます。HTMLを使うことで、Webページにテキストや画像、動画などを表示させることができます。

まず、HTMLでWebページを作るには、テキストエディタと呼ばれるソフトウェアが必要です。テキストエディタは、テキストを編集するためのソフトウェアで、Windowsにはメモ帳が、Macにはテキストエディットが標準で搭載されていますが、代表的なテキストエディタは「VisualStudioCode」なんかもあります。

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code edit...

HTMLを作ってみよう
タグ、要素、属性を学ぶ
HTMLのタグについて
自己紹介をHTMLだけで作ってみよう

HTMLを作ってみよう

テキストエディタを開いて、新しいファイルを作成しましょう。ファイル名は「index.html」とします。

index.htmlの中身は以下のように記述します。

<!DOCTYPE html>
<html>
  <head>
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <p>段落のテキスト</p>
  </body>
</html>

これがHTMLの基本形です。まず、 <!DOCTYPE html> はHTML5でのDOCTYPE宣言で、HTMLのバージョンを指定しています。

次に、 <html> から </html> までがHTML文書の全体を囲むタグです。この中には、 <head> タグと <body> タグがあります。

<head> タグには、ページのタイトルを設定する <title> タグなど、ページ全体に関する情報を書きます。

<body> タグには、ページに表示される内容を書きます。ここでは、 <h1> タグで見出し1を作成し、 <p> タグで段落を作成しています。

これを保存して、ブラウザで開くと、簡単なHTMLページが表示されます。

タグ、要素、属性を学ぶ

HTMLでは、テキストの中に「要素」と呼ばれる部品を配置することで、ページのレイアウトや見た目を決定します。要素は、 < と > で囲まれた名前のことを指します。要素には、開始タグと終了タグがあります。たとえば、 <p> は段落を表す開始タグで、 </p> は段落を閉じる終了タグです。要素を構成するのは、「属性」と呼ばれるさまざまな情報です。属性は、要素に設定される詳細な情報を提供します。属性は、開始タグに配置され、属性名と属性値のペアで構成されます。

たとえば、 <a> タグは、リンクを作成するための要素です。 <a> タグには、 href 属性が必要で、リンク先のURLを指定します。例えば、以下のように書くことができます。

<a href="https://example.com">リンクのテキスト</a>

このように、 a 要素は、 href 属性を持っています。この属性は、 https://example.com というURLを指定するために使用されています。

また、要素には、 <img> タグのように終了タグが必要ないものもあります。これらは、「空要素」と呼ばれます。空要素は、単一の開始タグで構成されており、属性が付与されています。たとえば、以下のように書くことができます。

<img src="画像のURL" alt="画像の説明">

img 要素には、 src 属性があります。これは、表示する画像のURLを指定するために使用されます。 alt 属性は、画像が読み込めない場合に代わりに表示されるテキストを指定するために使用されます。

HTMLには、多くの要素と属性があります。それぞれの要素や属性には、特定の機能や目的があります。しかし、すべてのHTML要素を覚える必要はありません。HTMLを学ぶ過程で、よく使用される要素と属性を覚えることが大切です。

HTMLのタグについて

HTMLには、様々な目的のためのタグが存在します。一般的には、以下のようなタグが使用されます。

見出しを表示するための <h1> ~ <h6> タグ
段落を表示するための <p> タグ
リンクを作成するための <a> タグ
画像を表示するための <img> タグ
リストを表示するための <ul> (箇条書き) および <ol> (番号付きリスト) タグ
テーブルを表示するための <table> タグ
フォームを作成するための <form> タグ
テキスト入力欄を作成するための <input> タグ
ボタンを作成するための <button> タグ
セクションを表示するための <section> タグ
フッターを表示するための <footer> タグ
ヘッダーを表示するための <header> タグ

このように、HTMLには様々なタグが存在します。それぞれのタグは、特定の目的に沿って使用されます。以下は、よく使用されるHTMLタグの一覧です。

タグ	説明
`<html>`	HTMLの開始を示すタグ
`<head>`	ページのヘッダー情報を含むタグ
`<title>`	ページのタイトルを示すタグ
`<body>`	ページの本文を含むタグ
`<h1>` ~ `<h6>`	見出しを示すタグ
`<p>`	段落を示すタグ
`<a>`	リンクを作成するタグ
`<img>`	画像を表示するタグ
`<ul>`	箇条書きリストを示すタグ
`<ol>`	番号付きリストを示すタグ
`<li>`	リストのアイテムを示すタグ
`<table>`	テーブルを示すタグ
`<tr>`	テーブルの行を示すタグ
`<th>`	テーブルのヘッダーセルを示すタグ
`<td>`	テーブルのデータセルを示すタグ
`<form>`	フォームを作成するタグ
`<input>`	テキスト入力欄を示すタグ
`<button>`	ボタンを作成するタグ
`<section>`	セクションを示すタグ
`<footer>`	フッターを示すタグ
`<header>`	ヘッダーを示すタグ
`<nav>`	ナビゲーションメニューを示すタグ
`<aside>`	補足情報を示すタグ
`<article>`	一つの記事やコンテンツを示すタグ
`<main>`	メインのコンテンツを示すタグ
`<div>`	ブロック要素をまとめるためのタグ
`<span>`	インライン要素をまとめるためのタグ
`<strong>`	強調したいテキストを示すタグ
`<em>`	強い強調を示すタグ
`<br>`	改行を示すタグ
`<hr>`	水平線を示すタグ
`<style>`	CSSのスタイルシートを定義するタグ
`<script>`	JavaScriptのコードを定義するタグ
`<meta>`	文書のメタ情報を定義するタグ

これらのタグは、HTMLドキュメントの中で自由に使用することができます。ただし、正しく使用するためには、それぞれのタグがどのような効果を持ち、どのように使用するのかを理解する必要があります。

自己紹介をHTMLだけで作ってみよう

自己紹介のWebサイトを作成する際には、以下のような構成が一般的です。

ヘッダー

サイトのタイトルやナビゲーションなど、全体のレイアウトを設定する。

自己紹介部分

自己紹介文、趣味や興味を持っていることなどを書く。

スキルや経験の紹介

学習したプログラミング言語やツール、実務経験などを紹介する。

作品集の紹介

自分が作成したWebサイトやアプリなどを紹介する。

お問い合わせフォーム

訪問者からのお問い合わせを受け付けるフォームを設置する。

以下に、上記の構成に沿ったHTMLコードのサンプルを示します。ただし、デザインやスタイルなどは省略しています。

<!DOCTYPE html>
<html>
<head>
<title>自己紹介</title>
</head>
<body>
<header>
<h1>自己紹介サイト</h1>
<nav>
<ul>
<li><a href="#about">自己紹介</a></li>
<li><a href="#skills">スキル</a></li>
<li><a href="#works">作品集</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<section id="about">
  <h2>自己紹介</h2>
  <p>はじめまして、私は〇〇と申します。〇〇県出身で、現在は〇〇市に住んでいます。</p>
  <p>趣味は読書と旅行で、特に歴史小説や海外の都市を巡るのが好きです。</p>
  <p>大学では〇〇学部を専攻し、現在は〇〇会社に勤めています。主に〇〇の開発を担当しています。</p>
</section>
<section id="skills">
  <h2>スキル</h2>
  <ul>
    <li>HTML/CSS</li>
    <li>JavaScript/jQuery</li>
    <li>PHP/MySQL</li>
  </ul>
</section>
<section id="works">
<h2>作品集</h2>
<ul>
<li><a href="#">〇〇サイト</a></li>
<li><a href="#">〇〇アプリ</a></li>
<li><a href="#">〇〇ツール</a></li>
</ul>
</section>
<section id="works">
  <h2>作品集</h2>
  <div class="work">
    <img src="img/work1.jpg" alt="作品1">
    <h3>作品1のタイトル</h3>
    <p>作品1の説明文がここに入ります。</p>
  </div>
  <div class="work">
    <img src="img/work2.jpg" alt="作品2">
    <h3>作品2のタイトル</h3>
    <p>作品2の説明文がここに入ります。</p>
  </div>
  <div class="work">
    <img src="img/work3.jpg" alt="作品3">
    <h3>作品3のタイトル</h3>
    <p>作品3の説明文がここに入ります。</p>
  </div>
</section>
<section id="contact">
  <h2>お問い合わせ</h2>
  <form action="send.php" method="post">
    <div>
      <label for="name">お名前：</label>
      <input type="text" id="name" name="name" required>
    </div>
    <div>
      <label for="email">メールアドレス：</label>
      <input type="email" id="email" name="email" required>
    </div>
    <div>
      <label for="subject">件名：</label>
      <input type="text" id="subject" name="subject" required>
    </div>
    <div>
      <label for="message">お問い合わせ内容：</label>
      <textarea id="message" name="message" rows="5" required></textarea>
    </div>
    <div>
      <input type="submit" value="送信">
    </div>
  </form>
</section>
<footer>
<p>&copy; 2023 自己紹介サイト</p>
</footer>
</body>
</html>

このコードでは、ヘッダー部分にサイトのタイトルとナビゲーションを設置し、各セクションに自己紹介、スキル、作品集、お問い合わせフォームを設置しています。最後に、フッター部分にコピーライトの表示を設置しています。

注意点として、このコードは見た目やスタイルの設定が省略されているため、実際に表示するとデフォルトのスタイルで表示されます。デザインやスタイルを加える場合は、CSSを追加する必要があります。また、お問い合わせフォームの送信先や処理なども必要に応じて設定する必要があります。