CSSの階層分け

8月の日にちが過ぎ、立秋が過ぎつつ、猛暑日が続きますね…

体調には気を付けて、水分補給もまめに取ってくださいね。

ついでに、塩分補給も忘れないようにね！

さてと、話題に戻して…

CSSの階層分け

CSSの階層分けをしている人がいますね。

他業者が作ったCSSの階層分けの見出し方のデザインの方法とかも色々あって醍醐味があっていいですね。

こちらはごくシンプルでいつも階層分けをしてコーディングをしています。

皆さんもまねてご参考までに。

/**************************************************
 * Level 1
 **************************************************/

/* Level 2
 **************************************************/

/* Level 3
 =================================================*/

/* Level 4
 -------------------------------------------------*/

/* ----- Level 5 ----- */

こちらではこんな感じで階層を分けてコーディングをしています。

使い方はこういう感じで分けてます。

/**************************************************
 * ページ名
 **************************************************/

/* ページの中の階層別（例：見出しタイトル）
 **************************************************/

/* ページの中の中レベル階層（例：コンテンツの中のデザインやレイアウト）
 =================================================*/

/* ページの中の小レベル階層（例：デザインの中によく使われるレイアウト）
 -------------------------------------------------*/

/* ----- デザインの中によく使われる協調部分 ----- */

これをわかりやすくするとこうなります。

/**************************************************
 * Company
 **************************************************/

/* 見出しタイトル
 **************************************************/
.title{
	border-bottom:5px solid #00bfff;
	margin:0 auto 30px;
	padding: 0 10px 5px;
}

.sub_title{
	border-left:5px solid #1e90ff;
	margin:0 auto 20px;
	padding: 10px;
}

/* コンテンツデザイン
 =================================================*/
.content{
	display:block;
	margin:0 auto 50px;
	padding:0;
}

.txt{
	font-size:16px;
	line-height:1.75em;
	margin:0 auto 10px;
	padding:0;
}

/* ページの中の小レベル階層（例：デザインの中によく使われるレイアウト）
 -------------------------------------------------*/
.right{
	float:right;
	margin:0 0 30px 30px;
	padding:0;
}

.left{
	float:left;
	margin:0 30px 30px 0;
	padding:0;
}

.list{
	margin:0 auto 30px;
	padding:0;
}

.list li{
	list-style-type:desc;
}

/* ----- Attention ----- */
.attention{
	color:#dc143c;
	font-weight:700;
}

というようなコーディングをしています。

皆さんはどのように分けているのでしょうか。

面白い階層分けのデザインがあったら教えてね。

ではまた！