CSSレイアウトでのimgへのスタイル付けについて。

締切済

質問者：big-high
質問日時：2008/01/10 17:52
回答数：4件

CSSレイアウトで<img>にスタイルを付ける時
<img src="image/xxx.gif" class="style">
と<img>自体に付けられる所をわざわざ<div>でくくり、
スタイル付けしているのをよく見かけるのですが何か理由があるのでしょうか？

テーブルレイアウトから移行段階ですのでわからないことがたくさんです。(x_x)
みなさまよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： Franju#2
回答日時：2008/05/10 21:50

IMGタグをDIVタグで括っている事は、スタイル付けに直接は関係ありません。

IMGタグにclass属性を指定し、スタイル付けを行うことは可能です。
何故、DIVタグなどで括るサイトが多いかというと「IMGタグはインライン要素であり、ブロック要素内に配置する仕様だから」です。

○仕様に準拠している
<body>
<div><img src="..." width="10" height="10" alt="any"/></div>
<p>ああああ</p>
</body>

×仕様に準拠していない
<body>
<img src="..." width="10" height="10" alt="any"/>
<p>ああああ</p>
</body>

冒頭にIMGタグにスタイル付けをすることは可能と書きましたが、以上を踏まえると「インライン要素としてのスタイル付け」が可能です。もし、ブロック要素としてのスタイル付けをおこなう場合には、過剰にDIVタグなどで括る必要はあります。
初心者様ということで簡潔に書いてみました。厳密に知る場合には、参考URLを参照していただくと良いかと思います。

参考URL：http://rikiy.jp/report/css/20070220.html

- 1
- 件

通報する

No.3

回答者： linecliche
回答日時：2008/01/11 10:40

あくまで推定ですが、Ajax系のライブラリをデザインの出来上がっている既存のサイトに導入するときには

そうなってしまうこともあるかな、と。特定の部分、例えばメニュー部分をスクロールとかフェードアウトとか
させたいときに、新規のDIVで括って、ライブラリで使うIDを振ったり・・・。

- 0
- 件

通報する

No.2

回答者： Nine-nine
回答日時：2008/01/10 19:51

たぶん、imgにclassやstyleを付けられることを知らない、「だけ」、だと。

同じような例で、tableにもdiv、ulにもdiv、pにもdiv……、spanにもdiv。div病・div厨と呼ばれています。

あと、tableレイアウトから、ｃｓｓ思想を理解しないで、形だけcssに移行した場合、１対１で全てにclassが付いていたり、よくあります。いわゆるチップスのソースをそのままコピペするだけなのでdivで括らなくてはならないと思い込んでいたりします。

ご質問でも、上手な使い方もあります。
<img src="image/xxx.gif" class="style">だと１つづつにつけなくてはいけません。
でも
<div class="style"><img src="image/xxx1.gif">とか<img src="image/xxx2.gif">や<img src="image/xxx3.gif">に見られる。</div>
なんてしていたら、
.style img{ホニャララ}
１つですみますね。あくまでhtmlは構造や固まりを考えてマークアップし、cssではそれをうまく生かすようにされている例もあります。

参考にしていいソースと、参考にすると、伝染病に掛かってしまうソースがありますので、今回のような、どうして？と思われることは伝染病に掛からないために非常に有意義です。ちゃんと意味を考えれば、そこdivになってるけど、imgが本来の意味だからimgに付け替えることは同じチップスを使っていてもできますよね。移行大変でしょうが、頑張ってください。