+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
指定した所のリンク色を指定
ccs
#container {
	text-align: center;
	width:200px;
	border:2px solid;
	color:#111;
}
#container a:link{ /*通常(未アクセス)の色*/
	font-size:12px;text-decoration: none;color:#888888;
}
#container a:visited{ /*アクセス済みの色*/
	font-size:12px;text-decoration: none;color:#888888;
}
#container a:hover{ /*ポイント時の色*/
	font-size:12px;text-decoration: none;color:#ff0000;
}
#container a:active{ /*アクティブ時の色*/
	font-size:12px;text-decoration: none;color:#0000ff;
}
html
<div id="container">
<p>コンテンツ</p>
<a href="http://www.ibiss.co.jp" target="_blank">ibiss</a>
</div>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
マルチカラムレイアウト
ccs
.container {
	/* float:left; */
	width:310px;
	border:2px solid;
	color:#111;
}
.containerA {
	float:left;
	width:150px;
	height:60px;
	border:1px solid;
	color:#172fc2;
}
.containerB {
	float:left;
	width:150px;
	height:60px;
	border:1px solid;
	color:#666;
}
.containerC {
	clear:both;
	float:left;
	width:150px;
	height:60px;
	border:1px solid;
	color:#c0c217;
}
.containerD {
	float:left;
	width:150px;
	height:60px;
	border:1px solid;
	color:#23C217;
}
html
<div>
<p>全コンテンツ</p>
	<div class="containerA">
	<p>コンテンツA</p>
	</div>
	<div class="containerB">
	<p>コンテンツB</p>
	</div>
	<div class="containerC">
	<p>コンテンツC</p>
	</div>
	<div class="containerD">
	<p>コンテンツD</p>
	</div>
</div>

ccs
#contents {
	width:660px;
	float:left;
	padding-bottom:10px;
	color:#ffffff;
	background:#ffcccc;
	border:1px solid;
	border-color:#000000;
}
#main {
	float:left;
	width:400px;
	background:#272727;
}
#sub {
	float:right;
	width:250px;
	background:#c0c217;
}
#footer {
	width:660px;
	clear:both;
	height:80px;
	margin-bottom:20px;
	background:#acacac;
	color:#ffffff;
}
html
<div id="contents">
	<div id="main">
	<p>#main</p>
	</div>
	<div id="sub">
	<p>#sub</p>
	</div>
</div>
<div id="footer">
<p>#footer</p>
</div>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
中心に表示
ccs
@charset"Shift_JIS" /* 文字コード宣言 */

html{
	font-size: 12px;
}
body{
	background: #ffffff;
	font-size: 12px;
	text-align:center;
}
#containar {
	width: 304px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	border:2px solid;
	text-align:left;
	font-size: 12px;
}
#containerA {
	float:left;
	width:150px;
	height:60px;
	border:1px solid;
	color:#172fc2;
}
#containerB {
	float:left;
	width:150px;
	height:60px;
	border:1px solid;
	color:#666;
}
#containerC {
	clear:both;
	float:left;
	width:150px;
	height:60px;
	border:1px solid;
	color:#c0c217;
}
#containerD {
	float:left;
	width:150px;
	height:60px;
	border:1px solid;
	color:#23C217;
}
html
<body>
<br>
<div id="containar">
<p>全コンテンツ</p>
	<div id="containerA">
	<p>コンテンツA</p>
	</div>
	<div id="containerB">
	<p>コンテンツB</p>
	</div>
	<div id="containerC">
	<p>コンテンツC</p>
	</div>
	<div id="containerD">
	<p>コンテンツD</p>
	</div>
