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

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

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

[CSS]floatの練習(3月10日)

3月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;を設定

 

3カラムの練習

記述の順番
 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>3カラムの練習①</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>3カラムの練習①</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>

 

広告を非表示にする