- 締切済み
CSSレイアウトでのimgへのスタイル付けについて。
CSSレイアウトで<img>にスタイルを付ける時 <img src="image/xxx.gif" class="style"> と<img>自体に付けられる所をわざわざ<div>でくくり、 スタイル付けしているのをよく見かけるのですが何か理由があるのでしょうか？ テーブルレイアウトから移行段階ですのでわからないことがたくさんです。(x_x) みなさまよろしくお願いします。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
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を参照していただくと良いかと思います。
- linecliche
- ベストアンサー率66% (2/3)
あくまで推定ですが、Ajax系のライブラリをデザインの出来上がっている既存のサイトに導入するときには そうなってしまうこともあるかな、と。特定の部分、例えばメニュー部分をスクロールとかフェードアウトとか させたいときに、新規のDIVで括って、ライブラリで使うIDを振ったり・・・。
- Nine-nine
- ベストアンサー率49% (25/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に付け替えることは同じチップスを使っていてもできますよね。移行大変でしょうが、頑張ってください。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
何かの理由があるからそうしてるのでは？ 作った本人に聞いて下さい。
