■
2012-12-07
ボックス内にボックスがある場合のマージンの相殺
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>マージンの相殺</title> <link rel="stylesheet" href="css/style1.css" media="screen,print"> </head> <body> <div id="container"> <div id="header">header</div> <div id="wrapper"> <div id="content">content</div> <div id="sidebar">sidebar</div> </div> <div id="footer">footer</div> </div> </body> </html>
@charset "utf-8";
* {
margin: 0;
padding 0;
}
body {
background-color: #d2e5e5;
}
#container {
width: 800px;/*幅を指定する*/
height: auto;/*高さを指定する*/
margin: 0 auto;
padding: 10px 0;
background-color: #ffffff;
}
#header {
width: 780px;/*幅を指定する*/
height: 90px;/*高さを指定する*/
margin: 0 10px 30px 10px;
background-color: #e6dcf0;
}
#wrapper {
width : 800px;/*幅を指定する*/
height: auto;/*高さを指定する*/
margin: 10px 0 10px 0;
overflow: hidden;
}
#content {
width: 585px;/*幅を指定する*/
height: 350px;/*高さを指定する*/
margin: 0 10px 0 0;
background-color: #f0e7de;
float: right;/*左または右に寄せて配置する*/
}
#sidebar {
width: 185px;/*幅を指定する*/
height: 350px;/*高さを指定する*/
margin: 0 0 0 10px;
background-color: #ddf0d5;
float: left;
}
#footer {
width: 780px;/*幅を指定する*/
height: 90px;/*高さを指定する*/
margin: 0 10px 0 10px;
background-color: #f0f763;
clear: both;
}
2012-12-06
リストをナビゲーションに
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>縦・横並びのナビゲーション</title> <link rel="stylesheet" href="css/style2.css" media="screen,print"> </head> <body> <div id="nav1"> <ul> <li><a href="#">HTML+CSS</a></li> <li><a href="#">JavaScrip</a></li> <li><a href="#">PHP</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">ActionScript</a></li> </ul> </div> <div id="nav2"> <ul> <li><a href="#">HTML+CSS</a></li> <li><a href="#">JavaScrip</a></li> <li><a href="#">PHP</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">ActionScript</a></li> </ul> </div> </body> </html>
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
#nav1 {
font-size: 1em;
font-weight: bold;
height: auto;
margin: 50px 0 0 50px;/*上・左を少し空けて見やすく*/
}
#nav1 ul {
list-style-type: none;/*リストの黒丸を消す*/
width: 150px;/*リスト全体の幅*/
border-top: 2px solid #fff;/*囲みの上枠 */
border-right: 2px solid #fff;/*囲みの右枠 */
border-left: 2px solid #fff;/*囲みの左枠 */
background-color: #6fab78;/*囲みの背景色*/
}
#nav1 li a {
width: auto;/*リンクの幅（省略可）*/
height: auto;/*リンクの高さ（省略可）*/
padding: 6px;/*文字から枠までの空き */
display: block;/*リンクの面*/
border-bottom: 2px solid #fff;/*囲みの下枠 */
}
#nav1 a:link,#nav1 a:visited { /*訪問済みリンクのスタイルを指定します。*/
color: #ffffff;
text-decoration: none;/*テキストの下線・上線・打ち消し線・点滅を指定する*/
}
#nav1 a:hover {
color: #ffffff;
background-color: #447769;
}
/*横並びナビゲーション*/
#nav2 {
height: auto;
width: auto;
margin: 50px 0 0 50px;/*上・左を少し空けて見やすく*/
}
#nav2 ul {
list-style-type: none;
width: 750px;/*リスト全体の幅*/
height: auto;/*リンクの高さ（省略可）*/
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
overflow: auto;
}
#nav2 li {
font-size: 1em;
font-weight: bold;
text-align: center;
width: 148px;
height: auto;
float: left;
display: inline;/*IE6対策*/
background-color: #6fab78;
border-right: 2px solid #fff;
}
#nav2 li a {
padding: 7px 0;
display: block;
}
#nav2 a:link,#nav2 a:visited {
color: #ffffff;
text-decoration: none;
}
#nav2 a:hover {
color: #ffffff;
background-color: #447769;
}
