どうも！LSSです！！
さじさん(id:conasaji）が、はてなブロガー向けの「100の質問」を作成・公開されています！
「続」のほうに、質問部分だけ抜粋されたものがありますので、興味のある方は是非チャレンジしてみてください^^
で…こういった100の質問を作成する際に見栄えを整えようとすると、
「最初に１問分だけ作って、あとはコピペ」
で行けそうですが、それでもナンバリングを修正する手間は出てきてしまいます。
（CSSまたはHTMLタグで自動ナンバリングもできますが…）
そこで、試しに「100の質問用テンプレート」を出力するスクリプトを書いてみました！
サンプル
↓のボタンを押すと、かなりの行数のものが出てきちゃいます。
このスクリプトのコード
<p><input id="tbtn" type="button" value="サンプルとコードを表示" /></p>
<div id="gamen"> </div>
<script>// <![CDATA[
tbtn.addEventListener('click',gw,false);
tbtn.addEventListener('touchend',gw,false);
function gw(){
txt='';
txt+='<style>\n';
txt+='.q100q{\n';
txt+='background-color:#ddddff;\n';
txt+='}\n';
txt+='.q100a{\n';
txt+='background-color:#eeeeff;\n';
txt+='margin-bottom:1em;\n';
txt+='}\n';
txt+='</style>\n';
for(i=1;i<101;i++){
txt+='<div class="q100q">';
txt+=i+'.';
txt+='</div>\n';
txt+='<div class="q100a">';
txt+='A.';
txt+='</div>\n';
}
gamen.innerHTML=txt+'<p> </p><p>テンプレートのコード</p><div style="background-color: #eeeeee; padding: 0.6em; border-radius: 5px;">'+txt.replace(/</g,'<').replace(/>/g,'>').replace(/\n/g,'<br/>')+'</div>';
}
// ]]></script>
見た目の調整
サンプルのボタンを押して出てくるテンプレートのコードの冒頭に、
<style>
.q100q{
background-color:#ddddff;
}
.q100a{
background-color:#eeeeff;
margin-bottom:1em;
}
</style>
という部分があります。
これがQ部分とA部分の見た目を指定している部分で、このCSSを書き換える事で、100問分全ての見た目を一気に変更する事ができます^^
（生成ツールのコード自体をコピペ・改変するとタグ構成自体を変更する事もできます。）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
