2009年11月13日

画像の縦方向のセンタリング その1

こんにちは、馬場です。


ホームページを制作する際に、
例えば、ショップサイトの場合は
取り扱う商品の写真を
サムネイル表示することがあると思います。


写真をサムネイル表示する際に、
写真が正方形の枠で囲まれていて、
その中で、写真がまん中に配置されているのを
見かけることがあると思います。

横方向のセンタリングは難なく対応できますが、
縦方向のセンタリングは少し考えてしまいますよね?


今回から、3回に分けて、
画像の縦方向のセンタリングについて
お話しします。

ただ、IE6に対応しようと思った際に
完全にcssのみで対応することが難しいため、
すっきりしない可能性大です。
(私が知らないだけかも知れませんが・・・)





▼tableタグを使ったセンタリング


恐らく、一番最初に思いつく
(他に対応のしようがない?)
のがtableタグを使用した縦方向のセンタリングだと思います。

スタイルを使用しなくても
属性だけで対応できますので、
説明の必要はないかも知れませんが
確認の意味も込めてサンプルをご覧ください。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

(htmlコーディング)
<div class="wrapper1">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="yoko.gif" alt="" /></td>
<td class="none">&nbsp;</td>
<td><img src="tate.gif" alt="" /></td>
</tr>
</table>
</div>
(cssサンプル)
* {
margin:0;
padding:0;
}
.wrapper1 {
margin:10px;
}
.wrapper1 td {
width:200px;
border:1px solid #71BED9;
background-color:#DBEDFA;
text-align:center;
vertical-align:middle;
}
.wrapper1 td.none {
width:10px;
border:0;
background-color:transparent;
}

サンプルのように
text-align:center
vertical-align:middle
を設定することで
簡単に真ん中寄せを実現可能です。


tdはvertical-alignの初期値がmiddleなので、
特に意識しなくても、真ん中に寄ってしまいます。


次回の私の記事では、
画像の縦方向のセンタリングについて
displayを使ったセンタリングをご紹介します。
posted by baba at 19:37 | Comment(0) | TrackBack(0) | テクニック

2009年11月06日

初心者向けチェックポイント

こんにちは。島津です。

今回は、私がよく陥ったうっかりミスの経験を元に
「なぜかスタイルが適用されない!」と困ったときのための
CSS初心者向け超基本チェックポイントをまとめたいと思います。


 

▼クラス名のつけ方は正しいか

CSSクラス名に使える文字には制約があり、下記以外は使用できません。

  •  ・半角アルファベットの大文字または小文字(A〜Z、a〜z)
  •  ・半角数字(0〜9)
  •  ・ハイフン(-)
  •  ・アンダースコア(_)
  •  ・ASCII以外のUnicode文字

また、クラス名の先頭には数字とハイフンは使用できません。

例えばこんなネーミングは無効です。
(htmlコーディング)
<div class="2items-block">
  <p >要素A</p>
  <p >要素B</p>
</div>
<div class="items2-block">
  <p >要素A</p>
  <p >要素B</p>
  <p >要素C</p>
  <p >要素D</p>
</div>
(cssサンプル)
* {
padding:0;
margin:0;
}
div {
padding:10px;
margin:10px;
width:200px;
border:solid 1px #DDDDDD;
font-size:12px;
}
.2items-block p {
color:red;
}
.items2-block p {
color:blue;
}
▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。
この場合、「items2-block」の方は問題なく文字色の変更が出来ていますが
「2itms-block」はクラス名が無効なのでスタイルが反映されません。
クラス名を数字やハイフンで始まらないようなネーミングに変更しましょう。

 

▼他のスタイル定義で上書きされていないか

スタイルを定義出来る場所は複数箇所あります。
定義自体は間違っていないのに、なぜかいくら変更しても反映されない…
という時は、より優先度の高いスタイル定義に上書きされている場合があります。

例えば、ページの背景色を赤に変更したい場合

  •  ① BODYタグのstyle属性に「background-color:red;」を指定
  •  ② HEADタグ内のSTYLEタグで「body { background-color:red; }」を指定
  •  ③ 外部CSSで「body { background-color:red; }」を指定
  •  ④ BODYタグのbgcolor属性に「red」を指定

と4つの方法がありますが、同時に複数指定した場合は
@→A→B→Cの順で優先されるため、例えば外部CSSで「red」と指定しても
BODYタグのstyle属性で「blue」が指定されていると背景色は青になります。

同じ要素に対するスタイル定義はなるべく1ヵ所にまとめるようにしましょう。

 

▼同じプロパティが重複していないか

上の「他のスタイル定義で上書きされていないか」と似た内容になりますが、
例えば下記のように定義した場合どうなるかというと…
(cssサンプル)
p {

color:blue;
color:red;

}
p {

color:green;

}

この場合、Pタグの文字色はgreenになり、さらに下のp{}を削除するとredになります。
(※ Windows FireFox3.0の場合)

優先度が同じ範囲内で重複する定義があると、後から定義された方で
上書きされてしまうようですが、本来間違った記述なので
ブラウザによっては予期しない表示になる可能性もあります。

一度に一気にCSSのコーディングを進める場合などに
コピー&ペーストしたまま残ってしまうことがたまにあるので、
注意しましょう。

 
以上、とりあえずありがちなものを3つだけ挙げてみました。

チェックポイントとしては初歩中の初歩ですが、
慣れないうちは(慣れても油断すると…)こういったミスがよく出ると思います。
「あれ、なんで?」と思った時は基本的なところから順番にチェックしてみましょう!

今回はこれでおしまいです。
ありがとうございました。
posted by baba at 20:01 | Comment(0) | TrackBack(0) | 情報
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。