見出し画像

【HTML CSS 独学１】 基本を固めて高く積み上げよう「タグ編」　個人投資家のFIREへの旅路 第185夜

S.A.P.Studio

WEB関連の言語としてスタート地点となるのがHTMLです。
これから学び始める人は、やはり、基礎という土台をガッチリと組むことで高くスキルを積み上げていくことができるので
この学びは非常に有益となります。

HTMLとは何かというところから、必須のタグの解説までを進めていきます！


【HTMLとは】

HTML：
・Hyper Text Markup Languageの略。
・マークアップ言語
・Webサイトの構造を書くための言語

マークアップとは、文書構造などの情報を、コンピューターが正しく認識できるように、「タイトル」や「見出し」などの要素に「タグ」をつけていくことです。

つまり
HTMLの役割は、Webサイトを組み立てるための構造を作ることです。


【HTML タグ】

マークアップをしていく際に必要になるのが、「タグ」です。
具体的にその書き方と、役割を見ていきましょう。


＜タグの役割＞

タグとは、「これは何か」というのを定義していくためのコードとなります。
コンピューターは、人間よりも賢いですが、臨機応変さのないやつです。
「ニュアンスでなんとなくわかるやろ？」が通用しません。

なので、

さまざまな「タグ」で、マークアップすることで、
カタブツコンピュータに、これは「タイトル」、これは「見出し１」、これは「文章」、これは「画像」などと理解をさせていく必要があります。


＜必須タグ＞

HTMLには、絶対に書くことが決まっているタグがあります。
これらのタグは、「型」として決まっているので、覚える必要はありません。役割だけ知っておきましょう！

こちらがそのコードです！

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>  </title>

<link rel="stylesheet" href="css/style.css">


</head>



<body>



</body>



</html>


＜タグの種類＞

このような英単語の組み合わせで構成されます。
タグは大きく分けると２種類あります。

終了タグ有：
<html> ○○○ </html>
<body> ○○○ </body>
終了タグ無：
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">

＜終了タグ有＞
<html>○○○</html>のタグの場合、
<html>が開始タグで、</html>が終了タグになります。
開始タグと終了タグの間に挟まれた　”○○○”　は、「htmlです」と「マークアップしている」ことになります。

＜終了タグ無＞
<meta charset="UTF-8">というコードでは、"meta"というコードはWEBページの情報を書き込むためのものです。
<meta charset="UTF-8">とは、「このWEBサイトで使う文字コードは"UTF-8"です」という意味です。

ちなみにこれは、覚える必要はありません。
とりあえず書いとくってくらいでオッケーです！


＜タグの解説＞

次に、それぞれのタグを解説します。

<!DOCTYPE html>
DOCTYPE 宣言と呼ばれるもので、「これから書くのはHTMLです」というような宣言と考えておきましょう。

<html lang="ja">  </html>
"ja"というのは、"japanese"のことです。日本語のWEBサイトであるということをブラウザに提示しています。

<head>　　</head>
ヘッドタグです。
このタグの中に書く内容はWEBサイトには表示されません。
このWEBサイトの基本的な情報や、設定を書く場所になります。

<meta charset="UTF-8">
ヘッドタグ内に書きます。
「このWEBサイトで使う文字コードは"UTF-8"です」という意味です。
これを書くことで文字化けを防ぎます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
ヘッドタグ内に書きます。
これを書くことで、WEBサイトを閲覧するときのデバイスの画面サイズの情報を取得します。スマホで見ても、PCで見ても見やすいWEBサイトを作るレスポンシブデザインに必要です。

<title> 　</title>
WEBサイトのタイトルを書く場所です。
こちらに書いた内容がWEBサイトを開いたときの、タブの部分にも表示されます。

<link rel="stylesheet" href="css/style.css">
こちらは、HTMLを装飾する言語「CSS」へのリンクです。ファイルの場所によって、href 以降の書き方は変わります。
HTMLとCSSは必ずセットで使用することになりますので、必須のタグと行っていいでしょう。
linkタグは、この他、JavaScriptや、インターネット上にあるデザインツールなどとのリンクを書いたりします。

<body> </body>
こちらは、ボディタグです。先程のヘッドタグが頭で、ボディタグが胴体となります。
つまり、このタグの中に、WEBサイトの内容を書いていくことになります。


＜簡単設定＞

上記の必要タグは、Visual Studio Codeの場合、
「do」と入力すると、予測変換でズラーっと自動で書き込まれます。

この場合、CSSのリンクタグは出ませんでの、こちら自分で書く必要があります。

また、<html lang="ja">  ではなく、"en"となります。ここも"ja"と直しましょう。

このように、全く覚える必要なし！
ややこしいことは、エディタにまかせましょう♪


【まとめ】

今回の内容は、WEBサイトを作っていく下準備でした。
このスタートラインが、間違っていると、その後のコーディングに支障が出たり、表示がうまく行かなかったりします。
WEBサイトの根幹部分ですので、しっかりと書いていきましょう。

とはいえ、
自動でコードは生成されるので、一部の修正ですみます。

次回は、bodyタグ内に書き込んでいくときの様々なタグを紹介します！！






この記事が気に入ったらサポートをしてみませんか？