色々メモ帳

９９の色々メモ帳

htmlファイル書く時に、コピペすると便利なものを覚え書きしている頁。
好きに使ってね～(^^)

HTMLのDTD宣言と基本タグ

厳密型

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


移行型

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


フレーム設定型

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


そして下記に続く

<html lang="ja">
<head>


メタ要素

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<meta name="description" content="">
<meta name="keywords" content=",,,,">


外部CSSファイル読み込み

<link rel="stylesheet" href="css/aaa.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/bbb.css" type="text/css" media="print">
<link rel="stylesheet" href="css/ccc.css" type="text/css" media="all">


外部JavaScriptファイル読み込み

<script src="js/ddd.js" type="text/javascript"></script>

<title>タイトルバーに表示される文字列</title>


スクリプトをHTMLファイルに直接書き込む場合の記述

<script type="text/javascript">
<!--
ここにスクリプト
//-->
</script>


CSSをHTMLファイルに直接書き込む場合の記述

<style type="text/css">
<!--
ここにCSS
-->
</style>

</head>

<body>
<div>
<div id=""></div>
<div class=""></div>
<p>段落</p>
改行<br>
画像<img src="画像ファイルのパス" alt="代替文字" title="代替文字">
メール<a href="mailto:メールアドレス">メールアドレス</a>
</div>
</body>
</html>



XHTMLのDTD宣言と基本タグ
XML宣言

<?xml version="1.0" encoding="Shift_JIS"?>


厳密型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


移行型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


フレーム設定型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


名前空間宣言

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">


そして下記に続く

<head>


メタ要素

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<meta name="description" content="" />
<meta name="keywords" content=",,,," />

<link rel="stylesheet" href="css/aaa.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/bbb.css" type="text/css" media="print" />
<link rel="stylesheet" href="css/ccc.css" type="text/css" media="all" />


外部JavaScriptファイル読み込み

<script src="js/ddd.js" type="text/javascript"></script>

<title>タイトルバーに表示される文字列</title>


スクリプトをHTMLファイルに直接書き込む場合の記述

<script type="text/javascript">
<!--
ここにスクリプト
//-->
</script>


CSSをHTMLファイルに直接書き込む場合の記述

<style type="text/css">
<!--
ここにCSS
-->
</style>

</head>

<body>
<div>
<div id=""></div>
<div class=""></div>
<p>段落</p>
改行<br />
画像<img src="画像ファイルのパス" alt="代替文字" title="代替文字" />
リンク（別窓開く）<a href="リンク先URL" target="_blank"></a>

フッター
<div id="footer">
	<address>
	Copyright 99. All Rights Reserved.
	</address>
</div>

</div>
</body>
</html>




汎用クリアフィックス
HTML

<div id="id名" class="clearfix">
内容
</div>


CSS

/*---FF用---*/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/*---IE用---*/
.clearfix {
  min-height: 1px;
}
/*---Mac用---*/
* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}



リンクスタイル

a img{
	border-style:none;
}
a:link{
	color:#ffcccc;
	text-decoration:underline;
}
a:visited{
	color: #ccffcc;
	text-decoration:underline;
}
a:hover{
	color:#ccccff;
	text-decoration:none;
}
a:active{
	color:#ccffff;
	text-decoration:none;
}




	
    Copyright 99. All Rights Reserved.