どうもこんばんは、ロムです
前回に続いてHTMLの初級編をレクチャーしていきます！
この記事は以下の方にオススメです
・HTMLをこれから勉強しようとしている人
・勉強したいけど有料講座とか通いたくない人
・たまにHTML使っているけど詳しいことはわからない人
この記事を書いてる僕についてざっくり自己紹介するよ！！
・某政府系企業や政府系の基幹システムをSIerとして数年間開発
・その後転職し、社内のシステム管理者としていろいろ開発
・だいたい使ったことあるのはHTML、VBA、python、Java、C#など
今回は四の五の言わずにHTMLを書いてみようよ！ってところをやっていきます！
プログラミング勉強する人ってすごくない？？
たぶんこれを勉強する人は今からHTMLを勉強しよう！って意気込んでると思うんですが
めっちゃめっちゃ偉い！！
ほんとにほんとにすごい！！
ITの分野ってちょっと面白そうじゃないですか
ただ、今からHTML勉強するワケですがきっと楽しくありません！！
あ、間違えた
絶対楽しくありません！！
いわば苦行です！
なぜか？？ITの勉強も結局は勉強なんです
学校の勉強とかあんまりおもしろくなかったじゃないですか
友達が面白そうにIT勉強してる！とかいう人いますけどね、それ変態ですから近づかない方がいいですよ
これは嘘じゃない、やる気があるのは最初だけで、ある程度学んだらやっぱり苦行なんです
ですから出来るだけ楽しく、わかりやすく説明してきますね！！！！
HTMLへの第一歩：まずはメモ帳を開いてみよう
メモ帳の開き方
HTMLやろうよ早く！！！
…で、何からすればいいの？
まずはHTMLを身近に感じてもらうために「メモ帳」を使っていくぞ！
メモ帳はあの「メモ帳」さ！Windowsの人ならだれでも使えるよ！
↓↓メモ帳の開き方を紹介
(1)検索バーで「メモ帳」と入力してヒットしたらそのまま「Enter」
あるいは
(2)「Windowsキー」+「Rキー」で「ファイル名を指定して実行」を開き、そこに「notepad」と入力して「Enter」
もう無理かも…挫折しそう…
そんなアナタ！ぼくはそんなアナタを待ってました！
みっちゃんみたいにこの時点で躓(つまづ)く人も結構いるんだ
このブログじゃそんな人にも今後記事を書いていくつもりだからちょっと待っててね！
メモ帳にHTMLを書いていこう
まずはメモ帳にこんな文字を書いていくぞ！
「ロムは世界一イケメンです」
「ロムのことが好きな人は世界でもまぁまぁイケメンです」
「ロムのことが嫌いな奴は醜くいです」
３つめのやつ筆乗りすぎだろ
そしてこのあと保存するのですがこの時注意！！！！
ファイル名を指定するとき「～～～(なんでもいい).html」にしてください！！
このドット「.」も忘れずにね！
htmlファイルは拡張子を「～～.html」にして保存しよう
写真ではデスクトップに保存してるけど、どこに保存してもいいぞ！
この「.html」は拡張子、ってやつね！
そのとおり！！ファイルの種別を表すのが「拡張子」だ！
パソコンさんに「これhtmlだから！開くときhtmlっぽい感じで開いてください！」ってお願いする呪文みたいなやつさ！
書いたHTMLファイルを確認してみよう
保存出来たらさっき保存したところにある「～～～.html」をダブルクリックで開いてみよう！
こんな感じになったかな？？
クソキモイこと書いてあるけどそれ以外は全く同じにできたよ！
これでできたファイルを、htmlファイルっていうんだ！
拡張子が「.html」のファイルだからだね！
簡単なHTMLコードを書いてみよう
ちょっと待って！
これHTMLなの？？
前回見たHTMLのサンプルとは結構違うような？？
いい質問ですねぇ！
でた！ロム上彰！
池上彰の完全下位互換だ！
これからコード書いていきますね
簡単なコードから紹介していくよ！
簡単なコードを紹介していくとは言いましたが、いくら簡単でも最初から飛ばすとみんながついてこれなくなっちゃうので最初の１つだけです！
まずは<h1>！
<h1>っていうのは「見出し」を表すんだ！(見出しっていうのはこんなやつね↓)
まずはさっき作った「～～.html」ファイルの拡張子を「名前変更」で無理やり「～～.txt」に戻してみよう
拡張子を変えることはつまり、「htmlっぽい感じで開いてください！」から「テキスト(txt)っぽい感じで開いてください！」って呪文を変えるということ！
拡張子変えるときに「拡張子変えると、ファイルが使えなくなる可能性があります」って注意されるけど大丈夫！中には変えちゃうとヤバい拡張子とかあるけど、htmlとtxtはほぼ親戚みたいな感じなんでそのまま変えてください！
こんな感じで「見出しにしたい文言」を<h1>で囲んでみよう
<h1>ロムは世界一イケメンです</h1>
<h1>で囲ってあげたらうしろは</h1>で閉めてあげるんだ
htmlでは「ここからここまでを見出しにする」と宣言するとき、こんな感じで頭とお尻を囲ってあげよう
<h1>タグは必ず</h1>で閉める必要がある
このタグ…っていうの？
なんでhなの？
hとは”head”の頭文字！
つまり先頭っていう意味さ！
見出しっていうのは記事の一番先頭に来るものだからね
実際にこの<h1>で囲ったところがhtmlでどう見えるのか気になるね！
<h1>タグがhtmlでどう見えるか確認してみよう
さっきは拡張子htmlをわざわざtxtに直したけど、またhtmlに戻してあげよう
ファイルの名前変更で「～～.html」にしてあげてね
そしてhtmlをダブルクリックしたらどうなるかな？？
なんて自己主張の強さ…
みんなここまで来た君たちはもう立派だね！
次からはもう少しレベルが上がるよ！
大変だった～～！っていう人もいるよね！
あるいは進みが遅かった！っていう人もいるかも！
そんなみんなは次のステップに進もう！
次は開発環境の構築だよ！
終わり
