Title: 行ごとにコメント、タスク、予定を登録できるテーブルを作成するには

TeamPage では、記事全体だけでなく、段落にもコメント、タスク、予定などを登録できます。しかし、テーブル(表)はブロック要素と呼ばれる「塊」であるため、テーブル全体がひとつの段落になり、テーブルの行ごとのコメント等はできません。

下図は普通のテーブルです。テーブル全体へのコメントとタスクが、テーブルの下にぶら下がって表示されています。

普通のテーブル

残念ながら、ひとつの「塊」であるテーブルを分割して各行を「塊」にすることはできません。

箇条書きリストでテーブル行を作る



そこで、発想を変えることにします。HTML には <ul>...</ul> タグで表現される「箇条書きリスト」があります。これもブロック要素(リスト全体が「塊」)です。この箇条書きリストのデザインをスタイルシートで変更し、テーブルの行のように見た目を変更することにします。

ここでは 1 行 4 列のテーブル(のようなもの)を作成する例で解説します。

箇条書きリストの作成



記事の作成または編集フォームを表示して、リッチテキスト エディタのツールバーの [箇条書き] を使って箇条書きリストを作成します。

箇条書きリストの下に続けて箇条書きリストを作成する場合は、間に空行を挿入し、箇条書きリスト同士が合体しないようにしてください。空行は投稿時に自動削除されるので心配ありません。

箇条書きリストを作成

HTML ソースの編集



このまま投稿してスタイルシートで見た目を変更することもできますが、あらゆる箇条書きリストがテーブル行のように表示されてしまう(箇条書きリストが使えなくなる)ので、ここで作成する箇条書きリストに特別な名前(クラス)を付け、その特別な名前を持つものだけにテーブル化のデザインが適用されるようにします。

ツールバーの [歯車] > [表示] > [ソースコード] を選択します。



ソースコードのダイアログが表示されます。<ul> タグに class="table4cols" を挿入して <ul class="table4cols"> としてください。

メモ: ここでは「4列のテーブル」という意味で「table4cols」というクラス名を付けますが、必要に応じて適当にクラス名を変更してください。



注意: 投稿済みの段落には、段落の ID が traction_rs="[[ID]]" という形で挿入されています。これは削除しないでください。削除すると、投稿時に段落の ID が変わり、登録済みの段落コメントや段落タスクなどが表示されなくなってしまいます。



ソースコードの編集

編集を終えたら、右下の [OK] をクリックしてダイアログを閉じます。

記事の投稿/編集フォームに戻りますが、class="table4cos" は見えない設定なので、画面に変化はありません。

table4colsクラスは見えない

左下の [送信] ボタンをクリックして記事を投稿します。

箇条書きリストのデザインを変更する



[セットアップ] > [デザイン] でスキンのカスタマイズ ダイアログを表示し、ドロップダウン メニューで変更したいスキンを選択し、[カスタム] タブの [上級者向けの上書き設定] 欄にスタイルシート (CSS) を記入します。

CSS3でリストをテーブル行にする

記入する内容は次のとおりです。

ul.table4cols {
  display: table;
  width: 100%;
  border: 1px #ccc solid;
  border-collapse: collapse;
  margin: 0 !important;
}

ul.table4cols li {
  display: table-cell;
  padding: 4px;
  border: 1px #ccc solid;
}

ul.table4cols li:nth-child(1) {
  font-weight: bold;
  width: 30%;
  background-color: #f8f8f8;
}

ul.table4cols li:nth-child(2), ul.table4cols li:nth-child(3), ul.table4cols li:nth-child(4) {
  width: 20%;
}


[適用] ボタンをクリックしてスタイルシートを適用すると、箇条書きリストがテーブル行のように表示されます。

テーブル行のように表示された箇条書きリスト

これでテーブル行(のようなもの)ごとにコメント、タスク、予定などを登録できます。

行ごとにコメントとタスクを登録

関連記事



段落にコメントする

段落にタスクを登録する

段落に予定を登録する

FAQ1784: スタイルシートでスキンのデザインを変更するには

FAQ1764: Proteus スキンのカスタマイズ

Forum1159



Attachments:
normal_table.png
form1.png
form2.png
form3.png
form4.png
add_css3.png
got_tables.png
paragraph_comment_task.png
関連記事
Article: FAQ2632 (permalink)
Categories: :FAQ:CSS, :FAQ:デザイン, :FAQ:テーブル, :DocJp:FAQ, :FAQ:スキン:Proteus, :FAQ:表示
Date: 2016/04/06; 4時34分07秒 JST

Author Name: TeamPage サポート
Author ID: jpbo