</div>
<br>
</body>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
position プロパティで自由度の高いレイアウトを実現する
staticブロックボックスを通常フロートに従って垂直方向に上から下へ配置され、インラインボックスは水平方向へ配置される
relative指定したボックスは、通常フローで配置されるはずの本来の位置を基点として相対配置される。基点からの距離は、top、right、bottom、leftの各プロパティで指定する。隣接するほかのボックスとの位置関係は、relativeを指定したボックスが本来の位置にあるものとして決定される。
absolute指定したボックスは、そのボックスを包含する祖先ボックスのうち、relative、absolute、fixedを指定された真近のボックスのパディング辺を基点として絶対配置される。基点となるボックスがない場合は、初期包含ブロックを基点として絶対配置される。基点からの距離は、relative、absolute、fixedの各プロパティで指定する。なお、絶対配置されたボックスは通常フローから外れ、後続ボックスはそのボックスが存在しないものとして通常フローで配置される。
fixed(Internet Explorerでは機能しない)指定したボックスは、表示領域を基点として固定配置される。fixedを指定したボックスは、スクロール操作をしても常に同じ位置で固定して配置される。基点からの距離はtop、right、bottom、leftの各プロパティで指定する。なお、固定配置されたボックスは通常フローから外れ、後続ボックスはそのボックスが存在しないものとして通常フローでえ配置される。


#bにpositionプロパティを適用すると、その値によってボックスの位置が変わってくる。

深度(重なり順序)の指定
positionプロパティでstatic以外の値をしようした場合、位置の指定によって要素同士が重なることがある。要素の深度を指定するz-indexプロパティを使用する。
z-indexプロパティには整数値またはauto、inheritを指定でき、整数の値が大きいボックスほど前面に表示される
(値が同じ場合は、あとに出現したボックスが前面に表示される)
ccs
p {
	margin:1em;
}
#a{
	width:100px;
	padding:1px 0;
	background:#f75c9a;
}
#b{
	width:100px;
	padding:1px 0;
	background:#92ce1f;
	position:relative;
	top:100px;
	left:120px;
}
#c{
	width:100px;
	padding:1px 0;
	background:#3a99e9;
}
#d{
	width:100px;
	padding:1px 0;
	background:#cccccc;
}
html
<div id="a">
<p>AAA</p>
<p>AAA</p>
<p>AAA</p>
</div>
<div id="b">
<p>BBB</p>
<p>BBB</p>
<p>BBB</p>
</div>
<div id="c">
<p>CCC</p>
<p>CCC</p>
<p>CCC</p>
</div>
<div id="d">
<p>DDD</p>
<p>DDD</p>
<p>DDD</p>
</div>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
ポジションなど使った参考資料
ccs
body {
  background-color:#ffffff;
  margin-top: 0px;
  margin-left: 0px;
}
img {
  vertical-align:bottom;
  border-style: none;
}
.container1 {
  width: 700px;
  margin: 0px;
  padding: 0px;
  clear: both;
}
.container2 {
  float: left;
  width: 175px;
  vertical-align: top;
  margin: 0px;
  padding: 0px;
}
.container3 {
  float: left;
  width: 165px;
  background: url(img/p2bg.gif) repeat;
  vertical-align: top;
  margin: 0px;
  padding: 0px;
}
.containerA {
  position:relative;
  float:left;
  width:165px;
  margin: 0px;
  padding: 0px;
  text-align: center;
}
.top_jpg {
  width: 165px;
  height: 50px;
  border-style: none;
  margin: 0px;
  padding: 0px;
}
.a_name_gif {
  width: 165px;
  height: 50px;
  border-style: none;
  margin: 0px;
  padding: 0px;
  position:absolute; top: 0px; left: 0px;
}
.text_1 {
  position:absolute; top: 23px; left: 0px;
  width: 165px;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  border-style: none;
  text-decoration: none;
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  font-variant: normal;
  color: #FFFFFF;
  cursor: hand;
}
.containerB {
  width:159px;
}
.item_jpg {
  width: 159px;
  border-style: none;
  margin: 0px 0px 0px 3px;
  padding: 0px;
}
.name_gif {
  position: absolute; top: 55px; left: 2px;
  width: 159px;
  height: 40px;
  border-style: none;
  margin: 0px;
  padding: 0px;
}
.containerC {
  position:relative;
  width:160px;
  height:35px;
  margin: 0px;
  padding: 0px;
}
.ska {
  text-align: left;
  margin: 0px 0px 0px 0px;
  position: absolute; top: -5px; left: -8px;
}
.skakaku {
  border-style: none;
  margin: 0px 1px 0px 0px;
  padding: 0px 0px 0px 0px;
}
.skakaku-kanma {
  border-style: none;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}
