STUDY_html_003_D.html
<!doctype html public "-//w3c//dtd html 4.01 frameset//en""http://www.w3.org/tr/html4/frameset.dtd"> <html> <meta charset="utf-8"> <style> スタイル </style> <div class="セット"> <p class="イメージ"><img src="STUDY_html_image_003/images_001.jpg"width="800"height="160"></p> <div class="トップ"> <div class="バーコード"id="ミラーリング"> <div class="リンク チェック ファースト"id="プロダクト"><a href="html_003_contents.html"class="ボタン">中世</a> <div class="パネル"id="インテル"> <div class="ロウ ブラック"id="プロダクト1"><span class="ヘッダー"> <a href="html_003_contents.html">中世 - 1</a></span></div> <div class="ロウ ブラック"id="プロダクト2"><span class="ヘッダー"><a href="#">中世 - 2</a></span></div> <div class="ロウ ブラック"id="プロダクト2"><span class="ヘッダー"><a href="#">中世 - 3</a></span></div> <div class="ロウ ブラック"id="プロダクト3"><span class="ヘッダー"><a href="#">中世 - 4</a></span></div> <div class="ロウ ブラック"id="プロダクト4"><span class="ヘッダー"><a href="#">中世 - 5</a></span></div> <div class="ロウ ブラック"id="プロダクト5"><span class="ヘッダー"><a href="#">中世 - 6</a></span></div> <div class="ロウ ブラック"id="プロダクト6"><span class="ヘッダー"><a href="#">中世 - 7</a></span></div> <div class="ロウ ブラック"id="プロダクト7"><span class="ヘッダー"><a href="#">中世 - 8</a></span></div> <div class="ロウ ホワイト"id="プロダクト8"><a href="#">ダウンロード</a></div> </div></div> <div class="リンク チェック ファースト"id="ソリューション"><a href="#"id="ソリューションLink"class="ボタン">ルネサンス</a> <div class="パネル"> <div class="ロウ ブラック"id="ソリューション1"><span class="ヘッダー"><a href="#">ルネサンス - 1</a></span></div> <div class="ロウ ブラック"id="ソリューション2"><span class="ヘッダー"><a href="#">ルネサンス - 2</a></span></div> <div class="ロウ ブラック"id="ソリューション3"><span class="ヘッダー"><a href="#">ルネサンス - 3</a></span></div> <div class="ロウ ブラック"id="ソリューション5"><span class="ヘッダー"><a href="#">ルネサンス - 4</a></span></div> <div class="ロウ ブラック"id="ソリューション5"><span class="ヘッダー"><a href="#">ルネサンス - 5</a></span></div> <div class="ロウ ブラック"id="ソリューション5"><span class="ヘッダー"><a href="#">ルネサンス - 6</a></span></div> <div class="ロウ ホワイト"id="ソリューション6"><a href="#">ダウンロード</a></div> </div></div> <div class="リンク チェック ファースト"id="ソリューション"><a href="#"id="ソリューションLink"class="ボタン">バロック</a> <div class="パネル"> <div class="ロウ ブラック"id="ソリューション1"><span class="ヘッダー"><a href="#">バロック - 1</a></span></div> <div class="ロウ ブラック"id="ソリューション2"><span class="ヘッダー"><a href="#">バロック - 2</a></span></div> <div class="ロウ ブラック"id="ソリューション3"><span class="ヘッダー"><a href="#">バロック - 3</a></span></div> <div class="ロウ ブラック"id="ソリューション5"><span class="ヘッダー"><a href="#">バロック - 4</a></span></div> <div class="ロウ ブラック"id="ソリューション5"><span class="ヘッダー"><a href="#">バロック - 5</a></span></div> <div class="ロウ ブラック"id="ソリューション5"><span class="ヘッダー"><a href="#">バロック - 6</a></span></div> <div class="ロウ ホワイト"id="ソリューション6"><a href="#">ダウンロード</a></div> </div></div> <div class="リンク チェック ファースト"id="ソリューション"><a href="#"id="ソリューションLink"class="ボタン">印象主義</a> <div class="パネル"> <div class="ロウ ブラック"id="ソリューション1"><span class="ヘッダー"><a href="#">印象主義 - 1</a></span></div> <div class="ロウ ブラック"id="ソリューション2"><span class="ヘッダー"><a href="#">印象主義 - 2</a></span></div> <div class="ロウ ブラック"id="ソリューション2"><span class="ヘッダー"><a href="#">印象主義 - 3</a></span></div> <div class="ロウ ブラック"id="ソリューション3"><span class="ヘッダー"><a href="#">印象主義 - 4</a></span></div> <div class="ロウ ブラック"id="ソリューション5"><span class="ヘッダー"><a href="#">印象主義 - 5</a></span></div> <div class="ロウ ブラック"id="ソリューション5"><span class="ヘッダー"><a href="#">印象主義 - 6</a></span></div> <div class="ロウ ブラック"id="ソリューション5"><span class="ヘッダー"><a href="#">印象主義 - 7</a></span></div> <div class="ロウ ブラック"id="ソリューション5"><span class="ヘッダー"><a href="#">印象主義 - 8</a></span></div> <div class="ロウ ホワイト"id="ソリューション6"><a href="#">ダウンロード</a></div> </div></div> <div class="リンク チェック ファースト"id="ソリューション"><a href="#"id="ソリューションLink"class="ボタン">近代音楽</a> <div class="パネル"> <div class="ロウ ブラック"id="ソリューション1"><span class="ヘッダー"><a href="#">近代音楽 - 1</a></span></div> <div class="ロウ ブラック"id="ソリューション2"><span class="ヘッダー"><a href="#">近代音楽 - 2</a></span></div> <div class="ロウ ブラック"id="ソリューション2"><span class="ヘッダー"><a href="#">近代音楽 - 3</a></span></div> <div class="ロウ ブラック"id="ソリューション3"><span class="ヘッダー"><a href="#">近代音楽 - 4</a></span></div> <div class="ロウ ブラック"id="ソリューション5"><span class="ヘッダー"><a href="#">近代音楽 - 5</a></span></div> <div class="ロウ ホワイト"id="ソリューション6"><a href="#">ダウンロード</a></div> </div></div> <div class="リンク チェック ファースト"id="ソリューション"><a href="#"id="ソリューションLink"class="ボタン">現代音楽</a> <div class="パネル"> <div class="ロウ ブラック"id="ソリューション1"><span class="ヘッダー"><a href="#">現代音楽 - 1</a></span></div> <div class="ロウ ブラック"id="ソリューション2"><span class="ヘッダー"><a href="#">現代音楽 - 2</a></span></div> <div class="ロウ ブラック"id="ソリューション2"><span class="ヘッダー"><a href="#">現代音楽 - 3</a></span></div> <div class="ロウ ブラック"id="ソリューション2"><span class="ヘッダー"><a href="#">現代音楽 - 4</a></span></div> <div class="ロウ ブラック"id="ソリューション3"><span class="ヘッダー"><a href="#">現代音楽 - 5</a></span></div> <div class="ロウ ブラック"id="ソリューション5"><span class="ヘッダー"><a href="#">現代音楽 - 6</a></span></div> <div class="ロウ ホワイト"id="ソリューション6"><a href="#">ダウンロード</a></div> </div></div> </div></div></div> </html>
<style>
.セット{position:relative;
margin:0 auto;
line-height:0px;
width:900px;
text-align:center;}
.トップ{position:relative;
margin:0 auto;
line-height:0px;
width:800px;}
.イメージ{display:block;
background-repeat:no-repeat;
text-align:center;
margin-top:0px;
margin-bottom:0px;}
.バーコード{padding-left:40px;
line-height:50px;
background:-webkit-gradient(linear,left top,left bottom,from(#000000),to(#aaaaaa));
background:-moz-linear-gradient(top,#000000,#aaaaaa);}
.バーコード:after,.ユーザー:after{clear:both;
content:"\0020";
height:0;
display:block;}
.チェック{position:relative;
float:left;
border-left:1px solid #aaaaaa;
border-right:1px solid #aaaaaa;
padding:1px 16px 0 16px;
margin:0;}
.ファースト{border-left:1px solid #000000;}
.チェックLast{background:none;
border-right:0;
padding:1px 0 0 0;
width:1px;}
.ボタン,a.ボタン,a.ボタン:link,a.ボタン:visited,a.ボタン:active,a.ボタン:hover,a.ボタン:visited:hover{color:#ffffff;
text-decoration:none;}
.パネル{position:absolute;
border:1px solid;
border-color:#456789 #456789 #456789 #456789;
box-shadow: 0 4px 10px rgba(0,0,0,.5);
-moz-box-shadow: 0 4px 10px -moz-rgba(0,0,0,.5);
-webkit-box-shadow: 0 4px 10px rgba(0,0,0,.5);
*filter:progid:DXImageTransform.Microsoft.Shadow(color='#999999',Direction=180,Strength=4);
top:100%;
left:0;
width:140px;
padding:6px 0;
margin-top:0;
margin-left:-1px;
font:normal 12px Helvetica,sans-serif;}
div.ロウ{padding:5px 12px;
position:relative;}
div.ロウ a,.ヘッダー a{display:block;
width:100%;}
.ヘッダー{display:block;
font-weight:bold;}
div.ブラック a,div.ブラック a:link,div.ブラック a:visited,div.ブラック a:active,
div.ブラック a:visited{text-decoration:none;
color:#456789;}
div.ブラックHover,
div.ブラックHover a,
div.ブラック:hover,
div.ブラック a:hover{background-color:#abcdef;
color:#000000 !important;}
.ホワイト a,.ホワイト a:link,.ホワイト a:visited,a.ホワイト,a.ホワイト:link,a.ホワイト:visited{color:#ff0000;
cursor:pointer;
text-decoration:none;}
.ホワイト a:hover,.ホワイト a:visited:hover,a.ホワイト:hover,a.ホワイト:visited:hover{color:#00ff00;
text-decoration:underline;}
.リンク .パネル{display:none;}
#ミラーリング > #ストアー:hover .パネル,
#ミラーリング #ストアー.hover .パネル{display:block;}
#ミラーリング > #プロダクト:hover .パネル,
#ミラーリング #プロダクト.hover .パネル{display:block;}
#ミラーリング > #ソリューション:hover .パネル,#ミラーリング #ソリューション.hover.パネル{display:block;}
</style>
・・・JavaScriptは使われていません
sample_STUDY_html_003_D ▶[ html_history_04.pdf \ sample_STUDY_html_003_D.pdf ] 
サンプル・ダウンロード 
