HTML超基礎入門

本記事の目次

はじめに
HTMLを書いてみよう
基本文法について
属性について
ネスト
よく使われるタグ一覧
h1〜h6
p
img
div
a
よく使われる属性一覧
class
id
style
おわりに

はじめに

この記事はHTMLやWebについての知識が一切なくても読めるようにしています。
また、なるべく簡潔にまとめているのでぜひ読んでみてください。

HTMLを書いてみよう

まずはHTMLを書いてみましょう。
環境は統一しておきたいので、今回はJSFiddleというWebアプリを使います。
JSFiddleにサインアップしてください。
また、PCでHTMLを書いて閲覧できる方はそれでも良いです。

サインアップが終わったら、エディタが開かれると思いますので、そこのHTML欄に

@html
<h1>こんにちは、世界！</h1>
<p>これはHTMLの文書です。</p>

をコピペして入力してください。
そうしたら、上にあるRun(実行)のボタンを押して実行しましょう。

こんな感じに表示されたと思います。
これがHTMLの文書です。
これをいい感じにスタイルしたり、いじることで私のこのサイトのような素晴らしいHTML(!?)ができます。

また、これから先ではHTMLコードを記述するだけしているので、もしHTMLの出力結果を見たいと思った場合は各自でJSFiddleを動かすようお願いします。

基本文法について

まず、最初に皆さんに理解してもらっておきたいのが、

全角と半角は全く違う

ということです。HTMLのコードは基本的に半角で記述しましょう。
これを全角にすると機能しなくなるため気を付けてください。

それでは文法の解説をします。
まず、コードは

@html
<h1>こんにちは、世界！</h1>
<p>これはHTMLの文書です。</p>

というような感じでした。これからわかるように

<タグ名> コンテンツ </タグ名>

というような文法になっています。
これの<タグ名> が開始タグ、</タグ名> が終了タグといいます。
HTMLは開始タグと終了タグでコンテンツを挟むというのが基本的文法です。

が、これにも例外というものがあります。
例えばimgタグというタグは画像を表示するためのタグなのですが、これは中身のコンテンツを記述する必要が無いです。
そのため、<img />のような形で記述することができます。こういうのを空要素タグといいます。
ただ、これができるのは一部タグだけなので、h1タグやpタグなどをこのような書き方で書かないようにしておきましょう。

imgタグなどの空要素タグは<タグ名> という書き方もできますが、JSXという記法では<タグ名 /> という書き方を強制されるので、HTMLでも<タグ名 /> の書き方で覚えておきましょう。

属性について

さて、これだけでHTMLが記述できたらいいですが、HTMLにはまだいくつか要素があります。
それが、属性(Attributes)です。

@html
<h1 class="heading">こんにちは</h1>
<img src="https://image.shutterstock.com/image-photo/closeup-portrait-funny-ginger-cat-260nw-1563541219.jpg" alt="猫の画像" />

このように属性を追加できます。
要は属性は属性名="属性内容" のように定義(この際" も勿論半角で)し、
属性同士は (半角スペース)で区切るというものです。
案外簡単です。

ネスト

h1タグの中にpタグとimgタグを追加したい...などと思った場合タグのネストが可能です。

空要素の中には当然ネストはできませんので注意してください

@html
<h1>
  <p>本文テキスト</p>
  <img src="https://image.shutterstock.com/image-photo/closeup-portrait-funny-ginger-cat-260nw-1563541219.jpg" alt="猫" />
</h1>

のように記述できます。
また、

では、これまでの知識を応用して、いくつかよく使うタグをしょうかいします。

よく使われるタグ一覧

h1〜h6

h1が一番大きく、h6が一番小さい表題を表示するタグ。
大きい順からh1、h2、h3、h4、h5、h6という風にタグが存在する。

p

一般的な文字サイズの本文を表示するタグ。

img

画像を表示するタグ。
src 属性には画像のパスやURLを入力し、alt 属性には画像が表示できなかった場合の代わりのテキストを入力する。

div

タグをまとめるためのタグ。

@html
<div>
  <h1>...</h1>
  <p>xxx</p>
</div>

のように利用する。

a

リンクを追加するタグ。
href 属性に移動先URLを設定する。

@html
<a href="https://example.com/foo/bar">リンク</a>

このようにたくさんのタグがまだまだあります。
ぜひ色々調べてHTMLタグマスターになりましょう。

よく使われる属性一覧

汎用的に使われる属性はかなり限定されます。

`class`

その要素が入るクラスを定義します。
CSSというスタイルを定義するときによく使います。
複数のクラスを設定したいときは半角スペースでclass1 class2 class3のように区切りましょう。

`id`

その要素のIDを定義します。
よくJavaScriptなどで操作するときに使います。
(JavaScriptは今回は使用しません)
複数設定はできません。IDは一意なものにしましょう。

`style`

直でCSSスタイルを定義するための属性です。
例えばstyle="color: red;"と書くと文字色が赤になります。

他にも色々属性はあるのでぜひ調べてみてください。

おわりに

今回はどうでしたでしょうか。
簡単にHTMLについて解説をしてみました。
この程度の知識だとまだWebサイトを作成するには難しいですが、基礎知識は身についたと思いますので、ぜひこれからは自分で調べてみてHTML、CSS、JavaScriptとそれぞれマスターしていきましょう。
Webサイトを作れる程度の知識が身についたら、ぜひ教えてください！