ホームページ

コピーして作る、HTML+CSS

注意！ 文字化けなどおかしな表示をしている場合、英文を日本語に変換している可能性があります。変換せずにご覧ください。
また、ブラウザによって表示が変わります。別のブラウザで試してください。

とりあえずＨＴＭＬファイル

<html>
<head>
<title>タイトル</title>
<meta http-equiv="Content-Type" content="text/html">
<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>

とりあえずテーブル　タグ
見出しセル１ セル１
<table> <!-- ==========テーブルの始まり========== -->
<tr> <!-- 列の始まり -->
<th>見出しセル１</th>
<td>セル１</td>
</tr> <!-- 列の終わり -->
</table> <!-- テーブルの終わり -->

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

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

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

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

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

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

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

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

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

</table> <!-- テーブルの終わり -->
見出しセル１
見出しセル２ セル１ セル２
見出しセル３ セル３ セル４
<table> <!-- ==========テーブルの始まり========== -->
<tr> <!-- 列の始まり -->
<td><!-- セル０ --></td>
<th colspan="2">見出しセル１</th>
</tr> <!-- 列の終わり -->

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

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

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

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

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

</table> <!-- テーブルの終わり -->
見出しセル１
見出しセル２ セル１ セル２
セル３ セル４
<table> <!-- ==========テーブルの始まり========== -->
<tr> <!-- 列の始まり -->
<td><!-- セル０ --></td>
<th colspan="2">見出しセル１</th>
</tr> <!-- 列の終わり -->

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

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

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

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

/* ******* 基本編 ******** */
/* 全体の配置と文字色*/
BODY,DIV,TABLE {
margin:auto; /* 枠線の外側　オート */
padding;0px; /* 枠線の内側　なし */
vertical-align:top; /* 上下の位置　上 */
text-align:center; /* 左右の位置　中央 */
font-size:15px; /* 文字の大きさ　１５ｐｘ */
line-height: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; /* 文字の大きさ　１５ｐｘ */
line-height: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;}