基礎を簡単に教えて！
こんな悩みに答える記事になっています。
Webページを自分で作るときに欠かせないのがHTML。
HTMLを学習することで、1歩自分の思い通りのウェブデザインに近づけることが可能です！
今回は、そんなHTMLについて図やイラストなどを多く使用して基本的な部分を解説していきたいと思います！
maipyon
前半ではHTMLについてとコードの練習方法、後半ではよく使うタグについて紹介していきます。
この記事の目次
HTMLってそもそも何？
HTMLとは、そもそもどういうものでしょうか？
HTMLはサイトの骨組みみたいなものです。
HTMLを使用して、ここには画像を入れて、ここにはリンクを入れて・・・と指定してあげることで、ウェブページの情報を伝えてあげます。
HTMLを実際に見てみよう
HTMLは、簡単に見ることができます。
どこかのウェブサイト・・・例として、このページで右クリック→ページのソースを表示をすることで、難しそうな文字の羅列が出てきます。
これがHTMLで、Webページの構成情報が入っています。
HTMLはCSSとセットで考えるのが基本
残念ながら、HTMLだけを学ぶだけで綺麗なサイトは作ることができません。
HTMLは骨組み、CSSはデザイン側と考えればわかりやすいかもしれません。
上側がHTMLのみ、下側がCSSも書いて作ったページです。
下側のページのデザインが変わっています。
HTML、CSSの難易度は？
ここまで読む限り、HTMLだけじゃなくてCSSも学ばなきゃいけないのかよ・・・
難しそう・・・と思われている方もいるかもしれません。
ですが、HTMLやCSSはマークアップ言語、スタイルシート言語と言われていて、プログラミング言語とは別物です。
プログラミング言語よりも難易度は簡単ですし、考えやすい（わかりやすい）ものとされていますので安心してください。
私の場合は、HTMLとCSSは30時間ほどで習得しました。
プログラミングの習得時間はどれくらい？言語ごとの時間を現役エンジニアが解説
プログラミングの習得期間について、実際に何の言語に何時間かかったか？を含めて実体験を紹介。基礎学習に約250時間、成果を出すまでに400～600時間という感じでして、かなりしんどいかもしれません。
HTMLで何か書いてみよう
手を動かしつつでないと覚えることはできませんので、実際にHTMLで何か書いてみましょう。
<!DOCTYPE html> <html> <head> <title>ぴょんなことから</title> <meta charset="UTF-8"> </head> <body> <h1>簡単なページを作ってみよう！</h1> <p>HTMLについて学んでいこう！</p> </body> </html>
これがHTMLの一例です。
これをメモ帳にでもコピペして、名前を付けて保存→ファイル名.htmlで保存してみましょう。（本気でやるならちゃんとしたテキストツールを使いましょう）
maipyon
そのファイルをブラウザ(今回はChrome)にドラッグすると、表示されます。
書き換えたければファイルの中身を書き換えて上書き保存し、ブラウザを更新すればできます。
練習にはCodePenがオススメ
練習したいのであれば、いちいち書き換えてリロード・・・なんてのは面倒なので、Web上のツールに頼ることがオススメです。
CodePenを使用すれば、リアルタイムで反映されるだけでなく、同時にCSSやjavascript(jQuery)も書き込むことができるので、練習にはもってこいです。
Create a Penをクリック→以下の画面でレイアウト設定
赤枠の部分をクリックしていけば、見やすくなります。
HTMLの部分に、先ほどのHTMLを書き込めばリアルタイムで反映されるので簡単です。
練習としてHTMLコードを変えてみよう
練習としてHTMLコードを少し書き替えてみましょう！
その前に、HTMLコードで何を表しているかをサクッと説明します。
HTMLは大抵<名前>～</名前>で囲まれています。
<html>～</html>で囲まれた部分が、HTMLですよ！と認識させているということ。
同じように、<head>～</head>では、以下のようなものを書いていきます。
head内に書いていく内容
- そのページのタイトル
- CSS等の読み込み設定
- 検索したときに表示される様々な情報
などなど
難しいのでこの辺りは今のままで大丈夫です。
<head>～</head>では実際の画面への影響はなく、画面への影響があるのは<body>～</body>で囲まれた部分です。
その部分の日本語を変えてみると、きちんとその通りに反映されるかと思います。
以下の画像では、<h1>～</h1>の中身を書き換えてみました！
HTMLのタグについて学ぼう
HTMLのざっくりとした概要が分かったところで、タグについて学んでいきます。
タグとは、<名前>～</名前>のように、挟んでいたものです。
入れ子状態にすることもあり、そうすることで色々な状況に対応できます。
入れ子にすることで、緑色の箱の中に他の要素を詰めることができています。
入れ子構造を使っていくことで、自分の思い通りのデザインにしていくことができます。
上記の例ですと、「ここに装飾を入れたい」の部分にリボンの画像を入れ込む、とかが考えられますね。
HTMLのタグはなぜ必要？
タグは挟んで書いて、入れ子状態にもする、ということをお伝えしましたが、タグの名前が色々違うのはなんで？
という話をしていきます。
タグには色々な種類があります。<h1>,<h2>,<b>,<a>・・・それぞれに意味があります。（詳しい意味は後述します）
ロボット（検索エンジン）にウェブページ上の役割を伝える上で、タグをきちんと使い分ける必要があります。
例えば<h2>は見出し、<b>は強調などです。
基本的なHTMLタグのまとめ
タグそれぞれの役割や意味を学ぶ必要が出てきます。
Webページで使う頻出タグについて、基本的な部分について書いていきます。
参考にしつつ、Codepen上で書き込んで実際にどうなるかを確かめると理解が進みます。
h1,h2,h3,h4,h5,h6タグ
このタグは、見出しを表すタグです。
必ず数字を1つずつ減らしながら使うのがポイントで、h1タグの下にh3タグが来てしまうのは避けましょう。
基本的には、h1タグをタイトル、h2タグを見出し、h3タグを小見出しとして使います。
h4～h6までありますが、(個人的には）その辺りは使用頻度は少なめです。
aタグ
リンクのためのタグです。
書き方は以下の通りです。
<a href="https://maipyon.net">サイトのトップページに戻るよ</a>
サイトのトップページに戻るよ
中身に関して、href="ページのURL"とすることで、そのURLにジャンプするリンクを作成することができます。
別のタブで開かせるようにする方法や、リンクのデザインを変えてボタン風にする方法もありますが、ここでは割愛します。
imgタグ
イメージタグでは、画像をウェブサイト上で表示する際に使います。
<img src="https://maipyon.net/wp-content/uploads/2019/03/1b1146f5da128db2395f5b12fe1f9846.jpg" alt="アイキャッチ画像" />
src="画像の場所(URL)"という風に書くことで、狙った画像を出しています。
今回のコードでは、このページの一番上のアイキャッチ画像になっています。
また、alt="文字"と書くことで、代替テキストの設定をします。
画像が何かしらの原因で読み込まれなかったときに、この文字が表示されます。
注意点として、imgタグは今までのものと違って<img>～</img>のように終了タグがありません。
代わりに、<img ～ />とすることで、「終了タグはないよ」ということを伝えています。
pタグ
pタグは、パラグラフ・・・つまり段落を表すタグです。
このページ（というかこのサイト）自体、最も多く使用されているタグではないでしょうか。
<p>ここにテキスト</p>
タダの文章よりも、pタグを使って段落に区切ってあげることで見やすい文章にすることができます。
ul・ol・liタグ
ul・ol・liタグでは、箇条書きを表します。
まず、ulタグの方から説明します。
<ul> <li>箇条書き1</li> <li>箇条書き2</li> <li>箇条書き3</li> </ul>
- 箇条書き1
- 箇条書き2
- 箇条書き3
このような表示になります。
次に、olタグを使用した場合での違いも見てみます。
<ol> <li>箇条書き1</li> <li>箇条書き2</li> <li>箇条書き3</li> </ol>
- 箇条書き1
- 箇条書き2
- 箇条書き3
違いは、箇条書きが「・」になっているか「数字」になっているかです。
「・」ならば<ul>～</ul>、「数字」ならば<ol>～</ol>で<li>～</li>を挟めばできます。
コメントアウト
HTMLを書いていく中で、「ここからここに関しては○○の部分なんだけど、見にくいな～」なんて時に、コメントアウトを使います。
<!-- ここにコメントを書く -->
このように、<!--と-->で挟まれた文章はコメントアウトされ、見た目には反映されません。
HTML上に自分だけが分かるようなコメントを残しておけばOKです。
ただ、他の人からもコメント内容は見ようと思えば見えるので、変なことは書かないようにしましょう。
HTMLのdivタグとspanタグについて
最後に、divタグとspanタグについて説明をします。
このタグは、簡単に言えば構造を整えるのに使う、ブロックのようなもの。
CSSと合わせて考えるときに必須のタグとなります。
「おはよう」と「こんにちは」だけ、文字や背景色を変えたい。
こんな時に、divタグやspanタグを使ってグループ分けをします。
CSSを使わない今の状態では、見た目に変化はありません。
CSSを編集して、上側のグループは水色の文字にして、下側のグループはオレンジ色の文字にしました。
このようにデザインを含めた完成形を考えつつ、構造をHTMLで書いていくということが必要になります。
HTMLのdivとspanの違い
では、divタグとspanタグの違いは何でしょうか。
以下の画像では、「重要」という文字の部分をタグで囲んでみて比較しました。
違いとしては、divタグでは強制的に改行が入ってしまうということ。
一方spanタグでは改行が入りません。
この違いをどう使うんだ・・・？ということになりますが、例えば上記の例だと、「重要」という単語だけ赤字にしたい、という場合にはspanタグの方を使った方がいい、ということになりますね。
HTMLの基本のまとめ
今回の記事では、HTMLの基本について紹介しました。
CSSも合わせて学習しろ、と言われるとなかなか重い腰が上がらないとは思いますが、自由自在にデザインをできるようにして、よりよいサイト作りを目指していきましょう！
