Webエンジニア学習日記 HTML編 #01 「HTML事始め」

2023年4月20日

HTML プログラミング 学習

eyecatch 私事ながら、ウチの会社に初めて従業員が入社しました。 将来を見据えて、ホームページを作るスキルを身に着けたいという意気込みだけで、ITスキルがほぼ無し状態から学習をしたいという事で、エンジニア見習いとして参画してもらうことにしました。 HTML学習の参考書を事前に購入していましたが、そうした参考書をチュートリアルとして学習すれば、一通りのホームページ制作の基本は身につくだろうな・・・と思っていたんですが、初心者にとってはそういう作業すら少し厳しいようなので、超初心者向けのHTML学習を特集してみることにしました。 HTMLを覚えたいと思っているけど、何だか難しいと思っている人や、以前に挫折をしてしまった人などに見てもらいたいと思って書くようにします。 もしわかりにくい箇所などあれば、コメントメールお問い合わせで伝えてください。

このブログを読んでほしい人

ホームページ制作を自分でやってみたいけどどうやればいいか分からないという人は、是非今回のHTML編から読んでみてください。 これからプログラミングを学習したいと考えている人も、スクールに通おうか、高額な学習書籍を購入しようか迷っているのであれば、 初期学習は是非、安価に抑えてコストを抑えて、自信をアップさせてみてはいかがでしょうか? このブログ以外でも、多くのwebサイトで有効な情報や学習方法が書かれているので、自分なりの学習を見つけるキッカケになるかもしれません。

HTML学習事始め

環境構築

まず、スマートフォンではホームページ制作はまともにできないので、学習の為にパソコンを用意してください。 HTMLリファレンスを読んでコードを少し書くぐらいであれば、スマートフォンでできるかもしれませんが、たまにパソコンを持たずにWEBエンジニアを目指そうとする人がいるので、自分の環境としてのパソコンは必須です。 パソコンは、Macでも、WIndowsでも、Linuxでも、Chromeでも、RaspberryPiでも、どれでも大丈夫です。 そして、VScodeをインストールすれば、環境構築は完了です。

インターネットブラウザ

HTMLをコーディングした後で、その表示(レンダリング)を確認するには、インターネットブラウザを使います。 OSに始めからインストールされている、インターネットブラウザで全く問題ないですが、GoogleChromeをダウンロードしてインストールすると、いろいろなwebサイトにかかれている情報と合わせやすいと思います。 他にも、FirefoxやOperaなどでもいいですが、古い環境でInternetExplorerを使うのはNGだということを始めに言っておきます。 InternetExplorerは、Web開発の敵です。 インターネットブラウザの黒歴史で、この暗黒時代を経験した人は今となっては笑い話ですが、当時は無限カオス地獄でした。 できるだけ最新のOSを使うようにしてください。

HTMLの仕組み

htmlって一体何なのかというと、ホームページを表示するためのソースコードです。 HTMLタグという命令を使って、一定の法則に沿って書くことで、ホームページを組み立てることができます。 インターネットラウザでいろいろなホームページを見ている時に、マウスの右クリックをして、「ページのソースを表示」というメニューを実行すると、そのホームページのHTMLを簡単に見ることができます。 HTMLが理解できる人は、そのページのHTMLを見てどういう構造になっているかが理解できる状態の事です。

CSSやJavascriptも同時に学習しなければいけないのか?

ホームページを作ろうとした時に、HTMLの学習をはじめて、多くの人が、CSSとJavascriptの書き方が難しく感じて挫折してしまうようです。 順番に学習していくのが一番いいですが、HTMLとCSSとJavascriptは、Webエンジニアとしての「ホームページ三種の神器プログラミング言語」として必須なので、一緒に学習するのを進めている参考書などもあり、混乱してしまう人も多いみたいですね。 基本的に、初心者学習としては、順番に学習していくことをオススメします。

HTMLの基本

共通基本構造を覚えよう

以下のHTML基本構造はコピペではなく、手打ちできるように、毎回何度も打ち込むようにしましょう。 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>HTML sample</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel='icon' href='favicon.html'/> <link rel='stylesheet' href='style.css'/> <script src='main.js'></script> </head> <body> </body> </html> 解説
DOCTYPE HTMLのバージョンを記載するためのおまじない過去バージョンの記述はいくつかあるが一番シンプルなHTML5のこの書き方を覚えておくだけで良い。
HTML ページの基本HTMLタグ。
HEAD ページのヘッダ情報を記載するエリア。(見た目にはほぼ関係ない)
BODY ページの表示に関する内容を記載するエリア。
META HEADタグ内のメタ情報を登録する、name=''やproperty=''などの属性でタイプを分類するタグ。
TITLE ページタイトルの設定。
LINK cssファイルを読み込む設定。
SCRIPT javascriptファイルを読み込む設定。
※タグについての細かな情報は、後ほど解説予定。

DOMを理解しよう

Document Object Modelを略してDOM(ドム)という風に呼ばれることが多い。 HTMLは、階層構造でタグを記述すると言うことを理解する。 上記の基本シンプルHTMLを図にしてみると、次のようになる。
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
タグの階層構造は、タグの中にタグを追加していって、親子構造を作っていく事になる。 親子ではない、隣同士のタグの事を兄弟構造という風にも言うので、家系図の様な階層構造になるというのをイメージするといいかも。

タグの属性を理解してみよう

HTMLタグについてもう少し理解してみると、次のような名称で呼ばれる。

HTMLタグ

<div class='sample'>Sample Tag 構造</div>

開始タグ

タグの内容

終了タグ

<div class='sample'>
Sample Tag 構造
</div>

タグ名

属性

属性値

<
div
class
='
sample
'>
Sample Tag 構造
</div>
タグの事を「要素」とも言うので覚えておこう! 【注意】 タグには、終了タグがあるものと無いものがあるので、その違いを理解しておこう。 ・終了タグが無いタグは、「タグの内容」が不要なもので、metaタグ、linkタグ、imgタグなど(他にもあるよ)がある。 次のように閉じる要素を書く場合もあるが、書いても書かなくてもいい。 <img src='example.jpg'> <img src='example.jpg' />

ポイント

・自分のパソコンを使って学習を始めよう。 ・HTMLはどのページも基本構造は同じなので、HTMLの構造体を理解しよう。 ・HTMLタグの書き方や特性を理解しよう。 ・わからない言葉を書き留めて、自分で調べたり、メンターや詳しい人に質問してみよう。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。