.c_name_jpg {
  width: 50px;
  height: 13px;
  border-style: none;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  position: absolute; top: 20px; left: 3px;
}
.containerD {
  position:relative;display:block;
  z-index: 900;
  width: 160px;
  margin-right: 0px;
  padding-right: 0px;
  text-align: right;
}
.en {
  border-style: none;
  margin: 0px;
  padding: 0px;
  position:absolute; top: -40px; right: 0px;
}
.kakaku_1 {
  border-style: none;
  margin: 0px;
  padding: 0px;
  position:absolute; top: -40px; right: 22px;
}
.kakaku_2 {
  border-style: none;
  margin: 0px;
  padding: 0px;
  position:absolute; top: -40px; right: 36px;
}
.kakaku_3 {
  border-style: none;
  margin: 0px;
  padding: 0px;
  position:absolute; top: -40px; right: 50px;
}
.kanma {
  border-style: none;
  margin: 0px;
  padding: 0px;
  position:absolute; top: -40px; right: 59px;
}
.kakaku_4 {
  border-style: none;
  margin: 0px;
  padding: 0px;
  position:absolute; top: -40px; right: 69px;
}
.kakaku_5 {
  border-style: none;
  margin: 0px;
  padding: 0px;
  position:absolute; top: -40px; right: 83px;
}
.kakaku_6 {
  border-style: none;
  margin: 0px;
  padding: 0px;
  position:absolute; top: -40px; right: 98px;
}
.containerE {
  width: 160px;
  margin: 10px 5px 10px 5px;
  padding: 0px 0px 0px 0px;
  text-align: center;
  background-color:#ffffff;
  font-size:12px;
  font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  line-height: 14px;
}
.containerE a {
  color:#010101;
  text-decoration:none;
}
.containerE a:hover {
  color:#aa0505;
  position:relative;top:2px;left:2px;
}
html
<div class="container2">
  <div class="container3">
    <div class="containerA">
      <a href="#1" target="_blank">
      <img src="img/price-back96.jpg" class="top_jpg">
        <img src="img/price-time.gif" class="a_name_gif">
      <p class="text_1"><img src="img/t04.gif">
        <img src="img/t00.gif">
        <img src="img/toff.gif">
      </p>
      <img src="img/mameCOACH.gif" class="name_gif">
      </a>
    </div>
    <div class="containerB">
      <a href="#1" target="_blank">
      <img src="img/co-40920-bkhgu.jpg" class="item_jpg">
      </a>
    </div>
    <div class="containerC">
      <div class="ska"> <a href="#1" target="_blank">
        <img src="img/sen.gif" class="skakaku">
        <img src="img/s02.gif" class="skakaku">
        <img src="img/s01.gif" class="skakaku">
        <img src="img/skanma.gif" class="skakaku-kanma">
        <img src="img/s02.gif" class="skakaku">
        <img src="img/s05.gif" class="skakaku">
        <img src="img/s00.gif" class="skakaku">
        <br>
        <img src="img/ya.gif" class="c_name_jpg">
        </a>
      </div>
    </div>
    <div class="containerD">
      <a href="#1" target="_blank">
      <!-- <img src="img/2.gif" class="kakaku_6"> -->
      <img src="img/2.gif" class="kakaku_5">
      <img src="img/3.gif" class="kakaku_4">
      <img src="img/kanma.gif" class="kanma">
      <img src="img/1.gif" class="kakaku_3">
      <img src="img/0.gif" class="kakaku_2">
      <img src="img/0.gif" class="kakaku_1">
      <img src="img/en.gif" class="en">
      </a>
    </div>
  </div>
  <div class="containerE">
    <a href="#1" target="_blank">
    人気のシンプル長財布が今だけ大特価!
    人気のシンプル長財布が今だけ大特価!
    人気のシンプル長財布が今だけ大特価!
    </a>
  </div>
</div>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
単純な2カラムレイアウト
ccs
*{
	margin:0;
	padding:0;
}

body {
	font-size: 9pt;
	font-family:Verdana,sans-serif;
	color:#ffffff;
}

p {
	margin:0 0 1em;
}

#container {
	width:760px;
	margin:20px auto 0;
}

#header {
	height:80px;
	margin-bottom:10px;
	background:#acacac;
}

#contens {
	float:left;
	width:760px;
	margin-bottom:10px;
	background:url(img/bg-float.gif) repeat-y;
/*mainとsubの長さが違った場合に揃えるためにbg.gifを背景に使っている*/
}

#main {
	float:left;
	width:500px;
	background:#272727;
}

#sub {
	float:right;
	width:250px;
	background:#c0c217;
}

#footer {
	clear:both;
	height:80px;
	margin-bottom:20px;
	background:#acacac;
}
html
<div id="container">
	<div id="header">
		<p>#header</p>
	</div>
	<div id="contens">
		<div id="main">
			<p>#main</p>
			<p>text</p>
			<p>text</p>
			<p>text</p>
		</div>
		<div id="sub">
			<p>#sub</p>
		</div>
	</div>
	<div id="footer">
		<p>#footer</p>
	</div>
</div>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

ネガティブマージンによって#mainと#subを重ね、#innerを右方向しずらしている
ccs
*{
	margin:0;
	padding:0;
}

body {
	font-size: 9pt;
	font-family:Verdana,sans-serif;
	color:#ffffff;
}

p {
	margin:0 0 1em;
}

#container {
	width:760px;
	margin:20px auto 0;
}

#header {
	height:80px;
	margin-bottom:10px;
	background:#acacac;
}

#contens {
	float:left;
	width:760px;
	margin-bottom:10px;
/*background:url(img/bg-float.gif) repeat-y;mainとsubの長さが
違った場合に揃えるためにbg.gifを背景に使っている*/
}

#main {
	float:left;
	width:100%;
	background:#272727;
}

#inner {
	margin-left:200px;
/*subのwidthと同じか広くしないとmainが重なってしまう*/
}

#sub {
	float:left;
	width:200px;
	margin-left:-100%;
	background:#c0c217;
}

#footer {
	clear:both;
	height:80px;
	margin-bottom:20px;
	background:#acacac;
}
html
<div id="container">
	<div id="header">
		<p>#header</p>
	</div>
	<div id="contens">
		<div class="ta1">main</div>
		<div id="main">
			<div id="inner">
				<p>#inner</p>
				<p>text</p>
				<p>text</p>
			</div>
		</div>
		<div id="sub">
			<p>#sub</p>
			<p>text</p>
			<p>text</p>
		</div>
	</div>
	<div id="footer">
		<p>#footer</p>
	</div>
</div>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

3カラムレイアウト(floatプロパティ使用)

上ccs
*{
	margin:0;
	padding:0;
}

body {
	font-size: 9pt;
	font-family:Verdana,sans-serif;
	color:#000000;
}

p {
	margin:0 0 1em;
}
div {
	float:left;
	width:200px;
}

#container {
	width:760px;
	margin:20px auto 0;
}

#container div.contentsA {
	background:#efef99;
}
#container div.contentsB {
	background:#99efef;
}
#container div.contentsC {
	background:#ef99ef;
}

#header {
	height:80px;
	margin-bottom:10px;
	background:#acacac;
}
上html
<div id="container">
	<div class="contentsA">
		<p>contentsA</p>
	</div>
	<div class="contentsB">
		<p>contentsB</p>
	</div>
	<div class="contentsC">
		<p>contentsC</p>
	</div>
</div>
下ccs
*{
	margin:0;
	padding:0;
}

body {
	font-size: 9pt;
	font-family:Verdana,sans-serif;
	color:#000000;
}

p {
	margin:0 0 1em;
}
div {
	float:left;
	width:200px;
}

#container2 {
	width:750px;
	margin:20px auto 0;
}

#header {
	width:750px;
	height:30px;
	margin-bottom:10px;
	background:#acacac;
}
#contens {
	float:left;
	width:750px;
	margin-bottom:10px;
	background:url(img/bg-float3.gif) repeat-y;
/*mainとsubの長さが違った場合に揃えるためにbg.gifを背景に使っている*/
}
#main_area {
	float:left;
	width:550px;
}
#main_content {
	float:right;
	width:340px;
	background:#efef99;
}
#navigation_a {
	float:left;
	width:200px;
	background:#99efef;
}
#navigation_b {
	float:right;
	width:190px;
	background:#ef99ef;
}

