一から始めるWeb制作 #8〜最低限これだけは使いこなしたい!よく使うタグ

ウェブデザイン イメージ

今までは、ウェブサイトの基本構造、HTMLとCSSの基本的な書き方を説明してきた。

そこで、今回から、より実践的なWeb制作及びコーディングについて説明したい。

最初は、ウェブ制作でよく使う便利かつ重要なタグと、その使い方を紹介する。

最低限、ここで紹介するタグを使いこなせれば、かなり本格的なWebページを制作できるに違いない。

divタグとspanタグは範囲のタグ

最初は、最も多用するであろう、divとspanタグについて。

どちらも範囲を設定するタグなのだが、範囲の大きさで使い分けることになる。簡単にいうと、

  • divはブロックレベルの範囲(「division(仕切り、境界)の略」)
  • spanはより狭い、文章の中の一部分(「範囲、長さ、期間」を意味する英語)

を設定するもの、と覚えれば良い。

具体的に、今回もCodePenを使って説明していこう。

See the Pen
div_span_tag
by Kazy (@uraflt)
on CodePen.

上記の「HTML」「CSS」「Result」タブをクリックしながら、見比べてほしい。

一から始めるWeb制作 #5〜とりあえずHTMLとCSSを書いてみよう」でも引用した、夏目漱石の「吾輩は猫である」の冒頭部分のHTMLで、h1に色を指定し、文章をpタグで段落に分けたものだ。

今回は、divとspanの違いがわかるように、上記CodePenに追加してみた。

ブロックレベルのdivタグ

この中で、h1より下の文章全体をdivで囲み、ブロックレベルで、

  • 囲んだ部分に枠線を追加
  • 枠線内の上下左右に一文字分の余白を追加

するよう、CSSで指示してある。CSSとHTMLをリンクさせるため、クラス名を「block-1」として特定している。

divで囲んだブロック前後(ブラウザ上では上下)には、必ず改行が入る。

文章の一部分のspanタグ

一方、HTML内文書冒頭、pタグで囲まれた「吾輩は猫である。名前はまだ無い。」のうち、「吾輩は猫である。」のみspanで囲み、「soushoku」というクラス名をつけた。「soushoku」のCSSでは、文字色「青」を指定している。

ブラウザ上では、pタグ内の「吾輩は猫である。」だけ、文字が青色になっている。

もし、pタグ内全ての文字色を青にしたいのなら、pタグにスタイルを追加すれば良いが、このように「一部分だけ」装飾するときに使うのが、spanタグということ。

spanはインライン要素のため、タグの前後で改行されることはない。

divタグとpタグはどう違う?

では、「一から始めるWeb制作 #5〜とりあえずHTMLとCSSを書いてみよう」で説明した、段落を区切るpタグとの違いは、どう捉えれば良いか?

それは、それぞれの名前の由来を考えると、わかりやすいかもしれない。

  • div:deivision(仕切り)
  • p:paragragh(段落)

のように、ページ内にブロックを作りたいときに使用するのがdiv、あくまで文章の段落を分けるのがpタグということ。

箇条書きはulとolの2種類のタグがある

次に紹介するのは、ul・olタグ。2つの違いは、

  • ul:順序のない箇条書き(「Unordered List」の略)
  • ol:順序ありの箇条書き(「Ordered List」の略)

ということ。

具体的には、olタグを使用した場合は、上から順に番号が振られ、ulタグは順序は関係ないので、黒丸(・)でリスティングする。

箇条書きの各項目は、ul・olタグ内に、liタグ(「List item」の略)でリスティングする。

この違いをCodePenで表示してみよう。

See the Pen
ul_ol_tag
by Kazy (@uraflt)
on CodePen.

色の箇条書きは、特に順序は関係ないのでul、一方野球のオーダーのような箇条書きは、順序が変わると意味まで変わってしまいそうなので、olとしておいた。

ul・olの使い分けは、その意味を検索エンジンが読み取るので、SEO的にも重要。そのため、きちんと使い分けることが大切だ。

ナビゲーションでも使用されるul

実は、ナビゲーション(メニュー)にも、箇条書きのulを使用する。これも、メニュー欄に記載された各項目は順序なしの箇条書きであることを示す。

一から始めるWeb制作 #6〜HTML & CSSコーディングの基本と規則」で紹介した、デモサイトの上部に表示された各メニュー項目は、ul・liで作成している。

