Blog

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

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

コーディングで、事前に作っておくと作業効率が格段に違う HTML のコード・スニペット。特に中〜大規模サイトや、作業者が複数人いる場合などに効力を発揮します。

今回はこのブログで使用しているコード・スニペットを自分へのメモも兼ねて公開します。

ソースコード（pre）

シンタックスハイライトに google-code-prettify を使用しています。

<pre class="prettyprint linenums">
&lt;h2&gt;$text&lt;/h2&gt;
</pre>

ソースコード キャプション付（pre）

$caption
<h1>$text</h1>

<dl class="code">
<dt>$caption</dt>
<dd>
<pre class="prettyprint linenums">
&lt;h1&gt;$text&lt;/h1&gt;
</pre>
</dd>
</dl>

見出し（h2）

$text

<h2>$text</h2>

見出し（h3）

$text

<h3>$text</h3>

見出し（h4）

$text

<h4>$text</h4>

パラグラフ(p)

$text

<p>$text</p>

順序無しリスト（ul）

<ul>
<li>$text</li>
<li><a href="#">$text</a></li>
</ul>

順序有りリスト（ol）

  1. $text
  2. $text
<ol>
<li>$text</li>
<li><a href="#">$text</a></li>
</ol>

定義リスト（dl）

$text
$text
$text
<dl>
<dt>$text</dt>
<dd><a href="#" target="_blank">$text</a></dd>
<dd><a href="#" target="_blank">$text</a></dd>
</dl>

画像：左、テキスト：右

$caption

スクリーン幅が 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>

画像：右、テキスト：左

$caption

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>

画像：センタリング

$caption
<figure class="fluid">
<span><img src="/wp/wp-content/uploads/2012/07/img_retina_svg.png"></span>
<figcaption>$caption</figcaption>
</figure>

表組み（table）

$caption
$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>

フロー

  1. $text
  2. $text
  3. $text
  4. $text
  5. $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>

© grip on minds