【第８回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

2023年11月27日 20:49

どうもAriです。せっかくSivがＣ言語について書いているので私もやろうかなと思いましたが”Hello World !”以降「関数」とやらが全くわからないので一旦休憩中です。
今回から最初に何か一言書いてみようかなと突然思い立ちました。

↑前回の記事

前回箇条書きについて書いたが、そろそろHTML縛りでは何も思いつかなくなってきた。ということで次回からCSS編に入るための準備として「id」「class」「div」などについて勉強して書いてみることにした。

なんせ自分の理解が足りていないのでいつも以上にグダグダかもしれませんが、ホームページ制作には欠かせないことなのでお付き合いくださいませ。

はじめに

ホームページのbodyには大きく分けて「header」「main」「footer」が存在する。

どこかの企業様のものを見ていただければわかると思うのだが、まずは企業名やロゴなどがどーーんと載っている。ここを「header」と呼んでいる。
その後メインビジュアルとして写真があったり、お知らせだったり、商品ラインナップだったりが載っている。これはそのまま「main」と呼ばれる。
最後に一番下までスクロールすると、企業ポリシーだとか、求人情報だとか簡潔に載っていることが多いと思う。これが「footer」である。

まあmainの中にさらに項目ごとに「section」に分かれていることも多いのだが、とにかくホームページの中でこの部分はどんな役割なのか、というのを理解する必要がある。

そして、それをわかりやすくするために、コードにも<main></main>のようなタグをつけてしまおうということになる。

<html>
    <head>
　　　　　　　　</head>
    <body>
      <header></header>
      <main>
      　　 <section></section>
      　　 <section></section>
      </main>
      <footer></footer>
    </body>
</html>

わかりづらすぎて申し訳ないが、段落を下げているところが入れ子構造になっている。
さらにそれぞれの項目の中にまたいろんな役割の要素が含まれているわけで、何回も同じpタグやらaタグやら出てくるとどれがどれだかわからなくなる。

そこでそれぞれの要素やタグに名前をつけてあげよう、というのが今日の本題である。これはCSSでデザインをつけていく時に役に立つ。はず。（というか今のところCSSと一緒に使わないと恩恵がわからない。）

divタグ

「division」の略で、分割だとかそういう意味らしい。
簡単にいうと、複数のタグをまとめてグループ化する役割を持つ。ただしこのタグそのものに意味はない。
これを使うことで、後々まとめたところだけ一括でデザイン変更する、などということが可能になる。

似た役割のタグで先程もちょこっと紹介した<section>というタグもあるのだが、これは括る要素が同じテーマを持っていて、hタグを含んでいるときに使うといい。

第５回で作ったホームページを例に出してみようと思う。

この場合、例えば上2行を「タイトル」として一括りにするとか、画像は「main」の中でさらに「メインビジュアル」としてdivタグで括るとかが考えられる。
この辺りからプログラミングも「センス」を求めだす。勘弁してくれよ。

spanタグ

私の中ではspanはdivよりも狭いイメージ。というのもdivは使うとその前後は必ず改行される。つまり文章の一部とかでは使えない。
一方spanは改行が入らないので、文の中でここだけ色を変えたいからspanタグで括っておく、という使い方ができる。

ちなみに改行が入らないspanタグなどを「inline」、改行が入るdivタグやliタグを「block」と呼ぶ。これを理解するといろんな表現ができそうだが、まだよくわからないのでとりあえずspanタグの使い所だけ。

<div>
 <p>
    AriとSivの2人で作成中のホームページ。<br>
    高校時代の同級生。<br>
    異なる大学に進学するが、どちらも暇。
 </p>
</div>

先ほどの例の一部を抜き出してみた。この中で「Ari」「Siv」だけ色を変えたい、なんて思ったときにそれぞれspanタグで挟む。

<div>
 <p>
    <span>Ari</span>と<span>Siv</span>の2人で作成中のホームページ。<br>
    高校時代の同級生。<br>
    異なる大学に進学するが、どちらも暇。
 </p>
</div>

こうすればあとはCSSの方に任せられる。

id

これから紹介する「id」、「class」はタグではない。属性と呼ばれるわけだが、一つ一つのタグに名前をつけていく物になる。二つの違いは、ざっくり言えば「何回も使えるか否か」である。同じid名は一つのホームページに一回までしか使えない。学校で言うと学籍番号のようなもので、あなただけのもの。

例えば先ほどの例で、「Ari」も「Siv」もショッキングピンクにしたい、という場合なら「spanタグがついているところをピンクにする」というコードで十分だが、「Siv」はオレンジ、「Ari」は絵の具全部混ぜたような色、の場合はそうはいかない。
そこで下のようにしてみる。

<span　id="dodomeiro">Ari</span>と<span　id="orange">Siv</span>の2人で作成中のホームページ。

こうすれば、id名を指定して色を変えることが可能になる。「orange」という名前がついているところをオレンジにする、というコードが書ける。

とはいえ、オレンジに変えたい部分がホームページの中で一箇所ってことはないかもしれない。こういう場合は何度も同じ名前をつけられる「class」を使った方がいい。（本来id属性は「div」とかの大きなまとまりに名前をつけるときに多用されます。多分。）

class

「class」とはまんま学校のクラスのようなものである。一年一組の生徒はみんな同じ時間割で勉強するよね、という話である。生徒1人のクラスでした、なんて人そうそういないよね。

先ほどの続きだと、ホームページの中でオレンジにしたい単語を全部spanタグで挟んでおく。その上で<span class="orange">のように名前をつけておけば、「"orange"というクラス名の箇所を全部オレンジにする」が可能になる。

<p> 
   　　 Ariと<span　class="orange">Siv</span>の2人で作成中のホームページ。<br>
     高校時代の<span class="orange">同級生</span>。<br>
     異なる大学に進学するが、どちらも暇。
</p>

このようにしておけば「Siv」と「同級生」は一括でオレンジにできるってもんだ。

まとめ

今回は、HTMLとCSSを使って体裁の整ったホームページを作るのには欠かせないタグや属性を紹介した。「タグ自体には意味のないタグ」なんて意味わからんことこの上ないが、次回以降CSSに手を出した時に役に立つことを信じたい。

次回やっとホームページに色がつくので、お楽しみに！

この記事が気に入ったらサポートをしてみませんか？