Entry Guideline

まだ若いのに物忘れの激しい自分のためのエントリーです。

CSSレイアウトを意識してブログを続けていると、どの場合にどのclass属性をつけるか混乱してしまうことがあります。「image」というclass名だったか「images」だったかという単純なものですが。

そこで、このブログのための「Entry Guideline」(エントリー・ガイドライン)を作ることにしました。(このエントリーは逐次更新)

1.リンク関係

外部リンクはclass要素を「outside」とする。

2.画像関係

  1. 画像は基本的に一つの段落(p要素)として扱う。
  2. 大きめに扱う画像
    class名
    p要素に「image」、元画像にリンクさせる場合はp要素内のa要素に「thickbox」もつける。
    レイアウト
    CSSで左右中央に配置する。
    サイズ
    横幅250pxとする。
  3. 小さめに扱う画像(サムネイル)
    class名
    p要素に「image」、元画像にリンクさせる場合はp要素内のa要素に「thickbox」もつける。
    レイアウト
    CSSで文字を右に回り込ませる(float: left;)。
    サイズ
    任意120px前後とする。
<p class="image thumb"><a class="thickbox" ~ ><img ~ >~</img></a></p>

3.ソースコード

次の内容と順番で。クラス名はその都度変更する。

<textarea name="code" cols="60" rows="2" class="種類">~</textarea>

なお、本当ならtextarea要素はフォームに使うのもであるので、ソースコードは<pre><code></code></pre>内に記述すべきだが、dp.SyntaxHighlighterライブラリでソースコードを見やすくするために、上記の記述方法をとる。dp.SyntaxHighlighterのプログラムを変更できればいいのだけど、自分にその能力なし!

pre要素内にname属性を記述してdp.SyntaxHighlighterを利用しているサイトをよく見かけるが、それは文法的に誤りなので自分はtextarea要素を採用した。

  • このエントリーをはてなブックマークに追加
Just a second...