LoginSignup
1
1

More than 5 years have passed since last update.

@intern

Webサイト作成入門（akiinu）

Last updated at Posted at 2014-04-14

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カラムレイアウト

html
<!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>
css
#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を指定するのがルール

html
<!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;

css
#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;

css
#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カラムレイアウト（固定幅）

css
#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;
}

間に余白を入れる

css
#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カラムレイアウト（可変幅）

html
<!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>
css
#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を固定したいとき

css
#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のものを先に書く）
lang:html
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
</div>

3カラムレイアウト（固定幅）

固定幅かつ間に余白をいれる

css
#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;を設定すると、
お互いに打ち消し合って大きい方に設定される。

実際にサイトを作る

文書の構造をつくる

html
<!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→回り込み防ぐ・余白つける
css
#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

css
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 {
}

ヘッダーとフッター

ヘッダーに画像・メニューの設定

html
<!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>

フッターの指定

css
#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;
}

css
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;
}

見出しと本文を作る

html
<!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>

見出しのスタイルを作る

css
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;
}

画像付きリスト

<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>

html
<!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

css
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 class="sample">
<img src="dummy.png" width="60" height="60">
<p>補足。補足。</p>
</div>

画像に枠をつける
div.sample>lmg {
padding: 2px;
backgoround:#fff
border: 1px solid #ccc
}

css
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>

html
<!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のポジションを決める

css
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 class="submenu">
<li><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
</ul>

html
<!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>
css
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; 
}

※アイコン付リストは背景画像と余白でできている

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1