タグ書き方

指定したいテキストを【タグ】で囲います。【属性】を指定するタグもあります。

タグ
属性

<div>テキストです。</div>

<div class="box">
テキストは
複数行の場合も
全体を囲います。
</div>

テキストです。

テキストは
複数行の場合も
全体を囲います。

タグ(要素)の種類

タグは以下の3種類に分けられます。

領域を決めるもの
役割を決めるもの
装飾するもの

領域を決めるもの

ページのタイトルなど「表紙」となる部分: <header>******</header>
ページのメインとなるコンテンツ: <main>******</main>
ページの「エンドロール」となる部分（たとえばコピーライト表記など）: <footer>******</footer>
ページ内のセクション[章]分け: <section>******</section>
その他分けたいものなんでも: <div>******</div>

役割を決めるもの

基本タグとして以下のようなものがあります。詳細な使い方はあとで示します。

見出し

<h1>見出し（タイトル）</h1>
<h2>セクションタイトル</h2>

見出し（タイトル）

セクションタイトル

テキスト（文章）

<p>テキスト文が入ります。</p>

テキスト文が入ります。

リスト

<ul>
　<li>箇条書き1</li>
　<li>箇条書き2</li>
</ul>

<ol>
　<li>番号付きリスト1</li>
　<li>番号付きリスト2</li>
</ol>

箇条書き1
箇条書き2

番号付きリスト1
番号付きリスト2

画像

h(見出し)要素

各セクションの見出し（タイトル）を示すタグ。

h1タグは基本的にページに1つ
h2以降は何回使ってもよい
Hxの数字は順になっていること

<h1>WEBプログラミング</h1>
<h2>WEBプログラミング</h2>
<h3>WEBプログラミング</h3>

WEBプログラミング

以下のようにh1の次はh2、その次はh3というように順番の階層構造になっている必要があります。
たとえばh1の直下にh3が来るようなかたちはNGです。

ul, ol要素

箇条書きを示すタグ。（単純な箇条書きはul、順番がある場合はol）

<ul>
　<li>キャベツ</li>
　<li>豚肉</li>
</ul>

<ol>
　<li>食材をカットします。</li>
　<li>強火で炒めます。</li>
　<li>できあがり。</li>
</ol>

キャベツ
豚肉

食材をカットします。
強火で炒めます。
できあがり。

dl要素

項目と説明がセットになった箇条書きリスト。項目をdt、その説明文はddで指定。

<dl>
　<dt>HTML</dt>
　<dd>Webブラウザに文字を表示させるための言語</dd>
　<dt>CSS</dt>
　<dd>文書の見た目を決めるために書かれるもの</dd>
</dl>

HTML: Webブラウザに文字を表示させるための言語
CSS: 文書の見た目を決めるために書かれるもの

p要素

文章のひとつのかたまりを示すタグ。

<p>この竹垣に竹立てかけたのは竹立てかけたかったから竹立てかけた</p>

この竹垣に竹立てかけたのは竹立てかけたかったから竹立てかけた

例えば以下のような箇所をpタグで囲います。

img要素

画像を示すタグ。src属性が必須。要素を囲う必要が無いので閉じタグは不要。

<img src="img01.jpg" alt="○○の画像"></img> ※閉じタグは不要

src: 画像の置き場所を示す
alt: 画像の説明テキスト

a(アンカー)要素

リンクを示すタグ。href属性が必須。

<a href="./next.html">次のページ</a>
<a href="./next.html" target="_blank">次のページ（別窓）</a>

※画像などタグを含むコンテンツ自体を囲ってもOK
<a href="./img01.jpg">
　<img src="img01.jpg" alt="○○の画像">
</a>

href: 飛び先を示す
target: 飛び先のページの開き方
_blank : 　新しいページで開く
(何も書かない)：　同じページで開く

次のページ
次のページ（別窓）

装飾するもの

強調文字: <strong>強調文字です</strong>
<b>強調文字です</b>
※ bタグは今はほとんど使わないので、strongタグで指定してCSSで見た目を調整するかたちがベスト

強調文字です
強調文字です
CSSで装飾: <span class="xxxx">なんでも</span>
※ クラスで指定したCSSで装飾を決めるため、タグを付けるだけでは見た目は変わらない

なんでも

その他

br要素

改行したい箇所に入れるタグ。

<p>
きょうは西日本では雨が降り、夜は雷を伴って激しく降る所もあるでしょう。<br>東海や北陸も所々で雨が降る見込みです。関東や北日本、南西諸島では晴れる所が多いですが、午後は次第に雲が広がりそうです。<br>あすは全国的に雨が降り、雨や風が強まって、雷を伴い激しく降る所もあるでしょう。ただ、西日本や東海、南西諸島では午後は次第に晴れてくる見込みです。
</p>

きょうは西日本では雨が降り、夜は雷を伴って激しく降る所もあるでしょう。
東海や北陸も所々で雨が降る見込みです。関東や北日本、南西諸島では晴れる所が多いですが、午後は次第に雲が広がりそうです。
あすは全国的に雨が降り、雨や風が強まって、雷を伴い激しく降る所もあるでしょう。ただ、西日本や東海、南西諸島では午後は次第に晴れてくる見込みです。

今はもう使わないタグ

CSSがない時代に使っていたデザイン、レイアウト用タグで今はもうほぼ使われなくなったもの。

フォント指定: <font>
太字: <b>
センター寄せ: <center>
配置指定: <align>

ブロック要素とインライン要素

タグにはブロックタイプとインラインタイプの2種類があり、タグ毎にどちらに分類されるか決まっています。

ブロック要素

ブロック要素は独立した行で表示されます。

基本的には【領域を決めるもの】【役割を決めるもの】はブロック要素

<p>きょうは西日本では雨が降り、</p><p>夜は雷を伴って</p><p>激しく降る所もあるでしょう。</p>

きょうは西日本では雨が降り、

夜は雷を伴って

激しく降る所もあるでしょう。

代表的なブロック要素: <section> <div> <p> <ul>

インライン要素

インライン要素は他のテキストと同じ行で改行されずに表示されます。

基本的には【装飾するもの】【画像】はインライン要素（=文章の途中に入る可能性があるもの）

<span>きょうは西日本では雨が降り、</span>
<span>夜は雷を伴って</span>
<span>激しく降る所もあるでしょう。</span>

きょうは西日本では雨が降り、夜は雷を伴って激しく降る所もあるでしょう。

代表的なインライン要素: <span> <strong> <a> <img>

実習課題

下記ページからダウンロードできます。

実習課題ページへ