[コーディングの基礎] コーディングの概念

「内側・外側」「囲う」という言葉の意味

コーディングを始める前に・・・
前回の講義でhtmlタグには「開始タグ」と「終了タグ」があるというお話をしましたね。

今後講義を進める中で頻繁に「内側」「外側」や「囲う」という言い方をすると思います。
例えば「〇〇タグの内側に入れましょう」だとか「〇〇を△△タグで囲いましょう」といった感じです。
より理解が深まるように、divタグとpタグを使って説明します。

内側・外側

マークアップされたタグの目線から考える

内側・外側の概念は、どのタグの立場から見たものかを考えるとわかりやすいです。
以下の例を見てみましょう。

html

<div>
  <p>こんにちわ</p><!-- この行がdivタグの内側 / divタグの内側に記述されたpタグ〜 -->
</div>

内側

内側とは、htmlタグの開始タグと終了タグの間のことを意味します。
上の例のようにdivタグの開始タグと終了タグの間(2行目)に記述する場合、
divタグから見ると「内側に記述する」または「中に記述する」という言い方をします。
また2行目の<p></p>タグを指す場合は「divタグの内側のpタグ」という言い方をします。

外側

逆に外側だとpタグはdivタグの中にあるので、
pタグから見ると「外側(外) = divタグの内側」ということになります。

囲う

「囲う」とはhtmlタグの外側にさらにhtmlタグを記述した状態です。
囲うを別の言い方で表すと「マークアップ」ということになります。

html

  <p>こんにちわ</p>

上のコードで「pタグをdivタグで囲ってください」という言い方をしたら・・・

html

<div>
  <p>こんにちわ</p>
</div>

こんな風に、pタグの外側にdivタグを記述しましょう。

また、「こんにちわ」をpタグでマークアップしてください、という言い方をしたら・・・

html

こんにちわ
<!-- 〜↓<p></p>タグでマークアップ〜 -->
<p>こんにちわ</p>

こんな風に「こんにちわ」をpタグで囲えばいい、ということです。