ホームページ

コピーして作る、ホームページ

web拍手

とりあえずHTMLファイル

<html>
<head>
<title>タイトル</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<link rel="stylesheet" href="****.css" type="text/css">
<meta name="description" content="コメント">
</head>
<body>
<!-- 表示内容↓-->

<h1>見出し</h1>
<p>文章段落</p>
<img src="****.***"><!-- 画像 -->
<a href="****.***">リンク</a>

<!-- 表示内容↑ -->
</body>
</html>

とりあえずフォント タグ

マロン
オリーブ
グリーン
テール
ネイビー
パープル
レッド
ブルー
<font color="MAROON">マロン</font>
<font color="OLIVE">オリーブ</font>
<font color="GREEN">グリーン</font>
<font color="TEAL">テール</font>
<font color="NAVY">ネイビー</font>
<font color="PURPLE">パープル</font>
<font color="RED">レッド;/font>
<font color="BLUE">ブルー</font>

大きさ


大きさ

大きさ

大きさ

大きさ

大きさ

大きさ
大きさ 普通

<font size="7">大きさ</font>


<font size="6">大きさ</font>

<font size="5">大きさ</font>

<font size="4">大きさ</font>

<font size="3">大きさ</font>

<font size="2">大きさ</font>

<font size="1">大きさ</font>
大きさ普通

赤で大

<font color="RED" size="4">赤で大</font>

とりあえずテーブル タグ

見出しセル1 セル1
<table> <!-- ==========テーブルの始まり========== -->
<tr> <!-- 列の始まり -->
<th>見出しセル1</th>
<td>セル1</td>
</tr> <!-- 列の終わり -->
</table> <!-- テーブルの終わり -->

見出しセル1
セル1
<table> <!-- ==========テーブルの始まり========== -->
<tr> <!-- 列の始まり -->
<th>見出しセル1</th>
</tr> <!-- 列の終わり -->

<tr> <!-- 列の始まり -->
<td>セル1</td>
</tr> <!-- 列の終わり -->
</table> <!-- テーブルの終わり -->

見出しセル1 見出しセル2
セル1 セル2
<table> <!-- ==========テーブルの始まり========== -->
<tr> <!-- 列の始まり -->
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr> <!-- 列の終わり -->

<tr> <!-- 列の始まり -->
<td>セル1</td>
<td>セル2</td>
</tr> <!-- 列の終わり -->
</table> <!-- テーブルの終わり -->

見出しセル1
セル1 セル2
<table> <!-- ==========テーブルの始まり========== -->
<tr> <!-- 列の始まり -->
<th colspan="2">見出しセル1</th>
</tr> <!-- 列の終わり -->

<tr> <!-- 列の始まり -->
<td>セル1</td>
<td>セル2</td>
</tr> <!-- 列の終わり -->
</table> <!-- テーブルの終わり -->

見出しセル1 セル1
見出しセル2 セル2
<table> <!-- ==========テーブルの始まり========== -->
<tr> <!-- 列の始まり -->
<th>見出しセル1</th>
<td>セル1</td>
</tr> <!-- 列の終わり -->

<tr> <!-- 列の始まり -->
<th>見出しセル2</th>
<td>セル2</td>
</tr> <!-- 列の終わり -->
</table> <!-- テーブルの終わり -->

見出しセル1 セル1
セル2
<table> <!-- ==========テーブルの始まり========== -->
<tr> <!-- 列の始まり -->
<th rowspan="2">見出しセル1</th>
<td>セル1</td>
</tr> <!-- 列の終わり -->

<tr> <!-- 列の始まり -->
<td>セル2</td>
</tr> <!-- 列の終わり -->
</table> <!-- テーブルの終わり -->

見出しセル1 見出しセル2
見出しセル3 セル1 セル2
見出しセル4 セル3 セル4
<table> <!-- ==========テーブルの始まり========== -->
<tr> <!-- 列の始まり -->
<td><!-- セル0 --></td>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr> <!-- 列の終わり -->

<tr> <!-- 列の始まり -->
<th>見出しセル3</th>
<td>セル1</td>
<td>セル2</td>
</tr> <!-- 列の終わり -->

