「自分(法人)でサイトを作りたいけどHTMLが何なのかよくわからない」
「HTMLを使ってフリーランスで始めたいけど何から学べばわからない」
この記事はそんな人に向けて書いています。
はじめまして。
フリーランスエンジニアの忍です。
最近、個人で飲食店を経営していてお店のサイトを作成したいと考える方は多いでしょう。
もしくは、最近サラリーマンや公務員として働くよりも時間的拘束が少なかったり、大きく稼げるフリーランスエンジニアとして働くことを目指す人が増えています。
フリーランスエンジニアを目指す人は基本的にフロントエンド系のプログラミング言語を使うことが多いです。
そこで使う言語がHTMLです。
そこでこの記事では、HTMLがどのようなプログラミング言語なのかについて紹介したいと思います。
目次【本記事の内容】
まずはHTMLとは？
HTMLとは「Hyper Text Marup Language」の略で、Webページを作成するための言語です。
もっと噛み砕いて言うと、文字・表・画像・リンクなどの要素をWebページ内に配置するためのプログラミング言語です。
HTMLでは、タグという目印を用いてWebページを作ります。
これはレイアウトや配置を決めるものになります。
しかし、Webページを作成するにはレイアウトや配置だけでなく、配置した文字や表などを装飾する必要があります。
例えば、文字一つにおいてもフォントや大きさや太さや色といった設定すべき項目がいくつかあります。
この設定はHTMLでもできますが基本的にはHTMLではしません。
では、どうするのか？と思いますよね。
HTMLで配置した文字や表などを装飾するためにはCSSという言語を使います。
CSSとは「Cascading Style Sheet」の略で前文で話した通り、HTMLで配置した文字や表などを装飾するための言語です。
これからこのHTMLやCSSについて話していきます。
HTMLタグとHTML要素
本項では、前項でも少し触れたHTMLタグやHTML要素について説明します。
多くのHTMLタグは、<>～</>という形で、開始タグ<>と終了タグ</>で文字などを囲んで使用します。
前文で説明した開始タグと終了タグまでの部分をHTML要素といいます。
「<h1>タイトル</h1>」この中ではタイトルがh1要素と呼びます。
ここでかなり重要なHTMLタグを4つ紹介したいと思います。
1.<!DOCTYPE html>
これは使用するHTMLのバージョンの宣言です。
これはDOCTYPE宣言と言います。
DOCTYPE宣言とは、簡単に言えばHTMLの仕様やバージョンを記載する場所になります。
これがないとブラウザがHTMLドキュメントをコードが異なった仕様やバージョンとしてレンダリングするトラブルが生じたりします。
2.<html>
これはHTMLドキュメントの始まりと終わりの宣言になります。
前項で話したDOCTYPE宣言以外のHTMLタグが<html>と</html>に囲まれますので、htmlタグの要素になります。
HTMLタグでは、「<html lang=”ja”>」のように「html」という要素の後に「lang=”ja”」のような文言を入れることがあります。
これを属性といいます。
ここで出てきた属性はhtmlが要素名、langが属性名、jaが属性値になります。
「lang」とはhtml要素で使用する人間の言語を意味し、「ja」は日本語を意味しています。
つまり、このhtml要素は日本語で書かれていることをブラウザに教えています。
3.<head>
これはHTMLドキュメントに関する情報を要素とするHTMLタグになります。
前項で話したCSSなどの言語でHTMLで配置した文字や表などを装飾する場合、その言語のファイルやデータの読み込みをhead要素に記述します。
その他にhead要素で記述する内容としては、tittle要素やmeta要素があります。
tittle要素とは、HTMLドキュメントのタイトルを表します。tittle要素の中にある内容はそのままWebブラウザのタブに表示されます。
meta要素とは、HTMLドキュメントのメタデータを記述します。
メタデータとは、HTMLドキュメントの情報を示します。例えば、テキストファイルの作成者、編集者、作成日、変更日、データサイズ、保存場所、文字コードなどです。
4.<body>
これはWebページのコンテンツ部分に当たります。
body要素内に記述された内容がブラウザ上に表示される内容になります。
HTMLと合わせて覚えておきたいCSS
HTMLで文字や表を装飾する場合はhead要素内にstyle要素を使って記述するかstyle属性を使って記述します。
しかし、普通はHTMLで文字や表を装飾しません。
そこで必要になるのがCSSです。
CSSの概要についてはちらっと触れてますのでいきなりにはなりますが、CSSの記述の例を以下につ挙げます。
<style>
h2 {
</style>
これは要素で記述された文字を全て緑色に設定する方法です。
<style>
.gray {
color: gray;
}
</style>
これはclass属性といい、この属性で記述された文字は灰色なります。
HTMLのドキュメント内では<h2 class=”gray”>と記述します。
仮にh2要素全体を前述と同様に別の記述で文字の色が設定されていてもclass属性で記述れた内容が優先されます。
<style>
#yellow {
color: yellow;
}
</style>
これはid属性といい、この属性で記述された文字は黄色になります。
HTMLのドキュメント内では<h2 id=”green”>と記述します。
id属性もclass属性同様、h2要素全体を前述と同様に別の記述で文字の色が設定されていてもid属性で記述れた内容が優先されます。
まとめ
HTMLとは文字・表・画像・リンクなどの要素をWebページ内に配置するためのプログラミング言語です。
HTMLにはタグや要素というワードがありましたね。
HTMLで文字や表の装飾はしないのでCSSという言語をHTMLを学ぶ上では合わせて覚える必要があります。
本記事ではHTMLの基礎の基礎しか話していないのでまたさらに詳しい内容を発信していきたいと思います。
