● HTML簡易ﾘﾌｧﾚﾝｽ
ホームページをデザインする上で、よく使うと思う設定項目をまとめました。
1. HTMLを構成するタグの説明
ここでは、基本構造ソースに使われているタグの説明を行います。
(HTML基本構ソースリスト)
<html>
<head>
<title>ここにはページのタイトルを書く</title>
<meta>
</head>
<body>
ここに書いたものがブラウザに表示される
</body>
</html>
以下の【プロパティ】は開始タグの<>の中に書きます。 内の文字、数値はプロパティの設定値です。
例： <div align="" > </div>
○HTMLの宣言 <html></html>
○ページ情報を記述する部分を指定 <head></head>
<title> と <mata> はこの範囲に記述します。
○タイトルを記述する <title></title>
○ページに関する情報の設定 <mata>
検索時に参照される情報にもなります。
すべてのプロパティの後ろに content="内容" を書きます。
１行にひとつのプロパティ設定を書きます。
【プロパティ：ページ情報】
name="" ページの概要：description content="概要を書く"
name="" ページのｷｰﾜｰﾄﾞ：keywords content="ｷｰﾜｰﾄﾞを書く ,(ｶﾝﾏ)区切りで複数可"
name="" ページの作者：author content="作者を書く"
【プロパティ：ｿｰｽ言語情報】
http-equiv="" ｿｰｽ言語情報：Content-Type ｽﾀｲﾙｼｰﾄ：content="text/css"
javaｽｸﾘﾌﾟﾄ：content="text/javascript"
http-equiv="" 自動更新時間設定：Refresh content="時間（秒）"
http-equiv="" 自動他ページ移動：Refresh content="時間（秒）" ; URL=移動先URL"
○ブラウザに表示される部分を指定 <body></body>
【プロパティ：背景色】bgcolor="" (色の値：#RRGGBB 各色00～ffの値 , 色の英単語)
【プロパティ：背景画像貼付け】background="" ( 画像ファイル名 または アドレス )
【プロパティ：背景画像表示方法】bgproperties="" ( 固定：fixed , 繰り返し：未指定)
【プロパティ：文字の色】text="" (色の値：#RRGGBB 各色00～ffの値 , 色の英単語)
【プロパティ：未読リンク文字の色】link="" (色の値：#RRGGBB 各色00～ffの値 , 色の英単語)
【プロパティ：選択リンク文字の色】alink="" (色の値：#RRGGBB 各色00～ffの値 , 色の英単語)
【プロパティ：既読リンク文字の色】vlink="" (色の値：#RRGGBB 各色00～ffの値 , 色の英単語)
○ソース中にコメントを記述する <!-- コメント -->
2. よく使うタグの説明
以下の【プロパティ】は開始タグの<>の中に書きます。 内の文字、数値はプロパティの設定値です。
例： <div align="" > </div>
○改行 <br>
○改行させない範囲指定 <nobr></nobr>
○見出し <h1></h1> 文字の大きさ(最大← h1 h2 h3 h4 h5 h6 →最小)
○段落をつける <p></p>
【プロパティ：文字位置】align="" (left , center , right)
○範囲をブロックにする(ブロック前後を改行する) <div>範囲</div>
【プロパティ：文字位置】align="" (left , center , right)
○範囲をブロックにする(ブロック前後に1行あける) <p>範囲</p>
【プロパティ：文字位置】align="" (left , center , right)
○範囲をブロックにする(ただの範囲指定 = CSS用的タグ) <span>範囲</span>
【プロパティ：文字位置】align="" (left , center , right)
○太字 <b></b>
○下線 <u></u>
○取り消し線 <s></s>
○文字の設定 <font></font>
【プロパティ：大きさ】size="" (数値：1～7)
【プロパティ：文字色】color="" (色の値：#RRGGBB RR GG BB それぞれ 00～ffの値 , 色の英単語)
○テーブルを作る
テーブルは複数のタグを組み合わせて作ります。
①テーブル範囲の指定 <table></table>
②テーブル見出しの指定 <th></th>
③行を作る <tr></tr>
④行にをセルを作る <td></td>
【プロパティ：枠の太さ】border="" (数値)
【プロパティ：枠の色】bordercolor="" (色の値：#RRGGBB 各色00～ffの値 , 色の英単語)
【プロパティ：背景色】bgcolor="" (色の値：#RRGGBB 各色00～ffの値 , 色の英単語)
【プロパティ：文字位置】align="" (left , center , right)
【プロパティ：文字位置】valign="" (top , middle , bottom)
【プロパティ：セル連結-縦】rowSpan="" (セル数)
【プロパティ：セル連結-横】colSpan="" (セル数)
【プロパティ：テーブル,セル幅】width="" (数値)
【プロパティ：テーブル,セル高さ】height="" (数値)
【プロパティ：テーブル背景画像】background="" (画像ファイル名 , 画像ファイルURL)
例：
(ソースリスト)
<table border="2" bordercolor="#">
<th> い </th>
<th> ろ </th>
<th> は </th>
<tr>
<td> １ </td>
<td> ２ </td>
<td> ３ </td>
</tr>
<tr>
<td> Ａ </td>
<td> Ｂ </td>
<td> Ｃ </td>
</tr>
</table>
(結果)
○指定したページのtopへリンクを設定する <a herf=""></a>
( 同フォルダ：test.html , testフォルダ：test/test.html
フルパス：http://asahi-net.or.jp/yr6a-hdn/test/test.html )
○指定したページの指定した行へリンクを設定する
まず、リンクする行へ名前をつけて、リンクを設定します。
① リンクしたい行に名前を設定する <a name="">
(適当なｱﾙﾌｧﾍﾞｯﾄ：top pos1 pos2 ...など)
② リンクしたい行にリンクを設定する <a herf=""></a>
( 同じページへリンクする場合：#行の名前 ,
異なるページへリンクする場合：ファイル名#行の名前")
【プロパティ：ページを新しいウィンドウで開く】target="" (_blank)
○メールソフト起動 <a href="mailto:メールアドレス">mail</a>
○画像を表示する <img src=""> (画像ファイル：img/imgfile.jpg)
【プロパティ：表示幅指定】width = "" (数値 , 数値%)
【プロパティ：表示高さ指定】height = "" (数値 , 数値%)
【プロパティ：外枠の太さ】border = "" (数値)
○線を引く <hr></hr>
【プロパティ：線の太さ】size= (数値)
【プロパティ：線の長さ】width= (数値)
【プロパティ：線の色】color= (色の値：#RRGGBB 各色00～ffの値 , 色の英単語)
【プロパティ：線の位置】align= (left , center , right)
【プロパティ：影を消す】noshade (なし)
3. BiglobeﾌﾞﾛｸﾞのCSSにあるタグの説明(その他は1.2.を参照のこと)
<body> ブラウザに表示される範囲を囲むタグ
<a> アンカー： 他ページ、指定場所、画像、等へリンクする
<img> 画像に対する設定
<h1> 見出し：文字の大きさ(最大← 1 2 3 4 5 6 →最小)
<dt> ここでは<dl>で作った定義リストの用語を定義する
<dd> <dt>で定義した用語の説明をする
<h2> 見出し：文字の大きさ(最大← 1 2 3 4 5 6 →最小)
<th> テーブルの見出し
<td> テーブルのセル
<blockquote></blockquote> インデント(引用文)。前後左右に隙間があきます
<ul></ul> 箇条書きのリスト作成
<li></li> リスト内容の表示
<table caption></table caption> テーブルにタイトルをつける
定義済みクラス(これはCSS)
A:link { } 通常のリンク
A:visited { } 読み込み済みのリンク
A:active { } クリックされた瞬間のリンク
A:hover { } マウスが上に乗せられている状態のリンク
|
