【WEB開発入門-HTML＆CSS講座vol.1】タグについて(初学者向け)

今回はHTML＆CSSについて解説していきます。

今後WEB開発について勉強していく上で、フロントエンド、バックエンド関わらず必須の知識になります。

フロントエンドであれば、HTMLの要素を加工したり、CSSの要素を追加、削除することでWEBページの見た目に変化をつけていきます。

バックエンドであれば、クライアントからのリクエストを処理して、HTMLとして画面に映す情報をクライアントに返して、WEBページをクライアントに届けることができます。

そのため、HTMLとCSSの知識はWEB開発プログラミングを学習する上で必須の知識になります。

今回は、簡単ではありますが、HTML＆CSSについて学習して今後のプログラミングの学習に繋げていきたいと思います。

まず、デスクトップ上にフォルダを作成してください。(フォルダ名は何でも構いませんが、画像内ではHTML&CSS講座としています。)

次にVIsual Studio Codeを起動して、Visual Studio Code上でフォルダを開いてください。

次にindex.htmlというファイルを作成します。

作成したファイルに次のように書きます。

<h1>Hello World</h1>

次に、Google ChromeやMicrosoft EdgeなどのWebブラウザを起動します。

WindowsであればExlorer、MacであればFinder上で先ほど作成したフォルダを開き、index.htmlを先ほど起動したブラウザにドラックアンドドロップをします。

そうすると下記の画像のように表示されます。

WEBブラウザは読み込んだHTMLを決められたルールに従ってブラウザ上に表示させることができます。

その中で今回の<h1></h1>のようなHTMLでどのように表示させるかを決める記号をタグといい、<h1>のようにタグの開始を表すものを開始タグ、</h1>タグの終わりを表すタグを終了タグといいます。

今回おこなったh1タグは文字を太く表示し、見出しなどに使われるタグになります。

タグの種類はたくさんありますが、基本的なタグは下記になります。

* h1～h6要素（<h1>～<h6>）：見出しやタイトルを表すタグです。12 数字が小さいほど重要度や階層が高くなります。2 body要素の中に記述します。1

* p要素（<p>）：段落を表すタグです。12 body要素の中に記述します。1

* a要素（<a>）：リンクを表すタグです。12 href属性でリンク先のURLを指定します。2 body要素の中に記述します。1

* img要素（<img>）：画像を表すタグです。12 src属性で画像ファイルのURLを指定します。2 alt属性で画像が表示されない場合の代替テキストを指定します。2 body要素の中に記述します。1

* div要素（<div>）：ブロックレベルのコンテナを表すタグです。他の要素をまとめたり、CSSでスタイルを指定したりするときに使います。

* span要素（<span>）：インラインレベルのコンテナを表すタグです。文字や画像などの一部分にスタイルを指定したりするときに使います。

* ul要素（<ul>）：順序のないリストを表すタグです。 li要素（<li>）と組み合わせて使います。

* ol要素（<ol>）：順序のあるリストを表すタグです。 li要素（<li>）と組み合わせて使います。

* table要素（<table>）：表を表すタグです。 tr要素（<tr>）、th要素（<th>）、td要素（<td>）と組み合わせて使います。

* form要素（<form>）：フォームを表すタグです。 action属性で送信先のURLを指定します。 method属性で送信方法を指定します。

* input要素（<input>）：フォームの入力欄を表すタグです。 type属性で入力欄の種類を指定します。 name属性で入力欄の名前を指定します。

* button要素（<button>）：ボタンを表すタグです。 type属性でボタンの種類を指定します。