これも検索エンジンに、「ナビゲーションですよ〜」と認識してもらうためのコーディングだ。

上記CodePenで紹介した箇条書きと違うのは、CSSで黒丸を削除したり(list-style: none;)、横一列に並ぶよう(display: flex;)指示しているため。前回記事内のHTMLとCSSを見てもらえば、それがよくわかるだろう。

内部・外部リンクのaタグ

通常、ウェブサイトは複数のページからできている。

ユーザーが自由にウェブサイト内を行き来できるように、それぞれのページをリンクさせるためのタグが、aタグ(「Anchor(錨)」の略)だ。

また、外部サイトを引用するためにリンクを貼ることもあり、この場合もaタグを使用する。

aタグは頻繁に使用するタグなのだ。

では、その書き方。

例として、前々回作成したデモサイトのトップページから、画面上部のメニューの一つ、「Debian」へアクセスする場合。「Debian」には、そのカテゴリーのトップページとして「Debianに関する記事一覧(index.html)」というファイルがあるとする。

<a href="Debian/index.html">Debianに関する記事一覧</a>

aタグには、必ず「href」というリンク先のアドレスを記入する属性を使用し、リンクさせたい文字(ここでは「Debianに関する記事」)の後に、</a>で閉じる。

ブラウザ上では、リンクさせたい文字(ここでは「Debianに関する記事」)に自動でアンダーラインが引かれるので、

「ここは、別ページへリンクしているな」

ということがわかる。

また、target属性は、リンク先の文書を開く先を指定するもの。上記のように、特にtarget属性がない場合、そのまま同じウィンドウ上でリンク先ページに変わるが、

<a href="Debian/index.html" target="_blank">Debianに関する記事一覧</a>

と「target=”_blank”」という属性値を追加すると、別ウィンドウでリンク先文書を開く。

target属性の属性値には、その他にも

  • _self
  • _parent
  • _top

があるが、使用するのはほぼ「target=”_blank”」のみくらいだ。

イメージ(画像)を挿入するimgタグ

最後は、イメージ(画像)を挿入するimgタグについて。

デモサイトでは、トップページに2つのイメージを挿入している。そのHTMLは、以下の通り。

      <div>
        <a href="index.html"><img id="logo" src="images/Zakkuri.png" alt="Site Logo"></a>
      </div>

 <!-- 途中省略 -->
        <h1>ざっくりLinux!</h1>
        <p class="title-discript">Linuxのあれこれをざっくりと書いています</p>

        <img class="imgcenter" src="images/Linux.jpg" alt="Linux イメージ">

imgタグには、

  • src(source attribute)属性
  • alt(alternative text)属性

の2つは必須なので、必ず入れるようにしよう。

src属性

src属性は、aタグにおけるhref属性同様、イメージがある場所を指定する属性。上記HTMLの場合、2つのイメージいずれもimagesフォルダに格納しているので、「images/Linux.jpg」のように書く。

これも、ディレクトリが違う場合は「../」などで階層を揃える(相対パスの場合)。

alt属性

art属性には、以下3つの役割がある。

  • 万が一、HTML要素となるイメージがブラウザに表示されない場合に、文字で表示する
  • ウェブページを読み上げる際、イメージ表示の代わりにart属性の文字を読み上げることで、視覚に障害がある方でもウェブページを読むことができる
  • 検索エンジン(機械)が、イメージの内容を的確に把握する

特に、視覚に障害がある方でもWebページが読めるようにすることは、ウェブ・アクセシビリティにおいて、重要だ。このことはGoogleでも重要視していて、art属性を忘れてしまうと、SEO的にコーディングエラーとされる。

「よく使うタグ」のまとめ

今回は、ウェブ制作でよく使う、以下4種類のタグを紹介した。

  1. divタグはブロックレベル、spanは文章の一部分の範囲を設定する
  2. 順序なしの箇条書きはulタグ、順序ありの箇条書きはolタグ
  3. ウェブサイト内外にリンクするaタグ
  4. イメージを挿入するimgタグ

冒頭でも触れた通り、これらのタグの意味と使い方を理解できれば、かなり本格的なWebページを制作できるだろう。

もちろん、タグはこれだけではないが、必要に応じてネットで検索し、使っていけば良い。

ネットは、ウェブデザイナーやプログラマーを問わず、すべてのウェブ製作者の教科書だ。

【本で学習したい人はコレ】

コメント