「基本編集とCSSとの連携」の編集履歴(バックアップ)一覧はこちら
「基本編集とCSSとの連携」(2008/02/08 (金) 16:33:16) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
#setmenu(スタートアップメニュー)
*&this_page()
***見出しと背景画像
行頭に *を1~5個入力して文字列を続けると、それぞれH2~H6 になる為、それぞれに対して
CSS で設定する事によってこのセクション最後のような見出しになります( H5、H6 は未設定 )
↓http://homepage2.nifty.com/lightbox/h5.png
#image(http://homepage2.nifty.com/lightbox/h5.png)
上記画像は、gimp 等の画像加工ソフトで簡単に作成できます。
( ポイントは、グラデーションです )
さらに、メニュー部分と本文とで変更する為にそれぞれ
#menubar_inner、#wikibody という id で設定します
#highlight(css) {{
#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 で行います
#highlight(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|
}
#divclass(table_div){
|A|B|C|A|B|C|A|B|C|
}
#divclass(table_div){
|A|B|C|
}
#divclass(table_div){
|A|B|C|
}
#divclass(table_div){
|ああああ|んんんん|
}
#divclass(table_div){
|ああああ|んんんん|
}
#divclass(table_div){
|lightbox|
}
#divclass(table_div){
|lightbox|
}
----
#setmenu(スタートアップメニュー)
*&this_page()
***● 見出しと背景画像
行頭に *を1~5個入力して文字列を続けると、それぞれH2~H6 になる為、それぞれに対して
CSS で設定する事によってこのセクション最後のような見出しになります( H5、H6 は未設定 )
↓http://homepage2.nifty.com/lightbox/h5.png
#image(http://homepage2.nifty.com/lightbox/h5.png)
上記画像は、gimp 等の画像加工ソフトで簡単に作成できます。
( ポイントは、グラデーションです )
さらに、メニュー部分と本文とで変更する為にそれぞれ
#menubar_inner、#wikibody という id で設定します
#highlight(css) {{
#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 で行います
#highlight(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|
}
#divclass(table_div){
|A|B|C|A|B|C|A|B|C|
}
#divclass(table_div){
|A|B|C|
}
#divclass(table_div){
|A|B|C|
}
#divclass(table_div){
|ああああ|んんんん|
}
#divclass(table_div){
|ああああ|んんんん|
}
#divclass(table_div){
|lightbox|
}
#divclass(table_div){
|lightbox|
}
----
表示オプション
横に並べて表示:
変化行の前後のみ表示: