スタイルシートで背景画像を記述するにはどうやってalt属性を記述したら良いか

このQ&Aのポイント
  • スタイルシートで背景画像を表示する際には、alt属性を使うことはできません。
  • alt属性はHTMLのimg要素で使用され、画像が表示されない場合やスクリーンリーダーが利用される場合に代替テキストとして表示されます。
  • スタイルシートの背景画像は装飾的な要素であり、ページの内容に関わるものではないため、alt属性は必要ありません。
回答を見る
  • ベストアンサー

スタイルシートの画像

質問させていただきます。 今悪戦苦闘しながらホームページを作成しているのですが HTMLで画像を表示するときにalt属性は書いたほうが良いと理解したのですが、 スタイルシートで背景画像を記述するにはどうやってalt 属性を記述したら良いのでしょうか? 例えばHTMLに <div class="img"></div> CSSに div.img { background-image: url("○○.jpg"); width: 100px; height: 100px; } とするとどこにalt属性をいれたらよいのですか? わかりづらくてすみませんが、ご回答よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.1

背景に代替テキストってあんまり聞いたことないですね。 実際background-imageプロパティの値にaltはありません。 背景はコンテンツに影響しない(リンクでも空要素でもない)ので表示されなくても特に問題はない。 alt属性はあくまで非グラフィカルブラウザ向けの「代替テキスト」ですからね。 つまり、必要ないってことになります。 で、それでも強引にツールチップを表示したいというのなら、title属性で一応可能です。 もっともtitle属性は「補助的情報」なのでalt属性の本来の目的からは大きく外れますが。 div.img { background-image: url("○○.jpg"); width: 100px; height: 100px; } <div class="img" title="なんたらかんたら"></div>

moonzv
質問者

お礼

torayoshiさん回答ありがとうございます。 >alt属性はあくまで非グラフィカルブラウザ向けの「代替テキスト」ですからね。 よく分かりました。背景はあくまで背景ということですよね。 アクセスアップにつながるような画像はCSSに記述せずHTMLに入れたほうが良いのですね。 なんでもかんでもCSS!という考えが間違ってました。 お忙しい所ありがとうございました。

