画像の一括指定について

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： 彩 ： 2005/02/24 16:50
初めまして☆
TAG indexさんにはいつもお世話になっております。
初めて投稿させて頂きます!!

わたしが現在作っているページには、
横幅・高さが同じサイズで絵柄が違う画像を３種類、
テキストの頭に置いて、ワンポイントとして使用しています。
それぞれの画像のタグは↓の通りに記述しています。

<img src="image/point_mark01.gif" width="19" height="17" align="absmiddle" hspace="5" border="0">
<img src="image/point_mark02.gif" width="19" height="17" align="absmiddle" hspace="5" border="0">
<img src="image/point_mark03.gif" width="19" height="17" align="absmiddle" hspace="5" border="0">

これをスタイルシートで一括に指定したいと思い、下記のように記述してみましたが
うまくできませんでした…。

img {width:19px;
height:17px;
vertical-align:middle;
border:0px;}

imgタグにはスタイルシートは使う事は不可能でしょうか??
可能であれば、記述方法を教えて頂きたいと思います。
また『hspace="5"』の部分をスタイルシートではどのような書き方をするのか??

ご存知の方がおられましたらアドバイス等お願いします!!
説明不足でしたらすみません…。



1   名前： カヅサツ ： 2005/02/24 17:14
img要素の align属性に、absmiddle という値は公式の HTML の文法には存在しません
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/objects.html#adef-align-IMG

> また『hspace="5"』の部分をスタイルシートではどのような書き方をするのか??

marginプロパティです。

あと、img要素の alt属性は省略できないので注意しましょう（代替テキストがない場合は、空にする必要があります）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-style-type" content="text/css">
<title></title>
<style type="text/css">
body{
font-size: xx-small;
}
img{
width: 19px;
height: 17px;
vertical-align: middle;
margin: 5px;
}
li.mark01{
list-style-image: url("image/point_mark01.gif");
}
li.mark02{
list-style-image: url("image/point_mark02.gif");
}
li.mark03{
list-style-image: url("image/point_mark03.gif");
}
</style>
</head>
<body>
<h1>段落</h1>
<p><img src="image/point_mark01.gif" alt="">段落</p>
<p><img src="image/point_mark02.gif" alt="">段落</p>
<p><img src="image/point_mark03.gif" alt="">段落</p>
<h1>箇条書き</h1>
<ul>
<li class="mark01">箇条書き</li>
<li class="mark02">箇条書き</li>
<li class="mark03">箇条書き</li>
</ul>
</body>
</html>
2   名前： カヅサツ ： 2005/02/24 17:19
あ。こうせんと vertical-align の検証にならへん。

font-size: xx-small;
↓
font-size: xx-large;
3   名前： 彩 ： 2005/02/25 18:28
カズサツさん、お返事ありがとうございました☆
早速、教えて下さったタグを参考にさせて頂きました。
ソースがかなりスッキリして嬉しいです!!

ただ一つ疑問が…
>img要素の align属性に、absmiddle という値は公式の HTML の文法には存在しません
↑この事についてですが、以前、わたしが購入したHTMLの本には、

『img要素にalign="middle"を指定してもwinのIEで表示すると、
文字列のベースラインが画像の中央に揃います。
画像の中央に文字列を揃えるには、align属性でabsmiddleを指定する。』

と記載されており、'absmiddle'について特に注意書きは書いてありませんでした。
確かに'middle'だったら小さな画像の場合、文字列は中央に表示されません…。
わたしは小さな画像をよく使うので、ほとんど'absmiddle'を指定しています。
公式な文法じゃないって事は、やっぱり使わない方が良いんですよね??

'middle'で文字列が揃わない場合は、どういう指定が一番良いのでしょうか？
お手数ですがアドバイス等頂ければ嬉しいです…。
宜しくお願い致します!!

※ちなみにわたしが購入したHTMLの本は↓こちらです。
http://www.x-media.co.jp/xbook/index.cfm?ID=71



4   名前： phpinfo() ： 2005/02/25 20:35   ［URL］
たぶんそのHTML指南書が間違っています。

今出回っているHTML指南書の中には、うそを書いている物が多く、ひどい指南書
になると、「<br>はそのまま改行し、<p>は一行開けて改行される」「<h*>は文字の大きさを
指定するもの」という事までかいてあるんだとか・・・
5   名前： カヅサツ ： 2005/02/25 20:44
> 'middle'で文字列が揃わない場合は、どういう指定が一番良いのでしょうか？

まず、「見栄え」に関する要素・属性は使わないようにし、原則的にスタイルシートを使うようにしましょう。

例えば、文字の一部を赤くして強調したいとします。

「強調」は em要素ですが、特に指定がないと、IEは斜体にして表示します。つまり、IEは、特に希望がなければ斜体にすることで「強調」を表現するのです。

そして、各要素の見栄えに関する指定をスタイルシートで行います。以下の例では、「強調（すなわち em）」を赤くして、斜体にしてしまうIEのために、普通の字体に戻す指定をしています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
em{
color: red;
font-style: normal;
}
</style>
</head>
<body>
<p>文字列の一部を<em>強調</em>しますよ<em>強調！</em></p>
</body>
</html>

つまり、「強調(em)」や「見出し(h1)」、「引用(q あるいは blockquote)」などの「意味のある要素」を使い、font や align などの「見栄えのための要素・属性」は使わない方が良いということです。
字数オーバーのため続く。
6   名前： カヅサツ ： 2005/02/25 20:45
で、align="absmiddle" の代用ですが、スタイルシートでは vertical-align: middle; が案配良いのではないかと思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
body{
font-size: x-small;
}
img{
width: 19px;
height: 17px;
}
img#test2{
vertical-align: middle;
}
</style>
</head>
<body>
<p><img src="image/point_mark01.gif" id="test1" align="absmiddle" alt="">段落</p>
<p><img src="image/point_mark01.gif" id="test2" alt="">段落</p>
</body>
</html>
7   名前： 彩 ： 2005/02/26 01:07
こんばんわ☆☆

■phpinfo()さんぇ
マジですかッ!?かなりいい加減な実情なんですね…(￣０￣;
こちらのサイト様に出会うまでは、本だけを頼りにHP作成してたので、かなりショクです…

■カヅサツさんぇ
めっちゃくちゃ丁寧にアドバイスして下さって本当にありがとうございます!!（感涙☆
これからは'vertical-align: middle;'を使っていきたいと思います★
と、その前にスタイルシートについてもっともっと勉強しなくてわっ（>_<）

本当に色々とお世話になりました♪
また自分では解決しきれない事があったら、投稿させて頂くかもしれませんが
そのさいはどうぞ宜しくお願いします☆☆



一覧へ戻る