ホームページ作成 質問過去ログ

                                Page     711
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   通常モードに戻る  ┃  INDEX  ┃  ≪前へ  │  次へ≫   
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ▼2つの特性を利用したい。  にゃ。 04/7/17(土) 19:30
   ┣Re:2つの特性を利用したい。  らら 04/7/17(土) 21:16
   ┗Re:2つの特性を利用したい。  105 04/7/17(土) 21:17
      ┗Re:2つの特性を利用したい。  にゃ。 04/7/18(日) 10:38

 ───────────────────────────────────────
 ■題名 : 2つの特性を利用したい。
 ■名前 : にゃ。
 ■日付 : 04/7/17(土) 19:30
 -------------------------------------------------------------------------
   こんにちわ。今回もお手数をお掛けしますがよろしくお願いします。

cssで以下を使用しています。

TD { vertical-align: top; }

これを使用すると…

<TABLE width="300" cellpadding="1" cellspacing="1">
<TBODY>
<TR>
<TD>サンプル</TD>
<TD><BR>
<BR>
<BR>
<BR>
<BR>
サンプル</TD>
</TR>
</TBODY>
</TABLE>

このように、右を改行すると左は真ん中に合わせようとします。
しかし、先ほどのcssを使う事により右を改行しても左は動きません。

┃      ┃      ┃      ┃サンプル┃      ┃
┃      ┃      ┃      ┃      ┃      ┃
┃サンプル┃      ┃ →→→ ┃      ┃     ┃
┃      ┃      ┃      ┃      ┃      ┃
┃      ┃サンプル┃      ┃      ┃サンプル┃

図にすると、このような感じになります(汚くなくてすいません)。

しかし、このcssも使用して適応前の特性も利用したいのです。
このようなわがままは可能なのでしょうか?


    
 ───────────────────────────────────────  ■題名 : Re:2つの特性を利用したい。  ■名前 : らら  ■日付 : 04/7/17(土) 21:16  ■Web : http://www.star-wish.com/user/hajimeteweb/  -------------------------------------------------------------------------
   おっしゃている意味はなんとなくわかりました。
でも
TD { vertical-align: top; }
を使わなければならない必然性がわかりません。
しかし、使用すべき理由があるのでしょう。

>このcssも使用して適応前の特性も利用したいのです。

つまりこのCSSを使用したい箇所もあれば、
そうではない前者の特性を利用したい箇所もあるということでしょうか?
もしそうならどちらが多いのでしょう?

TD と広範囲で指定するのではなくclass指定を使って
両者の特性を分けて見てはいかがでしょうか?

何か全然質問の意図とずれていたらゴメンナサイ。
 ───────────────────────────────────────  ■題名 : Re:2つの特性を利用したい。  ■名前 : 105  ■日付 : 04/7/17(土) 21:17  -------------------------------------------------------------------------
   ▼にゃ。さん:

>cssで以下を使用しています。
>TD { vertical-align: top; }

TDのボックス内の要素を上に揃えるという意味ですから
左TD内の「サンプル」という文字が上にきてしまうのは
しかたがないと思われます。

どういう状況で、こういうことをしたいのか
予想できないのですが

・ほとんどのTDは上に揃えたい
・特定のTDは中に揃えたい

ということでしたら、中に揃えたい<td>にだけクラス名をつけて
中揃えにするのが簡単かと思います。

どういう状況で、これを使うのかわかりませんので
書いていただいたサンプルに無理やり付け足しました。
実際のページを見せてもらえたら、もう少しスマートな
サンプルを提示してくれる人がいるかもしれません。

<style type="text/css">
<!--
td { vertical-align:top }
td.nakata { vertical-align:middle}
-->
</style>

<TABLE width="300" cellpadding="1" cellspacing="1">
<TBODY>
<TR>
<TD class="nakata">サンプル</TD>
<TD>
<br><br><br>
サンプル</TD>
</TR>
</TBODY>
</TABLE>

※クラス名は全然関係ない私の友人の名前です。
 ───────────────────────────────────────  ■題名 : Re:2つの特性を利用したい。  ■名前 : にゃ。  ■日付 : 04/7/18(日) 10:38  -------------------------------------------------------------------------
   おはようございます。

特定のTDは上に揃えたかったのです。
class指定知り、左側に適応させ左ののみ上に揃えました。
後、クラス名は変えました(笑)

本当にありがとうございました。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━    通常モードに戻る  ┃  INDEX  ┃  ≪前へ  │  次へ≫    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━                                 Page 711