「表とリスト」(2007/09/17 (月) 19:07:55) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
HPの世界では、よく「一覧表」形式になっているデータを見掛けます。また、「箇条書き」のようにデータを列挙する形式のデータも多用されます。
Wikiでもこれらを表現できる書式が用意されています。それぞれ御紹介しましょう。
***一覧表(テーブル)
HTMLを習得した人でも、HTMLでテーブルを組むのは、なかなか手間がかかるものですが、Wikiでは、とても簡単に記述することが出来ます。
書式は非常に単純かつ視認性の高いもので、以下のようになります。
&html(<div style="color:white;background:#a66;baddng:3px;">｜項目１｜項目１のデータ｜<br>｜項目２｜項目２のデータ｜</div>)
と記述するだけで、以下のような一覧表が表示されます。
| 項目１ | 項目１のデータ |
| 項目２ | 項目２のデータ |
また、各セルのスタイルを設定するオプション指定も出来ます。詳しくは&color(blue){テキスト整形のルール}に解説されていますが、ここでは文字色と背景色を変更してみます。
|BGCOLOR(#333333):COLOR(white):項目１|COLOR(blue):項目１のデータ|
|BGCOLOR(#333333):COLOR(white):項目２|COLOR(blue):項目２のデータ|
コツとしては、セルの区切りを表す「&color(blue){|}(セパレータ)」のすぐ後に、オプションの「COLOR(blue):」などをくっつけて記述することでしょうか。スペースなどが入ってしまうと、不具合がでるようです。
----
***リスト
HTMLでは3種類のリストが用意されています。Wikiでもこれら全てを表現できるのですが、ここではよく用いられる「&color(blue){箇条書きリスト}」と「&color(blue){連番つきリスト}」の2種類を表現してみましょう。
[[新規ページをメニューに追加]]でも少々触れていますが、箇条書きリストの書式は以下の通りです。
&html(<div style="color:white;background:#a66;padding:3px;">-リスト項目１<br>-リスト項目２<br>-リスト項目３</div>)
と記述すると、以下のような表示になります。
-リスト項目１
-リスト項目２
-リスト項目３
連番型リストは、上記の「−(マイナス)」を「+(プラス)」にするだけで、
&html(<div style="color:white;background:#a66;padding:3px;">+リスト項目１<br>+リスト項目２<br>+リスト項目３</div>)
と記述すれば、
+リスト項目１
+リスト項目２
+リスト項目３
のように，リスト項目に連番を振ったリストが構成されます。
----
HPの世界では、よく「一覧表」形式になっているデータを見掛けます。また、「箇条書き」のようにデータを列挙する形式のデータも多用されます。
Wikiでもこれらを表現できる書式が用意されています。それぞれ御紹介しましょう。
***一覧表(テーブル)
HTMLを習得した人でも、HTMLでテーブルを組むのは、なかなか手間がかかるものですが、Wikiでは、とても簡単に記述することが出来ます。
書式は非常に単純かつ視認性の高いもので、以下のようになります。
&html(<div style="color:white;background:#a66;baddng:3px;">｜項目１｜項目１のデータ｜<br>｜項目２｜項目２のデータ｜</div>)
と記述するだけで、以下のような一覧表が表示されます。
| 項目１ | 項目１のデータ |
| 項目２ | 項目２のデータ |
また、各セルのスタイルを設定するオプション指定も出来ます。詳しくは&color(blue){テキスト整形のルール}に解説されていますが、ここでは文字色と背景色を変更してみます。
|BGCOLOR(#333333):COLOR(white):項目１|COLOR(blue):項目１のデータ|
|BGCOLOR(#333333):COLOR(white):項目２|COLOR(blue):項目２のデータ|
#image(http://www39.atwiki.jp/ibaraki-it/pub/sum-table.png,center,title=拡大画像,http://www39.atwiki.jp/ibaraki-it/pub/table.png)
コツとしては、セルの区切りを表す「&color(blue){|}(セパレータ)」のすぐ後に、オプションの「COLOR(blue):」などをくっつけて記述することでしょうか。スペースなどが入ってしまうと、不具合がでるようです。
----
***リスト
HTMLでは3種類のリストが用意されています。Wikiでもこれら全てを表現できるのですが、ここではよく用いられる「&color(blue){箇条書きリスト}」と「&color(blue){連番つきリスト}」の2種類を表現してみましょう。
[[新規ページをメニューに追加]]でも少々触れていますが、箇条書きリストの書式は以下の通りです。
&html(<div style="color:white;background:#a66;padding:3px;">-リスト項目１<br>-リスト項目２<br>-リスト項目３</div>)
と記述すると、以下のような表示になります。
-リスト項目１
-リスト項目２
-リスト項目３
連番型リストは、上記の「−(マイナス)」を「+(プラス)」にするだけで、
&html(<div style="color:white;background:#a66;padding:3px;">+リスト項目１<br>+リスト項目２<br>+リスト項目３</div>)
と記述すれば、
+リスト項目１
+リスト項目２
+リスト項目３
のように，リスト項目に連番を振ったリストが構成されます。
----
表示オプション
横に並べて表示：
変化行の前後のみ表示：
