自分用ソース

<div id="tab_area">

<dl id="contents01">
<dt><a href="#contents01">CONTENTS【01】</a></dt>
<dd>
<p><strong>CONTENTS【01】</strong></p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
</dd>
</dl>

<dl id="contents02">
<dt><a href="#contents02">CONTENTS【02】</a></dt>
<dd>
<p><strong>CONTENTS【02】</strong></p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
</dd>
</dl>

<dl id="contents03">
<dt><a href="#contents03">CONTENTS【03】</a></dt>
<dd>
<p><strong>CONTENTS【03】</strong></p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
</dd>
</dl>

</div><!--/#tab_area-->

/* TabArea
-------------------------- */
#tab_area {
	margin: 0 auto;
	width: 540px;
	height: 350px;
	text-align: left;
	position: relative;
}

#tab_area dl {
	width: 540px;
	height: 340px;
	border: #777 1px solid;
	position: absolute;
}

#tab_area dl dt {
	top: 0;
	width: 180px;
	height: 40px;
	position: absolute;
	border-bottom: #777 1px solid;
	z-index: 5;
}
#tab_area dl#contents02 dt {
	border-left: #777 1px solid;
	border-right: #777 1px solid;
}


#tab_area dl#contents01 dt {left: 0;}
#tab_area dl#contents02 dt {left: 180px;}
#tab_area dl#contents03 dt {left: 360px;}

#tab_area dl dt a {
	width: 180px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	display: block;
}
#tab_area dl dt a:hover {background: #999;}

#tab_area dl dd {
	top: 41px;
	left: 0;
	height: 300px;
	position: absolute;
	opacity: 0;
	overflow-y: auto;
}

#tab_area dl dd p {
	padding: 10px 10px;
}


/* CSS3 TabAnimation
-------------------------- */
@-webkit-keyframes TabSwitch {
	0% {background: #fff;}
	100% {background: #777;}
}
#tab_area dl:target dt a {
	-webkit-animation-name: TabSwitch;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	color: #fff;
	font-weight: bold;
	background: #777;
}

@-webkit-keyframes ContentsSwitch {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
#tab_area dl:target dd {
	-webkit-animation-name: ContentsSwitch;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: 1;
	opacity: 1;
	z-index: 15;
}

<div class="tab">
	<dl id="tit1"><!--1-->
		<dt><a href="#tit1">たぶ１</a></dt>
		<dd>たぶ１内容</dd>
	</dl>
	<dl id="tit2"><!--2-->
		<dt><a href="#tit2">たぶ２</a></dt>
		<dd>たぶ２内容</dd>
	</dl>
	<dl id="tit3"><!--3-->
		<dt><a href="#tit3">たぶ３</a></dt>
		<dd>たぶ３内容</dd>
	</dl>
	<dl id="tit4"><!--4-->
		<dt><a href="#tit4">たぶ４</a></dt>
		<dd>たぶ４内容</dd>
	</dl>
</div>

.tab {
    margin: 0 auto;
    margin-bottom:20px;
    width: 90%;
    height: 240px;
    text-align: left;
    position: relative;
}
.tab dl {
    width: 100%;
    height: 100%;
    border: #777 1px solid;
    position: absolute;
}
.tab dl dt {
    top: 0;
    width: 25%;
    height: 25px;
    position: absolute;
    border-bottom: #555 1px solid;
    z-index: 5;
}
.tab dl dt:not(:first-child){
    border-left: #555 1px solid;
}
.tab dl dt:not(:last-child){
    border-right: #555 1px solid;
}
.tab dl:nth-child(1) dt {left: 0;}
.tab dl:nth-child(2) dt {left: 25%;}
.tab dl:nth-child(3) dt {left: 50%;}
.tab dl:nth-child(4) dt {left: 75%;}

.tab dl dt a {
    width:100%;
    height: 25px;
    color:#333;
    line-height: 25px;
    text-align: center;
    display: block;
    text-decoration:none;
}
.tab dl:nth-child(2) dt a,
.tab dl:nth-child(3) dt a,
.tab dl:nth-child(4) dt a{
    width: calc(100% - 1px);
    margin-left:1px;
}
.tab dl dt a:hover {color:#fff;background:#cfcfcf;text-decoration:underline;}
.tab dl dd {
	width:100%;
    top: 26px;
    left: 0;
    margin:0;
    height: calc(100% - 26px);
    position: absolute;
    opacity: 0;
    overflow-y:scroll;
    background:#ccc;
}
.tab dl:first-child dd {
    opacity: 1;
}
.tab dl dd p {
    padding: 10px 10px;
}
/* CSS3 TabAnimation
-------------------------- */
@-webkit-keyframes TabSwitch {
    0% {background: #fff;}
    100% {background: #777;}
}
.tab dl:target dt a {
    -webkit-animation-name: TabSwitch;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    color: #fff;
    font-weight: bold;
    text-decoration:underline;
    background: #777;
}
@-webkit-keyframes ContentsSwitch {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.tab dl:target dd {
    opacity: 1;
    z-index: 15;
}

/*文字装飾*/
.txtu{text-decoration:line-through !important;}
/*タブ強制切替*/
.hei120{height:120px;}/*divのtabに『class="hei120"』*/
.tab dl dd.tabon{opacity: 1;}/*ddに『class="tabon"』*/

<div class="table">
<div id="dv1" class="cel" onclick="hyouji('1')">CONTENTS【01】</div>
<div id="dv2" class="cel" onclick="hyouji('2')">CONTENTS【02】</div>
<div id="dv3" class="cel" onclick="hyouji('3')">CONTENTS【03】</div>
<div class="row" id="dv"></div>
</div>

<div class="table">
<div id="dv4" class="cel" onclick="hyouji('4')">CONTENTS【04】</div>
<div id="dv5" class="cel" onclick="hyouji('5')">CONTENTS【05】</div>
<div id="dv6" class="cel" onclick="hyouji('6')">CONTENTS【06】</div>
<div class="row" id="dvb"></div>
</div>

div.table{
display:table;
width:606px;
border:1px black solid;
}
div.cel{
font-size:16px;
border:1px black solid;
padding:5px;
cursor:pointer;
width:200px;
display:table-cell;
}
div.row{
display:table-row;
width:606px;
height:100px;
}

function hyouji(n){
document.getElementById("dv1").style="background-white;";
document.getElementById("dv2").style="background-white;";
document.getElementById("dv3").style="background-white;";
document.getElementById("dv4").style="background-white;";
document.getElementById("dv5").style="background-white;";
document.getElementById("dv6").style="background-white;";


if (n==1){
document.getElementById("dv").innerHTML="<p>CONTENTS【01】</p>";
document.getElementById("dv1").style="background-color:aliceblue;";
}
if (n==2){
document.getElementById("dv").innerHTML="<p>CONTENTS【02】</p>";
document.getElementById("dv2").style="background-color:aliceblue;";
}
if (n==3){
document.getElementById("dv").innerHTML="<p>CONTENTS【03】</p>";
document.getElementById("dv3").style="background-color:aliceblue;";
}
if (n==4){
document.getElementById("dvb").innerHTML="<p>CONTENTS【04】</p>";
document.getElementById("dv4").style="background-color:aliceblue;";
}
if (n==5){
document.getElementById("dvb").innerHTML="<p>CONTENTS【05】</p>";
document.getElementById("dv5").style="background-color:aliceblue;";
}
if (n==6){
document.getElementById("dvb").innerHTML="<p>CONTENTS【06】</p>";
document.getElementById("dv6").style="background-color:aliceblue;";
}
}

<ul class="stylebox" id="stylebox-1">
	<li id="pic-1">
		<a href="#stylebox-1"><img class="orig" src="img/n1.gif"></a>
		<a href="#pic-1"><img class="tmb" src="img/n2.gif"></a>
	</li>
	<li id="pic-2">
		<a href="#stylebox-1"><img class="orig" src="img/n3.gif"></a>
		<a href="#pic-2"><img class="tmb" src="img/n4.gif"></a>
	</li>
</ul>

.stylebox {
	list-style-type: none;
	padding: 0;
	overflow: auto;
}
.stylebox li {
	float: left;
	margin: 0 2px 2px 0;
}
.stylebox .orig {
	width: 0;
	height: 0;
	transition: all 0.6s ease;
}
.stylebox .tmb {
	transition: all 0.6s ease;
}
.stylebox li:target .orig {
	width: 100%;
	height: auto;
}
.stylebox li:target .tmb {
	width: 0;
	height: 0;
}
    			  	

<a href="img/rgb1.png" rel="lightbox">RBG</a>

<a href="img/rgb1.png" rel="lightbox[rgbimg]" title="RGB(重なり前)"><img src="img/rgb1.png" width="50px"></a>
<a href="img/rgb2.png" rel="lightbox[rgbimg]" title="RGB(重なり後)"><img src="img/rgb2.png" width="50px"></a>

<ul id="nav">
    <li id="nav1" class="click"><a href=""><img src="img/nav1.png" alt="１"></a></li>
    <li id="nav2"><a href=""><img src="img/nav2.png" alt="２"></a></li>
    <li id="nav3"><a href=""><img src="img/nav3.png" alt="３"></a></li>
    <li id="nav4"><a href=""><img src="img/nav4.png" alt="４"></a></li>
    <li id="nav5"><a href=""><img src="img/nav5.png" alt="５"></a></li>
    <li id="nav6"><a href=""><img src="img/nav6.png" alt="６"></a></li>
</ul>

#nav li{
	width:100px;
	height:30px;
	display:inline-block;
	background:#CCC;
}
#nav li a{
	display:block;
	width:100px;
	height:30px;
	text-align:center;
}
#nav li a:hover{background:#666666;}

$(function(){
	$('#nav a').hover(function(){
		var img = $("img", this);
		img.attr('src', img.attr('src').replace('.png','_ov.png'));
	},function(){
		var img = $("img", this);
		img.attr('src', img.attr('src').replace('_ov.png','.png'));
	});
	$('#nav li.click').each(function(){
		var txt = $(this).html();
		$(this).html(txt.replace(/.png/g,'_ov.png'));
	});
});

<div class="del">１</div>
<div>２</div>
<div class="del">３</div>
<div>４</div>
<div class="del">５</div>

<div class="vis">１</div>
<div>２</div>
<div class="vis">３</div>
<div>４</div>
<div class="vis">５</div>

<div id="op2">
	◆opacity0.7使用語<br>
	外枠の文字
	<div>中身の文字</div>
</div>
<div id="op3">
	◆opacity0.3使用語<br>
	外枠の文字
	<div>中身の文字</div>
</div>

<div id="op2">
	◆rgba(85,186,240,0.7)<br>
	外枠の文字
	<div>中身の文字</div>
</div>
<div id="op3">
	◆rgba(85,186,240,0.3)<br>
	外枠の文字
	<div>中身の文字</div>
</div>

<div id="op1">
	◆実際の色<br>
	外枠の文字
	<div>中身の文字</div>
</div>
<div id="op2">
	◆transparent使用語<br>
	外枠の文字
	<div>中身の文字</div>
</div>

<table border="1">
	<caption>captopnタグでタイトル</caption>
	<tr>
		<th>thは</th>
		<td colspan="2">こうして繋げる場合<br>
		繋げた分のtdは削除する</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th>太字</th>
		<td rowspan="2">上に同じく</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th>になる</th>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

<table>
	<caption>CSSで枠消し</caption>
	<tr>
		<th>thは</th>
		<td colspan="2">こうして繋げる場合<br>
		繋げた分のtdは削除する</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th>太字</th>
		<td rowspan="2">上に同じく</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th>になる</th>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

<table border="1" cellspacing="0" cellpadding="0">
	<tr>
		<td>こ</td>
		<td>ん</td>
		<td>な</td>
	</tr>
	<tr>
		<td>か</td>
		<td>ん</td>
		<td>じ</td>
	</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td>こ</td>
		<td>ん</td>
		<td>な</td>
	</tr>
	<tr>
		<td>か</td>
		<td>ん</td>
		<td>じ</td>
	</tr>
</table>

<div class="flodel" style="width:960px;">
<div style="float:left;">
<table id="verali" border="0">
	<tr><td class="b0" colspan="3">align</td></tr>
	<tr>
		<td>left</td>
		<td>center</td>
		<td>right</td>
	</tr>
	<tr><td class="b0" colspan="3" style="padding-top:15px;">valign・vertical-align</td></tr>
	<tr>
		<td colspan="3">baseline(デフォ)</td>
	<tr>
		<td>top</td>
		<td>middle</td>
		<td>bottom</td>
	</tr>
</table>

<table id="ver" border="0">
	<tr><td class="b0" colspan="3">valign・vertical-alignいろいろ</td></tr>
	<tr>
		<td>上端揃え<span>text-top</span></td>
		<td>下端揃え<span>text-bottom</span></td>
	</tr>
	<tr>
		<td>super<span>上付き文字</span></td>
		<td>sub<span>上付き文字</span></td>
	</tr>
</table>
</div>

<div style="float:left;">
<table id="ali" border="0">
	<tr><td class="b0" colspan="2">align均等割り付け(IE以外不可)</td></tr>
	<tr>
		<td>auto<br>
		aあiいuう（以下略</td>
		<td>distribute<br>
		aあiいuう（以下略</td>
	</tr>
	<tr>
		<td>inter-word<br>
		aあiいuう（以下略</td>
		<td>kashida<br>
		aあiいuう（以下略</td>
	</tr>
	<tr>
		<td>inter-ideograph<br>
		aあiいuう（以下略</td>
		<td>tibetan<br>
		aあiいuう（以下略</td>
	</tr>
	<tr>
		<td>inter-cluster<br>
		aあiいuう（以下略</td>
		<td>text-align:justify;のみ<br>
		aあiいuう（以下略</td>
	</tr>
</table>
</div>
</div>

<div>divタグ<br>
行間指定なし<br>
デフォだと若干空くようになっている</div>


<div class="line1em">
divタグ<br>
line-height:1em;指定<br>
つまり一行分、もとい行間無しの状態<br>
</div>


<p class="line0">pタグ
line-heigth:0;指定<br>
1emと同じになるかと思いきや、<br>
酷いことに文字が重なる<br>
行が増えるごとに何が書いてあるのかわからなくなる</p>


<p class="line10px">pタグ<br>
line-height:10px;指定<br>
普通に10px行間が空く
けど文字の大きさよりも指定した数字のが小さければ<br>
このように文字は重なる<br>
（文字の大きさ:16px）</p>

<ul class="list">
	<li>折角なので小洒落たマーカー</li>
	<li>いろはに</li>
	<li>ほへと</li>
	<li>ちるぬるを</li>
	<li>わかよたれそ</li>
	<li>つれならむ<br>
	ういのおくやまけふこえて</li>
</ul>
<ul class="imglist">
	<li>画像</li>
	<li>いろはに</li>
	<li>ほへと</li>
	<li>ちるぬるを</li>
	<li>わかよたれそ</li>
	<li>つれならむ<br>
	ういのおくやまけふこえて</li>
</ul>

<ul class="list">
	<li>list-style-image使用</li>
	<li>いろはに</li>
	<li>ほへと</li>
	<li>ちるぬるを</li>
	<li>わかよたれそ</li>
	<li>つれならむういのおくやまけふこえてあさきゆめみしえひもせすん</li>
	<li>えぐい</li>
</ul>
<ul class="back">
	<li>background使用</li>
	<li>いろはに</li>
	<li>ほへと</li>
	<li>ちるぬるを</li>
	<li>わかよたれそ</li>
	<li>つれならむういのおくやまけふこえてあさきゆめみしえひもせすん</li>
	<li>個人的にこっちのが好き</li>
</ul>

<ul class="list">
	<li>ノーマル</li>
	<li>いろはに</li>
	<li>ほへと</li>
	<li>ちるぬるを</li>
	<li>わかよたれそ</li>
	<li>つれならむういのおくやまけふこえてあさきゆめみしえひもせすん</li>
</ul>
<ul class="list2">
	<li>ぶら下がり</li>
	<li>いろはに</li>
	<li>ほへと</li>
	<li>ちるぬるを</li>
	<li>わかよたれそ</li>
	<li>つれならむういのおくやまけふこえてあさきゆめみしえひもせすん</li>
</ul>

<p class="em05">letter-spacing（文字間隔）<br>
文字間隔0.5em、つまりは1文字半分分</p>

<h3 style="margin:0;margin-top:50px;">overflow(ボックス内表示)</h3>
<div class="over">
	<div class="defo">
		visible　デフォルト<br>
		中身が外にはみ出て表示される（IEだとボックスが伸びる<br>
	</div>
	<div class="suku">
		scroll　スクロールバーが発生<br>
		overflow-y（縦）とかx（横）とかで指定することが多い<br>
		更新履歴とかによく使う
	</div>
	<div class="kie">
		hidden　消える
		ボックス外まで文字が伸びたらもれなく消えるし何処にも出てこない<br>
		その特性利用してなんかようわからんところでよく使われてる
	</div>
	<div class="auto">
		ブラウザの基準に合わせる<br>
		大抵はスクロールバーっぽい
	</div>
	
</div>

<h3 style="margin:0;margin-top:50px;">word-break（改行）</h3>
<div class="break">
	<div class="ver0">normal<br>
		いろはにほへとSAN値直葬、若よ誰ぞTUNENARAMU、Wii no wow kuu yammer '後京都' The unexpected me longer translated.
	</div>
	<div class="ver1">keep-all<br>
		いろはにほへとSAN値直葬、若よ誰ぞTUNENARAMU、Wii no wow kuu yammer '後京都' The unexpected me longer translated.
	</div>
	<div class="vwr2">loose<br>
		いろはにほへとSAN値直葬、若よ誰ぞTUNENARAMU、Wii no wow kuu yammer '後京都' The unexpected me longer translated.
	</div>
	<div class="ver3">break-strict<br>
		いろはにほへとSAN値直葬、若よ誰ぞTUNENARAMU、Wii no wow kuu yammer '後京都' The unexpected me longer translated.
	</div>
	<div class="ver4">break-all<br>
		いろはにほへとSAN値直葬、若よ誰ぞTUNENARAMU、Wii no wow kuu yammer '後京都' The unexpected me longer translated.
	</div>
</div>
<p style="margin:0;">多分これnormalかbreak-allで使い分ければいいと思う（死んだような目</p>

<div class="flodel">
	<div>一番目</div>
	<div>二番目</div>
</div>    			  	

<div class="txtdel">
例えばこうして文字を画像で表示する場合、
SEO対策としてタグ内にも文字を書くが
それが見えないようにするための指定になる
</div>

<div>
勿論何も指定しなければ、画像は背景なので文字が表示されてしまう
</div>

<div class="txtdel">
ちなみにbrタグを中で使用した場合、<br>
この様にbr使用後の文字は見えてしまう
</div>