Ｍｙスニペット コメント編

Thursday, October 30, 2008

カテゴリー：CSS,Dreamwever,WEB

今回は、HTMLファイルやCSSファイル内でよく使うコメントのスニペットです。

DIVの終了タグ前に配置するコメント：IDセレクタ用

HTML内では多くのDIVが使用されるので、どのDIVの終了タグかをわかりやすくするために使用します。

コメントアウトで見れなくなっちゃうので、「!」を全角にしてます。ご注意。

<！-- / div#selector_name -->

DIVの終了タグ前に配置するコメント：CLASSセレクタ用

ID用と何が違うかって、divあとが「#」か「.」かだけなんですけどね。ちょっとしたことだけど、これで分かりやすくなります。

コメントアウトで見れなくなっちゃうので、「!」を全角にしてます。ご注意。

<！-- / div.selector_name -->

width（及びheight）のオリジナルサイズを記載しておく

%で指定してると必要ないんだけどね。そうじゃない場合も往々にしてあります。

paddingを使用した際に、想定していたwidthの値がpaddingにとられちゃいますね。で、もし再度paddingを設定し直すことがあったときに、わざわざ足し算したりするのが面倒くさいので、このコメントを入れておいてオリジナルサイズを分かりやすくしておきます。

/* original size = ***px */

主張したい説明を挿入する

長めの説明文を入れたいときに使います。

/*---------------------------------------------------
                    せつめいぶん
-----------------------------------------------------*/

プロパティを書く順序ヒント

プロパティを書く順序をサイト内で決めておけば、他人が触ることになったときに少しは見やすくなります。そのための順序アンチョコ。

/* Suggested order:
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
 *
 */

CSSのコードの最後に表記しておく

Dreamweaverで1000行を超えるcssを書くと急にぶっ壊れる現象が起きたことがあって、どこまで読み込んでいるのかわからなくなったことがあったので、とりあえずここが最後ですよ、という目印をつけておきます。

/*EOC*/

coyummy

• No Comment
• ｜No Trackback