関連するQ&A

  • スタイルシートに関して

    最近、スタイルシートの勉強を始めました。 下記の様なCSS,HTMLを作成しブラウザーで表示するとIEは意図通りに IE以外(FireFox,Opera等)ではIEと違う(意図と異なる)表示になり 悩んでいます。 表示したい内容 黒いベース(300px,300px)の上に紫の四角(200px,200px)、さらにその上に緑の四角(100px,100px)を配置したい。 配置は、ブラウザーの左上隅より中心を上から150px,左から150pxとし3つ共に中心を合わせる。 IEでは、意図通りに表示 IE以外では、上にスペースが空き、各boxの表示位置が上にずれている CSS .box0 { width:300px; height:300px; background-color:#000000; } .box1 { margin-top:50px; margin-left:50px; width:200px; height:200px; background-color:#ff00ff; } .box2 { margin-top:50px; margin-left:50px; width:100px; height:100px; background-color:#00ff00; } HTML <BODY> <div class="box0"> <div class="box1"> <div class="box2"> </div> </div> </div> </body> *内容が悪いよとかCSSではできないよなどご意見・アドバイス頂ければ幸いです。

    • ベストアンサー
    • HTML
  • HTML CSSを、教えてください。

    お世話になります。 HTMLを始めたばかりで、 超初心者ですので、ご教授いただけたらと思います。 以下の図のような感じに並べたいです。 バックグラウンドには、青色。 赤と緑の部分は、画像配置、 また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。 ただ、オレンジのボタン配置の仕方が、 なかなか出来ずにいます。 以下のHTMLとCSSには、 オレンジのボタンを入れずに、まず配置をしてみましたが…。 ただ、やはり右の緑の画像が、崩れてしまう感じも…。 オレンジのボタンを入れていただいた形で、 お願いできないでしょうか? (オレンジ画像 width=100 height=50 でお願いします。) 【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; }

    • 締切済み
    • CSS
  • テーブルの形に沿って画像を作り、貼り付けたら見るブラウザによって余白が生じる。

    現在、角丸テーブルを使ってWebページを作っておりまして 角丸部分の形に沿って画像をつくり、貼り付けているのですが、保存しアップしてみると IEでは自分が作ったように見れるのにOperaとFireFoxでは上部分に余白が生じます。 どのようにしたら、余白を無くせるでしょうか? テーブル部分とその部分のタグはこのようになっています <div align="center"> <div style="width:750"> <div class="kado"> <div class="kado1">-</div> <div class="kado2">-</div> <div class="kado3">-</div> <div class="kado4">-</div></div> <div class="kado5"> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="TitleTable"> <tr valign="top" style="position:relative; top:-4;"> <td width="5" colspan="4"> <img src="./img/TitleSpace-Left.png" width="5" height="41" alt="TitleSpace"></td> <td width="183"> <img src="./img/Title2.png" width="183" height="41" alt="Title"></td> <td width="557"> <img src="./img/TitleSpace.png" width="557" height="41" alt="Title" ></td> <td width="5"> <img src="./img/TitleSpace-Right.png" width="5" height="41" alt="TitleSpace"></td></tr> </table> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="MenuTable"> <tr style="position:relative; top:-4;"> <td width="33"> <a href="index.htm" target="_self"><img src="./img/HomeIcon.png" width="33" height="25" border="0" alt="ReturnHome"> </a> </td> <td><br></td> </tr> </table> </div> <div class="kado"> <div class="kado4">-</div> <div class="kado3">-</div> <div class="kado2">-</div> <div class="kado1">-</div> </div> </div> </div> 外部読み込みでこの角丸にするためのCSSもいれてます <!-- .kado { background: ./img/wall.png; } .kado1 { margin: 0 5px;height:1px;overflow: hidden; background-color:#fff; } .kado2 { margin: 0 3px;height:1px;overflow: hidden; background-color:#fff; } .kado3 { margin: 0 2px;height:1px;overflow: hidden; background-color:#fff; } .kado4 { margin: 0 1px;height:1px;overflow: hidden; background-color:#fff; } .kado5 { margin:0px; padding:0px; background-color:#fff; } --> おそらく何かがおかしいとは思うのですが、よくわかりません。 下らない質問だとは思いますが、回答の程お願いします。 そのWebページのURIも乗っけておきます。 http://wing2.jp/~movie_village/index2.htm

    • ベストアンサー
    • CSS
  • 写真の上0pxにタイトルバーをhtmlで作りたい

    HTMLで写真の真上にhtmlで作った色付き棒の中に文字を表現したいです。 それを3列ずつ複数行作成したいです。 ・写真と写真の横幅の間は30pxあける。 ・上下は50pxあける。 ・ウインドウ幅の中央に常に表示 ・ウインドウが写真よりも狭くなってもレイアウトが崩れない このようにしたいと思って、自分で作ってみましたが、 まったくうまくできませんでした。 どのようにすればいいのか教えて下さい。 よろしくお願いいたします。 ~~~~~~ HTML ~~~~~~~ <link href="aa.css" rel="stylesheet" type="text/css" /> <div class="aaa"><!-- と汎用ブロックで囲んで --> <div class="bbb">いのしし<div> <div class="bbb">たつ<div> <a href="" ><img src="" alt="" width="350" height="270" /></a> <a href="" ><img src="" alt="" width="350" height="270" /></a> <div class="ccc">うさぎ<div> <div class="ccc">とら<div> <div class="ccc">たぬき<div> <a href="" ><img src="" alt="" width="232" height="166" /></a> <a href="" ><img src="" alt="" width="232" height="166" /></a> <a href="" ><img src="" alt="" width="232" height="166" /></a> </div> ~~~~~~ CSS ~~~~~~~ @charset "Shift_JIS"; a img{ border:none; } div.aaa{ margin-top:0px; width:760px; margin-left:auto; margin-right:auto; text-align:center; } div.bbb{ background-color: #ffcc66; width: 350px; height: 30px; } div.ccc{ background-color: #ffcc66; width: 232px; height: 30px; font-size: 20px; font-color: }

    • ベストアンサー
    • HTML
  • 外部スタイルシートは同じなのですが…

    こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記/// <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div>  ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス/設備</h2> ○○○徒歩3分<br /> 駐車場2台(バリアフリー)<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright &copy; 2007 All Rights Reserved</div> </div> </body> CSSは下記/// * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか? リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • cssで、imgタグに、背景画像を敷きたい

    cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 <HTML> <div id="hoge"> <img src~ <CSS> #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ? width:? height:? margin:? padding:?; <影の大きさ> ・width400px ・height200px <写真のサイズ指定> ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • スタイルシートでのデザイン

    HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。

    • ベストアンサー
    • CSS
  • スタイルシートは難しい、、、

    テーブルデザインよりスタイルシートに挑戦しているものです。 素人なりに下記のソースを作成してみたのですがもっとスマートなソースはどのようなものになりますか? 作りたいものは三枚の画像を使い上部、中部、下部で 一つのわくのなかに文字(この場合h1、h2、p要素)を表示させたいです。しかしこの場合、それぞれの要素にマージンを指定しないと画像の先端と重なってしまいます。divに空きを指定すると背景画像で指定した中部がずれてしまいました、、、 <div class="test"> <img src="top.gif" height="30" width="500" alt=""><BR> <h1>あいうえお</h1> <h2>あいうえお</h2> <h3>あいうえお</h3> <p>あいうえお</p> <p>あいうえお</p> <img src="bottom.gif" height="30" width="500" alt=""></div> .test { width:500px; background-image: url(middle.gif); background-repeat:repeat-y; }

  • 背景画像上に複数枚の画像配置について

    お世話になります。 まだまだcss勉強中なので教えて頂きたいことがございます。 1枚の背景画像に対し、別箇所にマウスオーバー時のみ表示されるように複数枚画像を配置し、そのマウスオーバー用の複数枚の画像にリンクタグをつけて、別ページへのリンクを貼りたいのです。 しかし、ネットで調べた方法ですと、うまくマウスオーバーが反映されず 余計な画像も出てきてしまいます。 おそらく間違ったcssを記述していると思うので ご指摘いただけると助かります。 -------------------------------------------------------------- 【html】 <div class="demo"> <div class="demo1"><a href="#"></a></div> <div class="demo2"><a href="#"></a></div> <div class="demo3"><a href="#"></a></div> <div class="demo4"><a href="#"></a></div> <div class="demo5"><a href="#"></a></div> </div> 【css】 .demo { background: url("../img/imgbg.jpg") no-repeat; display: block; width: 800px; height: 1108px; } .demo1 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo1 a:hover { background-image: url("../img/img1.png"); position:relative; top:475px; left:635px; display:block; } .demo2 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo2 a:hover { background-image: url("../img/img2.png"); position:relative; top:469px; left:480px; display:block; } .demo3 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo3 a:hover { background-image: url("../img/img3.png"); position:relative; top:477px; left:322px; display:block; } .demo4 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo4 a:hover { background-image: url("../img/im4.png"); position:relative; top:477px; left:167px; display:block; } .demo5 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo5 a:hover { background-image: url("../img/img5.png"); position:relative; top:477px; left:10px; display:block; } -------------------------------------------------------------- a のクラスの時に背景画像を指定しなくても良いんじゃないかと思い 消してみたら画像が表示されなくなってしまったので そのまま記載しています。 上記の記述のままですと、マウスオーバーが正しく反応しないですし マウスオーバー時に別箇所に背景画像が表示されてしまいます。 やりたいことは画像にしましたのでご確認ください 黒○は背景画像内にある形で、その上に同じ形の赤○を マウスオーバー時の画像として表示したいです。 (図が下手ですみません) わかる方、ご教示をお願いします。

    • 締切済み
    • CSS
  • 画像をランダムで切り替える

    以下の携帯サイト(18禁です)についての質問なのですが http://newm.tv/ TOPの画像がランダムに切り替わっているのですが どのように切り替えているのでしょうか?? ソースを調べたところ <div class="logo"> <img alt="logo" src="/img/logoimage/x.jpg" width="220" height="70"></div> で画像を呼び出しているようなのでCSSを みたのですが"logo"のCSSには .logo{background-color:#000;} としか記述されていなくて分かりませんでした。 どなたかどのように携帯サイトで画像をランダムに切り替えることが できるのかご存知の方がいましたらご教示宜しくお願いします<(_ _)>

    • ベストアンサー
    • PHP

専門家に質問してみよう