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

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

floatプロパティを使って回り込みや段組みレイアウトを実現する。

<スポンサーリンク>

floatプロパティ

floatプロパティは要素の回り込み方法を指定するもの。
ブロック要素はCSSで何も指定しない場合は、縦方向に順番に配置されていく。
しかし、floatプロパティを使って、leftやrightと指定することで、それぞれの要素を左右へ移動させることができる。
たとえば、以下のようにdivでくくったboxがあるとする。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>floatによるレイアウト</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="./js/jquery.1.10.2.min.js"></script>
<script type="text/javascript">
//no script
</script>
</head>
<body>
<div id="container">

<div id="boxA">
<p>#boxA</p>
</div>

<div id="boxB">
<p>#boxB</p>
</div>

</div>
</body>
</html>

これは、普通は縦に並んでいくのだけれど、floatを使えばこのboxを横に並べることができる。
CSSはこんな感じ。

#container {
	width: 500px;
	background-color: black;
}
#boxA {
	width: 200px;
	height: 100px;
	background-color:yellow;
	float: left;
}
#boxB {
	width: 200px;
	height: 100px;
	background-color: blue;
	float: left;
}

こうするとbox要素を横に並べることができる。
このfloatは本とかでよく見る、写真の周りにに本文があるみたいな、そういう回り込みにも使える。
一旦floatを指定すると、後に続く要素はそれを解除しない限り開いているスペースに流れてしまうことに注意。
テキストなどを回りこませたくないときは、
overflow:hidden
を指定する。

floatを使って段組レイアウトを作ってみる。

こんな感じで、ヘッダー、サイドバー、本文、フッターを配置してみる。

HTMLはこんな感じ。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>floatによるレイアウト</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="./js/jquery.1.10.2.min.js"></script>
<script type="text/javascript">
//no script
</script>
</head>
<body>
<div id="container">
	<div id="header"<p>ヘッダーだよ〜!!</p></div>
	<div id="contents"><p>コンテンツの部分だよ〜!</p></div>
	<div id="sidenavi"><p>サイドナビの部分だよ〜!</p></div>
	<div id="footer"><p>フッターでござる!</p></div>
</div>
</body>
</html>

CSSはこんな感じ

#container {
	width: 750px;
	margin: 0 auto;
	background-color: red;
}
#header {
	width: 750px;
	height: 100px;
	background-color: yellow;
}
#contents {
	width: 425px;
	height: 500px;
	margin: 20px 25px;
	float:left;
}
#sidenavi {
	width: 250px;
	height:500px;
	margin: 20px 25px 20px 0;
	background-color: green;
	float: left;
}
#footer {
	width: 750px;
	height: 100px;
	background-color: blue;
	clear: both;
}

読んだ本

すべての人に知っておいてほしいスタイルシートデザインの基本原則

すべての人に知っておいてほしいスタイルシートデザインの基本原則

感謝のプログラミング

今回で感謝のプログラミングは【638時間目】
10000時間まで、あと【9362時間】