どうもこんばんは、ロムです
この記事は以下の方にオススメです
・HTMLをこれから勉強しようとしている人
・勉強したいけど有料講座とか通いたくない人
・たまにHTML使っているけど詳しいことはわからない人
この記事を書いてる僕についてざっくり自己紹介するよ！！
・某政府系企業や政府系の基幹システムをSIerとして数年間開発
・その後転職し、社内のシステム管理者としていろいろ開発
・だいたい使ったことあるのはHTML、VBA、python、Java、C#など
今回はHTMLの初歩の初歩、そもそもHTMLって何？とかどんなところで使われてるの？という説明をします！
この世のWebサイトはほとんどHTMLで出来ている
HTMLっていうのは「HyperText Markup Language」の略です！
初手から英語！！頭に入ってこない！
大丈夫！みんなも小難しい単語いつの間にかたくさん覚えるでしょ。「魔貫光殺法」とかTwiceのメンバーの名前とか
こんな言葉の意味からつまづいてたら逆にわかりにくいので、ここはいずれ説明するとして…
この世のWebサイトはほとんどHTMLで出来ています
今あなたが読んでいるこのブログだって、HTMLで出来ているんです
つまり、HTMLを理解して自分で作れるようになったら、あなたもこんな感じのWebサイトが作れるわけです
まずはHTMLに触れてみるところから始めましょう！
開発者（ディベロッパー）ツールを開く
あなたは今PCでこのサイトを見ていますか？ここからはPC(windows)での操作になりますのでご注意ください！
Google Chromeを開いてください！(EdgeとかFire Foxでもいいですが画面が若干違うのでGoogle Chromeで説明しますね)
ごちゃごちゃうるせーな！！なんだアルファベットばっか紹介しやがって！
ご…ごめんよ…こういうのは一応説明しておく決まりなんd…アヒィン！！(みっちゃんの蹴り)
開発者ツールを開く方法
いくつか開き方はありますが、3つめがオススメです！
なぜかって？ボタン1クリックすればいいだけだから楽だからさ！あとF12キーってあまり使わないキーだから、こんな時くらい使わないと可哀そうだしね
(1)ブラウザ上で右上アイコンをクリック→「その他のツール」→「デベロッパーツール」
(2)Ctrl+Shift+「i」キーを同時にクリックする
(3)キーボード上で「F12」キーをクリックする
(4)Webサイト上で右クリック→「検証」
※もし(1)や(2)で開けない場合はおそらくGoogle Chromeのバージョンが違うせいかもしれません。その場合はやはり(3)で試してみてください
開発者ツールの見方・確認方法
さて、先ほどの工程を踏まれた方の画面ではきっとこのような画面が表示されているはずです。
この赤枠が今回見てもらいたかったところです
なんか…すごそう…一気に頭よさそうな画面になった♪
この画面では今表示しているWebサイトの細かい情報が隅から隅まで見えるんだ！
わかりやすくイメージで言うと、病院のレントゲン写真みたいにWebサイトさんの身体をあ～～んなところや、こ～～んなところまで見ちゃうツールなんだ！
なんかすごそうだけどどうやって見るの？？
よ～し！中身を詳しくチェックしていくぞ～～！
これがHTMLだ！！！！！
上から2行目に「html」って書いてあるの見えますか？？これつまり「ここからhtmlだぜ！！」って宣言してるんです
これからhtmlを学べると思うとワクワクが止まらねぇぜ！
「script」とか「type」とか書いてあるのも見えますね？
これはhtmlの基本構文みたいなもので、これからhtmlをしていくなら覚えていかないといけません。英語で言うbe動詞とかレベルで必須の知識です！
ただ水を差すようで申し訳ないのですが、これはあくまでhtmlがどんなものかを説明するためのサンプルです。いきなりこんなものから作りません
なぜかって…？
難しすぎるからですね！
いきなり難しいものを見せられたら挫折しちゃうもんね！
そのとおり！むしろ上の画面は初心者には毒です！あんまり見ないでください！
次の章では手始めに簡単なhtmlを使って画面を作っていきましょう！
参考資料（本を手元に置いておきたい人にはオススメ）
ただ一気に買おうとすると「読まなきゃ」って気持ちになってせっかくのやる気も失われるのでほどほどに！
おわり
