参考:http://dotinstall.com/lessons/website_html
Web制作におけるレイアウト手法
使うもの
HTML/CSS/CSS3
CSSのリセット(ブラウザごとのデザインを初期化するため)
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
1カラムレイアウト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レイアウトの練習</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="main">main</div>
<div id="footer">footer</div>
</div>
</body>
</html>
#container {
/* width: 500px; */
width: 70%;
margin: 0 auto;
}
#header {
background-color: red;
}
#main {
background-color: blue;
}
#footer {
background-color: green;
}
※ margin 0 auto →上下の余白なし、左右の余白自動→中央寄せ
2カラムレイアウト(可変幅)
※floatを指定したらwidthを指定するのがルール
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レイアウトの練習</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
rightを60%にして間を空けたい
⇒footerが回り込んでしまう
→#mainにoverflow: hidden;
#container {
/* width: 500px; */
width: 70%;
margin: 0 auto;
}
#header {
background-color: red;
}
#main {
background-color: blue;
overflow: hidden;
}
#footer {
background-color: green;
}
#left {
background-color: pink;
float: left;
width: 30%;
}
#right {
background-color: purple;
float: right;
width: 60%;
}
leftを固定してrightは可変にしたい
→#rightのfloat,widthを消して#margin-left: 200px;
#container {
/* width: 500px; */
width: 70%;
margin: 0 auto;
}
#header {
background-color: red;
}
#main {
background-color: blue;
overflow: hidden;
}
#footer {
background-color: green;
}
#left {
background-color: pink;
float: left;
width: 200px;
}
#right {
background-color: purple;
margin-left: 200px;
}
2カラムレイアウト(固定幅)
#container {
/* width: 500px; */
width: 70%;
margin: 0 auto;
}
#header {
background-color: red;
}
#main {
background-color: blue;
overflow: hidden;
}
#footer {
background-color: green;
}
#left {
background-color: pink;
float: left;
width: 200px;
}
#right {
background-color: purple;
float: right;
width: 300px;
}
間に余白を入れる
#container {
/* width: 500px; */
width: 70%;
margin: 0 auto;
}
#header {
background-color: red;
}
#main {
background-color: blue;
overflow: hidden;
}
#footer {
background-color: green;
}
#left {
background-color: pink;
float: left;
width: 200px;
}
#right {
background-color: purple;
float: right;
width: 200px;
}
rightを左に寄せつつ間に余白をとる
#right { background-color: purple; float: left; width: 200px; margin-left: 100px; }
または
#right { background-color: purple; margin-legt: 300px; }
3カラムレイアウト(可変幅)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レイアウトの練習</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-
1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
#container {
/* width: 500px; */
width: 70%;
margin: 0 auto;
}
#header {
background-color: red;
}
#main {
background-color: blue;
overflow: hidden;
}
#footer {
background-color: green;
}
#left {
background-color: pink;
float: left;
width: 30%;
}
#center {
background-color: orange;
float: left;
width: 40%;
}
#right {
background-color: purple;
float: left;
width: 30%;
}
leftとrightを固定したいとき
#container {
/* width: 500px; */
width: 70%;
margin: 0 auto;
}
#header {
background-color: red;
}
#main {
background-color: blue;
overflow: hidden;
}
#footer {
background-color: green;
}
#left {
background-color: pink;
float: left;
width: 100px;
}
#center {
background-color: orange;
margin-left: 100px;
margin-right: 100px;
}
#right {
background-color: purple;
float: right;
width: 100px;
}
※加えてrightとcenterの位置を変える(floatのものを先に書く)
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
</div>
3カラムレイアウト(固定幅)
固定幅かつ間に余白をいれる
#container {
width: 500px;
margin: 0 auto;
}
#header {
background-color: red;
}
#main {
background-color: blue;
overflow: hidden;
}
#footer {
background-color: green;
}
#left {
background-color: pink;
float: left;
width: 100px;
}
#center {
background-color: orange;
float: left;
width: 280px;
margin-left: 10px;
margin-right: 10px;
}
#right {
background-color: purple;
float: right;
width: 100px;
}
※marginの相殺
headerにmargin-bottom: 20px;
mainにmargin-top: 50px;を設定すると、
お互いに打ち消し合って大きい方に設定される。
実際にサイトを作る
文書の構造をつくる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レイアウトの練習</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="menu">menu</div>
<div id="main">
<div id="contents">
contents
</div><!-- contents -->
<div id="sidebar">
sidebar
</div><!-- #sidebar -->
</div><!-- #main -->
<div id="footer">footer</div>
</div><!-- #container -->
</body>
</html>
2カラムレイアウトを作る
- countainer→幅を決める・中央寄せにする
- header・menu→余白をつける
- contents,sidebar→幅を決める・幅余らせる
- main→回り込み防ぐ・余白つける
#container {
width: 600px;
margin: 0 auto;
}
#header {
margin-bottom: 15px;
}
#menu {
margin-bottom: 15px;
}
#main {
overflow: hidden;
margin-bottom: 15px;
}
#contents {
float: left;
width: 400px;
}
#sidebar {
float: right;
width: 180px;
}
#footer {
}
背景の設定・コンテンツの設定・フォントの設定
コンテンツの枠に影を作る
box-shadow: 0 0 3px rgba(0,0,0,0.5);
→縦0横0ぼかし3pxカラー黒透明度50%
footer下までのばす
- htmlにheight: 100%;
- #containerに
min-height: 100%;
heght: 100%; - bodyにheight: 100%;
- body > #container {
height: auto;
}
文字がふちに寄りすぎているので余白をつける
- containerにpadding: 0 10px;
フォントを指定する
- bodyにfont-family
html {
background-image: url('bg.gif');
height: 100%;
}
body {
height: 100%;
font-family: Verdana, Arial;
}
body > #container {
height: auto;
}
#container {
min-height: 100%;
height: 100%;
width: 600px;
margin: 0 auto;
padding: 0 10px;
background-color: #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header {
margin-bottom: 15px;
}
#menu {
margin-bottom: 15px;
}
#main {
overflow: hidden;
margin-bottom: 15px;
}
#contents {
float: left;
width: 400px;
}
#sidebar {
float: right;
width: 180px;
}
#footer {
}
ヘッダーとフッター
ヘッダーに画像・メニューの設定
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レイアウトの練習</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
<div id="header"><h1><img src="dummy.png" height="100" width="600"></h1></div>
<div id="menu">
<ul>
<li><a href="">ホーム</a></li>
<li><a href="">製品情報</a></li>
<li><a href="">企業情報</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
contents
</div><!-- contents -->
<div id="sidebar">
sidebar
</div><!-- #sidebar -->
</div><!-- #main -->
<div id="footer">Copyright 2012, dotinstall.com</div>
</div><!-- #container -->
</body>
</html>
フッターの指定
#footer {
font-size: 12px;
color: #ccc;
text-align: center;
border-top: 1px solid #ccc;
padding: 10px 0 20px;
}
メニューのスタイリング
メニューはHTML上ではリスト
#menu ul>li { float: left; width: 100px; font-size: 13px; text-align: center; padding: 4px; background: #ccc; margin-right: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; }
※contents,sidebarの回り込みが起きる
→#menuにoverflow: hidden;
*もっと使いやすく*
マウスオーバーで色を変える
#menu ul>li:hover { background: #ddd; }
下線をなくす・要素全体をリンクに
#menu ul>li>a { text-decoration: none; display: block; }
html {
background-image: url('bg.gif');
height: 100%;
}
body {
height: 100%;
font-family: Verdana, Arial;
font-size: 14px;
}
body > #container {
height: auto;
}
#container {
min-height: 100%;
height: 100%;
width: 600px;
margin: 0 auto;
padding: 0 10px;
background-color: #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header {
margin-bottom: 15px;
}
#menu {
margin-bottom: 15px;
overflow: hidden;
}
#main {
overflow: hidden;
margin-bottom: 15px;
}
#contents {
float: left;
width: 400px;
}
#sidebar {
float: right;
width: 180px;
}
#footer {
font-size: 12px;
color: #ccc;
text-align: center;
border-top: 1px solid #ccc;
padding: 10px 0 20px;
}
#menu ul>li {
float: left;
width: 100px;
font-size: 13px;
text-align: center;
padding: 4px;
background: #ccc;
margin-right: 10px;
border-radius: 4px;
text-shadow: 0 1px 0 #fff;
}
#menu ul>li:hover {
background: #ddd;
}
#menu ul>li>a {
text-decoration: none;
display: block;
}
見出しと本文を作る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レイアウトの練習</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
<div id="header"><h1><img src="dummy.png" height="100" width="600"></h1></div>
<div id="menu">
<ul>
<li><a href="">ホーム</a></li>
<li><a href="">製品情報</a></li>
<li><a href="">企業情報</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
<h2>見出し</h2>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<h2>見出し</h2>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div><!-- contents -->
<div id="sidebar">
<h3>見出し</h3>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<h3>見出し</h3>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div><!-- #sidebar -->
</div><!-- #main -->
<div id="footer">Copyright 2012, dotinstall.com</div>
</div><!-- #container -->
</body>
</html>
見出しのスタイルを作る
html {
background-image: url('bg.gif');
height: 100%;
}
body {
height: 100%;
font-family: Verdana, Arial;
font-size: 14px;
}
body > #container {
height: auto;
}
#container {
min-height: 100%;
height: 100%;
width: 600px;
margin: 0 auto;
padding: 0 10px;
background-color: #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header {
margin-bottom: 15px;
}
#menu {
margin-bottom: 15px;
overflow: hidden;
}
#main {
overflow: hidden;
margin-bottom: 15px;
}
#contents {
float: left;
width: 400px;
}
#sidebar {
float: right;
width: 180px;
}
#footer {
font-size: 12px;
color: #ccc;
text-align: center;
border-top: 1px solid #ccc;
padding: 10px 0 20px;
}
#menu ul>li {
float: left;
width: 100px;
font-size: 13px;
text-align: center;
padding: 4px;
background: #ccc;
margin-right: 10px;
border-radius: 4px;
text-shadow: 0 1px 0 #fff;
}
#menu ul>li:hover {
background: #ddd;
}
#menu ul>li>a {
text-decoration: none;
display: block;
}
h2, h3 {
font-weight: bold;
}
h2 {
font-size: 16px;
border-left: 5px solid #ccc;
padding: 3px 0 3px 10px;
margin-bottom: 10px;
}
h3 {
border-bottom: 1px solid #ccc;
padding: 3px 0;
margin-bottom: 10px;
}
p {
margin-bottom: 14px;
}
画像付きリスト
`
説明です。説明です。説明です。説明です。説明です。説明です。説明です。
説明です。説明です。説明です。説明です。説明です。説明です。説明です。
説明です。説明です。説明です。説明です。説明です。説明です。説明です。
`<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レイアウトの練習</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
<div id="header"><h1><img src="dummy.png" height="100" width="600"></h1></div>
<div id="menu">
<ul>
<li><a href="">ホーム</a></li>
<li><a href="">製品情報</a></li>
<li><a href="">企業情報</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
<h2>見出し</h2>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<ur class="products">
<li>
<img src="dummy.png" width="60" height="60">
<p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
</li>
<li>
<img src="dummy.png" width="60" height="60">
<p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
</li>
<li>
<img src="dummy.png" width="60" height="60">
<p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
</li>
</ul>
<h2>見出し</h2>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div><!-- contents -->
<div id="sidebar">
<h3>見出し</h3>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<h3>見出し</h3>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div><!-- #sidebar -->
</div><!-- #main -->
<div id="footer">Copyright 2012, dotinstall.com</div>
</div><!-- #container -->
</body>
</html>
products imgとproducts pのスタイリング
回り込みを防ぐためにliにoverflow
html {
background-image: url('bg.gif');
height: 100%;
}
body {
height: 100%;
font-family: Verdana, Arial;
font-size: 14px;
}
body > #container {
height: auto;
}
#container {
min-height: 100%;
height: 100%;
width: 600px;
margin: 0 auto;
padding: 0 10px;
background-color: #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header {
margin-bottom: 15px;
}
#menu {
margin-bottom: 15px;
overflow: hidden;
}
#main {
overflow: hidden;
margin-bottom: 15px;
}
#contents {
float: left;
width: 400px;
}
#sidebar {
float: right;
width: 180px;
}
#footer {
font-size: 12px;
color: #ccc;
text-align: center;
border-top: 1px solid #ccc;
padding: 10px 0 20px;
}
#menu ul>li {
float: left;
width: 100px;
font-size: 13px;
text-align: center;
padding: 4px;
background: #ccc;
margin-right: 10px;
border-radius: 4px;
text-shadow: 0 1px 0 #fff;
}
#menu ul>li:hover {
background: #ddd;
}
#menu ul>li>a {
text-decoration: none;
display: block;
}
h2, h3 {
font-weight: bold;
}
h2 {
font-size: 16px;
border-left: 5px solid #ccc;
padding: 3px 0 3px 10px;
margin-bottom: 10px;
}
h3 {
border-bottom: 1px solid #ccc;
padding: 3px 0;
margin-bottom: 10px;
}
p {
margin-bottom: 14px;
}
ul.products {
margin-bottom: 15px;
}
ul.products>li {
overflow: hidden;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #ccc;
}
ul.products>li:last-child {
border: none;
}
ul.products>li>img {
float: left;
width: 60px;
}
ul.products>li>p {
margin-left: 70px;
font-size: 13px;
}
キャプション付き画像
`
`画像に枠をつける
div.sample>lmg { padding: 2px; backgoround:#fff border: 1px solid #ccc }
html {
background-image: url('bg.gif');
height: 100%;
}
body {
height: 100%;
font-family: Verdana, Arial;
font-size: 14px;
}
body > #container {
height: auto;
}
#container {
min-height: 100%;
height: 100%;
width: 600px;
margin: 0 auto;
padding: 0 10px;
background-color: #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header {
margin-bottom: 15px;
}
#menu {
margin-bottom: 15px;
overflow: hidden;
}
#main {
overflow: hidden;
margin-bottom: 15px;
}
#contents {
float: left;
width: 400px;
}
#sidebar {
float: right;
width: 180px;
}
#footer {
font-size: 12px;
color: #ccc;
text-align: center;
border-top: 1px solid #ccc;
padding: 10px 0 20px;
}
#menu ul>li {
float: left;
width: 100px;
font-size: 13px;
text-align: center;
padding: 4px;
background: #ccc;
margin-right: 10px;
border-radius: 4px;
text-shadow: 0 1px 0 #fff;
}
#menu ul>li:hover {
background: #ddd;
}
#menu ul>li>a {
text-decoration: none;
display: block;
}
h2, h3 {
font-weight: bold;
}
h2 {
font-size: 16px;
border-left: 5px solid #ccc;
padding: 3px 0 3px 10px;
margin-bottom: 10px;
}
h3 {
border-bottom: 1px solid #ccc;
padding: 3px 0;
margin-bottom: 10px;
}
p {
margin-bottom: 14px;
}
ul.products {
margin-bottom: 15px;
}
ul.products>li {
overflow: hidden;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #ccc;
}
ul.products>li:last-child {
border: none;
}
ul.products>li>img {
float: left;
width: 60px;
}
ul.products>li>p {
margin-left: 70px;
font-size: 13px;
}
div.sample {
float: right;
width: 60px;
margin-left: 10px;
}
div.sample>p {
font-size: 10px;
}
div.sample>img {
padding: 2px;
background:#fff;
border: 1px solid #ccc
}
バッジをつける
<span class="budge">new!</span>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レイアウトの練習</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
<div id="header"><h1><img src="dummy.png" height="100" width="600"></h1></div>
<div id="menu">
<ul>
<li><a href="">ホーム</a></li>
<li><a href="">製品情報</a></li>
<li><a href="">企業情報</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
<h2>見出し</h2>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<ul class="products">
<li>
<img src="dummy.png" width="60" height="60">
<p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
</li>
<li>
<img src="dummy.png" width="60" height="60">
<p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
</li>
<li>
<img src="dummy.png" width="60" height="60">
<p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
</li>
</ul>
<h2>見出し</h2>
<div class="sample">
<span class="badge">new!</span>
<img src="dummy.png" width="60" height="60">
<p>補足。補足。</p>
</div>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div><!-- contents -->
<div id="sidebar">
<h3>見出し</h3>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<h3>見出し</h3>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div><!-- #sidebar -->
</div><!-- #main -->
<div id="footer">Copyright 2012, dotinstall.com</div>
</div><!-- #container -->
</body>
</html>
badgeのスタイリング
親要素div.sampleと子要素badgeのポジションを決める
html {
background-image: url('bg.gif');
height: 100%;
}
body {
height: 100%;
font-family: Verdana, Arial;
font-size: 14px;
}
body > #container {
height: auto;
}
#container {
min-height: 100%;
height: 100%;
width: 600px;
margin: 0 auto;
padding: 0 10px;
background-color: #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header {
margin-bottom: 15px;
}
#menu {
margin-bottom: 15px;
overflow: hidden;
}
#main {
overflow: hidden;
margin-bottom: 15px;
}
#contents {
float: left;
width: 400px;
}
#sidebar {
float: right;
width: 180px;
}
#footer {
font-size: 12px;
color: #ccc;
text-align: center;
border-top: 1px solid #ccc;
padding: 10px 0 20px;
}
#menu ul>li {
float: left;
width: 100px;
font-size: 13px;
text-align: center;
padding: 4px;
background: #ccc;
margin-right: 10px;
border-radius: 4px;
text-shadow: 0 1px 0 #fff;
}
#menu ul>li:hover {
background: #ddd;
}
#menu ul>li>a {
text-decoration: none;
display: block;
}
h2, h3 {
font-weight: bold;
}
h2 {
font-size: 16px;
border-left: 5px solid #ccc;
padding: 3px 0 3px 10px;
margin-bottom: 10px;
}
h3 {
border-bottom: 1px solid #ccc;
padding: 3px 0;
margin-bottom: 10px;
}
p {
margin-bottom: 14px;
}
ul.products {
margin-bottom: 15px;
}
ul.products>li {
overflow: hidden;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #ccc;
}
ul.products>li:last-child {
border: none;
}
ul.products>li>img {
float: left;
width: 60px;
}
ul.products>li>p {
margin-left: 70px;
font-size: 13px;
}
div.sample {
float: right;
width: 60px;
margin-left: 10px;
position: relative;
}
div.sample>p {
font-size: 10px;
}
div.sample>img {
padding: 2px;
background:#fff;
border: 1px solid #ccc
}
.badge {
background: red;
color: white;
font-size: 10px;
padding: 2px 4px 3px;
position: absolute;
top: -5px;
right: -10px;
}
アイコン付きリストを作る
`
`<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レイアウトの練習</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
<div id="header"><h1><img src="dummy.png" height="100" width="600"></h1></div>
<div id="menu">
<ul>
<li><a href="">ホーム</a></li>
<li><a href="">製品情報</a></li>
<li><a href="">企業情報</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
<h2>見出し</h2>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<ul class="products">
<li>
<img src="dummy.png" width="60" height="60">
<p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
</li>
<li>
<img src="dummy.png" width="60" height="60">
<p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
</li>
<li>
<img src="dummy.png" width="60" height="60">
<p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
</li>
</ul>
<h2>見出し</h2>
<div class="sample">
<span class="badge">new!</span>
<img src="dummy.png" width="60" height="60">
<p>補足。補足。</p>
</div>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div><!-- contents -->
<div id="sidebar">
<h3>見出し</h3>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<h3>見出し</h3>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<ul class="submenu">
<li><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
</ul>
</div><!-- #sidebar -->
</div><!-- #main -->
<div id="footer">Copyright 2012, dotinstall.com</div>
</div><!-- #container -->
</body>
</html>
html {
background-image: url('bg.gif');
height: 100%;
}
body {
height: 100%;
font-family: Verdana, Arial;
font-size: 14px;
}
body > #container {
height: auto;
}
#container {
min-height: 100%;
height: 100%;
width: 600px;
margin: 0 auto;
padding: 0 10px;
background-color: #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header {
margin-bottom: 15px;
}
#menu {
margin-bottom: 15px;
overflow: hidden;
}
#main {
overflow: hidden;
margin-bottom: 15px;
}
#contents {
float: left;
width: 400px;
}
#sidebar {
float: right;
width: 180px;
}
#footer {
font-size: 12px;
color: #ccc;
text-align: center;
border-top: 1px solid #ccc;
padding: 10px 0 20px;
}
#menu ul>li {
float: left;
width: 100px;
font-size: 13px;
text-align: center;
padding: 4px;
background: #ccc;
margin-right: 10px;
border-radius: 4px;
text-shadow: 0 1px 0 #fff;
}
#menu ul>li:hover {
background: #ddd;
}
#menu ul>li>a {
text-decoration: none;
display: block;
}
h2, h3 {
font-weight: bold;
}
h2 {
font-size: 16px;
border-left: 5px solid #ccc;
padding: 3px 0 3px 10px;
margin-bottom: 10px;
}
h3 {
border-bottom: 1px solid #ccc;
padding: 3px 0;
margin-bottom: 10px;
}
p {
margin-bottom: 14px;
}
ul.products {
margin-bottom: 15px;
}
ul.products>li {
overflow: hidden;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #ccc;
}
ul.products>li:last-child {
border: none;
}
ul.products>li>img {
float: left;
width: 60px;
}
ul.products>li>p {
margin-left: 70px;
font-size: 13px;
}
div.sample {
float: right;
width: 60px;
margin-left: 10px;
position: relative;
}
div.sample>p {
font-size: 10px;
}
div.sample>img {
padding: 2px;
background:#fff;
border: 1px solid #ccc
}
.badge {
background: red;
color: white;
font-size: 10px;
padding: 2px 4px 3px;
position: absolute;
top: -5px;
right: -10px;
}
ul.submenu>li {
background: url('h.png') no-repeat;
padding: 0 0 5px 20px;
}
※アイコン付リストは背景画像と余白でできている