レディーファースト

この記事へのリンクタグ

リンクに対して指定しておきたいCSS

テキストリンク、画像リンクとも、ブラウザや指定したフォントによってリンクの下線がずれたりします。これを解消するためのCSSは、以下の通りです。

a {
  vertical-align: baseline;
}

画像に回り込みを指定したときの上辺をテキストと揃える

画像を左右に回り込ませるには、CSSでfloatを使います。一見キッチリとレイアウトされているように見えますが、段落のpに対してline-heightを指定しているとテキスト上辺の位置が下にずれてしまいます。
原因は段落や文字に指定したline-heightせす。
回り込ませた画像とテキストの上辺を揃えるには、画像にもline-heightの分のmarginを指定すると上辺をキッチリそろえられます。

画像のmargin-topに指定する計算式は、
画像のmargin-top＝(line-heightに指定した値−1)÷2
line-heightが1.5の場合は0.25emになります。単位はemにしておくとIE7のテキストズームを使ったときにも対応します。

注意しなければいけないのは、段落pに対してmarginを指定するときは、margin-topは、0にしておくこと、
画像が下にずれることです。
段落の縦marginはbottomのみに指定ストと良いでしょう。
画像が下にずれるのが気になる方は、フロートを使うブロックの一つ上のブロックのmargin-bottomを少なめに指定しておくと良いでしょう。

回り込み用のXHTMLとCSS

<img src="http://" alt="" width="" height="" class="pict" />
<p>text、text</p>

.pict {
  float: left;
  margin: .25em 0.5em 0.5em 0;
}

サイト内検索の入力欄とボタンの縦位置を揃える

フォームを1行の様にデザインしたい時に、1行にはなっても、縦位置が数ピクセルだけずれることがあります。
この場合の原因は、ボタンにアルファベットのj p q yの様にベースラインより下に出る文字の為の余白というかスペースの様な物があるからです。これもCSSの指定で解消できます。

input要素にvertical-align:middle;を指定すると縦位置が中央に指定され入力欄とボタンの縦位置が揃います。

フォームの縦位置のズレを揃えるXHTMLとCSS

<!-- search -->
  <dl>
   <dt>Search this site.</dt>
   <dd>
    <form method="get" action="./">
    <input id="search" name="search" size="20" class="search" />
    <input type="image" src="" alt="search this site." value="Search" />
    </form>
   </dd>
  </dl>
<!-- /search/ -->

input {
  vertical-align: middle;
}

動画埋め込みの際に、下部に余白ができるのを解消する

埋め込みタグに使うobjectとembedもブラウザによって下部に指定していない余白があきます。 正確には、余白ではなく上のフォームのズレと同じ原因ですのでvertical-alignで解決できます。
vertical-align:top;を使い下部の余計なスペースを削除できます。

object,embed {
  vertical-align:top;
}

これで、キッチリデザインしたい几帳面な方でも納得できるレイアウトになると思います。

画像とCSSに関するブログ

• WEB制作からデザインまで - Yossy’s blog » タグにちょっとしたスタイルでプロっぽくするCSS
• CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする | ヨモツネット
• 記事の画像にalignタグを有効にする方法 - GLTMatrix

関連エントリー

• img要素をCSSでロールオーバー | レディーファースト 
• CSSを一部変更しました。 | レディーファースト 

この記事へのリンクタグ