ネットショップを作成時に使えそうなCSSテクニックを今回は７つほど。
1. サイト全体を中央（配置）にする方法
2. padding と margin の違いを把握しておく
3. ネガティブマージン（例 margin: -30px; ）について
4. 魔法の一文 zoom: 1;
5. ※マークを使って文字をぶら下げる方法
6. CSSをクロスブラウザ対応にするためのリセット設定
7. リンククリック時に枠表示されるドットラインの削除
1. サイト全体を中央（配置）にする方法
前提として必ず width 横幅は指定。
具体的な記述は
margin: 0 auto;
これだけ。
2. padding と margin の違いを把握しておく
padding はボックス要素の内側の余白を指定
margin はボックス要素の外側の余白を指定
padding を扱うポイントとして注意するべきことは、
例えば、幅 800pxのボックスに padding を 10px としいた場合、
800-10（padding 左） – 10（padding 右） = 780 となり、
仮に画像を入れるとするならば、780px の画像までということになります。
3. ネガティブマージン（例 margin: -30px; ）について
ネガティブマージンは決して間違った使い方ではないようで、
結構色々な場面で役にたちますが注意も必要なようです。
例えば、ボックスの枠をはみ出して、
200px 上の場所にテキストを表示したい場合なんかに便利です。
詳しくは coliss さんで書かれておりますので参考にしてください。
4. 魔法の一文 zoom: 1;
IEでのレイアウトの崩れに悩んだ時はとりあえず、zoom: 1;
崩れている状況にもよりますが、結構な確率で修正されます。
リセットCSS なんかを入れる時に最初から
margin: 0;
padding: 0;
zoom:1;
}
っていう手もありかもしれません ＾＾；
* は全てのタグに適応するっていうことの意味です。
5. ※マークを使って文字をぶら下げる方法
例えばこんな感じ↓
※きょうのネタってなんでしょう。。
こんな感じのネタです 笑
って書く場合に通常はスペース空けたりしますが、
CSSを使ったスマートな方法の備忘録
html(xhtml)ソースは↓
<p>※きょうのネタってなんでしょう。。<br>
こんな感じのネタです 笑</p>
CSSは↓
margin-left: 1em; /* ブロック全体を 1em 右に */
text-indent: -1em; /* 先頭の1文字のみ 1em 左に */
}
これでピシャッと揃います。
6. CSSをクロスブラウザ対応にするためのリセット設定
手っ取り早くやるには、YUI Reset CSS が便利
リンク形式で導入する場合は（ヘッダーに記述）↓
スタイルシートに記述の場合は↓
pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
あとは適宜、必要に応じて追加でしょうか・・
7. リンククリック時に枠表示されるドットラインの削除
IEなどでリンクをクリックしたときに４方を囲むように表示される
ドットラインを削除したい場合のスタイルシート
outline: none;
}
以上、今回は７つほど備忘録・・
