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

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

コーディングを始める前に・・・
前回の講義で開始タグと閉じタグのお話をしましたね。

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

内側・外側

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

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

html

<div>
  <!-- 〜ここが<div></div>タグの内側〜 -->
  <p>こんにちわ</p><!-- 〜これは<div></div>タグの内側の<p></p>タグ〜 -->
</div>

内側

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

また3行目の<p></p>タグを指す場合は、
「<div></div>タグの内側(中)の<p></p>タグ」という言い方をします。

外側

逆に外側だと、<p></p>タグは<div></div>タグの中にあるので、
「<p></p>タグの外側 = <div></div>タグの内側」ということになります。

囲う

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

html

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

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

html

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

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

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

html

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

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