ゆるふわチャット小説をGitHubで構築しましたので╭( ･ㅂ･)و ̑ 〜初めてのフロントエンド編〜 ref: http://qiita.com/piyo7/items/f9217292fd8224f7e9f2

file0.css

.voice-left, .voice-right {
  border-radius: 1em;
}

.voice-left {
  border-top-left-radius: 0;
}

.voice-right {
  border-top-right-radius: 0;
}

file1.css

.telephone {
  border: 2px solid #808080;
  border-radius: 0;
}

file2.css

.char05 { background-color: hsl(330, 100%, 85%); }
.char06 { background-color: hsl(210,  50%, 85%); }
.char07 { background-color: hsl(  0, 100%, 85%); }
.char08 { background-color: hsl(255,  75%, 85%); }
.char09 { background-color: hsl( 90, 100%, 85%); }

file3.css

font-family: sans-serif;

file4.css

font-family: arial, "Mplus 1p", sans-serif;

file5.css

font-family: arial, メイリオ, "Mplus 1p", sans-serif;

file5.html

<div class="chapter hoverable">
  <div class="badges">
    <div class="badge char06"></div>
    <div class="badge char01"></div>
    <div class="badge char05"></div>
    <div class="badge char02"></div>
    <div class="badge char07"></div>
  </div>
  <p><a href="chapter-02">灼け焦がれた涙</a></p>
</div>

file6.html

<div class="chapter hoverable">
  <div class="badges">
    <div class="badge char06"></div>
    <div class="badge char01"></div>
    <div class="badge char05"></div>
    <div class="badge char02"></div>
    <div class="badge char07"></div>
  </div>
  <p><a href="chapter-02">灼け焦がれた涙</a></p>
</div>

file6.js

$('.hoverable').on('mouseenter', function () {
  $(this).addClass('hover');
}).on('mouseleave', function () {
  $(this).removeClass('hover');
}).on('touchstart', function () {
  $(this).addClass('hover');
  $('.hoverable').not(this).removeClass('hover');
});
$(window).on('scroll', function () {
  $('.hoverable').removeClass('hover');
});

file7.css

<meta name="viewport" content="width=480">

file7.js

$('.hoverable').on('mouseenter', function () {
  $(this).addClass('hover');
}).on('mouseleave', function () {
  $(this).removeClass('hover');
}).on('touchstart', function () {
  $(this).addClass('hover');
  $('.hoverable').not(this).removeClass('hover');
});
$(window).on('scroll', function () {
  $('.hoverable').removeClass('hover');
});

file8.css

<meta name="viewport" content="width=480">