HTML 演習
演習を行ってまいりました。
【使用した要素等】
div id
- container
- header
- nav
- site
- wrapper
- content
- sidebar
- footer
div class
- post
- date
- ad
- menu
p class
- more
span
→ span自体には特に意味合いはありませんが、<span>～</span>で囲んだ範囲をひとかたまりとし、スタイルシートを適用する際に使用します。
small
→ 注釈表示を表します。（警告 免責事項 法的規制 著作権当）
インラインで使用。
＜CSS記載順番＞
- /*reset */
- /* layout */
- /* #nav */
- /* #header */
- /* #content*/
- /* #sidebar */
- /* #footer */
＜ｈｔｍｌ＞
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CATEOGRY</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div><!--nav-->
<div id="site">
<h1>PICKU<span>PSTREM</span></h1>
<p>Comfort,Delightful,Refreshing Time Product</p>
</div><!--site-->
</div><!--header-->
<div id="wrapper">
<div id="content">
<div class="post">
<a href="#">
<div class="date"><span>1</span>AUG
</div><!--date-->
<h2>風車と風の関係</h2>
<p><img src="img/windmill_thumb.jpg" alt="">
"風車は風を受けて回転します。このとき、効率よく風を受けるためには、風上に向かって真正面をむかなければなりません。そのため、風車は首が回るようになっており、常に真正面から風を受けることができるようになっています。この…</p>
<p class="more">READ MORE</p>
</a>
</div><!--post-->
<div class="post">
<a href="#">
<div class="date"><span>28</span>JUL</div>
<h2>海岸のデコレーション</h2>
<p><img src="img/sand_thumb.jpg" alt="">海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。…</p>
<p class="more">READ MORE</p>
</a>
</div><!--post-->
<div class="post">
<a href="#">
<div class="date"><span>12</span>JUL</div>
<h2>ツルを伸ばしてどこまでも</h2>
<p><img src="img/leaf_thumb.jpg" alt="">ツル植物は太い木の幹に巻きつき、どんどんとツルを伸ばしていきます。太陽の当たる方向に葉をつけ、枝を伸ばしていくたくましさは見習いたいものです。遠くから見ると細く見えるツルも、近くで見ると意外と太く、簡単に切ることは…</p>
<p class="more">READ MORE</p>
</a>
</div><!--post-->
<div class="post">
<a href="#">
<div class="date"><span>5</span>JUL</div>
<h2>色とりどりの絨毯</h2>
<p><img src="img/flower_thumb.jpg" alt="">原生花園では今年も色とりどりの花が咲いています。特に今年は原色の色鮮やかな花がたくさん咲いていますので、週末には多くの人が訪れ、花を楽しんでいます。花の見ごろは来週半ばごろまで続くそうですので、時間を作って行ってみ…</p>
<p class="more">READ MORE</p>
</a>
</div><!--/.post-->
</div>
<div id="sidebar">
<div class="ad">
<img src="img/ad.jpg" alt="広告">
</div><!--/.ad-->
<div class="menu">
<h3>CATEGORIES</h3>
<ul>
<li><a href="#">山と森林</a></li>
<li><a href="#">海と海岸と空</a></li>
<li><a href="#">年と建築</a></li>
<li><a href="#">地下</a></li>
</ul>
</div><!--/.menu-->
<div class="menu">
<h3>RECENT POSTS</h3>
<ul>
<li><a href="#">海岸のデコレーション</a></li>
<li><a href="#">風車と海風の関係</a></li>
<li><a href="#">ツルを伸ばしてどこまでも</a></li>
<li><a href="#">色とりどりの絨毯</a></li>
<li><a href="#">休日に買いに行くなら</a></li>
<li><a href="#">高速ビルと風の関係</a></li>
</ul>
</div><!--menu-->
</div><!--sidebar-->
</div><!--wrapper-->
<div id="footer">
<p>PICKUP STREAM</p>
<p><small>Copyright © PICKUP STREAM, all right reserved.</small></p>
</div><!--footer-->
</div><!--contaner-->
</body>
</html>
＜ｃｓｓ＞
@charset "utf-8";
/*reset */
html,body,div,h1,h2,h3,p,ul,li,img, a{
margin:0;
padding:0;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
line-height:1.0;
}
ul {
list-style:none;
}
a {
text-decoration:none;
}
img {
border: none;
vertical-align: bottom;
}
/* layout */
#container {
width: 960px;
margin: auto;
}
#header {
margin-bottom: 30px;
}
#wrapper {
overflow: hidden;
}
#content {
width: 630px;
float: left;
}
#sidebar {
width: 300px;
float: right;
}
#footer {
clear: both;
}
/* #nav */
#nav {
font-size:14px;
background-color:#000; /* 背景が黒に */
}
#nav ul {
overflow: hidden; /* 文字が左に寄った */
}
#nav li{
float:left ;
width: 120px; /* 文字の間が開いた */
}
#nav li a {
display: block;
line-height:3.0; /* 高さパディングいらない */
border-right:solid 1px #FFF; /* 縦線 */
color:#FFFFFF; /* 文字色を白に*/
text-align:center; /* 中央に寄せる*/
}
#nav li a:hover {
background:#63A2C6; /* マウスがきたら色が変わる*/
}
/* #header */
#header {
width:960px;
height:280px; /* 画像は縦480px*/
background-image:url(../img/seagull.jpg);
background-position: left bottom; /* P85画像を左下にくっつける*/
}
#site {
font-family:
Helvetica,
Arial,
sans-serif;
background: rgba(255, 255, 255, 0.5); /* 下地がすける*/
display: inline-block; /* 下地右に長かったのが、文字の長さにくっついた*/
margin-top:30px;
}
#site h1 {
font-size: 50px;
}
#site h1 span {
font-weight:normal;
}
/* #content*/
.date {
float: left; /*h3の上にあったのが左に移動*/
background: #537685;
padding: 5px 15px 8px;
margin: 0 10px 5px 0;
text-align: center;
font-family:
Helvetica,
Arial,
sans-serif;
font-weight: bold;
font-size: 14px;
color: #FFF;
}
.date span {
display:block; /*横並びの日付が縦になった*/
font-size:20px;
}
.post {
border:solid 1px #aaa; /*枠線ができた*/
margin-bottom:20px; /*縦に空間ができた*/
}
.post h2 {
font-size: 24px;
border-bottom:solid 1px #AAA;
margin:10px 0 15px 0;
padding-bottom:8px; /*h2の底がに下がったので、写真が左の日付に引っかかっていたのがとれ、左に滑って左に詰まった*/
}
.post p {
font-size:14px;
line-height:1.6;
clear:left;
}
.post p img {
float:left; /*写真の下に設置されていた文字が写真の右に来た*/
clear:left;
margin-right:10px; /*文字と写真の間に縦に空間が空いた*/
}
.post .more{
background:url(../img/more_gray.png) no-repeat center right;
text-align:right; /*READ MOREが右に来た--*/
padding-right:30px; /*READ MOREが画像をよけて左にいどう--*/
color:#888; /*READ MOREの色がグレーになった！-*/
clear:none; /*下のブロックが回り込んできた-文書の回り込みを解除する*/
}
.post a {
display:block; /*日付が微妙に下がった！-*/
padding:10px;
overflow:hidden; /* clear:noneで回り込んできたのが下に下がった*/
color:#000;
}
.post a:hover {
background-color: #DDD;
background: -webkit-gradient(linear,left top, left bottom, from(#FF), to(#DDD));
background: -webkit-linear-gradient(#FFF 0%, #DDD 100%);
background: -moz-linear-gradient(#FFF 0%, #DDD 100%);
background: -o-linear-gradient(#FFF 0%, #DDD 100%);
background: -ms-linear-gradient(#FFF 0%, #DDD 100%);
background: linear-gradient(#FFF 0%, #DDD 100%);
}
/* #sidebar */
.ad img {
width:300px;
height:250px;
margin-bottom:20px;
}
.menu {
background:#537685;
margin-bottom:20px;
}
.menu h3 {
font-family:
Helvetica,
Arial,
sans-serif;
font-size:24px;
font-weight:normal;
color:#FFFFFF;
margin-bottom:25px;
}
.menu ul {
border-top:solid 1px #AAA; /* h3の下にのみ棒線*/
}
.menu li {
border-top:solid 1px #AAA; /* 山森林等に棒線！*/
}
.menu li a {
display:block;
font-size:14px;
color:#FFF;
padding:15px 0 13px 0 ;
}
.menu li a:hover{
background:#63A2C6;
}
/* #footer */
#footer {
font-family:
Helvetica,
Arial,
sans-serif;
color: #FFF;
background: #000;
padding: 15px 10px 20px 10px;
}
#footer small {
font-size: 11px;
font-weight: bold;
display: block;
margin-top: 2px;
}
