852105 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

Web標準にアプローチ 〔まいまいのお宿。〕

2006/06/22
XML
テーマ:Web標準(109)

Web標準の教科書
2冊目にピッタリのレベル。
分厚いんだけどね、罫線に助けられる。
手放せない私のバイブル。
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">
<!--
img {
display: block;
border: none;
}
-->
</style>
</head>
<body>
<img src="rose_s.jpg" width="120" height="120">
<img src="rose_s.jpg" width="120" height="120">
</body>
</html>
▲スタイルシートは本来、外部ファイルにしたほうがいいんだけど
  テストってことで、ヘッダ内に書いてます<(_ _)>


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

メニュー
▲出来上がりイメージ
▼メニューボタンのソースの例
<!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">
<!--
img {
display: block;
border: none;
}
-->
</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要素を使わなくても、ちゃんと改行して見えていますね。
凄いですね~

・・・・・つづく

四葉のクローバー探しのいえもん
【簡易テーブルタグ作成ツール】
[Pit-Design]Webのツール素材置き場のVer1、Ver2をよろしくね。


* HOME *

テストで使ったボタンの素材です。
持って行ってもOKですよん^^

HOME PROFILE BLOG
GALLARY SITEMAP

↑ クリックしてもリンクしていません(笑) ↑
人気blogランキング






最終更新日  2006/06/22 05:50:46 PM
コメント(6) | コメントを書く
[Web標準対応 - レイアウト実践] カテゴリの最新記事



Copyright (c) 1997-2020 Rakuten, Inc. All Rights Reserved.