デザイン

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>

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>