talk.css

デモ

使い方

talk.cssをHTMLにリンクします:

<link href="//fukuchiharuki.github.io/talk.css/talk.css" rel="stylesheet" />

talkcssクラスを会話形式にしたいエリア要素に追加します:

<div class="talkcss">
</div>

left/rightクラスのあるpタグをエリア要素に追加します:

<div class="talkcss">
  <p class="right">ここは右。</p>
  <p class="left">ここは左。</p>
</div>

アイコン

left/right iconクラスを追加すると要素(pタグ)がアイコンになります:

<div class="talkcss">
  <p class="right icon"></p>
  <p class="left icon"></p>
</div>

pタグ(left/rightクラスを省ける)をアイコンにした要素に続けて追加します:

<div class="talkcss">
  <p class="right icon"></p>
  <p>ここは右。</p>
  <p class="left icon"></p>
  <p>ここは左。</p>
</div>

アイコンのために<p>を使うことに抵抗がありますか？ならば<i>を使ってください。

名前

namedクラスをleft/right iconクラスと一緒に追加すると名前がつきます:

<div class="talkcss">
  <i class="right icon named"></i>
  <p>ここは右。</p>
  <i class="left icon named"></i>
  <p>ここは左。</p>
</div>

カスタマイズ

アイコンと名前をカスタマイズするにはスタイルを上書きします:

<style>
</style>

アイコン

アイコンにした要素のbackground-imageを上書きします:

<style>
.talkcss > .left.icon { background-image: url(./icon-cat.png); }
.talkcss > .right.icon { background-image: url(./icon-dog.png); }
</style>

名前

アイコンにした要素の疑似要素のcontetを上書きします:

<style>
.talkcss > .left.icon.named:after { content: "ねこ"; }
.talkcss > .right.icon.named:after { content: "いぬ"; }
</style>

キャラクター

アイコンと名前をセットにして定義(ここではcat/dogクラス)すると便利です:

<style>
.talkcss > .icon.named.cat { background-image: url(./icon-cat.png); }
.talkcss > .icon.named.cat:after { content: "ねこ"; }
.talkcss > .icon.named.dog { background-image: url(./icon-dog.png); }
.talkcss > .icon.named.dog:after { content: "いぬ"; }
</style>
<div class="talkcss">
  <i class="right icon named dog"></i>
  <p>僕は犬。</p>
  <i class="left icon named cat"></i>
  <p>私は猫。</p>
</div>