今までは、ウェブサイトの基本構造、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種類のタグを紹介した。
- divタグはブロックレベル、spanは文章の一部分の範囲を設定する
- 順序なしの箇条書きはulタグ、順序ありの箇条書きはolタグ
- ウェブサイト内外にリンクするaタグ
- イメージを挿入するimgタグ
冒頭でも触れた通り、これらのタグの意味と使い方を理解できれば、かなり本格的なWebページを制作できるだろう。
もちろん、タグはこれだけではないが、必要に応じてネットで検索し、使っていけば良い。
ネットは、ウェブデザイナーやプログラマーを問わず、すべてのウェブ製作者の教科書だ。
【本で学習したい人はコレ】
コメント