- 締切済み
画像文字 HTMLのつくり
HTML上に画像文字で表現する場合にタグの作りとして皆さんはどのようにされていますか？理由も記載頂くとありがたいです。 <img タグで書いて altにテキストの内容を記載 <img でtitle属性にテキストの内容を記載 <divなどのボックスを造りその中にテキストを記載し、CSSにて背景に画像文字を表示し、テキストは非表示にする。 等々
- muuming2001
- お礼率68% (708/1036)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- Proof4
- ベストアンサー率78% (151/192)
私の場合、基本的に文字を画像で表現するということをしません。アイコンフォントやCSSを使って表現することがほとんどです。 どうしても文字を画像で表現する必要性があるときは以下のようにすると思います。 imgタグで記述しaltに代替テキストを記載。あとはアクセシビリティ向上のため、role属性とaria-labelなどを付け加えるといったところでしょうか。 文字を画像で代替するときに最も気をつけねばならないことは、それが何を表すのか、仮に画像が表示されなくとも伝わるようにすることだと思っています。（これは文字を画像で代替したくない理由の一つでもあります。）これを考慮に入れて上記のような実装になります。
関連するQ&A
- スタイルシートの画像
質問させていただきます。 今悪戦苦闘しながらホームページを作成しているのですが HTMLで画像を表示するときにalt属性は書いたほうが良いと理解したのですが、 スタイルシートで背景画像を記述するにはどうやってalt 属性を記述したら良いのでしょうか？ 例えばHTMLに <div class="img"></div> CSSに div.img { background-image: url("○○.jpg"); width: 100px; height: 100px; } とするとどこにalt属性をいれたらよいのですか？ わかりづらくてすみませんが、ご回答よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- HTMLの文章中の画像のベースラインに下線を引くには
XHTML1.0 で下記のような文に対し, <a>～</a> のベースラインに下線を引きたいです。つまり img タグで表示する画像に下線を引きたいということです。 *************HTML*********************** これはテスト<a href="test"><img src="image.gif" width="20" height="33" class="middle" alt="1" /></a> です。 *************CSS************************ img.middle { vertical-align: middle; } **************************************** テキストだと下線が引かれますが、画像だと引かれないようです。 なお、下線は画像の下のふちではなく、テキストのベースラインに引きたいです。 CSS でどのような指定をしたら下線が引かれますか？
- 締切済み
- HTML
- [HTML][CSS] 画像の高さを揃えるには？
HTML、CSSの書き方について教えてください。 ブロック中に複数の画像を配置し、それらのアスペクト比を変えずに高さを揃えようとしています。 ベースとなるHTMLコードの例： <div class="photos"> <img class="photo" src="xxx1.jpg"> <img class="photo" src="xxx2.jpg"> <img class="photo" src="xxx3.jpg"> </div> やりたいこと： 要件1. <div>内の写真の数によって幅を固定させたい。 例：写真が3枚なら、1枚あたりの幅は3/画面幅。 要件2. <div>内の複数の写真を一番小さい高さの写真に揃えたい。 例：写真1の高さ200px、写真2の高さ250px、写真3の高さ100px →写真1~3の高さを100pxとしたい。 要件3. 要件1と2を満たしつつ、画像のアスペクト比は変えたくない。 →幅をベースとして高さを動的にトリミングしたい。 読み込んだポストによって幅や高さが変わるので、 css+JavaScriptというよりはHTMLタグに属性を直に書いてできると良い。 （<div style="xxxxx">とか<img style="yyyy">とか。） clip:rect()でできるのかもしれないのですが、座標の扱い(position:absolute;)とかがよくわからないです…。 なお、HTML内にて各画像の高さを取得する必要はありません。既に取得済の情報を使います。 何か良い案はありますでしょうか？
- ベストアンサー
- HTML
- ALT属性に見出しタグをつけると画像がズレます。
見出しタグをHTMLで製作後、画像とALT属性に採用すると 画像がずれてしまいます。 <img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> を <h2><img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> </h2> 以下のコーディングにすると画像がずれます。 HTMLバージョンは、DTD HTML 4.01 Transitional となります。 CSSなどで画像の位置固定をするのではなく、そのままHTML内で完結したいと考えています。 どのように変えれば良いでしょうか また、alignタグなどは、HTML4.01非推奨で使えません。 バグで探したのですが見付かりませんでした。 よろしくお願いします。
- ベストアンサー
- HTML
- イメージタグはタグで囲むべき？
CSSを使ってサイトを作成しています。 気になった事があったので質問させてください。 テキスト（文字）を入力する祭は、<p>～</p>・<div>～</div>等のタグで囲むかと思います。 <img src="" width="" height="" alt="" /> 上記のようなイメージタグは、<p>～</p>・<div>～</div>等で囲む必要はあるのでしょうか？ 囲まなくてはいけないものなのでしょうか？ <p>～</p>・<div>～</div>タグにスタイルをつけていなければ、 囲んでも囲まなくても表示は変わりませんが、HTML的というか文法的に囲むべきなのでしょうか？ ※<p>タグは「reset.css」で上下改行なしにしてあります。 宜しくお願いします。
- ベストアンサー
- CSS
- CSSで画像表示のやり方を教えてください
初めまして、ＣＳＳを少し勉強中なんですが、文字の背景に画像を張りたいんですがうまくいかないので教えていただけないでしょうか？ 今の状態はこんな感じです。 間違っていますか？ ＨＴＭＬファイル <TD colspan="3" width="609"><div class="menu1">aaaaaaaa</div></TD> CSSファイル div.menu1 { background-img : url(object.gif); } この二つのファイルを使っているんですが画像が表示されなくて困ってます。教えていただけるとうれしいです。 ご迷惑おかけしますがよろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- 画像に背景色と境界線を付けたい。
いつもお世話になります。 画像の周りに背景色その外側に線を引きたく思っています。 (1) <div style="border:solid 5px gray;padding:20px;background-color:lightcyan;" > <img src="**.jpg" alt="**"> </div> と、すれば可能ですが (2) <img src="**.jpg" alt="**" style="border:solid 5px gray;padding:20px;background-color:lightcyan;" > とすると境界線は表示されても背景色が表示されません。 (1)のように<div>タグを用いなくて、(2)のように<img>タグのみで(1)のようなことはできないものでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- ブラウザ上で「代替テキスト（alt）」を大きく表示したいのですが、どうすれば？？
ブラウザ上で「代替テキスト（alt）」を大きく表示したいのですが、どうすれば？？ HTMLタグの中で、画像の代替テキスト「alt」についての質問です。 <img src="△△△△" alt="○○○○○○">でコーディングさせた場合、ブラウザ上で表示される「○○○○○○」の代替テキストの文字の大きさを「大きく」したいんですが、何か方法はありますでしょうか？ スタイルシートで色々試そうとしたのですが、どうも上手くいかなくて困ってます… Windows XP、IE6.0でブラウザ確認してます。 HTML上、あるいはCSS上で制御したいと思っていますが、よろしくお願いします。
- 締切済み
- HTML
- HTMLについていくつか質問です。
調べてもいまいち納得のいかなかった疑問がいくつかあり、質問します。 １、空のdivが悪い、良くないとよく言われますが、どの解説見ても、理由もなしにグループ化のためのタグなのでルール違反やあり得ないと書かれているだけで、全く理解できません。 SEO的に問題があるとか、どの観点からどのようによくないのか理由を教えていただきたいです。 ２、<div id="" class="" >といったタグの例を見たのですが、これは単純に、すでにcssに設定されているidやclassを混合して使い、いちいち混合したcssを書かなくてよいために使われるのでしょうか。 ３、空のdivの問題に当たった切っ掛けなのですが、どうしても一括で背景を変えたいために、また自由度のためにcssで背景指定のみのdivを、例えば<div id="back" style="float:right; background-image:url(○○.jpg);"></div>をおいておきたいのですが、この場合どうしても空のdivができてしまします。 間に背景と同じ画像の<img >を入れるというのは無しででお願いします。 これは一括で背景を変えたいという目的もありますが、あとからdivの間に文字やリンクをいれるかもしれない（ずっと入れない可能性もある）ために、このような後のdivけん、今のデザインのための画像を置いておこうと考えています。 空のdivで納得するべきか、他のタグで代用できるでしょうか。 どれか１つでもお答えくださると助かります。 回答よろしくお願いします。
- ベストアンサー
- HTML
- HTMLの画像設置<img src="画像" alt="テキスト">
HTMLの画像設置<img src="画像" alt="テキスト">で、画像がエラーになったときに、altの代替えテキストが表示されますが、テキストではなくあらかじめ準備した「代替え画像」を表示させたいのですが可能でしょうか？ 調べてるのですが見つからず質問させていただきました。 宜しくお願い致します。
- ベストアンサー
- ブログ
お礼
ありがとうございます。 画像表示でしか無理なデザインをあげてくる人もたまにいるもんで質問させていただきました。