脚本、台本用デザインテンプレートです。

 

デザイン

divのclassに"play-table"を指定してください。

<div class="play-table">
  <p class="shingo"><b>慎吾</b><br>おはよう</p>
  <p class="togaki"><i>慎吾、右からフレームイン</i></p>
  <p class="asuka"><b>明日香</b><br>おはよう<br>昨日の風、すごかったね</p>
  <p class="shingo"><b>慎吾</b><br>ああ、布団が飛んできたよ</p>
  <p class="togaki"><i><b></b>ト書きには<b></b>と書いておくとマージン線がでる</i></p>
  <p class="togaki"><b></b><i>ト書きの<i>と<b>の位置は、外でも入れ子でも可能</i></p>
</div>

慎吾
おはよう

慎吾、右からフレームイン

明日香
おはよう
昨日の風、すごかったね

慎吾
ああ、布団が飛んできたよ


ト書きには<b></b>と書いておくとマージン線がでる


ト書きの<i>と<b>の位置は、外でも入れ子でも可能


classに"icon"を追加するとアイコン表示用のマージンに切り替わります。アイコン画像はスタイルシートを追記してください。

<style>
.play-table.icon .shingo b {
  background-image: url(shingo.png);
}
.play-table.icon .asuka b {
  background-image: url(asuka.png);
}
</style>
<div class="play-table icon">
  <p class="shingo"><b>慎吾</b><br>おはよう</p>
  <p class="togaki"><b></b><br><i>慎吾、右からフレームイン</i></p>
  <p class="asuka"><b>明日香</b><br>おはよう<br>昨日の風、すごかったね</p>
  <p class="shingo"><b>慎吾</b><br>ああ、布団が飛んできたよ</p>
</div>

慎吾
おはよう


慎吾、右からフレームイン

明日香
おはよう昨日の風、すごかったね

慎吾
ああ、布団が飛んできたよ


コロン区切りにする場合は、spanタグで囲ってください。
ex.) <span>: </span>

<style>
.play-table.icon .shingo b {
  background-image: url(shingo.png);
}
.play-table.icon .asuka b {
  background-image: url(asuka.png);
}
</style>
<div class="play-table space-separate icon">
  <p class="shingo"><b>慎吾</b><span>: </span>おはよう</p>
  <p class="togaki"><b>ト書き</b><span>: </span><i>慎吾、右からフレームイン</i></p>
  <p class="asuka"><b>明日香</b><span>: </span>おはよう<br>昨日の風、すごかったね</p>
  <p class="shingo"><b>慎吾</b><span>: </span>ああ、布団が飛んできたよ</p>
</div>

慎吾: おはよう

ト書き: 慎吾、右からフレームイン

明日香: おはよう昨日の風、すごかったね

慎吾: ああ、布団が飛んできたよ

ダウンロード

ver. 20131107
play-table.css.zip
play-table.css [download]
play-table-extend.css [download]

Old versions

ver. 20130118
play-table.css.zip

更新履歴

2013年11月7日
アイコンサポート、コロン区切りサポート
2013年1月18日
初版公開