うたたね

Constellation

これ, HTMLにもほしいなー. dt, dlの関係性からまとめる, Definition Item http://bit.ly/1383WPhttp://twitter.com/Constellation/status/2029648308

Constellation

HTML5なら, まさかのdialog要素あるのね. dtが次のddのソースになるのは暗黙的. http://bit.ly/NUYykhttp://twitter.com/Constellation/status/2029868850

Constellation

diがない以上, 文句言っても仕方ないから, dl量産によって対応せざるを得ないかな.http://twitter.com/Constellation/status/2040814715

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


<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>

/* 互換性section */
ol.dialog {
  list-style-type : none;
}
ol.dialog dl {
  margin: 0px;
  padding: 0px;
}
ol.dialog dt.account a.name {
  font-weight : bold
}

.dialog {
  margin: 0px;
  padding: 0px;
  font-size : 13px;
  border  : 5px solid #CCC;
  padding : 1px;
  margin  : 0px;
}
.dialog .even {
  background-color : #F4F4F4;
}
.dialog .odd {
  background-color : #E8E8E8;
}
.dialog dt.account {
  padding : 5px;
}
.dialog a {
  color : #333;
}
.dialog dt.account a {
  text-decoration : none;
}
.dialog dt.account img {
  border-style : none;
  width : 16px;
  height: 16px;
}
.dialog dt.account .name:after {
  content : ' :';
}
.dialog dd.description {
  margin: 0px;
  color : #333;
  padding : 3px;
  padding-left : 40px;
}
.dialog dd.description span.source{
  display : block;
  text-align : right;
}