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
Tuesday, September 30, 2008
カテゴリー：CSS,Dreamwever,WEB
今回は、CSSのファイル用に登録しているスニペットを公開します。
使えそうなのがあれば、ご自分のスニペットに登録して、手間を省くと楽チンです。
自分はこんなのスニペットにしてますよ！ってのがあれば教えてください。
リセット設定用
/* RESET */
html,body,div,
ul,ol,li,dl,dt,dd,
h1,h2,h3,h4,h5,h6,
pre,form,p,blockquote,fieldset,input {
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6,p,
ul,ol,li,dl,dt,dd,
pre,code,address,caption,cite,code,em,th {
font-size: ***;/* 好みのフォントサイズを入力 */
font-weight: normal;
font-style: normal;
}
html {
overflow-y:scroll;
}
ul,ol {
list-style: none;
}
fieldset,img {
border: none;
}
caption,th {
text-align: left;
}
img,abbr {
border: 0;
}
clearfix
div {
zoom: 1;/*for IE 5.5-7*/
}
div:after {/*for modern browser*/
display: block;
visibility: hidden;
clear: both;
height: 0px;
line-height: 0;
font-size: 0em;
content: ".";
}
dtとddを横並び
dt,
dd {
margin-bottom: **px;
}
dt {
float: left;
}
dd {
margin-left: **px;
}
hrを装飾
hr {
border-top: 1px dotted #999;
border-right: none;
border-bottom:1px solid #FFF;
border-left: none;
width: **px;
margin: 0px auto;
}
min-height IE対応版
div {
min-height: 100px;
height: auto !important;
height: 100px;
}
coyummy
Monday, September 29, 2008
カテゴリー：Dreamwever,WEB
ドリームウィーバーの機能に「スニペット」というものがあります。
ソースコードなどを記憶させておいて、簡単に表記させることができます。
たとえば、使用頻度の高いclearfixなどを登録させておいて、いつでも使えるようにしておくと超便利！
また使うかも？って思うソースコードは、迷わずスニペットに登録して、ラクしちゃいましょう。
coyummy
このブログを購読