基本編集とCSSとの連携 - SQLの窓

基本編集とCSSとの連携

● 見出しと背景画像

行頭に *を1～5個入力して文字列を続けると、それぞれH2～H6 になる為、それぞれに対して
CSS で設定する事によってこのセクション最後のような見出しになります( H5、H6 は未設定 )
↓http://homepage2.nifty.com/lightbox/h5.png

imageプラグインエラー : 画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

上記画像は、gimp 等の画像加工ソフトで簡単に作成できます。
( ポイントは、グラデーションです )

さらに、メニュー部分と本文とで変更する為にそれぞれ
#menubar_inner、#wikibody という id で設定します

#menubar_inner h3 {
	line-height:26px;
	border-style:solid;
	border-width:1px;
	border-color:#9192A3;
	height: 26px;
	width: 155px;
	padding-left:5px;
	background:url(http://homepage2.nifty.com/lightbox/h5.png) repeat-x 0 0;
}
#wikibody h3 {
	line-height:32px;
	border-style:solid;
	border-width:1px;
	border-color:#9192A3;
	height: 32px;
	padding-left:15px;
	background:url(http://homepage2.nifty.com/lightbox/h5.png) repeat-x 0 0;
 

*A
**A
***A
****A
*****A

<H2>A</H2>
<H3>A</H3>
<H4>A</H4>
<H5>A</H5>
<H6>A</H6>

A

A

A

A

A

● TABLE の均等割り

|A|B|C| でテーブルを作成できますが、細かい設定は CSS で行います

.table_div table {
border-color:#e0e0e0;
}
.table_div td {
font-weight: bold;
width: 350px;
border-color:#f0f0f0;
 

#divclass(table_div){
|A|B|C|A|B|C|A|B|C|
}

A

B

C

A

B

C

A

B

C

#divclass(table_div){
|A|B|C|
}

A

B

C

#divclass(table_div){
|ああああ|んんんん|
}

ああああ

んんんん

#divclass(table_div){
|lightbox|
}

lightbox

---