<tr> <!-- 列の始まり -->
<th>見出しセル4</th>
<td>セル3</td>
<td>セル4</td>
</tr> <!-- 列の終わり -->

</table> <!-- テーブルの終わり -->

見出しセル1
見出しセル2 セル1 セル2
見出しセル3 セル3 セル4
<table> <!-- ==========テーブルの始まり========== -->
<tr> <!-- 列の始まり -->
<td><!-- セル0 --></td>
<th colspan="2">見出しセル1</th>
</tr> <!-- 列の終わり -->

<tr> <!-- 列の始まり -->
<th>見出しセル2</th>
<td>セル1</td>
<td>セル2</td>
</tr> <!-- 列の終わり -->

<tr> <!-- 列の始まり -->
<th>見出しセル3</th>
<td>セル3</td>
<td>セル4</td>
</tr> <!-- 列の終わり -->

</table> <!-- テーブルの終わり -->

見出しセル1 見出しセル2
見出しセル3 セル1 セル2
セル3 セル4
<table> <!-- ==========テーブルの始まり========== -->
<tr> <!-- 列の始まり -->
<td><!-- セル0 --></td>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr> <!-- 列の終わり -->

<tr> <!-- 列の始まり -->
<th rowspan="2">見出しセル3</th>
<td>セル1</td>
<td>セル2</td>
</tr> <!-- 列の終わり -->

<tr> <!-- 列の始まり -->
<td>セル3</td>
<td>セル4</td>
</tr> <!-- 列の終わり -->

</table> <!-- テーブルの終わり -->

見出しセル1
見出しセル2 セル1 セル2
セル3 セル4
<table> <!-- ==========テーブルの始まり========== -->
<tr> <!-- 列の始まり -->
<td><!-- セル0 --></td>
<th colspan="2">見出しセル1</th>
</tr> <!-- 列の終わり -->

<tr> <!-- 列の始まり -->
<th rowspan="2">見出しセル2</th>
<td>セル1</td>
<td>セル2</td>
</tr> <!-- 列の終わり -->

<tr> <!-- 列の始まり -->
<td>セル3</td>
<td>セル4</td>
</tr> <!-- 列の終わり -->

</table> <!-- テーブルの終わり -->

とりあえずスタイルシート

/* ******* 基本編 ******** */
/* 全体の配置と文字色*/
BODY,DIV,TABLE {
margin:auto; /* 枠線の外側 オート */
padding;0px; /* 枠線の内側 なし */
vertical-align:top; /* 上下の位置 上 */
text-align:center; /* 左右の位置 中央 */
font-size:15px; /* 文字の大きさ 15px */
line-height:170%; /* 行間 170% */
color:GRAY; /* 文字色 灰 */
}

/* リンク関係の文字色 */
A {font-weight: bold;} /* 太字 */
A:LINK {COLOR:RED;} /* 未参照 赤*/
A:VISITED {COLOR:BLUE;} /* 参照済 青*/
A:HOVER {COLOR:GREEN;background-color:YELLOW;} /* マウスオーバー 緑 背景黄色*/

/* 背景 */
BODY,DIV,TABLE,TH,TD {
background-color:SILVER; /* 背景の色 */
background-image:url(ファイル名); /* 背景画像 */
background-repeat:no-repeat; /* 繰り返し なし */
background-position:top; /* 位置 上 */
background-attachment:fixed; /* 背景画像の固定 */

}
/* 文章段落 */
P { text-align:LEFT; /* 左右の位置 左 */
font-size:15px; /* 文字の大きさ 15px */
line-height:170%; /* 行間 170% */
color:BLACK; /* 文字色 黒 */
background-color:WHITE; /* 背景の色 */
}

