読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

floatと2カラムレイアウト

f:id:yachin29:20160930111042j:plain


divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。
f:id:yachin29:20160211021709j:plain


しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。
f:id:yachin29:20160211021723j:plain


floatを使う事でHTML内の文章構造を変える事なく比較的自由なレイアウトが作れるようになります。
なのでfloatの特性をしっかり理解し、文章構造を変える事なく色々なレイアウトを作ってみましょう。

floatの注意点

floatは非常に便利な反面、しっかりと特性を理解しないとレイアウトの崩れの原因にもなります。
floatを指定した要素は浮き上がるので、その下の要素に影響が出てしまいます。なので、それを予防する為の方法もしっかりと覚えましょう。また、floatしたもの同士はマージンの相殺が起きず加算されてしまうので、そこも注意が必要です。

floatを使う際に注意するべき2点
  • 下の要素に影響が出ないように回り込みを解除する(overflow、もしくはclear)
  • floatしたもの同士はマージンの相殺が起きず加算されてしまう

2カラムレイアウト

2カラムレイアウトはwebサイトの基本レイアウトです。Floatの特性をしっかりと理解し、必ず作成出来るようになりましょう。


背景画像はPhotoshopを使い、自身で作成
cssはエンベットせずに必ずcssファイルに記述
cssファイルはcssフォルダーに、画像はimgフォルダーに入れること

f:id:yachin29:20160930210534p:plain

作成例

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>floatでのレイアウト</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<div id="header"></div>

<div id="wrapper">
<div id="main"></div>
<div id="sub"></div>
<div id="sub2"></div>
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
</div>

<div id="footer"></div>
</div>
</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */

html, body, div {
margin:0;
padding:0;
}
body {
background:#333;
}
#container {
width:780px;
margin: 0 auto;
background:#FFFFFF;
padding:10px;
}
#header {
width:780px;
height:300px;
background:#336699;
margin-bottom:10px;
}
#wrapper {
overflow:hidden;
margin-bottom:10px;
}
#wrapper > div {
float:left;
}
#main {
width:590px;
height:400px;
background:#6C6;
margin-right:10px;
}
#sub {
width:180px;
height:195px;
background:#666;
margin-bottom:10px;
}
#sub2 {
width:180px;
height:195px;
background: #036;
}
.box {
width:148px;
height:195px;
background:#FF33CC;
margin-top:10px;
}
.one, .two, .three, .four {
margin-right:10px;
}
#footer {
width:780px;
height:100px;
background:#F90;
}