ホームページ制作スターターズ

(1)

HTML タグ

はじめての方

ガイド

(2)

＜目次＞

１ホームページ構造

２ HTML タグ

(3)

第１章

(4)

１ＨＴＭＬとは

ウェブ上の文書を記述するためのマークアップ言語であり、プログラム言語の一種です。開始タグ、文章、終了タグの形で構成される。タグの中には単独で使用できるものもある。プログラムを記述するには、使用するタグを理解しておく必要があります。

＜例＞

〇文章を書きたい場合 ↓開始タグ終了タグ↓ テキストテキストテキストテキスト〇画像を表示したい場合 ” ”

(5)

２文書構造

タグの中には、web 上に表示されるものと表示されないものが存在します。web 上に表示されるものは２章ＨＴＭＬタグにて詳細を説明します。本章では、web 上に表示されない（主に文書構造に関わるもの）について説明をします。主なものは、宣言文書宣言文書情報表文書関情報情報指定文書文書本体表

＜使用例＞

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

</head> <body>

・・・・・・

</body> </html>

(6)

３head

ヘッドにはその文書の作者情報、サーチエンジン向けのキーワードや説明、文書のタイトル、利用するスタイルシート等（詳細は３章で説明）,その文書に関する情報を記述します。<TITLE>～</TITLE>で指定する文書のタイトル以外のほとんどの情報はブラウザ上には表示されない。

＜使用頻度の高いもの＞

 meta charset：使用する文字を指定  meta name="keywords" 検索設定  meta name="description" 検索説明文  Title 検索  link rel="stylesheet" 設定

(7)

４body

この範囲に記述されたものはブラウザに表示されます。HTML タグを使用し記述します。

＜使用例＞

<body> <h1>見出し１</h1> <h2>見出し２</h2> <p>テキストテキストテキスト</p> <img src=”../abc.jpg” alt=”abc”> </body>

(8)

第２章

(9)

１テキスト

１-１見出しをつける <h1>～<h6>を使用して文書の見出しをつけます。<h1>から順に使用します。 ■使用タグ <h>・・・</h> ■記述 <h1>見出し１</h1> <h2>見出し２</h2> <h3>見出し３</h3> <h4>見出し４</h4> ■ディスプレイ表示

見出し１

見出し２

見出し３

見出し４ ■注意点見出しの大きさで<h>の順番を変えることはＮＧ。表示はされるが、ＳＥＯ的にはＮＧ。文字の大きさを変えたいのであれば、３章を参照。 <h1> <h2> <h3> <h1>←本来は<h2>もしくは<h3>でなければならない。

(10)

(11)

１-３テキストを太字／斜体にするテキストを太字／斜体に変えたいときに使用します。 ■使用タグ・太字 <b>・・・</b> ・斜体 <i>・・・</i> ■記述・太字 <b>太字太字</b> ・斜体 <i>斜体斜体</i> ■ディスプレイ表示・太字太字太字・斜体斜体斜体

(12)

(13)

１-５テキストの意味付け文章に意味づけしたいときに使用します。 ■使用タグ <em>:強調したい <strong>:強調したい <adress>:連絡先・問合せ先 <blockquote>:引用・転載 <cite>:出典・参照先

(14)

２リンク

２-１リンクをはる文章を指定の場所で改行したいときに使用します。 ■使用タグ <a> ■記述 <a href="a.html">テキスト</a> ■ディスプレイ表示テキスト ■注意点設定するＵＲＬは絶対パス、相対パスどちらでもＯＫです。（絶対パス）http://www.a.html （相対パス）a.html

(15)

３画像

３-１画像を表示する画像を表示するときに使用します。 ■使用タグ <img> ■記述

img src="arrow.jpg" alt

↑画像ＵＲＬ ↑画像名（画像が表示されない場合、この文字が変わりに表示）

■ディスプレイ表示

■注意点

(16)

４表

４-１表を作成する表を表示するときに使用します。 ■使用タグ ①<table>：テーブルを作成 ②<tr>：行を作成 ③<th>：見出しセル ④<td>：データセル ①テーブル ②行 ③見出し ④データ ■記述 <table> <tr> <th>見出し１</th> <td>データ１</td> <td>データ２</td> <td>データ３</td> </tr> </table> ■ディスプレイ表示見出し１データ１データ２データ３ ■注意点テーブルの大きさ・幅等を変えたいのであれば、３章を参照。

(17)

５リスト

５-１リストを作成する箇条書きやリスト表示したい時に使用します。 ■使用タグ ①リスト形式：ol（順序あり）、ul（順序なし） ②リスト項目：li ■記述 ①順序あり <ol> <li>テキスト１</li> <li>テキスト２</li> <li>テキスト３</li> <li>テキスト４</li> </ol> ■ディスプレイ表示 ①順序あり１．テキスト１２．テキスト２３．テキスト３４．テキスト４ ■注意点リストの表示を変えたいのであれば、３章を参照。 ②順序なし <ol> <li>テキスト１</li> <li>テキスト２</li> <li>テキスト３</li> <li>テキスト４</li> </ol> ②順序なし・テキスト１・テキスト２・テキスト３・テキスト４

