【グリッドレイアウト】
【グリッドレイアウト】
まだ未完成ですが、なんとかできました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="album3.css">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<div id="block">
<h1><a href="http://youtu.be/syu7JOt84EE"><img src="images/hr_hm.png" alt="HR/HM"></a></h1>
<ul>
<li class="one"><a href="http://www.youtube.com/watch?v=ohhiGFP094M&feature=related"><img src="images/small/1984.png" alt="Van Halen"></a></li>
<li class="two"><a href="http://www.youtube.com/watch?v=gFTzUvZJ0Rw&feature=related"><img src="images/small/barkatthemoon.png" alt="Ozzy"></a></li>
<li class="three"><a href="http://www.youtube.com/watch?v=DCsaLo0sUiQ&feature=related"><img src="images/small/bentoutofshape.png" alt="Rainbow"></a></li>
<li class="four"><a href="http://www.youtube.com/watch?v=xj__XDh8LCk&feature=fvst"><img src="images/small/builttodestroy.png" alt="MSG"></a></li>
</ul>
<h1><a href="http://www.youtube.com/watch?v=J28mqkvzaKU"><img src="images/nightoftheblade.jpg"alt="Tokyo Blade"></a></h1>
<ul>
<li class="one"><a href="http://www.youtube.com/watch?v=wjtZGRhkUv0&feature=related"><img src="images/small/trash.png" alt="Alice Cooper"></a></li>
<li><a href="http://www.youtube.com/watch?v=0D1-wRwZ_4I&feature=related"><img src="images/small/burnslikeastar.png" alt="Stone Fury"></a></li>
<li class="four"><a href="http://www.youtube.com/watch?v=GLOKo1qmVSI&feature=related"><img src="images/small/deffenceoffeith.png" alt="Judes"></a></li>
</ul>
<ul>
<li><a href="http://www.youtube.com/watch?v=n0_IzFdPdDA&feature=related"><img src="images/small/anthem.png" alt="Anthem"></a></li>
<li class="three"><a href="http://www.youtube.com/watch?v=M3-Gx0INbF0&feature=related"><img src="images/small/invasionofyourprivacy.png" alt="Ratt"></a></li>
<li class="four"><a href="http://www.youtube.com/watch?v=xCChxBSRo1Y"><img src="images/small/lookwhatthecatdragged.png" alt="Poison"></a></li>
</ul>
</div><!--block-->
<div id="block2">
<ul>
<li><a href="http://www.youtube.com/watch?v=PXqBOok0eE0"><img src="images/small/hurricaneeyes.png" alt="Loudness"></a></li>
<li class="three"><a href="http://www.youtube.com/watch?v=r8Xf_AkUIkI&feature=related"><img src="images/small/loveatfirststing.png" alt="Scorpions"></a></li>
<li class="four"><a href="http://www.youtube.com/watch?v=qlF2tHvfwKg"><img src="images/small/madison.png" alt="Madison"></a></li>
</ul>
<h1><a href="http://www.youtube.com/watch?v=Yck1IjIhAf0"><img src="images/roughtcutt.jpg" alt="Rough Cutt"></a></h1>
<ul>
<li class="five"><img src="images/small/marchingout.png" alt="Yugwie"></li>
<li><a href="http://www.youtube.com/watch?v=FSUXdWCq5kk"><img src="images/small/metalhealth.png" alt="Quiet Riot"></a></li>
<li class="four"><a href="http://www.youtube.com/watch?v=g1HOE3FIQ7w"><img src="images/small/metalheart.png" alt="Accept"></a></li>
</ul>
<h1><a href="http://www.youtube.com/watch?v=SitEuezk_Jw&feature=related"><img src="images/noparole.jpg" alt="alcatrazz"></a></h1>
<ul>
<li><a href="http://www.youtube.com/watch?v=HcZKMhCbe-k"><img src="images/small/marchofsaint.png" alt="Armard Saint"></a></li>
<li class="three"><a href="http://www.youtube.com/watch?v=ptPekKOigkQ"><img src="images/small/nightsongs.png" alt="Cinderella"></a></li>
<li class="four"><a href="http://www.youtube.com/watch?v=MHZ79InLGRY"><img src="images/small/pride.png" alt="White Lion"></a></li>
</ul>
</div><!--block2-->
<div id="block3">
<h1><a href="http://www.youtube.com/watch?v=rK2iq-jClLw"><img src="images/righttorock.jpg" alt="Keel"></a></h1>
<ul>
<li class="five"><a href="http://www.youtube.com/watch?v=MtGs2-e8oSg&feature=related"><img src="images/small/whitesnake.png" alt="White Snake"></a></li>
<li><a href="http://www.youtube.com/watch?v=qt2olv420po"><img src="images/small/ruffians.png" alt="Ruffians"></a></li>
<li class="four"><a href="http://www.youtube.com/watch?v=s-e82PK8wfM&feature=related"><img src="images/small/wingsoftomorrow.png" alt="Europe"></a></li>
</ul>
<ul>
<li class="one"><a href="http://www.youtube.com/watch?v=cEd060Xso04&feature=related"><img src="images/small/stars.png" alt="Stars"></a></li>
<li><a href="http://www.youtube.com/watch?v=UpfZcEjopYE"><img src="images/small/stayhungry.png" alt="Twisted Sister"></a></li>
<li class="four"><a href="http://www.youtube.com/watch?v=e1V8GtZjWFQ&feature=related"><img src="images/small/pyromania.png" alt="Def Leppard"></a></li>
</ul>
<ul>
<li class="one"><a href="http://www.youtube.com/watch?v=Zg-KJSv-2aE&feature=related"><img src="images/small/seven.png" alt="Night Ranger"></a></li>
<li><a href="http://www.youtube.com/watch?v=h49wPeZrN5U"><img src="images/small/signinplease.png" alt="Autograph"></a></li>
<li class="three"><a href="http://www.youtube.com/watch?v=bRlsI3iIPdA&feature=related"><img src="images/small/soldiersundercommand.png" alt="Stryper"></a></li>
<li class="four"><a href="http://www.youtube.com/watch?v=wdZpFRszG7U&feature=relmfu"><img src="images/small/vandenberg.png" alt="Vandenberg"></a></li>
</ul>
<h1><a href="http://www.youtube.com/watch?v=WeWCkYTXcso&feature=related"><img src="images/theatreofpain.jpg" alt="Motely Crue"></a></h1>
</div><!--block3-->
</div><!--container-->
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
border:none;
list-style-type:none;
font-style:normal;
font-weight:normal;
font-size:100%;
text-align:left;
}
body {
background:url(images/background.png);
}
#container {
width:940px;
height:auto;
margin:0 auto;
}
#block
{
width:300px;
height:1580px;
float:left;
margin:20px 0 20px 0;
}
#block2
{
width:300px;
height:1580px;
float:left;
margin:20px 20px 20px 20px;
}
#block3
{
width:300px;
height:1580px;
float:left;
margin:20px 0 20px 0;
}
h1 {
width:300px;
height:300px;
margin-bottom:20px;
}
ul {
width:300px;
height:300px;
margin-bottom:20px;
}
li {
float:left;
}
li.one {
margin:0 20px 0 0;
}
li.three {
margin:20px 20px 0 0;
}
li.four {
margin:20px 0 0 0;
}
li.five {
float:right;
}
