※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

基本編集とCSSとの連携

● 見出しと背景画像

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