誰も教えてくれないHTMLの基礎の基礎

ハウツー
蛙のicon

こんにちは、蛙です。
今回は本気でガチの素人向けにHTMLの説明をしてみます。 私も素人に毛が生えたくらいのレベルではあるのですが、毛が生えるまでにも試練があるなと感じたので…。 本当に、ここを乗り越えないと産毛すら生えないまま去っていくことになるので、これからHTMLを勉強する人にとっては超重要事項です!

Progateは初心者向けじゃなかった!

私は、最初の頃はProgateというサイトを使ってHTMLの勉強をしていました。 しかし、個人的にはProgateすら中級者向けというか、なんとなく制作現場がどんなものがわかってる人向けの印象を受けました…。 あれのHTML&CSSコースを全部受けても、サイトを作れるようにはならないです。

Progateの講座を受けてみた

Progate
ProgateのHTML講座を始めると、まず真ん中にHTMLを入力するための黒い画面、右にプレビューと見本、そして左側に「こんな風に記述してね」という説明があります。
課題自体は超簡単です。 また、HTML&CSSコースはすべて無料なので、誰でも課金なしで最後のレッスンまでこなせます。

急に無の空間に放り出される恐怖…

全レッスンが終わったら、やはりゼロから自分で書いてみたい、実践したいと思いますよね。 しかし、あの入力するための黒い画面が、私のPCではどこにあるのかわからない…。 PCにもともと備わっている機能なのか、何かツールをダウンロードしないといけないのか、それすらもわからない上にProgateのレッスンでは一切説明もない。 本当はどこかで説明されているけど、それすら理解できていないのかもしれません…。 素人が何をわかっていないのかもわかっていない、プロ目線の講座って感じがしました。
コロちゃんくらい理解力のある人なら、Progateを使ってもいいと思います。

本当に本当の基礎から教えます!

Prgateに限らず、IT業界って素人向けの情報がなさすぎますね。 いわゆる初心者向けとされているものは、ちょっとわかってきた人向けなので、ガチの素人向けではないです。
なので、本当にゼロから始める人のための最初の1~10歩目くらいまでの道のりを私なりにまとめてみました。 ここを乗り越えれば「初心者向け」に手を出しても大丈夫だと思います。

HTMLファイルを用意する

1.
PCのデスクトップ上で右クリック→「新規作成」→「テキストドキュメント」と選択。
2.
テキストドキュメントの名前を「index.html」に変更。 ※拡張子(.txt)も消す!
3.
この時、「拡張子を変更すると~」という警告が表示されるかもしれませんが、「はい」を選択でOKです。
HTMLファイルができました! このファイルがPrgateでの黒画面、つまり作業場所になります。

HTMLファイルの中を見てみる

さきほど作ったHTMLファイルはまだ中身がなく真っ白な状態です。 とりあえずページとして機能するように、最低限の情報を記述してみましょう。
index.htmlの上で右クリック→「プログラムから開く」→「メモ帳」を選択してください。 中の記述はとりあえずこれをコピペでOK。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ページタイトル</title> </head> <body> ページの中身 </body> </html>

<!DOCTYPE html>

「これはHTML5で書いてありますよ!」という宣言です。

<html></html>

htmlの中身。

<head></head>

ページの情報を記述する部分です。 SEO関連の設定もこちらに記述します。
非常に重要な部分ですが、ほとんどの記述はサイト上には目に見える状態では表示されません。

<meta charset="UTF-8">

文字コードの指定。 これを書いていないと、文章が文字化けする恐れがあります。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport設定と言われるものです。 詳しくはわかりませんが、これがGoogle推奨の記述なので、そのまま書いておきましょう。

<title></title>

ページタイトルです。 ブラウザのタブなどに表示されるほか、ページをブックマークする際にもデフォルトでこの部分の記述が表示されます。
Yahoo!JAPANの場合こんな感じ。
Yahoo!JAPAN

<body></body>

ここにページに表示するコンテンツが入ります。

ブラウザに表示させてみる

作ったHTMLファイルをブラウザで確認してみます。
index.htmlの上で右クリック→「プログラムから開く」→「Google Chrome」などのウェブブラウザ選択してください。
HTMLファイル
こんな風に表示されていればOK!
閉じタグが抜けていたり、英語の綴りが間違っていると、うまく表示されないことがあるので注意しましょう。
このファイルはまだURLも無く、Google検索してもたどり着けない自分だけの空間です。 <title><body>タグの中身を書き換えてみるなど、思うさまHTMLの練習場として活用してくださいね。

CSSでスタイルを調整する

1.
HTMLファイルを作ったのと同じ要領で、「style.css」という名前のファイルを作成する。
2.
HTMLファイルの<head>タグ内に、以下の記述を追加。 <link rel="stylesheet" href="style.css">
3.
適当な名前のフォルダを作成し、HTMLファイルとCSSファイルを入れる。
4.
適用したいスタイルをCSSファイルに記述していく。

黒画面の謎

今回はメモ帳を使って簡易的に編集したため、黒画面は使いませんでした。 黒画面はテキストエディタと呼ばれるもので、Atomやサクラエディタなどさまざまなものがあります。 私は主にVisual Studio Codeを使うことが多いです。
Visual Studio Codeにはタグに色が付く、閉じタグが自動的に挿入される、インデントが揃えやすいなどの便利な機能が備わっています。 本格的にHTMLのコーディングをしたい方は早めにダウンロードしておくと良いですよ。 なぜかIT関係の人は黒画面が好きが多いですが、設定変更で白背景にすることもできるのでご安心ください。

まとめ

オンラインの講座は便利なのですが、色々準備され過ぎていて、本当に基礎の基礎の部分が省略されちゃっているのが難点ですね。 似たような話かもしれませんが、学校の調理実習ではすでに人数分のお米が計量された状態で用意されているため、お米の正しい計り方を知らないまま大人になったという人もいるそうです。
IT業界は実力主義のせいか、あまりに基礎的な質問をすると「そんなこともわからないなんて、プログラミング向いてないですよ」などと言われて突き放されちゃう空気も怖いです。 正直こんなの向き・不向きというよりも、知ってるか知っていないかの問題なので、いじわるしないで教えてほしいと思います。
初学者の芽を摘むのではなく、水をやるような存在になりたい蛙でした。
HTML
蛙のicon
ひょんなことからIT業界に迷い込んだ1匹のカエル。知識ゼロからのスタートで四苦八苦。特にJavaScriptが怖い…。