#footer {
	width:750px;
	clear:both;
	height:30px;
	margin-bottom:20px;
	background:#acacac;
}
下html
<div id="container2">
	<div id="header">
		<p>#header</p>
	</div>
	<div id="contens">
		<div id="main_area">
			<div id="main_content">
			<p>#main_content</p>
			<p>テキスト</p>
			</div>
			<div id="navigation_a">
			<p>#navigation_a</p>
			<p>テキスト</p>
			</div>
		</div>
		<div id="navigation_b">
		<p>#navigation_b</p>
		<p>テキスト</p>
		</div>
	<
	<div id="footer">
		<p>#footer</p>
	</div>
</div>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

画像下の余白(vertical-alignプロパティ)
左ccs
#container {
	width:100px;
	margin:20px auto 0;
}

ul li {
	margin:0;
	padding:0;
	list-style-type:none;
}
左html
<div id="container">

<ul>
<li><img src="img/banner1.gif" alt="バナー1" width="88" height="31"></li>
<li><img src="img/banner2.gif" alt="バナー2"></li>
<li><img src="img/banner3.gif" alt="バナー3"></li>
</ul>
</div>
右ccs
ul li img {
	vertical-align:bottom;
}
ul li {
	margin:0;
	padding:0;
	list-style-type:none;
}
右html
<ul>
<li><img src="img/banner1.gif" alt="バナー1" width="88" height="31"></li>
<li><img src="img/banner2.gif" alt="バナー2"></li>
<li><img src="img/banner3.gif" alt="バナー3"></li>
</ul>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

ロールオーバー時の画像拡大 zoom
ccs
#container {
	width:300px;
	margin:20px auto 0;
}

/* サムネイル表示 */

img {
	boeder:none;
}
p.zoom {
	position:relative;
	width:80px;
	height:50px;
}
p.zoom a,
p.zoom a:visited {
	position:absolute;
	display:block;
	width:80px;
	height:50px;
}
p.zoom a img {
	width:80px;
	height:50px;
}

/* マウスオーバーによる拡大表示 */

p.zoom a:hover {
	position:absolute;
	width:267px;
	height:200px;
}
p.zoom a:hover img {
	position:absolute;
	top:0;
	left:0;
	width:267px;
	height:200px;
}
html
<div id="container">

<p class="zoom">
<a href="#"><img src="img/photo.jpg" alt="写真" /></a>
</p>
<p>JavaScriptをつかわずともCSSの:hover擬似クラスを琉用して画像拡大効果を再現できる。</p>

</div>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

画像や表を半透明で表示 filter
元画像
<img src="img/005.jpg">


50%フィルタ
<img src="img/005.jpg" style="filter:Alpha(opacity=50);">
画像の中の指定した色を透明にします
元画像

<img src="img/43.gif" style="filter:Chroma(color=#DFBF9F);">
グラデーション
style=0,1,2,3
透明グラデーションのスタイル(0=指定なし、1=線形、2=円形、3=方形)を指定
startx=数値, starty=数値, finishx=数値, finishy=数値
透明グラデーションの領域を指定
opacity=0〜100
開始透明度を0(透明)〜100(不透明)の範囲で指定
finishopacity=0〜100
終了透明度を0(透明)〜100(不透明)の範囲で指定

線形
<img src="img/005.jpg" width=142 height=66 style="filter: alpha(style=1,opacity=30,finishopacity=100);">

円形
<img src="img/005.jpg" width=142 height=66 style="filter: alpha(style=2,opacity=100,finishopacity=30);">

方形
<img src="img/005.jpg" width=142 height=66 style="filter: alpha(style=3,opacity=100,finishopacity=0);">

元画像

filter:Mask() を使った効果
ccs
#container {
background: url(img/005.jpg) repeat;
text-align: center;
width:142px;
height:66px;
position:absolute;
top:30px;
left:30px;
}
#text {
color:#000000;
font:bold 50px;
padding:5px;
filter:Mask(color=#ffffff)Alpha(style=1,opacity=70,finishopacity=70);
width:142px;
height:66px;
position:absolute;
top:30px;
left:30px;
}
html
<div id="container"></div>
<div id="text">
MILD
</div>
下のはccsの赤文字を追加したもの

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

