普段いろんな人にHTML5があーだこーだと言ってるんですけど、実はまだ一度もコーディングしたことなかったというやつはだれですか。
はい、私ですw
ということで基本的なものと思われる2カラムのページをコーディングしてみました。
はじめの一歩です。大事ですねw
はじめてのHTML5コーディング
前にも一度挑戦したのですが、clearfixでfloatが解除されなかったのでその時は挫折しました。
ですが、先日参加した勉強会で要素をstylesheetでdisplay:blockすればいけるのではということを教えてもらい再度挑戦。
実際試してみたらうまいこといきました。 良かった♪
次はもうちょい見た目良さげにしたいですね。
となるとCSS3を使ってみようかな。あと、javascriptもつかってHTML5っぽい動きさせてみたいです。
やりたいこと多いなぁ。
ちなみにIEでは表示されません。ここらへんもハックさせたやつ調べようっと。
HTML
<!DOCTYPE html>
<html>
<head>
<title>初めてのHTML5コーディング -構造-</title>
<link href="./style.css" rel="stylesheet" type="text/css" media="all">
<meta charset="UTF-8">
</head>
<body>
<header>
<p>header</p>
</header>
<nav>
<ul>
<li><a href="#">Page1</a></li>
<li><a href="#">Page2</a></li>
<li><a href="#">Page3</a></li>
</ul>
</nav>
<section id="wrapper">
<p>section id="wrapper"</p>
<section id="contents">
<p>section id="contents"</p>
</section>
<aside>
<p>aside</p>
</aside>
</section>
<footer>
<p>footer</p>
</footer>
</body>
</html>
CSS
header,nav,section,aside,footer{display:block;}
p{
margin:0;
padding:0;
font-weight:bold;
}
header{
width:600px;
margin:0 auto 5px;
padding:20px 0;
background:#007a7a;
text-align:center;
color:#fff;
}
nav{
width:600px;
margin:0 auto 5px;
}
nav ul{
list-style:none;
margin:0;
padding:0;
}
nav li{
float:left;
margin:0;
padding:0;
border:#007a7a 1px solid;
}
nav a{
display:block;
width:198px;
padding:10px 0;
background:#2fbdbd;
text-align:center;
text-decoration:none;
color:#fff;
font-weight:bold;
}
nav a:hover{
background:#005050;
}
#wrapper{
width:576px;
margin:0 auto 10px;
padding:10px;
background:#eee;
border:#999 2px solid;
text-align:center;
}
#wrapper p{
margin-bottom:16px;
}
#contents{
float:left;
width:400px;
padding:150px 0;
background:#992626;
color:#fff;
}
aside{
float:right;
width:160px;
padding:150px 0;
background:#e63939;
color:#fff;
}
footer{
width:600px;
margin:0 auto;
padding:15px 0;
background:#7fbe00;
text-align:center;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
0 件のコメント:
コメントを投稿