html文字実体参照リファレンス

CSS Drive News経由。html文字実体参照のリファレンスだそうです。Googleセンセーで「html 文字実体参照」で検索すれば色々出てはくるんですが、大きなフォントで並べられてると見やすくて良いですな。

文字にマウスでホバーするとユニコードとかも表示されますし、プルダウンで表示フォントを変更する事もできますので(数は限られてますけど)、見栄えの確認にも少し役に立ちそう。

• XHTML Character Entity Reference

HTMLのタグ数を数えてくれるサービス

URLを入力すると、そのウェブサイトのHTMLに書かれているタグの数を数えてくれるサービスがあったので紹介するっす。

Div Counterというサービスなんですが。何に使えるのかっていうと微妙なんですが、自分のタグ傾向を観るだけでも楽しいです。以下がこのサイトのトップページのHTMLを解析したもの。ちなみにちゃんと閉じられている数もカウントしてくれます。

こうやって眺めているとspanタグとscriptタグが多いなぁ。spanはもうちょっと控えるように書かないとな。

• Page Scanner Tool @ Jhousemedia.com

cssのフォーマット

Ordered List経由。cssの書き方って色々ありますが、一行とかで書くのはどうよ？っての見つけたのでちょっと考えてみます。

個人的にはセレクタにプロパティを設定するのは「{」「}」の中括弧で囲まれているわけで、Pythonみたいにインデントとかにこだわって構文解析しないんだから、一行で書こうが複数行で書こうが好き々々だと思うんですけどね。

以下のようなHTMLに指定をするとした場合。

<div id="head">ヘッダだよ</div>
<div id="contents">
<p>内容だよ</p>
<ul>
<li class="list">リストだよ</li>
<li class="date">リストに日付だよ</li>
</ul>
</div>
<div id="foot">フッタだよ</div>

改行を入れて容量的にも多少考慮

まずは容量も考えて改行を入れて書くとこんな感じになるのかな。あくまで例ですけどね。

#head {
width: 100%;
background: #cc0;
}

#contents {
margin: 1.0em 0;
}
#contents ul {
list-style: none;
}
#contents li {
font-size: 90%;
}
#contents li.list {
font-weight: bold;
}
#contents li.list {
color: #ccc;
}

#foot {
width: 100%;
background: #c00;
}

つまり、改行のみであんまりスペースをいれずに書く感じっすよね。多少分かりやすくインデント入れてもいいかも知れないですが、そこら辺はCSSで容量食うのもなんですので管理のしやすさとのバランスって感じでしょうか。

私が良くやるのは上記のように書いておいて、大枠で分けたいときは(見た目として)コメントを一行入れたりしてます。

んで、試しに一行で書いてみる

次に一行で書いてみます。

#head { width: 100%; background: #cc0; }
#contents { margin: 1.0em 0; }
#contents ul { list-style: none; }
#contents li { font-size: 90%; }
#contents li.list { font-weight: bold; }
#contents li.list { color: #ccc; }
#foot { width: 100%; background: #c00;  }

縦への目線が便利になる。セレクタ部分で苦労するか、プロパティの部分で苦労するかの違いな感じもしてきた。

インデントしたらいいかも

ここで思ったのはインデントしたら分かりやすいのでは？って事。つまりセレクタとプロパティを纏めたブロックはHTML構造的に階層なんだからインデントでそれ表現したらもっと分かりやすいかも。

#head { width: 100%; background: #cc0; }
#contents { margin: 1.0em 0; }
     #contents ul { list-style: none; }
          #contents li { font-size: 90%; }
          #contents li.list { font-weight: bold; }
          #contents li.list { color: #ccc; }
#foot { width: 100%; background: #c00;  }

おー。結構いいかも。結局プロパティの部分の管理とかの難しさは残るけどセレクタの位置関係とかは把握しやすくなるかもしれない。実は一番最初の書き方でもインデントするとかなり分かりやすくなったりするんで本末転倒な印象もあるけど。

ま、結局好みの問題ですけどね。愚にも付かないエントリーでした。スマソ

• Single Line CSS // Ordered List by Steve Smith
• Time-Savers: Code Beautifier And Formatter