パンくずリスト
ccs
#header {
	height:50px;
	margin-top:10px;
	margin-left:10px;
	margin-bottom:10px;
	/* border:1px solid; */
	font-size: 9pt;
	width:300px;
}

ol#topicPath {
	margin:10px 0;
	font-size: 9pt;
}
ol#topicPath li {
	display:inline;
	line-height:110%;
	list-style-type:none;
}
ol#topicPath li a {
	padding-right:16px;
	background:url(img/glue.gif) no-repeat right center;
}
html
<div id="header">

<ol id="topicPath">
<li><a href="#" title="ホーム">ホーム</a></li>
<li><a href="#" title="製品情報">製品情報</a></li>
<li>製品詳細</li>
</ol>



+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

CCSのみでロールオーバー効果を実現する
ccs
/* Global Navigation */

#header ul,
#header ul li {
	float:left;
}
#header ul {
	width:300px;
	height:47px;
	background:url(img/g_navi.gif) no-repeat;
}
#header ul li a {
	display:block;
	width:100px;
	height:47px;
	text-indent:-9999px;
	font-size:0;
	line-height:0;
}

#header ul li.navi_home a.active,
#header ul li.navi_home a:focus,
#header ul li.navi_home a:hover {
	background:url(img/g_navi.gif) no-repeat left bottom;
}
#header ul li.navi_business a.active,
#header ul li.navi_business a:focus,
#header ul li.navi_business a:hover {
	background:url(img/g_navi.gif) no-repeat -100px -47px;
}
#header ul li.navi_company a.active,
#header ul li.navi_company a:focus,
#header ul li.navi_company a:hover {
	background:url(img/g_navi.gif) no-repeat -200px -47px;
}
html
<div id="header">

<ul>
<li class="navi_home"><a href="#" title="ホーム" class="active">ホーム</a></li>
<li class="navi_business"><a href="#" title="事業内容">事業内容</a></li>
<li class="navi_company"><a href="#" title="会社概要">会社概要</a></li>
</ul>

</div>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

フォーム
ccs
#container {
	width:500px;
	margin:20px auto 0;
}

.form {
	width: 200px;
	text-align: left;
	background-color: #d2dda8;
	padding: 7px;
	border: 1px solid #000000;
}
.seminar{
	text-align: left;
	font-weight:bold;
	text-size: 12px;
}

html
<div id="container">
<form action="kakunin.php" method="POST">
<div id="title">セミナー応募フォーム</div>
<br />
下のフォームにご入力のうえ、「申し込む」ボタンを押して下さい。<br /><br />
<table>
<tr>
<td class="form">
	<input type="checkbox" name="seminar[]" VALUE="1">SPECIAL セミナー1
</td>
<td class="form">
	10月14日(土)13時30分〜15時<br />
	参加費:<span class="seminar">無料</span><br />
	定員:40名</td>
</tr>
<tr>
<td class="form">
	<input type="checkbox" name="seminar[]" VALUE="2">SPECIAL セミナー2
</td>
<td class="form">
	10月15日(日)13時30分〜15時<br />
	参加費:<span class="seminar">無料</span><br />
	定員:40名</td>
</tr>
</table>
<br />
<input type="submit" name="submit" value=" 申し込む ">
 <input type="button" name="OK" value="キャンセル" onClick="window.close()">
</form>
</div>

===============================================================================================================

ラベル付け
ccs
#container {
	width:500px;
	margin:20px auto 0;
}

.form {
	width: 200px;
	text-align: left;
	background-color: #d2dda8;
	padding: 7px;
	border: 1px solid #000000;
}
.seminar{
	text-align: left;
	font-weight:bold;
	text-size: 12px;
}

html
<table>
<tr><!-- 明示的ラベル付け -->
<td class="form">
	<input type="radio" name="seminar" id="sem1" VALUE="1" />
	<label for="sem1">SPECIAL セミナー1</label></td>
<td class="form">
	10月14日(土)13時30分〜15時<br />
	参加費:<span class="seminar">無料</span>
	<br />定員:40名</td>
</tr>
<tr><!-- 暗黙的ラベル付け -->
<td class="form">
	<label><input type="radio" name="seminar" VALUE="2">SPECIAL セミナー2</label>