/* ******* 見出し 編 ******** */
h1 {
/*** 個別の枠線 ***/
/* 枠線上 */
border-top:solid 5px MAROON;
/* 枠線左 */
border-left:solid 5px MAROON;
/* 枠線右 */
border-right:solid 10px #400000;
/* 枠線下 */
border-bottom:solid 10px #400000;
/* 枠の種類 太さ(数値+単位) 色(色名ないし、色コード) */

/*** 幅 ***/
width:100%; /* 数値+単位 */
/*** 高さ ***/
height:100px; /* 数値+単位 */

/*** 枠の外側の余裕 ***/
margin:0px; /* 数値+単位 */
/*** 枠の内側の余裕 ***/
padding:20px; /* 上 右 下 左 数値+単位 */

/*** 背景の色 ***/
background-color:#ffc0c0; /* 色名ないし、色コード */
/*** 背景の画像 ***/
background-image:url(****.***); /* 画像あり:ファイル名 画像なし:none*/
/*** 背景画像の並べ方 ***/
background-repeat:repeat-x;
/* 全面:repeat , 横一列:repeat-x , 縦一列:repeat-y , 一つ:no-repeat */
/*** 背景画像の位置 ***/
background-position:center bottom;
/* 上:top , 下:bottom , 中央:center , 左:left , 右:right */
}

h2,h3,h4,h5,h6 {
/*** 全ての枠線 ***/
border:solid 3px MAROON;
/* 枠の種類 太さ(数値+単位) 色(色名ないし、色コード) */
/*** 背景の色 ***/
background-color:#ffc0c0; /* 色名ないし、色コード */
}
/* ************ テーブル編 ************** */
table {
/*** 全ての枠線 ***/
border:solid 3px #004000;
/* 枠の種類 太さ(数値+単位) 色(色名ないし、色コード) */
/*** 幅 ***/
width:100%; /* 数値+単位 */
/*** 高さ ***/
height:500px; /* 数値+単位 */
/*** 背景の色 ***/
background-color:GREEN; /* 色名ないし、色コード */
/*** 背景の画像 ***/
background-image:url(****.*** ); /* 画像あり:ファイル名 画像なし:none*/
/*** 背景画像の並べ方 ***/
background-repeat:repeat-x;
/* 全面:repeat , 横一列:repeat-x , 縦一列:repeat-y , 一つ:no-repeat */
/*** 背景画像の位置 ***/
background-position:center bottom;
/* 上:top , 下:bottom , 中央:center , 左:left , 右:right */
}

th {
/*** 高さ ***/
height:20px; /* 数値+単位 */
/*** 枠の内側の余裕 ***/
padding:3px; /* 上 右 下 左 数値+単位 */
/*** 内容の左右の位置 ***/
text-align:left; /* 左寄せ:left , 中央:center , 右寄せ:right */
/*** 内容の上下の位置 ***/
vertical-align:middle; /* 上:top 中:middle 下:bottom */
/*** 背景の色 ***/
background-color:#e0ffc0; /* 色名ないし、色コード */
/*** 全ての枠線 ***/
border:solid 3px #a0ff60;
}

td {
/*** 枠の内側の余裕 ***/
padding:3px; /* 上 右 下 左 数値+単位 */
/*** 内容の左右の位置 ***/
text-align:left; /* 左寄せ:left , 中央:center , 右寄せ:right */
/*** 内容の上下の位置 ***/
vertical-align:top; /* 上:top 中:middle 下:bottom */
/*** 背景の色 ***/
background-color:#f8ffe8; /* 色名ないし、色コード */
/*** 全ての枠線 ***/
border:solid 3px #e0ffc0;
}
/* ************ その他 ************* */
div.wid {
/*** 幅 ***/
width:700px; /* 数値+単位 */
}

img.button {
/*** 内容の上下の位置 ***/
vertical-align:middle; /* 上:top 中:middle 下:bottom */
}

.sma {
/*** 文字の大きさ ***/
font-size:x-small;
}
.lar {
/*** 文字の大きさ ***/
font-size:x-large;
}
.st {
/*** 文字の大きさ ***/
FONT-SIZE:x-large;
/*** 文字の色 ***/
color:#004000; /* 色名ないし、色コード */
/*** 背景の色 ***/
background-color:#60ff60; /* 色名ないし、色コード */
}

A:LINK {FONT-WEIGHT:bolder;COLOR:#000080;}
A:VISITED {FONT-WEIGHT:bolder;COLOR:#000080;}
A:ACTIVE {FONT-WEIGHT:bolder;COLOR:#000080;}
A:HOVER {FONT-WEIGHT:bolder;COLOR:#da0b00;}