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

2009 年 11 月 7 日 by     No Comments    Posted under: css, css-基礎編, ショップサーブ

ネットショップを作成時に使えそうな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 なんかを入れる時に最初から

1
2
3
4
5
* {
margin: 0;
padding: 0;
zoom:1;
}

っていう手もありかもしれません　＾＾；

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

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

例えばこんな感じ↓

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

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

html(xhtml)ソースは↓

<p>※きょうのネタってなんでしょう。。<br>
こんな感じのネタです　笑</p>

CSSは↓

1
2
3
4
p {
      margin-left: 1em; /* ブロック全体を 1em 右に */
      text-indent: -1em; /* 先頭の1文字のみ 1em 左に */
}

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

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

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

1
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
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などでリンクをクリックしたときに４方を囲むように表示される
ドットラインを削除したい場合のスタイルシート

1
2
3
a {
    outline: none;
}

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


posted by そば富泉


こちらも合わせてご覧ください - このページの内容と関連がある記事 -

  1. Google chrome の拡張機能 Stylish を使って ツイッターの余分だと思う部分を削除　＾＾；
  2. ショートハンド
  3. WP-PageNavi を使わずにナビゲーション表示 備忘録
  4. ショップサーブデフォルトの page top をカスタムする
  5. たった一行でclearfixを使わずにfloatを解除するテクニック備忘録
タグ:
TrackBack URL for this entry

コメントをいただけると励みになります！よろしくお願いします。

9 + 12 =
Please leave these two fields as-is: