css

CSS コードサンプル　tableの中で画像とテキストのそろえを変える

ちょっとしたコードサンプルです。
なるべくtableという表形式コーディングはやめよう！といわれて久しいですが、制作の現場では、ときどき必要な場合がありますよね。

たとえば、次のようなレイアウトを実現する場合です。

まさにテーブル（表）ですね。
さて、このように、画像とテキストが入り混じり、画像は真ん中寄せ（センタリング）したいけれども、テキストは左寄せにしたい、というのはよくあることだと思います。
まずは、テーブルのコーディングだけしてみます。

 <table class="photo_table" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <th>写真</th><th>説明</th><th>写真</th><th>説明</th>
    </tr>
    <tr>
     <td><img src="images/goya.jpg"></td>
     <td>ゴーヤ<br>
       丸々としたゴーヤです。
     </td>
     <td><img src="images/figure.jpg"></td>
     <td>フィギュアです。<br>
       素敵なフィギュアですよ。
     </td>
    </tr>
 <中略>
  </tbody>
 </table>

cssで、画像は真ん中よりに、テキストは左寄せにしてみましょう。
たとえば、いくつか方法がありますが、

• 画像のtdにclassやidをつけて、text-align:center;を指定する
• 画像を
  でくくる

などは、タグの量を増やさなければいけません。

この例ではたったの2行ですが、これが20行ぐらいある場合を考えると、ちょっと手間ですよね。

スタイルだけで設定するには次のようにします。

 .photo_table{
   text-align:left;
 }

 .photo_table img {
    display: block;
    margin: auto;
 }

imgタグはインライン要素なので、display:blockでブロック要素にしないと、margin:autoがききません。

thやbackground-colorなどのほかのスタイルは、適宜設定してください。

で、この例ではtableの例になっていますが、別にdivでもなんでもOKです。

css

CSS z-indexが効かない

z-indexは要素の重なり順序を定義するプロパティです。
親要素がpositionのstaticで使わないと、効きません。

また、表示されないという場合は、親要素に

 overflow:hidden;

が設定されていないかも注意してみてください。

css

CSSでcalc()という関数を使うと長さやサイズ等で計算式を使うことができます。

例えば下記のように異なる単位を使って幅を指定することができます。

 width: calc(100% - 80px);

calc()をサポートしないブラウザ用に固定数値とcalc()の両方を記述することができます。

 width: 90%; /* calc()非対応ブラウザ用 */
 width: calc(100% - 80px);

calc()の対応ブラウザは下記の通りです。(ベンダー識別子での先行実装を除く)
Internet Explorer 9.0+（※IE9ではbackground-positionには使えません）
Safari 6.1+
Chrome 26+
Firefox 16+
iOS 7+
Android 4.4+

詳細は下記を参照してください
http://caniuse.com/calc