くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー　web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

［CSS］floatの練習（3月10日）

CSS

３月10日　午前

  • レイアウトの種類
  • floatの練習

 

レイアウトの種類

  • 固定レイアウト
  • 可変レイアウト
    　：情報の優先順位が付けられないと難しい

　　・リキッドレイアウト

　　・フレキシブルレイアウト　例：ケンコーコム - 健康メガショップ、Amazon.co.jp

　　・可変グリッドレイアウト　例： タイ国政府観光庁

  • エラスティックレイアウト
  • レスポンシブ・ウェブデザイン
    　：情報系に向き、ECサイトに不向き
  • カラムレイアウト
  • フリーレイアウト

 

floatの練習（テキストP92〜95、P116〜129）

 float　＝「浮き上がる」、浮動

・コンテンツを横並びにする時に使われる技法

 

●inline:block を使うやり方は良くない（ネットにはよく書いてある）
　　理由： inline:block は、baseline上にコンテンツをのせる
　　　　　　　　↓
　　優先順位の高い情報を右に配置することが不可能（floatしかできない）

　

●.htmlファイルは、優先順位の高い情報から記述する。
そして上から読み込まれる

 

float解除について

①後続のコンテンツ（今回は#footer）にclear: both;を設定する

問題→　コンテンツ同士間にマージンを設定したい場合、後続のコンテンツにmargin-topを付けられない。#footerはfloatを解除しているため。

 

②floatをつけたコンテンツを包む親要素（今回は#wrapper）にoverflow: hidden;を設定

 

３カラムの練習

記述の順番
　1. #header
　2. #content
　3. #sidebar
　4. #ad
　5. #footer

 

①完成図

f:id:pleasure10501:20150310212339p:plain

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>３カラムの練習①</title>
<style>
/* reset */
html, body, div {
  margin: 0;
  padding: 0;
}

body{
  margin:0 auto;
  background: #CCC;
}
#container{
  width: 780px;
  background: #FFF;
  padding: 10px;
}
#header {
  height: 100px;
  background: #c6e2ff;
  margin-bottom: 10px;
}
#wrapper1 {
  overflow: hidden;
  margin-bottom: 10px;
}
#wrapper2{
  overflow: hidden;
  float: left;
 width: 670px;
}
#content{
  float: right;
  width: 500px;
  height: 300px;
  background: #FFC0CB;
}
#sidebar{
  float: left;
  width: 160px;
  height: 300px;
  background: #FFF9B8;
}
#ad{
  float: right;
  width: 100px;
  height: 200px;
  background: #794044;
}
#footer{
  height: 80px;
  background: #007F7F;
}
</style>
</head>
<body>
<div id="container">
<div id="header">#header</div>
<div id="wrapper1">
<div id="wrapper2">
<div id="content">#content</div>
<div id="sidebar">#sidebar</div>
</div><!-- /#wrapper2 -->
<div id="ad">#ad</div>
</div><!-- /#wrapper1 -->
<div id="footer">#footer </div>
</div><!-- /#container -->
</body>
</html>

 

②　完成図

f:id:pleasure10501:20150310222502p:plain

floatは#contentと#sidebarのみにしか使っていません。
#contentと#sidebarを包む#wrapper2は、marginで位置を調整しています。
ただし、#adの文字がどこかに消えてしまいました・・・

 

＜htmlファイルの記述＞

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>３カラムの練習①</title>
<style>
/* reset */
html, body, div {
margin: 0;
padding: 0;
}

body {
background: #CCC;
}
#container {
width: 780px;
background: #FFF;
margin: 10px auto;
padding: 10px;
}
#header {
height: 100px;
background: #c6e2ff;
margin-bottom: 10px;
}
#wrapper1{
overflow: hidden;
margin-bottom: 10px;
}
#wrapper2{
width: 670px;
margin-left: 110px;
}
#content {
float: left;
width: 500px;
height: 300px;
background: #FFC0CB;
}
#sidebar {
float: right;
width: 160px;
height: 300px;
background: #FFF9B8;
}
#ad {
width: 100px;
height: 300px;
color: #FFF;
background: #666;
}
#footer {
  height: 80px;
  background: #007F7F;
}
</style>
</head>
<body>
<div id="container">
<div id="header">1. #header</div>
<div id="wrapper1">
<div id="wrapper2">
<div id="content">2. #content</div>
<div id="sidebar">3. #sidebar</div>
</div><!-- /#wrapper2 -->
<div id="ad">4. #ad</div>
</div><!-- /#wrapper1 -->
<div id="footer">5. #footer </div>
</div><!-- /#container -->
</body>
</html>