CSSの階層分け
2023年8月15日
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;
}
というようなコーディングをしています。
皆さんはどのように分けているのでしょうか。
面白い階層分けのデザインがあったら教えてね。
ではまた！
- Leonardo
- 今日は愛車の点検！ 2024年12月22日
- マーケティングについて考えること 2024年12月21日
- 冬になると手がカサカサになる… 2024年12月20日
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日