IT勉強🔥 -5- （grammarへの旅）

2022年8月27日 16:38

未経験ながら、少しずつ勉強をしようというプロジェクトを立てました。
私は、全くの未経験・無知ですが・・・。もし、この投稿で誰かしらのお役に立てれば幸いだと思います。（まず、その前にみなさんに教えていただくことが多いかと思いますが。）もし、オススメのサイト、アドバイスなどどんなことでも、気軽にコメントをいただけると幸いです。さまざまなことを、勉強したいと思っています。

♡☆♧　HTML　♢☆♤

・拡張子

前回、保存する時に後ろについている、
「.html」は、拡張子と呼ばれるものです。これをおしり（ファイルの末尾）につけてctrl + sをすることで、HTMLファイルが作成できるそうです。
ルールとしては、最初に「.ピリオド」をつける必要があります。
.hml以外にも、画像ファイルの.jpgや.png、Wordファイルの.docxなどがあるそうです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="box.css" />
    <title>BOX</title>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>

これは、ソースコードと呼ばれます。前にも、台本（スクリプト）の話をしたかと思います。このルールについて、学んだことを書きます。

・インデント

このソースコードをよくみると、行間や空白があります。これは、普通よりも右にずれているということです。通常よりも右にずれた位置から始めること＝インデントというのだそうです。
タグの構造がわかりやすくなり、コードが読みやすくなります。
整理整頓しながら台本が書けると、後で見返したときに楽なのだと思います。

・要素

ソースコードをよくみると、<>で囲まれたものがとても多いことがわかります。これは、タグと呼ばれるものです。タグには、

開始タグ：表示内容の始まりを示すタグ　例：<div>
終了タグ：表示内容の終わりを示すタグ　例：</div>

という２種類があるようです。そして、この間に入っている言葉などが、
コンテンツと呼ばれるものになります。例：<h1>ベンキョウ</h1>でいう、"ベンキョウ"の部分になります。
そして、この開始タグと終了タグ、コンテンツの３つを含めたものを、
要素と呼びます。

つまり、htmlは、「要素たちの集まり！」と考えれば、良いのかもしれません。
では、いよいよ、ソースコードを読み解いていきます。

H T M L　のつくりかた

<!DOCTYPE HTML>

<!DOCTYPE html>

これは、文書型宣言と呼ばれるものなのだそうです。（別名DOCTYPE宣言）
めちゃかっこいいですが、大元のブラウザが、ファイルを認識するために必要なのだそうです。ブラウザとは、プログラムやデータを情報として受け取り、画面に移すものを指します。
これは文章だよ！！！オッケ？というものと私は認識しました。

<html>

<html lang="ja">
：
：
：
</html>

html要素は、HTML文書であることを示す要素です。上のDOCTYPE宣言とはいつもセットで考えることが多いそうです。
これはhtmlの文章だよ！！わかった？というものと認識しました。
htmlというのは、何でできているかというと、

head要素
body要素　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　たった、この２つなのです。え〜！！

<head>

<head>
：
：
：
</head>

さあ、１つ目の要素です。head要素には、ブラウザに伝えたい情報を記述します。検索エンジンという、検索した時に見る人に伝えたいことなども、ここに記述できるそうです。
しかし、なんと、このhead要素に書かれた情報は、基本的にWebページ上には表示されないのです。え？
ページのタイトルや文字コード、ページの説明など、
ブラウザに向けてWebページの設定を書いている部分ということなのです。

<body>

<body>
：
：
：
</body>

次に２つ目の要素です。head要素が、ブラウザ向けということは、body要素は実際にブラウザに表示されるコンテンツを記述することができます。
実際に画面に表示する部分ということなのです。
よし！これでhtml完成！！〜！！・・のはずがない！！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="box.css" />
    <title>BOX</title>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>

まだまだ知らないものがたくさんある・・・。

<meta charset="UTF-8" />

<head>
:
<meta charset="UTF-8" />
:
</head>

このUTF-8は、「文字コード」と呼ばれるものです。文字が化けることがあるそうで、それを除霊するおまじないタグです。

<title>

<title>ベンキョウ</title>

<head>
<meta charset="UTF-8" />
:
<title>　　ベンキョウ　　</title>
:
</head>

title要素は、Webページのタイトルを指定する要素です。タブに、このタイトルが載ることになります。なので、実際にサイトの中に「ベンキョウ」の文字は入りません。

・コメント

ショートカットキーとして、このようなソースコードを書くときに、メモをつけたいとき、ctrl + / が使えます。
これを使うと、忘れがちなタグに、メモを追加することができるようです。
例えば、

<head>
<meta charset="UTF-8" /> <!-- 文字化けを防ぐ！ -->
<title>　　ベンキョウ　　</title>
:
:
:
:
:
</head>

で囲まれた部分があります。
と書いてありますが、これは、実際には画面には表示されないようです。なるほど、人間に優しいのね。
これを、コメントと言うそうです。

今日は、ここまでです。ご拝読いただき、ありがとうございました。

⌘ これまで ⌘
もし、こちらをご参考にしていただけると幸いです。

少しずつですが、投稿をしております。ｎｏｔｅで誰かのためになる記事を書いています。よろしくおねがいします。