(18)

６その他

６-１スタイルシートを記述するＨＴＭＬタグの装飾を施したい時に使用します。head 内に記述します。 ■使用タグ ①ＨＴＭＬファイルに直接記述する場合：<style> ②外部 css ファイルのスタイルシートを読み込む場合：<link> ■記述 ①ＨＴＭＬファイルに直接記述する場合 <head> <style type="text/css">  </style> </head> ②外部 css ファイルのスタイルシートを読み込む場合 <head>

<linkrel="stylesheet"href="style.css"type="text/css"media="all">

</head>

■注意点

スタイルシートの影響はファイル全体に及びます。特定の範囲のみに適用したければ、後

(19)

６-２範囲指定するスタイルシートに記述した装飾を範囲指定して使用する時します。 ■使用タグ ①ブロック要素：<div> ②インライン要素：<span> ※ブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素で、一般的なブラウザでは前後に改行が入って表示されます。インライン要素とは主に文章の一部として利用される要素であり、その前後は改行されません。 ■記述 ①ブロック要素：<div> <div class=”alignright”> </div> ②インライン要素：<span> <span class=”textred”> </span> ■ディスプレイ表示 ①ブロック要素：<div> ↑右側表示 ②インライン要素：<span> ↑赤字表示 ■注意点 div や span はそれ自体では意味を持ちません。スタイルシートに記述した内容を html ファ

(20)

事業者紹介

テキストテキスト

(21)

第３章

(22)

１背景

背景色や背景画像の指定を行う。 ■背景画像を指定する background-image:url("URL"); ■背景色を指定する background-color : カラー; （カラー） red,blue など、もしくはウェブカラー（#0e0e0e 等） ■背景画像のリピートを指定する background-repeat : 値; （値） no-repeat：繰り返しなし repeat-y：縦方向に背景画像を繰り返し repeat-x：横方向に背景画像を繰り返し repeat：縦横方向に背景画像を繰り返し

(23)

２テキスト

テキストの幅や大きさ、カラーの指定を行う。 ■テキストの太さを指定する font-weight:値; （値） normal：通常 bold：太字 ■テキストのサイズを指定する font-size:〇px; ■テキストの高さを指定する font-height:〇px; ■テキストの種類を指定する font-family:”フォント名１,フォント名２,・・・・”; ■行の高さを指定する line-height:〇px; ■行揃えの位置を指定する text-align :値; （値） left：左寄せ right：右寄せ center：中央寄せ justify：均等割り ■テキストの色を指定する color :ウェブカラー;

(24)

３幅・高さ

<table>や<img>などの幅・高さの指定を行う。 ■高さを指定する height:〇px; もしくは〇%; ■幅を指定する width:〇px; もしくは〇%;

(25)

４余白

マージン／パディングの設定を行う。マージン：ある範囲における外側の余白パディング：ある範囲における内側の余白 ■マージンを指定する 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 の余白を設定パディングマージン

(26)

５ボーダー

ボーダーのスタイル、太さ、色を設定します。 ■ボーダーの色を指定する border-color:値; （値）カラー：上右下左すべて同じカラーを設定 ■ボーダーのスタイルを指定する border-style:値; （値） none：非表示 hidden：非表示 solid：１本線 bouble：２本線 dotted：点線 ■ボーダーの太さを指定する border-width:〇px;

(27)

６表示・配置

ボックスの表示の仕方や、配置を設定します。 ■はみ出し部分の表示を指定する overflow:値; （値） visible：はみ出しても全て表示 scroll：入りきらない部分はスクロール表示 hidden：入りきらない部分は非表示 ■（基準位置からの）配置方法を指定する position:値; （値） static：初期値 relative：相対位置を指定 absolute：絶対位置を指定 ☆上記に併用して下記を指定することが多いです。 top 〇px：上部からの位置を指定 bottom 〇px：底部からの位置を指定 left 〇px：左部からの位置を指定 right 〇px：右部からの位置を指定 ■指定された要素を右もしくは左に寄せて配置する float:値; （値） left：左寄せ right：右寄せ ■回り込みの解除（float の解除） clear:値;

(28)

７テーブル

テーブルの表示方法を指定。 ■テーブルのレイアウトを指定 table-layout:値; （値） auto：初期値、自動レイアウト fixed：固定レイアウト ■テーブルの隣接するボーダーの重なりを指定 border-collapse:値; （値） collapse：隣接するボーダーを重ねて表示 separate：隣接するボーダーを間隔を空けて表示

(29)

８リスト

リストの表示方法を指定。 ■リストのスタイルを設定 list-style-type:値; （値） none：マーカーなし disc：●を表示 circle：〇を表示 square：■を表示 decimal：数字を表示 lower-alpha：小文字のアルファベットを表示 ■リストの先頭に画像を設定 list-style-image:値; （値）ＵＲＩ：表示したい画像ファイルを指定 none：画像ファイルを指定しない