CSS基本チュートリアル

CSSボックスモデル

CSS3基本教程

CSSリファレンスマニュアル

CSS @ルール（RULES）

CSS 実例全集 CSS カウンタ

CSS レイアウト（ウェブレイアウト）

CSSレイアウトデザインが簡単です。私たちのウェブページ、ホームページ、お問い合わせ、についてなどにCSSレイアウトを使用できます。

ウェブページのレイアウトをデザインする方法は3種類あります：

HTML Div+CSSレイアウト：広く使用されています。
HTMLテーブル：速度が遅く、人気が低い。
HTMLフレームセット：廃止されています。

CSSレイアウトはヘッダー、フッター、左フレーム、右フレーム、本文部分を含むことができます。以下はシンプルなCSSレイアウトの例です。

CSSレイアウト例

例

<!DOCTYPE　html>　　
<html>　　
<head>　　
<style>　　
.header{margin:-8px　-8px　0px;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}　　
.container{width:100％}　　
.left{width:15％;float:left;}　　
.body{width:65％;float:left;background-color:pink;padding:5px;}　　
.right{width:15％;float:left;}　　
.footer{margin:-8px;clear:both;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}　　
</style>　　
</head>　　
<body>　　
<div　class="header"><h2>基本的なチュートリアル　oldtoolbag.com</h2></div>　　
　　
<div　class="container">　　
<div　class="left">　　
<p>左サイドバー</p>　　
</div>　　
<div　class="body">　　
<h1>本文</h1>　　
<p>ページ内容はここにあります</p><p>ページ内容はここにあります</p><p>ページ内容はここにあります</p>　　
<p>ページ内容はここにあります</p><p>ページ内容はここにあります</p><p>ページ内容はここにあります</p>　　
<p>ページ内容はここにあります</p><p>ページ内容はここにあります</p><p>ページ内容はここにあります</p>　　
<p>ページ内容はここにあります</p><p>ページ内容はここにあります</p><p>ページ内容はここにあります</p>　　
<p>ページ内容はここにあります</p>　　
</div>　　
<div　class="right">　　
<p>右サイドバー</p>　　
</div>　　
</div>　　
　　
<div　class="footer">　　
<p>フッター</p>　　
</div>　
</body>　　
</html>

テストを試してみる‹/›

出力効果:

基本的なチュートリアル oldtoolbag.com

左サイドバー

本文

ページ内容はここにあります

右サイドバー

フッター

CSS 実例全集 CSS カウンタ