HTML・CSSその②
HTMLの基本タグ
目次
ドキュメントの雛形部分
一般的なHTMLの雛形コード(バージョンHTML5、文字コードUTF-8、言語日本語で書く場合)を以下に示す。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>・・・</title>
</head>
<body>
<article>
・・・
</article>
</body>
</html>
- 1行目：HTML5の仕様に基づいたドキュメントであることの宣言。
- 2行目：<html>タグと日本語で主に書かれていることの宣言。
- 3行目：<head>タグ。<head>と</head>で囲まれた部分に必要な情報を書く。
- 4行目：UTF-8で書かれていることの宣言。
- 5行目：スタイルシート"style.css"を呼び出す。
- 6行目：ここに記事のタイトルを書く(記事には表示されない)。
- 10行目：ここに記事のHTMLを書く。
基本的なタグと使い方
基本のタグ
頻繫に使用するタグをいくつか以下に示す。
<p></p>
説明
テキストのひとまとまりの段落を示す。これで囲まれた部分はひとかたまりで表示される。ただし、段落の字下げは行われない。
例
これは1つの段落です。
例のコード
<p>これは1つの段落です。</p>
<a></a>
説明
リンクを設定するためのタグ。
例
ここを押すとリンク先を開くことができる。
例のコード
<a href="https://ichinet.hatenablog.com/">ここを押す</a>とリンク先を開くことができる。
<h1></h1>から<h6></h6>
説明
見出しを示す。これで囲まれた部分は見出しとなる。<h1></h1>から<h6></h6>まであり、数が大きくなるほど小さな見出しになる。
例
見出し
このように表示される。
例のコード
<h3>見出し</h3>
<p>このように表示される。</p>
<ol></ol>と<ul></ul>,<li></li>
説明
箇条書をするためのタグ。<ol></ol>は番号付き箇条書、<ul></ul>は番号なし箇条書をするためのタグ。各項目を<li></li>で囲む。
例
- はじめ
- 2つ目
- 3つ目
- はじめ
- 2つ目
- 3つ目
例のコード
<ol>
<li>はじめ</li>
<li>2つ目</li>
<li>3つ目</li>
</ol>
<ul>
<li>はじめ</li>
<li>2つ目</li>
<li>3つ目</li>
</ul>
テキストの強調に使われるタグ
テキストの強調に使われるタグをいくつか示す。
<b></b>
説明
太字で表示するためのタグ。
例
太字に使われるタグ。
例のコード
<b>太字</b>に使われるタグ。
<i></i>
説明
イタリック体で表示するためのタグ。主に数値を強調したいときに使う。
例
10%減少した。
例のコード
<i>10%</i>減少した。
<u></u>
説明
下線を引くためのタグ。
例
下線に使われるタグ。
例のコード
<u>下線</u>に使われるタグ。
<strong><strong>
説明
重要な部分であることを表すためのタグ。表示のされ方は場合により異なる。
例
重要な部分に使われるタグ。
例のコード
<strong>重要な部分</strong>に使われるタグ。
<em></em>
説明
強調したい部分であることを表すためのタグ。表示のされ方は場合により異なる。
例
強調したい部分に使われるタグ。
例のコード
<em>強調したい部分</em>に使われるタグ。
<mark></mark>
説明
マーキングするためのタグ。
例
マーキングするときに使われるタグ。
例のコード
<mark>マーキング</mark>するときに使われるタグ。空要素
空要素とは、終了タグがなく内容を持たない要素のこと。代表的なものをいくつか示す。
<meta>
画面には表示されない、HTMLドキュメント自体の情報を記録するためのタグ。
<link>
画面には表示されない、HTMLドキュメント自体の情報を記録するためのタグ。
<br>
改行するためのタグ。
<img>
画像を表示するためのタグ。
<input>
フォームのテキストフィールドやチェックボックスなどを表示するタグ。
