HTML4.01 strict と transitional における画像余白？の差異（解決編）

2006/06/22

(6)

テーマ：Web標準(117)

カテゴリ：Web標準対応 - レイアウト実践

Web標準の教科書
２冊目にピッタリのレベル。
分厚いんだけどね、罫線に助けられる。
手放せない私のバイブル。

HTMLポケットリファレンス改訂第5版
ちょっとだけタグを覚えたら
もっと沢山知りたくなるね。
ポケットサイズでパソコン周りに置いてもお邪魔ムシにならないの。

謎の余白、解決しました。

ブログの繋がりって素晴らしい

昨日のコメント、見て！見てぇ～
面白い気付きや、こんな感じでどうかな？とか
本当に助かりました。

display: block が救世主でしたよ！
画像の隙間でお悩みの方
昨日の記事と今日の記事は役に立つと思いますよ。

ちょいとソースをペッタンコと貼り付けておきます。
こうしておくと、あとで使えて私としてもとっても役に立つんですよ！
アクセス数もちょっぴり増えたし
クリック数の割りに成約率がちょっとだけ良かったり
いいことだらけです。

▲スタイルシートは本来、外部ファイルにしたほうがいいんだけど
　テストってことで、ヘッダ内に書いてます<(_ _)>

そして、ちょっと使えそうなメニューボタンを作ってみました。
こういう風につかうと実用的ね。

▲出来上がりイメージ
▼メニューボタンのソースの例

<!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=Shift_JIS">
<title>画像余白回避テスト</title>
<style type="text/css">

</style>
</head>
<body>
<a href="index.html">
<img src="home.gif" alt="ホーム" width="100" height="20">
</a>
<a href="prof/index.html">
<img src="prof.gif" alt="プロフィール" width="100" height="20">
</a>
<a href="blog/index.html">
<img src="blog.gif" alt="ブログ" width="100" height="20">
</a>
<a href="gallary/index.html">
<img src="gallary.gif" alt="ギャラリー" width="100" height="20">
</a>
<a href="sitemap.html">
<img src="sitemap.gif" alt="サイトマップ" width="100" height="20">
</a>
</body>
</html>

▲こちらも同じく、ヘッダ内でスタイルを設定しています。

BR要素を使わなくても、ちゃんと改行して見えていますね。
凄いですね～