いや、いいんですけどね 2004-3-9
id:sugio:20040308について。
私は、「?DのHTMLはどうでもいいや」派なので、余計なおせっかいだと思うんですけど、一応(^^;
画像をテーブル要素でレイアウトする際に嫌われる理由は、
- 本来の用途と違う
- アクセシビリティが何たら
- 「ダメじゃん」とか言ってみたい(笑)
等が一般的だと思うのです。
で、これを避けるために、ulリスト+CSSでレイアウトしたとして、3つめの理由しかクリアしていないような・・・。
できれば、リストではなく、div要素あたりを使ってクリアした方がカコイイとか思います。
例)
div.rakugo {
background-image: url("http://d.hatena.ne.jp/images/diary/sugio/0303-02-21.gif ");
background-repeat: repeat-x;
width: 100%;
text-align: center;
margin: 0;
padding: 0;
border-bottom: solid 2px black;
}
div.rakugo div.rakugo_item {
display:inline;
width: 19%;
margin: 0;
padding: 0;
}
HTML
<p>hogehoge</p>
<div class="rakugo">
<div class="rakugo_item">
<img height="67" border="0" src="http://d.hatena.ne.jp/images/diary/sugio/0303-02-22.gif" width="58" alt="pic1">
</div>
<div class="rakugo_item">
<img height="67" border="0" src="http://d.hatena.ne.jp/images/diary/sugio/0303-02-23.gif" width="52" alt="pic2">
</div>
<div class="rakugo_item">
<img height="67" border="0" src="http://d.hatena.ne.jp/images/diary/sugio/0303-02-26.gif" alt="pic3">
</div>
<div class="rakugo_item">
<img height="67" border="0" src="http://d.hatena.ne.jp/images/diary/sugio/0303-02-24.gif" width="58" alt="pic4">
</div>
<div class="rakugo_item">
<img height="67" border="0" src="http://d.hatena.ne.jp/images/diary/sugio/0303-02-25.gif" width="58" alt="pic5">
</div>
</div>
<p>hugahuga</p>
とか。(IMGタグのalt属性は、テキトーっす)
私、なんか勘違いしてます? ＞ 「教えて『おま訳』ダイアリー」
蛇足かもしれませんが、「text-align: center」は、ブロック要素でのみ有効です。
「text-align: center」は親要素で、「display:inline;」は子供要素で指定するのが、“もあべたー”だと思います(^^) (モジラ系ブラウザで確認してみてください)
追記 12:30くらい
そういえば、widthプロパティも、置き換えインライン要素には効かないのでした・・・。
子供要素の「witdh: 19%」は、本来無効ですね(汗;
実際、もじらでは無視されるようです(:o;)
P.S.
chepookaさんに迷惑かけたくないので、過去日記にこそっと書いときます。
「秘してこそ花」ということで(^^;