</td>
<td class="form">
	10月15日(日)13時30分〜15時<br />
	参加費:<span class="seminar">無料</span>
	<br />定員:40名
</td>
</tr>
</table>

===============================================================================================================

optgroup要素でグループ化

<select name="location">
<option value="">都道府県を選択して下さい</option>
<optgroup label="北海道・東北地方">
<option value="01">北海道</option>
<option value="02">青森県</option>
<option value="03">岩手県</option>
<option value="04">宮城県</option>
<option value="05">秋田県</option>
<option value="06">山形県</option>
<option value="07">福島県</option>
</optgroup>
<optgroup label="関東地方">
<option value="08">茨城県</option>
<option value="09">栃木県</option>
<option value="10">群馬県</option>
<option value="11">埼玉県</option>
<option value="12">千葉県</option>
<option value="13">東京都</option>
<option value="14">神奈川県</option>
</optgroup>
<optgroup label="北陸・甲信越地方">
<option value="15">新潟県</option>
<option value="16">富山県</option>
<option value="17">石川県</option>
<option value="18">福井県</option>
<option value="19">山梨県</option>
<option value="20">長野県</option>
</optgroup>
<optgroup label="東海地方">
<option value="21">岐阜県</option>
<option value="22">静岡県</option>
<option value="23">愛知県</option>
<option value="24">三重県</option>
</optgroup>
<optgroup label="近畿地方">
<option value="25">滋賀県</option>
<option value="26">京都府</option>
<option value="27">大阪府</option>
<option value="28">兵庫県</option>
<option value="29">奈良県</option>
<option value="30">和歌山県</option>
</optgroup>
<optgroup label="中国地方">
<option value="31">鳥取県</option>
<option value="32">島根県</option>
<option value="33">岡山県</option>
<option value="34">広島県</option>
<option value="35">山口県</option>
</optgroup>
<optgroup label="四国地方">
<option value="36">徳島県</option>
<option value="37">香川県</option>
<option value="38">愛媛県</option>
<option value="39">高知県</option>
</optgroup>
<optgroup label="九州・沖縄地方">
<option value="40">福岡県</option>
<option value="41">佐賀県</option>
<option value="42">長崎県</option>
<option value="43">熊本県</option>
<option value="44">大分県</option>
<option value="45">宮崎県</option>
<option value="46">鹿児島県</option>
<option value="47">沖縄県</option>
</optgroup>
</select>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

小文字で記述(CSSで変換)

abcdefg

abcdefg

ccs
h2 {
	text-transform: uppercase;
}
h3 {
	text-transform: capitalize;
}
html
<h2>abcdefg</h2>
<h3>abcdefg</h3>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

caption 要素と summary 属性を使用して表の説明を示す
見出しが長い場合は、省略形の見出しを abbr 属性で指定する
グループ企業各社の社員数一覧
会社名 A社 B社
男性社員 21 20
女性社員 25 23
合計人数 46 43
html
<table border="1" cellpadding="6" cellspacing="0" summary="HTML グループ企業各社男女社員数、及びその合計人数一覧">
<caption><font size="2">グループ企業各社の社員数一覧</font></caption>
<tr>
	<th>会社名</th>
	<td>A社</td>
	<td>B社</td>
</tr>
<tr>
	<th abbr="男性">男性社員</th>
	<td>21</td>
	<td>20</td>
</tr>
<tr>
	<th abbr="女性">女性社員</th>
	<td>25</td>
	<td>23</td>
</tr>
<tr>
	<th abbr="合計">合計人数</th>
	<td>46</td>
	<td>43</td>
</tr>
</table>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

行及び列をグループ化する(CCS → colgroup、thead)
グループ企業各社の社員数一覧
会社名 A社 B社
男性社員 21 20
女性社員 25 23
合計人数 46 43
ccs
colgroup#classification {
	background: #fef;
}
thead {
	background: #eee;
}
html
<table border="1" cellpadding="6" cellspacing="0" summary="HTML グループ企業各社男女社員数、及びその合計人数一覧">
<caption><font size="2">グループ企業各社の社員数一覧</font></caption>
<colgroup id="classification"></colgroup>
<colgroup id="number-of-staff" span="2"></colgroup>
<thead>
<tr>
	<th>会社名</th>
	<td>A社</td>
	<td>B社</td>
