コーディングのパフォーマンスをアップさせるコード・スニペット
- Date:
- 2012.06.30

コーディングで、事前に作っておくと作業効率が格段に違う HTML のコード・スニペット。特に中〜大規模サイトや、作業者が複数人いる場合などに効力を発揮します。
今回はこのブログで使用しているコード・スニペットを自分へのメモも兼ねて公開します。
ソースコード(pre)
シンタックスハイライトに google-code-prettify を使用しています。
<pre class="prettyprint linenums"> <h2>$text</h2> </pre>
ソースコード キャプション付(pre)
- $caption
-
<h1>$text</h1>
<dl class="code"> <dt>$caption</dt> <dd> <pre class="prettyprint linenums"> <h1>$text</h1> </pre> </dd> </dl>
見出し(h2)
$text
<h2>$text</h2>
見出し(h3)
$text
<h3>$text</h3>
見出し(h4)
$text
<h4>$text</h4>
パラグラフ(p)
$text
<p>$text</p>
順序無しリスト(ul)
- $text
- $text
<ul> <li>$text</li> <li><a href="#">$text</a></li> </ul>
順序有りリスト(ol)
- $text
- $text
<ol> <li>$text</li> <li><a href="#">$text</a></li> </ol>
定義リスト(dl)
<dl> <dt>$text</dt> <dd><a href="#" target="_blank">$text</a></dd> <dd><a href="#" target="_blank">$text</a></dd> </dl>
画像:左、テキスト:右

スクリーン幅が 800px 以下のときには float が解除され、画像がセンタリングされます。
<div class="figureset"> <figure> <img src="image.gif" alt="" /> <figcaption>$caption</figcaption> </figure> <div class="text"> <p>$text</p> <!-- /.text --></div> <!-- /.figureset --></div>
画像:右、テキスト:左

class="reverse" を付けると、画像とテキストのレイアウトが逆になります。
同様に、スクリーン幅が 800px 以下のときには float が解除され、画像がセンタリングされます。
<div class="figureset reverse"> <figure> <img src="image.gif" alt="" /> <figcaption>$caption</figcaption> </figure> <div class="text"> <p>$text</p> <!-- /.text --></div> <!-- /.figureset --></div>
画像の装飾無し

figure 要素に class="simple" を付けると、画像の装飾が無くなります。
<div class="figureset"> <figure class="simple"> <img src="image.gif" alt="" /> </figure> <div class="text"> <p>$text</p> <!-- /.text --></div> <!-- /.figureset --></div>
画像:センタリング

<figure class="fluid"> <span><img src="/wp/wp-content/uploads/2012/07/img_retina_svg.png"></span> <figcaption>$caption</figcaption> </figure>
表組み(table)
$text | $text | $text |
---|---|---|
$text | $text | $text |
$text | $text | $text |
<table cellspacing="0"> <caption>$caption</caption> <colgroup> <col width="30%" /> <col width="35%" /> <col /> </colgroup> <thead> <tr> <th>$text</th> <th>$text</th> <th>$text</th> </tr> </thead> <tbody> <tr> <th>$text</th> <td>$text</td> <td>$text</td> </tr> <tr> <th>$text</th> <td>$text</td> <td>$text</td> </tr> </tbody> </table>
フロー
- $text
- $text
- $text
- $text
- $text
<ol class="flow"> <li>$text</li> <li>$text</li> <li>$text</li> <li class="point"><em>$text</em></li> <li>$text</li> </ol>
引用(blockquote)
$text
<blockquote cite="$uri"> <p>$text</p> </blockquote>