talk.css

talk.cssは会話形式の吹き出しを作成するCSS。

GitHub Project

デモ

なんです?これは

talk.cssは会話形式の吹き出しを作成するCSSよ。

へぇ!
でも難しいんでしょう?

いいえ、簡単よ。
試してみたら?

うん!

使い方

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

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

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

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

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

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

ここは右。

ここは左。

アイコン

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

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

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

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

ここは右。

ここは左。

名前

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

<div class="talkcss">
  <p class="right icon named">
  <p>ここは右。
  <p class="left icon named">
  <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">
  <p class="right icon named dog">
  <p>僕は犬。
  <p class="left icon named cat">
  <p>私は猫。
</div>

僕は犬。

私は猫。