HTML タグ はじめての 方 ガイド Ver1.0 1
< 目 次 > 1ホームページ 構 造 2HTML タグ 3スタイルシート Copyright ナレッジコーディネーター All Rights Reserved. 2
第 1 章 ホームページ 構 造 Copyright ナレッジコーディネーター All Rights Reserved. 3
1HTMLとは ウェブ 上 の 文 書 を 記 述 するためのマークアップ 言 語 であり プログラム 言 語 の 一 種 で す 開 始 タグ 文 章 終 了 タグ の 形 で 構 成 される タグの 中 には 単 独 で 使 用 でき るものもある プログラムを 記 述 するには 使 用 するタグを 理 解 しておく 必 要 があります < 例 > 〇 文 章 を 書 きたい 場 合 開 始 タグ 終 了 タグ テキストテキストテキストテキスト 〇 画 像 を 表 示 したい 場 合 Copyright ナレッジコーディネーター All Rights Reserved. 4
2 文 書 構 造 タグの 中 には web 上 に 表 示 されるものと 表 示 されないものが 存 在 します web 上 に 表 示 さ れるものは2 章 HTMLタグにて 詳 細 を 説 明 します 本 章 では web 上 に 表 示 されない( 主 に 文 書 構 造 に 関 わるもの)について 説 明 をします 主 なものは 宣 言 文 書 宣 言 文 書 情 報 表 文 書 関 情 報 情 報 指 定 文 書 文 書 本 体 表 < 使 用 例 > <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0"> <title>タイトル</title> <meta name="keywords" content="seoキーワード"> <meta name="description" content=" 説 明 文 "> </head> <body> </body> </html> Copyright ナレッジコーディネーター All Rights Reserved. 5
3head ヘッドにはその 文 書 の 作 者 情 報 サーチエンジン 向 けのキーワードや 説 明 文 書 のタイ トル 利 用 するスタイルシート 等 ( 詳 細 は3 章 で 説 明 ),その 文 書 に 関 する 情 報 を 記 述 しま す <TITLE>~</TITLE>で 指 定 する 文 書 のタイトル 以 外 のほとんどの 情 報 はブラウザ 上 には 表 示 されない < 使 用 頻 度 の 高 いもの> meta charset: 使 用 する 文 字 を 指 定 meta name="keywords" 検 索 設 定 meta name="description" 検 索 説 明 文 Title 検 索 link rel="stylesheet" 設 定 Copyright ナレッジコーディネーター All Rights Reserved. 6
4body この 範 囲 に 記 述 されたものはブラウザに 表 示 されます HTML タグを 使 用 し 記 述 します < 使 用 例 > <body> <h1> 見 出 し1</h1> <h2> 見 出 し2</h2> <p>テキストテキストテキスト</p> <img src=../abc.jpg alt= abc > </body> Copyright ナレッジコーディネーター All Rights Reserved. 7
第 2 章 HTMLタグ Copyright ナレッジコーディネーター All Rights Reserved. 8
1テキスト 1-1 見 出 しをつける <h1>~<h6>を 使 用 して 文 書 の 見 出 しをつけます <h1>から 順 に 使 用 します 使 用 タグ <h> </h> 記 述 <h1> 見 出 し1</h1> <h2> 見 出 し2</h2> <h3> 見 出 し3</h3> <h4> 見 出 し4</h4> ディスプレイ 表 示 見 出 し1 見 出 し2 見 出 し3 見 出 し4 注 意 点 見 出 しの 大 きさで<h>の 順 番 を 変 えることはNG 表 示 はされるが SEO 的 にはNG 文 字 の 大 きさを 変 えたいのであれば 3 章 を 参 照 <h1> <h2> <h3> <h1> 本 来 は<h2>もしくは<h3>でなければならない Copyright ナレッジコーディネーター All Rights Reserved. 9
1-2 文 章 を 書 く 一 つの 段 落 としてテキストを 表 示 したいときに 使 用 します 使 用 タグ <p> </p> 記 述 <p>テキストテキスト</p> ディスプレイ 表 示 テキストテキスト Copyright ナレッジコーディネーター All Rights Reserved. 10
1-3テキストを 太 字 / 斜 体 にする テキストを 太 字 / 斜 体 に 変 えたいときに 使 用 します 使 用 タグ 太 字 <b> </b> 斜 体 <i> </i> 記 述 太 字 <b> 太 字 太 字 </b> 斜 体 <i> 斜 体 斜 体 </i> ディスプレイ 表 示 太 字 太 字 太 字 斜 体 斜 体 斜 体 Copyright ナレッジコーディネーター All Rights Reserved. 11
1-4 改 行 する 文 章 を 指 定 の 場 所 で 改 行 したいときに 使 用 します 使 用 タグ <br> 記 述 <p>テキスト<br>テキスト</p> ディスプレイ 表 示 テキスト テキスト 注 意 点 終 了 タグは 必 要 ありません Copyright ナレッジコーディネーター All Rights Reserved. 12
1-5テキストの 意 味 付 け 文 章 に 意 味 づけしたいときに 使 用 します 使 用 タグ <em>: 強 調 したい <strong>: 強 調 したい <adress>: 連 絡 先 問 合 せ 先 <blockquote>: 引 用 転 載 <cite>: 出 典 参 照 先 Copyright ナレッジコーディネーター All Rights Reserved. 13
2リンク 2-1リンクをはる 文 章 を 指 定 の 場 所 で 改 行 したいときに 使 用 します 使 用 タグ <a> 記 述 <a href="a.html">テキスト</a> ディスプレイ 表 示 テキスト 注 意 点 設 定 するURLは 絶 対 パス 相 対 パスどちらでもOKです ( 絶 対 パス)http://www.a.html ( 相 対 パス)a.html Copyright ナレッジコーディネーター All Rights Reserved. 14
3 画 像 3-1 画 像 を 表 示 する 画 像 を 表 示 するときに 使 用 します 使 用 タグ <img> 記 述 img src="arrow.jpg" alt 画 像 URL 画 像 名 ( 画 像 が 表 示 されない 場 合 この 文 字 が 変 わりに 表 示 ) ディスプレイ 表 示 注 意 点 画 像 の 大 きさ 幅 等 を 変 えたいのであれば 3 章 を 参 照 Copyright ナレッジコーディネーター All Rights Reserved. 15
4 表 4-1 表 を 作 成 する 表 を 表 示 するときに 使 用 します 使 用 タグ 1<table>:テーブルを 作 成 2<tr>: 行 を 作 成 3<th>: 見 出 しセル 4<td>:データセル 1テーブル 2 行 4データ 3 見 出 し 記 述 <table> <tr> <th> 見 出 し1</th> <td>データ1</td> <td>データ2</td> <td>データ3</td> </tr> </table> ディスプレイ 表 示 見 出 し1 データ1 データ2 データ3 注 意 点 テーブルの 大 きさ 幅 等 を 変 えたいのであれば 3 章 を 参 照 Copyright ナレッジコーディネーター All Rights Reserved. 16
5リスト 5-1リストを 作 成 する 箇 条 書 きやリスト 表 示 したい 時 に 使 用 します 使 用 タグ 1リスト 形 式 :ol( 順 序 あり) ul( 順 序 なし) 2リスト 項 目 :li 記 述 1 順 序 あり <ol> <li>テキスト1</li> <li>テキスト2</li> <li>テキスト3</li> <li>テキスト4</li> </ol> 2 順 序 なし <ol> <li>テキスト1</li> <li>テキスト2</li> <li>テキスト3</li> <li>テキスト4</li> </ol> ディスプレイ 表 示 1 順 序 あり 1.テキスト1 2.テキスト2 3.テキスト3 4.テキスト4 2 順 序 なし テキスト1 テキスト2 テキスト3 テキスト4 注 意 点 リストの 表 示 を 変 えたいのであれば 3 章 を 参 照 Copyright ナレッジコーディネーター All Rights Reserved. 17
6その 他 6-1スタイルシートを 記 述 する HTMLタグの 装 飾 を 施 したい 時 に 使 用 します head 内 に 記 述 します 使 用 タグ 1HTMLファイルに 直 接 記 述 する 場 合 :<style> 2 外 部 css ファイルのスタイルシートを 読 み 込 む 場 合 :<link> 記 述 1HTMLファイルに 直 接 記 述 する 場 合 <head> <style type="text/css"> <!-- body {margin: 10px 20px;} p {font-size: 14px;} --> </style> </head> 2 外 部 css ファイルのスタイルシートを 読 み 込 む 場 合 <head> <link rel="stylesheet" href="style.css" type="text/css" media="all"> </head> 注 意 点 スタイルシートの 影 響 はファイル 全 体 に 及 びます 特 定 の 範 囲 のみに 適 用 したければ 後 述 の<div> 等 を 使 用 して 指 定 します 詳 細 は3 章 を 参 照 Copyright ナレッジコーディネーター All Rights Reserved. 18
6-2 範 囲 指 定 する スタイルシートに 記 述 した 装 飾 を 範 囲 指 定 して 使 用 する 時 します 使 用 タグ 1ブロック 要 素 :<div> 2インライン 要 素 :<span> ブロック 要 素 とは 見 出 し 段 落 リスト フォームなどのひとつのまとまった 単 位 と して 表 される 要 素 で 一 般 的 なブラウザでは 前 後 に 改 行 が 入 って 表 示 されます インラ イン 要 素 とは 主 に 文 章 の 一 部 として 利 用 される 要 素 であり その 前 後 は 改 行 されません 記 述 1ブロック 要 素 :<div> <div class= alignright > </div> 2インライン 要 素 :<span> <span class= textred > </span> ディスプレイ 表 示 1ブロック 要 素 :<div> 2インライン 要 素 :<span> 右 側 表 示 赤 字 表 示 注 意 点 div や span はそれ 自 体 では 意 味 を 持 ちません スタイルシートに 記 述 した 内 容 を html ファ イルに 範 囲 指 定 して 適 用 するものです 細 かな 設 定 となるので 表 示 確 認 は 必 ず 行 うように しましょう Copyright ナレッジコーディネーター All Rights Reserved. 19
6-3コメントを 入 れる HTML ファイルにコメントを 入 れたい 時 に 使 用 します 使 用 タグ <!-- --> 記 述 <h2> 事 業 者 紹 介 </h2> <!-- ここから 事 業 者 紹 介 の 文 章 を 書 きます--> </p> ディスプレイ 表 示 事 業 者 紹 介 テキストテキスト Copyright ナレッジコーディネーター All Rights Reserved. 20
第 3 章 スタイルシート Copyright ナレッジコーディネーター All Rights Reserved. 21
1 背 景 背 景 色 や 背 景 画 像 の 指 定 を 行 う 背 景 画 像 を 指 定 する background-image:url("url"); 背 景 色 を 指 定 する background-color : カラー; (カラー) red,blue など もしくはウェブカラー(#0e0e0e 等 ) 背 景 画 像 のリピートを 指 定 する background-repeat : 値 ; no-repeat: 繰 り 返 しなし repeat-y: 縦 方 向 に 背 景 画 像 を 繰 り 返 し repeat-x: 横 方 向 に 背 景 画 像 を 繰 り 返 し repeat: 縦 横 方 向 に 背 景 画 像 を 繰 り 返 し Copyright ナレッジコーディネーター All Rights Reserved. 22
2テキスト テキストの 幅 や 大 きさ カラーの 指 定 を 行 う テキストの 太 さを 指 定 する font-weight: 値 ; normal: 通 常 bold: 太 字 テキストのサイズを 指 定 する font-size: 〇 px; テキストの 高 さを 指 定 する font-height: 〇 px; テキストの 種 類 を 指 定 する font-family: フォント 名 1,フォント 名 2, ; 行 の 高 さを 指 定 する line-height: 〇 px; 行 揃 えの 位 置 を 指 定 する text-align : 値 ; left: 左 寄 せ right: 右 寄 せ center: 中 央 寄 せ justify: 均 等 割 り テキストの 色 を 指 定 する color :ウェブカラー; Copyright ナレッジコーディネーター All Rights Reserved. 23
3 幅 高 さ <table>や<img>などの 幅 高 さの 指 定 を 行 う 高 さを 指 定 する height: 〇 px; もしくは 〇 %; 幅 を 指 定 する width: 〇 px; もしくは 〇 %; Copyright ナレッジコーディネーター All Rights Reserved. 24
4 余 白 マージン/パディングの 設 定 を 行 う マージン パディング マージン:ある 範 囲 における 外 側 の 余 白 パディング:ある 範 囲 における 内 側 の 余 白 マージンを 指 定 する margin: 値 ; 〇 px: 上 右 下 左 すべて 〇 px の 余 白 を 設 定 〇 px px: 上 下 〇 px の 余 白 左 右 px の 余 白 を 設 定 〇 px px px px: 上 〇 px 右 px 下 px 左 px の 余 白 を 設 定 パディングを 指 定 する padding: 値 ; 〇 px: 上 右 下 左 すべて 〇 px の 余 白 を 設 定 〇 px px: 上 下 〇 px の 余 白 左 右 px の 余 白 を 設 定 〇 px px px px: 上 〇 px 右 px 下 px 左 px の 余 白 を 設 定 Copyright ナレッジコーディネーター All Rights Reserved. 25
5ボーダー ボーダーのスタイル 太 さ 色 を 設 定 します ボーダーの 色 を 指 定 する border-color: 値 ; カラー: 上 右 下 左 すべて 同 じカラーを 設 定 ボーダーのスタイルを 指 定 する border-style: 値 ; none: 非 表 示 hidden: 非 表 示 solid:1 本 線 bouble:2 本 線 dotted: 点 線 ボーダーの 太 さを 指 定 する border-width: 〇 px; Copyright ナレッジコーディネーター All Rights Reserved. 26
6 表 示 配 置 ボックスの 表 示 の 仕 方 や 配 置 を 設 定 します はみ 出 し 部 分 の 表 示 を 指 定 する overflow: 値 ; visible:はみ 出 しても 全 て 表 示 scroll: 入 りきらない 部 分 はスクロール 表 示 hidden: 入 りきらない 部 分 は 非 表 示 ( 基 準 位 置 からの) 配 置 方 法 を 指 定 する position: 値 ; static: 初 期 値 relative: 相 対 位 置 を 指 定 absolute: 絶 対 位 置 を 指 定 上 記 に 併 用 して 下 記 を 指 定 することが 多 いです top 〇 px: 上 部 からの 位 置 を 指 定 bottom 〇 px: 底 部 からの 位 置 を 指 定 left 〇 px: 左 部 からの 位 置 を 指 定 right 〇 px: 右 部 からの 位 置 を 指 定 指 定 された 要 素 を 右 もしくは 左 に 寄 せて 配 置 する float: 値 ; left: 左 寄 せ right: 右 寄 せ 回 り 込 みの 解 除 (float の 解 除 ) clear: 値 ; left: 左 寄 せを 解 除 right: 右 寄 せを 解 除 both: 左 寄 せ 右 寄 せを 解 除 Copyright ナレッジコーディネーター All Rights Reserved. 27
7テーブル テーブルの 表 示 方 法 を 指 定 テーブルのレイアウトを 指 定 table-layout: 値 ; auto: 初 期 値 自 動 レイアウト fixed: 固 定 レイアウト テーブルの 隣 接 するボーダーの 重 なりを 指 定 border-collapse: 値 ; collapse: 隣 接 するボーダーを 重 ねて 表 示 separate: 隣 接 するボーダーを 間 隔 を 空 けて 表 示 Copyright ナレッジコーディネーター All Rights Reserved. 28
8リスト リストの 表 示 方 法 を 指 定 リストのスタイルを 設 定 list-style-type: 値 ; none:マーカーなし disc: を 表 示 circle: 〇 を 表 示 square: を 表 示 decimal: 数 字 を 表 示 lower-alpha: 小 文 字 のアルファベットを 表 示 リストの 先 頭 に 画 像 を 設 定 list-style-image: 値 ; URI: 表 示 したい 画 像 ファイルを 指 定 none: 画 像 ファイルを 指 定 しない 無 断 引 用 転 載 を 禁 じます すべての 著 作 権 はナレッジコーディネーターに 属 します < 作 成 情 報 > 作 成 :ナレッジコーディネーター 公 開 日 :2015 年 5 月 18 日 版 数 :1.0 Copyright ナレッジコーディネーター All Rights Reserved. 29