前回「自主学習1-2」を終え、HTML/CSSの使用方法はなんとなく分かってきたものの、基礎的な部分をまだ学習していない…と感じたので、今回は基礎となる部分をまとめておこうと思います。
contents
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ブラウザに様々な情報を伝える役目のタグ。
赤枠で囲われた部分をhead部（ヘッダー部、またはヘッド部）と呼びます。「headタグの中」「headタグのブロック」「headタグのグループ」などと呼んで、データ構造を表すことがあります。
metaタグ
WEBブラウザの画面上に表示される文字ではないけれど、WEBブラウザに様々な情報を伝える役目のタグ。
4行目にあるのはmetaタグ（メタタグ）です。文字コードをUTF-8に指定すると書かれています。
meta=メタとは「大前提となる設定」という意味です。このmetaタグがないと、文字コード不明でブラウザ上で正しい文字を表示することができない場合もあります。
またmetaタグには開始タグや終了タグがありません。１つのタグで成立するタグです。
タグには開始と終了２つで成立するタグと、開始１つで成立するタグの2パターンあります。
bodyタグ
WEBブラウザの画面上に表示させるための情報を設定するタグ。
赤枠で囲われた部分を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つ分のスペースを一度で入れることが出来ます）
関連記事fa-arrow-circle-right
インデントの効果により、metaタグはheadタグ内に含まれ、「hello world!」がbodyタグ内に書かれていることが一目でわかるようになります。
point!! HTMLやプログラムのコードを書く際には、どのタグの中に何のタグ書かれているか、わかりやすく書く工夫が必要。データ構造の表現
先程のコードに追記したものです。
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ゴミリョ
次回の記事
にほんブログ村
