忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[144] [143] [142] [141] [140] [139] [138] [137] [136] [135] [134

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

display: table-cell で vertical-alignを実装

サイトを作っているとき、既存のCSSではどうにもならない場面があった。
たとえばこんな場面で、赤ボーダーで囲まれた部分の下にもう一行テキストを追加したいとする。

テキスト。


この赤ボーダーで囲まれたテキストは、マージンによってセンタリングされているため、
この下にさらにテキストを追加しようとするとこうなってしまう。
(ここでは「テキスト。」ごとにひとつのPタグでくくっているので、下記の表示は、
2つのPタグをDivで囲んでいます。)

テキスト。

テキスト。


そこで、下記のようにマージン調整してやる。

テキスト。

テキスト。


このやり方だと、テキストが1行になるときと2行になるときでいちいちクラスを分けなければいけないし、文字サイズを大きくしたときにレイアウトが崩れてしまう。
そこで、display: table-cellを使うことを思いつきました。

なぜdisplay: table-cellを使うのかというと、vertical-alignプロパティを使いたいから。
vertical-alignというのは、インライン要素かテーブルのセルにしか効きません。
インライン要素にするとフロートがうまくいかなさそうだったので、display: table-cellを使いました。


2行でも。

テキスト。

テキスト。


1行でも。

テキスト。


ただし、heightを指定してないときちんとvertical-align: middle;してくれないみたいです。
会社帰りの電車の中で急にこれを思いついて、 試しにやってみたらうまくいったので、即席で記事を書いてます。
ですのでブラウザチェックはしていません、ご了承ください。(動作確認:Firefox3)
(近いうちに確認するつもりです)

お仕事していると勝手にCSSをいじれない場面もあり、
想定していない場所にコンテンツ追加の以来が舞い込んだりもします。
なるべく使いまわしの効く、伸縮自在なコードを見つけていければなと思います。



7/11追記
ブラウザチェックしてみましたが、各ブラウザの最新バージョンでないと際限が難しいようです。。。
再現OK:IE8、Firefox2/3、GoogleChrome2、Opera
私の制作環境はSafari3なのですが、Safari3ではレンダリングされませんでした。
ですが、Chrome2で再現可能なところを見ると、もしかするとSafari4だとレンダリング可能かもしれません。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
02« 2024/03 »04
S M T W T F S
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
ブログ内検索
忍者ブログ [PR]