ショップ作成で使えそうなCSSのテクニック!? part 1

ネットショップを作成時に使えそうなCSSテクニックを今回は7つほど。

1. サイト全体を中央(配置)にする方法
2. padding と margin の違いを把握しておく
3. ネガティブマージン(例 margin: -30px; )について
4. 魔法の一文 zoom: 1;
5. ※マークを使って文字をぶら下げる方法
6. CSSをクロスブラウザ対応にするためのリセット設定
7. リンククリック時に枠表示されるドットラインの削除

1. サイト全体を中央(配置)にする方法

前提として必ず width 横幅は指定。

具体的な記述は

これだけ。

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 なんかを入れる時に最初から

っていう手もありかもしれません ^^;

* は全てのタグに適応するっていうことの意味です。

5. ※マークを使って文字をぶら下げる方法

例えばこんな感じ↓

※きょうのネタってなんでしょう。。
  こんな感じのネタです 笑

って書く場合に通常はスペース空けたりしますが、
CSSを使ったスマートな方法の備忘録

html(xhtml)ソースは↓

CSSは↓

これでピシャッと揃います。

6. CSSをクロスブラウザ対応にするためのリセット設定

手っ取り早くやるには、YUI Reset CSS が便利
リンク形式で導入する場合は(ヘッダーに記述)↓

スタイルシートに記述の場合は↓

あとは適宜、必要に応じて追加でしょうか・・

7. リンククリック時に枠表示されるドットラインの削除

IEなどでリンクをクリックしたときに4方を囲むように表示される
ドットラインを削除したい場合のスタイルシート

以上、今回は7つほど備忘録・・

:: スポンサーリンク ::

posted by そば富泉

コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)