</tr>
</thead>
<tfoot>
<tr>
	<th abbr="男性">男性社員</th>
	<td>21</td>
	<td>20</td>
</tr>
</tfoot>
<tbody>
<tr>
	<th abbr="女性">女性社員</th>
	<td>25</td>
	<td>23</td>
</tr>
<tr>
	<th abbr="合計">合計人数</th>
	<td>46</td>
	<td>43</td>
</tr>
</tbody>
</table>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

各セルの関係性を明示する
グループ企業各社の社員数一覧
会社名 A社 B社
男性社員 21 20
女性社員 25 23
合計人数 46 43
html
<table border="1" cellpadding="6" cellspacing="0" summary="HTML グループ企業各社男女社員数、及びその合計人数一覧">
<caption><font size="2">グループ企業各社の社員数一覧</font></caption>
<colgroup id="classification"></colgroup>
<colgroup id="number-of-staff" span="2"></colgroup>
<thead>
<tr>
	<th scope="row">会社名</th>
	<td scope="col" id="company-a">A社</td>
	<td scope="col" id="company-b">B社</td>
</tr>
</thead>
<tfoot>
<tr>
	<th id="boys">男性社員</th>
	<td headers="male company-a">21</td>
	<td headers="male company-b">20</td>
</tr>
</tfoot>
<tbody>
<tr>
	<th id="girls">女性社員</th>
	<td headers="female company-a">25</td>
	<td headers="female company-b">23</td>
</tr>
<tr>
	<th id="total">合計人数</th>
	<td headers="total company-a">46</td>
	<td headers="total company-a">43</td>
</tr>
</tbody>
</table>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
TABLE にスクロールを付ける
ccs
.scrollsell{
	overflow:auto;
	width:135px;
	height:150px;
}
html
<table BORDER="1" CELLSPACING="0" CELLPADDING="3">
<tr>
	<td valign="top">テスト1</td><td valign="top">テスト2</td>
</tr>
<tr>
	<td width="135" valign="top">あいうえお〜わをん<br><br><div class="scrollsell">あいうえお〜わをん</div></td>
	<td width="135" valign="top"><div class="scrollsell">あいうえお〜わをん<br><br>あいうえお〜わをん</div></td>
</tr>
</table>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

link要素で外部スタイルシートを読み込み時、link要素の media属性にメディアタイプを指定
*通常のスタイル
<link rel="stylesheet" type="text/css" href="style.css" media="screen,projection" />
*印刷用のスタイル
<link rel="stylesheet" type="text/css" href="style.css" media="print" />

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

固定幅のサイトをエラスティックレイアウトにする(文字サイズに応じて全体のレイアウトがそのまま拡大縮小するレイアウトのこと)
条件があるためパス

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

申込み内容
申込者情報


■アンカーテキストにリンク先を明示
連絡先一覧をご確認ください
または
詳細はこちら

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
ここに文字
<table style="border:1px dashed #ffaacc;" cellspacing="5" bgcolor="#ffaacc" cellpadding="5">
<tr>
<td style="border:1px dashed white;" bgcolor="white">
ここに文字
</td>
</tr>
</table>
ここに文字
<table style="border:3px dashed deepskyblue;" cellspacing="5" bgcolor="deepskyblue" cellpadding="5">
<tr>
<td style="border:3px dashed white;" bgcolor="white">
ここに文字
</td>
</tr>
</table>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
指定した所のリンク色を指定

#td1 a:link{font-size:12px;text-decoration: none;color:#888888;} /*通常(未アクセス)の色*/
#td1 a:visited{font-size:12px;text-decoration: none;color:#888888;} /*アクセス済みの色*/
#td1 a:hover{font-size:12px;text-decoration: none;color:#ffff00;} /*ポイント時の色*/
#td1 a:active{font-size:12px;text-decoration: none;color:#888888;} /*アクティブ時の色*/

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
印刷時の改ページ位置を指定
ccs
.pagebreak {
	page-break-before:always;
}
html
<div class="pagebreak">
コンテンツ
</div>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++