HTML/CSS
自主学習

自主学習1-3「HTML/CSSについて、基本構造を学ぼう」

自主学習1-3「HTML/CSSについて、基本構造を学ぼう」

前回「自主学習1-2」を終え、HTML/CSSの使用方法はなんとなく分かってきたものの、基礎的な部分をまだ学習していない…と感じたので、今回は基礎となる部分をまとめておこうと思います。

HTMLの基本構造

HTMLタグとは

<>という括弧記号で囲ったもの

カッコの読み方
  • <【読み方】小なり
  • >【読み方】大なり

DOCTYPE宣言とは

<!DOCTYPE html>
ドックタイプ宣言
  • 「ドキュメントタイプがHTML文章ですよ！」とWEBブラウザに教えてあげる為のタグ。
  • この記述が無くてもWEBブラウザはおそらく気を効かせて「HTMLファイル」と判断してくれるが、お作法として必ず１行目に記述しよう。
  • 第三者がファイルを開いた時に「これは何のファイルかな？」と調べる手間も省ける。

コード内に記述するhtmlタグ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
hello world!
</body>
</html>

2行目にあるがhtmlの開始タグ、9行目にあるがhtmlの終了タグです。

スラッシュが入っていないタグが開始タグで、/head、/body、/htmlなど、スラッシュが先頭に付くタグを終了タグと呼びます。

この開始タグと終了タグで囲われたところに、さまざまなhtmlタグを書いていくことになります。

point!! htmlのマークアップ言語は、開始と終了のタグで囲うことによって、テキストに意味づけをしている。

headタグ

WEBブラウザの画面上に表示される文字ではないけれど、WEBブラウザに様々な情報を伝える役目のタグ。

参考1-3-1

赤枠で囲われた部分をhead部（ヘッダー部、またはヘッド部）と呼びます。「headタグの中」「headタグのブロック」「headタグのグループ」などと呼んで、データ構造を表すことがあります。

metaタグ

WEBブラウザの画面上に表示される文字ではないけれど、WEBブラウザに様々な情報を伝える役目のタグ。

4行目にあるのはmetaタグ（メタタグ）です。文字コードをUTF-8に指定すると書かれています。

meta=メタとは「大前提となる設定」という意味です。このmetaタグがないと、文字コード不明でブラウザ上で正しい文字を表示することができない場合もあります。

またmetaタグには開始タグや終了タグがありません。１つのタグで成立するタグです。


タグには開始と終了２つで成立するタグと、開始１つで成立するタグの2パターンあります。

関連記事
文字化けの原因って何？文字コードを知ろう
文字化けの原因って何？文字コードを知ろう
2020.07.22
文字コードとは？ 「あ」と画面上で表示される文字ですが、コンピュータ内では「あ」ではなく数値で保存されています。この「あ」とコンピュータ内の「数値」を対比させたものを文字コードと呼...

bodyタグ

WEBブラウザの画面上に表示させるための情報を設定するタグ。

参考1-3-2

赤枠で囲われた部分をbody部（ボディー部、本体）などと呼びます。

hello world!という文字はbodyタグの中に記述されているので、WEBブラウザ上にはhello world!と表示されます。

point!! headタグ内に記述したタグ情報は画面には表示されない設定情報。bodyタグ内に記述したタグ情報は画面に表示される設定情報。

インデントの重要性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    hello world!
</body>
</html>

プログラムを遠目で見た時に、行の文字開始位置がバラバラに書かれているのが分かります。

例えば４行目のmetaタグ先頭部と、７行目の「hello world!」先頭部に、半角スペース４つ分のスペースがあります。逆に、他の行の先頭部にはスペースが全くありません。

このように、各行で段差をつけることを「インデント」と呼びます。（エディタ上でキーボードのTabキーを押すことにより、半角スペース4つ分のスペースを一度で入れることが出来ます）

関連記事
インデントや改行を入れる理由「if文や変数についての書き方」
インデントや改行を入れる理由「if文や変数についての書き方」
2020.07.26
プログラムを見た時に、コードの先頭にスペースが入っていたり、途中で改行されていたり…「どうしてこのように書くの？」と疑問に思ったことはありませんか？理由は単純に「読みやすくするため...

インデントの効果により、metaタグはheadタグ内に含まれ、「hello world!」がbodyタグ内に書かれていることが一目でわかるようになります。

point!! HTMLやプログラムのコードを書く際には、どのタグの中に何のタグ書かれているか、わかりやすく書く工夫が必要。

データ構造の表現

参考1-3-3

先程のコードに追記したものです。

htmlタグの中に、head部とbody部が含まれているのが分かります。

これを「グループ化されている」「含まれている」「含有している」「内包関係にある」「入れ子になっている」などと呼びます。人によって様々な表現がありますが、すべて同じ意味にあたります。

HTML/CSSの基本文法

HTMLの基本文法

HTMLタグはその種類に応じて設定を加えることが出来ます。
設定のことを「属性」、設定の内容のことを「属性値」と呼びます。

<a href="https://hanesoft.com/archives/1">プログラミング学習日記</a>

aタグ（アンカータグ）を例に見てみます。

属性、属性値
  • a（アンカー）…タグ
  • href（エイチレフ）…属性
  • "○○○"…属性値（""で囲われた値）

CSSの基本文法

CSSは、「セレクタ」「プロパティ」「値」の3つで構成されています。
この3つを記述することで「どの要素（セレクタ）の、何を（プロパティ）、どのように（値）する」という処理が実行されます。

h1{
	border-bottom:solid 2px black;
	}

h1（見出し）タグに付けたCSSを例に見てみます。

セレクタ、プロパティ、値
  • h1…セレクタ
  • border-bottom…プロパティ
  • solid 2px black…値

上記は「h1タグ（セレクタ）の、下線（プロパティ）を、solid 2px black（値）にする」という意味になります。

HTML/CSS基本構造まとめ

以上が自主学習1-1と1-2で出てきた用語や構造の基礎的な部分のまとめになります。

ゴミコ
最低限覚えておかないといけないワードは盛り込んだつもりだけど、解釈は合っているのだろうか。講師の評価を見てみよう。

自主学習1-3について、講師の評価

タグの大まかな意味は理解されていると思います。さらに１つ１つのタグの意味や機能、タグの属性など、深堀りして知識を増やしていくとよいでしょう。

ただし「タグを覚える勉強」をする必要はあまりありません。自分でWEBサイトを作ったり、様々なWEBサイトのソースコードを表示させ、HTMLタグを観察したり、そのように学んでいく方が、より実践的な知識が定着します。

byゴミリョ

次回の記事

自主学習1-4「お問い合わせフォームをつくろう」
自主学習1-4「お問い合わせフォームをつくろう」
2020.07.25
前回「自主学習1-3」ではHTML/CSSの基本構造を復習しました。今回は課題である「お問い合わせフォームの設置」について学習していきます。 フォームとは？ WEBページにおけるフ...
にほんブログ村 IT技術ブログへ
にほんブログ村
この記事を書いた人
鷹の目ゴミコ
鷹の目ゴミコ
夫と幼稚園児と家族３人で暮らす陰キャ主婦。なんのスキルも資格も無いことに焦り、36歳にしてプログラミング学習を始める。