他のメディアなどを参照しながら、似たようなたくさんの文章が並んだ画面に目を戻すと、どこまで見たのか分からなくなることがあります。そんなとき、部分的にスタイルを変えておくことができれば、迷うことは少なくなります。

サンプルは、既読部分（li要素）をクリックすると、その要素の文字色と背景色を他とは違うスタイルに変更します。もう一度クリックすると元に戻ります。また、「すべて元に戻す」ボタンクリックで、ロードした状態に戻せます。

簡単なscriptと変更用のスタイルだけで設置できるので、規約などの文字が長々と続くページでは、予め用意しておくのもありかと思います。。

サンプル

サンプルのhtmlソース

<div id="toggleAppear">
  <ol>
    <li>サンプル文章001-サンプル文章001-サンプル文章001-サンプル文章001-サンプル文章001-サンプル文章001</li>
    /* ---中略--- */
    <li>サンプル文章012-サンプル文章012-サンプル文章012-サンプル文章012-サンプル文章012-サンプル文章012</li>
  </ol>
</div>

サンプルのCSSソース

#toggleAppear li {
	padding: 0;
	text-align: left;
	list-style-type: decimal;
	color: #222;
	background: #fff;
	}
#toggleAppear li.obs {
	color: #aaa;
	background: #cee;
	}

サンプルのscript

$(function(){
	$('#toggleAppear li').on('click', function() {
		$(this).toggleClass('obs');
	});
	$('#btn').on('click', function() {
		$('#toggleAppear li').removeClass('obs');
	});
});