rastafactory blogsites » CSS tips FuelPHPのTemplateで使えそうなもの

おはようございます。実家の犬に会いたくて禁断症状が出てきたゆうきんです。

チュートリアルでCSSの説明をする気はないと言ったな？…あれは嘘だ。

ちょくちょく自分でも忘れるのでメモがてら、私がTemplateコントローラで使っているCSSを書きます。

まず。これが私のTemplateです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	{Asset::css('template.css')}
	<title>{$title}</title>
</head>

<body>
	<!-- ヘッダ -->
	<div id="header">
		{$header}
	</div>

	<!-- コンテンツ 上から「メニュー」「メイン」-->
	<div id="content">
		<div id="menu">{$menu}</div>
		<div id="main">{$main}</div>
	</div>

	<!-- フッタ -->
	<div id="footer">
		{$footer}
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

{Asset::css('template.css')}

<title>{$title}</title>

</head>

<body>

{$header}

</div>

</div>

{$footer}

</div>

</body>

</html>

これを使うことを前提に書きます。

div を左右に並べる

#menu と #main を左右に並べてみます。

#menu {
	float: left;
}
#main {
	float: left;
}

#menu {

float: left;

}

#main {

float: left;

}

float: left とは「要素を左に回りこませる」という意味です。

これで、左右に並べて表示できます。

しかし、画面を小さくしすぎると、配置が変わってしまうので注意です。

div を常に画面中央に表示

#content {
	margin:0px auto;
	width: 1200px;
}

#content {

margin:0px auto;

width: 1200px;

}

これで、ウィンドウのサイズを変えても #content が画面の中心に表示されるようになります。

さらに、widthを指定しているので、ウィンドウサイズを小さくしても #menu と #main の配置が変わることがなくなります。

とりあえず、こんなところでしょうか。

本当はもっとごちゃごちゃ書いてあるんですか。装飾なので気にしないで下さい。

この記事はもしかしたら、随時更新していくかも知れないです。

では、おやすみなさい。