More than 5 years have passed since last update.

ウェブサイト作成（nojimayusuke）

webサイト

Last updated at 2014-05-01Posted at 2014-05-01

##１カラムのレイアウト

<div id="container">

<div id="header">header</div>
<div id="main">main</div>
<div id="footer">footer</div>

</div>

どんなwebサイトを作るときでもスタイルを適用させやすいように、全体の領域に対してcontainerというdivをあてるのが一般的である。


#container {
     width: 500px;
     margin: 0 auto;
}

#header {
    background-color: red;
}
#main {
    background-color: blue;
}
#footer {
    background-color: green;
}

それぞれ変えるのが面倒なので、containerを使い幅の長さや中央揃えにしている。横幅の指定は「％」でも指定できる。

##２カラムのレイアウト
###可変幅

<div id="container">

<div id="header">header</div>
<div id="main">main</div>
     <div id="left">left</div>
     <div id="right">right</div>
<div id="footer">footer</div>

</div>


#container {
     width: 500px;
     margin: 0 auto;
}

#header {
    background-color: red;
}
#main {
    background-color: blue;
}
#footer {
    background-color: green;
}
#left {
    background-color: pink;
    float: left;
    width: 30%;
}
#right {
    background-color: purple;
    float: right;
    width: 70%
}

floatを使ったら必ずwidthを指定しないといけない


#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: 30%;
}
#right {
    background-color: purple;
    float: right;
    width: 60%
}

left rightでfloatに寄せたものに続く次の要素を回りこませないようにするために、leftとrightに入っている領域(main)に、「overflow:hidden;」と記述する。

#left {
    background-color: pink;
    float: left;
    width: 200px;
}
#right {
    background-color: purple;
    margin-left: 200px;
}

leftを200pxで固定したい場合、rightをfloatではなく、「margin-left: 200px;」と記述することで、left側の大きさは変わらずright側は可変になる。

###固定幅

#left {
    background-color: pink;
    float: left;
    width: 200px;
}
#right {
    background-color: purple;
    float: left;
    width: 200px;
    margin-left: 100px;
}

leftを左に、rightも左に、空いたところにmarginをとっている。

#left {
    background-color: pink;
    float: left;
    width: 200px;
}
#right {
    background-color: purple;
    margin-left: 300px;
}

「margin left: 300px;」で指定することで、floatを使わなくても実現できる。

##３カラムのレイアウト
###可変幅

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

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

#rightは「float: right;」と記述しても問題ない。

####rightとleftの幅を固定して、centerを余った幅で可変にしたいという場合

<div id="container">
   <div id="header">header</div>
   <div id="left">left</div>
   <div id="right">right</div>
   <div id="center">center</div>
</div>
<div id="footer">footer</div>

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

floatで振り分ける要素はそうじゃない要素より先に持ってくれば良い

###固定幅

<div id="container">
   <div id="header">header</div>
   <div id="left">left</div>
   <div id="right">right</div>
   <div id="center">center</div>
</div>
<div id="footer">footer</div>

#left {
    background-color: pink;
    float: left;
    width: 100px;
}
#center {
    background-color: orange;
    float: left;
    width: 300px;
}
#right {
    background-color: purple;
    float: left;
    width: 100px;
}

###centerの左右に10pxずつ余白を入れる

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

centerの幅から10pxずつ引くことを忘れない。

###上下に余白を入れる場合

#header {
    background-color: red;
    margin-bottom: 20px;
}
#main {
    background-color: blue;
    overflow: hidden;
    margin-top: 50px;
}

「top」「bottom」に「margin」を指定する場合、上下同時に「margin」を指定しまうと、打ち消し合って大きい値の余白になる。

##文書の構造

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>レイアウトの練習</title>
   <link rel="stylesheet" type="text/css" href=http://yui.yahooapis.com/3.6.0/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>

###背景の設定

html {
  background-image: url('grey.png');
  height: 100%
}
body {
  height: 100%;
}
body > #container {
  height: auto;
}
#container {
 min-height: 100%;
 height: 100%;
 width: 600px;
 margin: 0 auto;
 background-color: #fff;
 box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

webページ内に配置したボックスなどのブロック要素で要素の長さを画面にいっぱいの高さに伸ばすやり方。「html」タグと「body」タグには「height:100%;」を付けて、高さ100%を適用させる要素に対しては「height:100%;」とあわせて「min-height:100%;」の２つを付与する。そして、「body」タグの中に入るブロック要素全体の高さが「body」タグより大きくなった場合には「height:auto;」に切り替える指定も追加する。これらの記述を付与することで高さ100％のブロック要素を形成することが可能になる。

###ヘッダーとフッター

<div id="container">
 <div id="header"><h1><img src="dummy.png" height="100" width="600"></h1></div>

<div id="footer">Copyright 2014,dotinstall.com</div>

#footer {
   font-size: 12px;
   color: #ccc;
   text-align: center;
   border-top: 1px solid #ccc;
   padding: 10px 0 20px;
}

ヘッダーにはよく「h1」要素を付ける

###メニューを作成

<div id="menu">
<ul>
<li><a href="">ホーム</a></li>
<li><a href="">製品情報</a></li>
<li><a href="">企業情報</a></li>
</ul>
</div>

#menu {
  margin-bottom: 15px;
  overflow: hidden;
}
#menu {
  float: left;
  width: 100px;
  font-size: 13px;
  text-align: center;
  padding: 4px;
  background: #ccc;
  margin-right: 10px;
  border-radius: 4ps;
  text-shadow: 0 1px 0 #fff;
}
#menu ul>li: hover {
  background: #ddd;
}
#menu ul>li>a {
  text-decoration: none;
  display: block;
}

マウスオーバーした際に色を多少変える
クリックできる範囲を要素全体にする

###見出しと本文

<div id="contents">
 <h2>見出し</h2>
 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
 <h2>見出し</h2>
 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
</div>
<div id="sidebar">
 <h3>見出し</h3>
 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
 <h3>見出し</h3>
 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
</div>

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

「margin-bottom: 14px;」文字のつまりを解消

###画像付きリストの作成

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

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

「ul.products>li:last-child 」とは、指定した最後の要素に対して「border:none;」を行う

###キャプション付き画像を作る

<div class="sample">
  <img src="sample.png" width="60" height="60">
  <p>補足。補足。</p>
</div>

div.sample {
  float:right;
  width: 66px;
  margin-left:10px;
}
div.sample>p {
  font-size: 10px;
}
div.sample>img {
  padding: 2px;
  background: #fff;
  border: 1px solid #ccc;
}

画像に枠を付ける場合、余白の2pxと両側のボーダーの1pxの合計6px分を「width」に足すことを忘れない。

###バッジを付ける

<div class="sample">
  <span class="badge">new!</span>
  <img src="sample.png" width="60" height="60">
  <p>補足。補足。</p>
</div>

div.sample {
  float:right;
  width: 60px;
  margin-left: 10px;
  position: relative;
}
.badge {
  background: red;
  color: white;
  font-size: 10px;
  padding: 2px 4px 3px;
  position: absolute;
  top: -5px;
  right: -5px;
}

「new!」の親要素に対して、「position: relative;」を指定、「new!」自体には「position: absolute;」を指定する。

###アイコン付きリストの作成

<ul class="submenu">
  <li><a href="">menu1</a></li>
  <li><a href="">menu2</a></li>
  <li><a href="">menu3</a></li>
</ul>

ul.submenu>li {
  background: url('dotinstall.png')no-repeat;
  padding:0 0 5px 20px;
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up