- ベストアンサー
こういった事がしたいのですが...（3）
http://oshiete1.goo.ne.jp/qa4915298.html おかげさまで対処でき嬉しく思ってるのですが、 少し気になった事があるので分かる方がいらっしゃれば宜しくお願いします。 先の質問でwidth="100" height="100"となっている画像を width="50" height="50"にすると左にスペースが出てしまい 詰める事がどうしてもできません。 こういった場合私はmarginを使用する以外の考えが思いつかないのですがいかがでしょうか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
http://oshiete1.goo.ne.jp/qa4915298.html 上記で、今お悩みの元となっているサンプル版を回答をさせて頂いた者です。 うーん…正直、質問者様はCSSによるああいったレイアウトを使いこなせる段階では未だない様ですね。 あのサンプルのソースが「何をどうしているのか」がちゃんと理解できていれば、 > 先の質問でwidth="100" height="100"となっている画像をwidth="50" height="50"にすると左にスペースが出てしまい こういう疑問は持たずに解決できる筈ですので。 一応、サンプルを提供した者として上記の回答をしておきますが、サンプルでは、以下の仮定条件の元で作成してあります： (1) ボックス全体（点線で囲まれた部分）の幅は500px (2) ボックスの内側には上下左右10pxの余白をとる (3) 画像の幅は100pxで常に一定（高さは任意でもかまわない） (4) 画像とテキストの間にも10pxの余白をとる (5) (1)の幅-(2)の左右余白-(3)の幅-(4)の左右余白=370pxなので、テキストの描画領域の幅は370pxで決め打ち（高さは任意） 質問者様が今回変更されたのは、画像の幅です。という事は(3)で100pxの描画領域を確保したスタイルを、50pxに変更しなければなりません。とすると、全体のボックス(1)の幅が500pxと決まっていて不変でないなら、差分の50pxを(5)のテキストの描画領域に「足して」合計を合わせる必要があります。 > こういった場合私はmarginを使用する以外の考えが思いつかないのですが 残念ですが、あのサンプルで画像やテキストのスタイルにmarginを与える（div.hoge p {～}にmarginプロパティを追加する）と、その時点でIEではせっかく垂直方向に中央揃えになっていたレイアウトは崩れます（それを追加する事でdisplayがインラインの性質を保てなくなります）し、他のdisplay: table-cell;が有効なブラウザ上では、「table-cellという性質にはマージンは持ち得ない」ので、無効、何の変化も起こりません。 こういう理由があるから、画像とテキストの余白の調整にmarginは使わず（paddingも使わないのにも意味があります。説明は省きますが。）、画像を描画する領域に実際の画像の幅よりも左右に10px多い120pxというwidthを与えた上で、左右の余白が均等になる様に画像をセンタリングさせているのです。 理屈をわかろうとする努力をしなければ、いくらここでサンプルを得られても、それを正しく応用する事はできないでしょう。 理屈が理解できる様になるまでは、ANo.1様のおっしゃる通り、tableでレイアウトされた方が良いかもしれません。マークアップ的にもこの内容ならテーブルを使っても許容範囲の様にも思われますし。
その他の回答 (1)
- nori_007
- ベストアンサー率35% (369/1048)
厳しい意見になりますが、ご自身で対処出来ないので有れば、素直に table タグを利用する事をお勧めします。 以下のサンプルは如何でしょうか。 解りやすくするようにバックグランドに色を入れています。 画像の幅が、100px と 50px の場合は、class を使い分けてください。 画像の幅が 100px の場合 class="w100" を指定 画像の幅が 50px の場合 class="w50" を指定 余りスマートでは有りませんが、必要に応じて class を作るのが簡単だと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>テスト</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- table { background-color: #FFE; } .photo { vertical-align: middle; width: 140px; } .w100 { margin: 0 20px; } .w50 { margin: 0 70px; } .caption { vertical-align: middle; width: 400px; padding: 10px; text-align: left; } --> </style> </head> <body> <table border="0" summary="表の説明"> <tr> <td class="photo"> <img src="./images/photo1.jpg" alt="画像の説明" width="100" height="100" class="w100"> </td> <td class="caption"> <p>ここに説明文を入れる。ここに説明文を入れる。ここに説明文を入れる。ここに説明文を入れる。ここに説明文を入れる。ここに説明文を入れる。ここに説明文を入れる。ここに説明文を入れる。ここに説明文を入れる。ここに説明文を入れる。</p> </td> </tr> </table> </body> </html> 参考にしてみてください。 後はご自身で学んでください。
お礼
＞厳しい意見になりますが、 いえいえ全く厳しくないです。 CSS深いです。 今回はどうしてもテーブルタグ以外で成功させたかったのですが 根本的に勉強不足でした。 ご回答のようにテーブルを使うかもしれません。 ありがとうございました。
お礼
CSSがこんなに難しいなんて思いませんでした。 ソフトがサクサク作ってくれるので慢心してました... とは言え頂いた言葉でなんとかなりそうな兆しが見えました。 再三に渡りお世話になりました。