2009-06-05T19:13:00Z June 5, 2009

private chat format test

  1. これ, HTMLにもほしいなー. dt, dlの関係性からまとめる, Definition Item http://bit.ly/1383WP
  2. HTML5なら, まさかのdialog要素あるのね. dtが次のddのソースになるのは暗黙的. http://bit.ly/NUYyk
  3. diがない以上, 文句言っても仕方ないから, dl量産によって対応せざるを得ないかな.

ol.dialog {
  list-style-type : none;
  font-size : 13px;
  border  : 5px solid #CCC;
  padding : 1px;
  margin  : 0px;
}
ol.dialog li {
  margin: 0px;
  padding : 0px
}
ol.dialog li.even {
  background-color : #F4F4F4;
}
ol.dialog li.odd {
  background-color : #E8E8E8;
}
ol.dialog li dl {
  margin: 0px;
  padding: 0px;
}
ol.dialog dt.account {
  padding : 5px;
}
ol.dialog dt.account a {
  text-decoration : none;
  color : #333;
}
ol.dialog dt.account img {
  border-style : none;
  width : 16px;
  height: 16px;
}
ol.dialog dt.account a.name {
  font-weight : bold
}
ol.dialog dt.account a.name:after {
  content : ' :';
}
ol.dialog dd.description {
  color : #333;
  padding : 3px;
}



<ol class="dialog">
  <!-- ここから 一言分 -->
  <li class="chat odd">
    <dl class="content">
      <dt class="account">
        <!-- if exist -->
        <a class="image" href="http://twitter.com/Constellation"><img src="http://s3.amazonaws.com/twitter_production/profile_images/55970565/thm300_n51_bigger.jpg" /></a>
        <a class="name" href="http://twitter.com/Constellation/status/2029648308">Constellation</a>
        <a class="source" href="http://twitter.com/Constellation/status/2029648308">src</a>
      </dt>
      <dd class="description">これ, HTMLにもほしいなー. dt, dlの関係性からまとめる, Definition Item <di> http://bit.ly/1383WP</dd>
    </dl>
  </li>
  <!-- ここまで -->
  <li class="chat even">
    <dl class="content">
      <dt class="account">
        <a class="image" href="http://twitter.com/Constellation"><img src="http://s3.amazonaws.com/twitter_production/profile_images/55970565/thm300_n51_bigger.jpg" /></a>
        <a class="name" href="http://twitter.com/Constellation/status/2029868850">Constellation</a>
        <a class="source" href="http://twitter.com/Constellation/status/2029868850">src</a>
      </dt>
      <dd class="description">HTML5なら, まさかのdialog要素あるのね. dtが次のddのソースになるのは暗黙的. http://bit.ly/NUYyk</dd>
    </dl>
  </li>
  <li class="chat odd">
    <dl class="content">
      <dt class="account">
        <a class="image" href="http://twitter.com/Constellation"><img src="http://s3.amazonaws.com/twitter_production/profile_images/55970565/thm300_n51_bigger.jpg" /></a>
        <a class="name" href="http://twitter.com/Constellation/status/2040814715">Constellation</a>
        <a class="source" href="http://twitter.com/Constellation/status/2040814715">src</a>
      </dt>
      <dd class="description">diがない以上, 文句言っても仕方ないから, dl量産によって対応せざるを得ないかな.</dd>
    </dl>
    </dl>
  </li>
</ol>

utatane.Constellation