2024.05.07

WEBエンジニアまでの道のり【基本より前の一般教養】

takeshi_admin

タケシだ
今の時代、IT業界に転職を考えているような人たちも多いだろう。
そんな君たちに、WEB業界でエンジニアを目指すにあたってのイメージはおそらくプログラミングだと思っていることだろう。
ちょっと調べたことがある人は、Pythonやら、PHPやらということはあるかもしれないが、本当は、もっとそれよりも初歩的な部分の学びが必要である。
今日はそれを紹介していこうと思う。
そんな基本より前の一般教養とは、HTMLだ。

Contents

HTMLとは
HTMLの訓練方法
まとめ

HTMLとは

HTML（HyperText Markup Language）は、ウェブページを作成するための標準的なマークアップ言語だ。HTMLは要素（elements）や属性（attributes）を使ってコンテンツを構造化し、ブラウザが理解して表示すべき内容を指定している。以下にHTMLの基本的な要素や属性、文法などについて説明するぞ。

1. HTMLの基本構造

HTML文書は通常、HTML要素で囲まれたテキストで構成される。基本的なHTML文書の構造は次のようになる。

<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>段落</p>
</body>
</html>

<!DOCTYPE html>: HTMLのバージョンを指定
<html>: HTML文書のルート要素
<head>: 文書のメタ情報やスタイルシートのリンクなどを含むセクション
<title>: ページのタイトルを定義
<body>: 表示されるコンテンツ本体を含むセクション

2. HTML要素と属性

HTML要素はタグ（tag）で表され、開始タグと終了タグで囲まれる。例：<p>段落</p>
HTML要素には属性を追加することができる。属性を追加することで要素に対して、さらに情報を加えることができる。
例：<a href=”http://example.com”>リンク</a>
また、classといった要素を独自で定義し、そこに対して、今後紹介していく予定のCSSやJavascriptを指定してあげることで、例えば同じ、<p>といった要素でも別の文字フォントを当てたり、動きを加えたりといったようなことが可能になるぞ。
例：<p class=”red”>赤色</p>
別でCSSを書くことで、class=”red”がついているものは文字を赤くするといったことが可能だ。

3. よく使われるHTML要素

<h1>～<h6>: 見出しを示す要素。数字が大きいほど重要度が低い。
<p>: 段落を示す要素。
<a>: リンクを作成する要素。
<img>: 画像を表示する要素。
<ul>, <ol>, <li>: リストを作成するための要素。

上で紹介したのは、ほんの一例に過ぎない。
表を作ったりするHTML要素や、複数の要素を一つのグループにまとめるための要素だったり、実際にはもっと多くの要素があるぞ

4. HTMLの文法

HTMLはネスト（入れ子構造）を正しく構築する必要があり、開始タグと終了タグが正しく対応していないとエラーが発生する。
タグと属性は小文字で記述することが一般的だが、元々、コンピュータ上では大文字小文字の区別はない。
HTML文書は通常、.htmlや.htmの拡張子を持っている。

以上がHTMLの基本的な説明だ。HTMLを使うことで、コンテンツを構造化し、Webページのデザインや機能が実装できる。
簡単に言うと、WEBサイトの見た目の基本だ。

極論、HTMLがわからなくても、別にWEBエンジニアはできるっちゃぁできるが、分かっているのと分かっていないのとでは、実際天と地の差があるぞ

HTMLの訓練方法

HTMLの技術を上達させる方法として、大きく2つある。

1つ目は、ひたすらに書いて身につけることだ。
取りうる手段としては、非常に脳筋ではあり、急がば回れというわけではないが、結局のところこれが一番の近道ではあるというのは、世の断りであると言えよう。
コードを書いた文の経験は絶対に裏切ることはないし、きっと力になるだろう。
続いて2つ目は、他人が書いたコードを見ることである。
どんなWEBサイトであっても、基本的に右クリックして、出てきたメニュー内の「検証」もしくは、「ページのソースを表示」ボタンを押すことで、そのページがどんなHTMLによって表示されているかといったことを確認することができる。
おすすめの方法としては、「ページのソースを表示」ボタンの方である。
「検証」ボタンの方だと、純粋なHTMLではなく、JavaScriptによって表示されているようなソースも同時に表示されてしまうため、基礎もままならないような段階であるならば、「ページのソースを表示」から、生のコードを見る方が勉強になるだろう。
ある程度学んだのであれば、これら二つを見比べることで、より高みへと至ることが可能になる。