CSSとHTMLでHPを作成しているのですが、下記CSSの部分でheaderにalt="" と title="" を入れる事は出来るのでしょうか?
問題の記述は下記の通りです。
/*ヘッダー*/
div#header{background-image: url(http://www.hogehoge.com/header1.jpg);
padding: 28px 18px 42px}
HTMLだけでしたら簡単に出来たのですが、CSS+HTML、しかもCSS部分に記載しているimgファイルなので、どうしたら良いのか判りません。
上記の件、ご指導願いたく思います。
宜しくお願い致します。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
……えーと、なぜ単なる背景の画像にタイトルやら代替テキストやらが必要なのでしょうか?
CSS で設定できる項目は、修飾する HTML ページの文書構造自体には一切関係しない、単なる見た目等に関する事柄だけに限られます。つまり、その CSS で設定する背景画像は、ページに書かれた内容を読みに来た人にとってはどうでもいいことです。
一方、画像のタイトルや代替テキストはその画像が HTML ページでどのような意味を持つかを示すものです。つまり、ある画像にタイトルや代替テキストを設定したいという事は、その画像はそのページにとって必要不可欠なものという事を表します。
したがって、背景画像にタイトルや代替テキストを付けたいというのはありえないはずなんです。
というか、
> HTMLだけでしたら簡単に出来たのですが
とのことですが、ひょっとしてそれは以下のようなものでしょうか?
<div class="header" background="http://www.hogehoge.com/header1.jpg" title="うんたら" alt="かんたら">...(中略)...</div>
でしたらその title や alt は背景画像のものではなく div そのものに対する記述です。
すみませんが、画像を背景に置いて、なおかつその画像にタイトル等をつけたいと思った理由や事情について補足願います。
また、「HTML だけ」で書いた内容が上記と異なるならば、具体的にどのように書いたかも補足願います。
No.2
- 回答日時:
ウェブページをHTMLを使用して作られているという事ですね。
(ホームだけじゃなく)⇒ホームページ - Wikipedia( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC% … )
HTML/CSSと文書構造とプレゼンテーションを分離する事は最初の基本です。
⇒2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
すなわち、HTMLには文書構造だけを記述して、それをどのように表現(プレゼンテーション)するかはスタイルシートで行ないます。
画像にaltをつけなければならないのは、画像がレンダリングできないユーザーエージェントに対してそれに変わる情報を提供するためです。
⇒alt( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
背景画像はあくまでプレゼンテーションで、文書の主要なコンテンツではありませんから、代替テキストの必要はありません。
title属性は画像(IMG)要素やオブジェクト(OBJECT)要素、フォームなど限られた要素の属性で、titleはほぼ同じ目的+情報の補足でより広い要素に使用出来る属性です。
以前のHTMLでは持ちうる要素が限られていましたが、HTML5ではグローバル属性となりすべての要素に使用可能になります。・・・よって、altと併用することは少ないでしょう。
>HTMLだけでしたら簡単に出来たのですが、
div要素にaltは使えませんからできないはずです。
No.3
- 回答日時:
画像には前景/背景の二種類が存在します。
img要素は前景、background-imageは背景です。
前景は「コンテンツとしてなくてはならないもの」なので画像が非表示であっても代替テキストを表示する仕組みになっています。
背景は「コンテンツとしてはなくてもいいもの」であり、前景に表示されているコンテンツと背景を重ねて表示する事で背景が表示されなくても問題ない仕組みになっています。
従って背景には代替テキストそのものが不要です。
そもそも、代替テキストを表示したら前景に表示されているコンテンツと重なって見づらくなるはずです。
もし、あなたが背景を前景としての機能を期待している(コンテンツを空にして背景にコンテンツとしての意味を求めている)のなら実装法が誤りですのでimg要素に変更してください。
<div style="background-image: url(http://www.hogehoge.com/header1.jpg)"></div>
これは画像非表示にしたり、CSSを無効化すればコンテンツが見えなくなります。
背景は次のように使います。
<div style="background-image: url(http://www.hogehoge.com/header1.jpg)">ここにコンテンツを書く</div>
背景画像がなくてもコンテンツは表示されているので問題ありません。
# Re: pekochan18さん
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS サルワカさんの吹き出しのスタイルシートについて。 https://saruwakakun.com/h 2 2022/10/28 22:55
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
WEB上でディレクトリ内の画像を...
-
particles.jsの背景の上にテキ...
-
CSSでテキストのリストの・...
-
【至急お助け!】チェックボッ...
-
CSSのリスト 背景画像が表示さ...
-
IEで<div>の下の<img>がずれる
-
ホームページ背景の、透過率設...
-
インラインフレームでの背景画...
-
HTML・CSSコーディングが上手く...
-
ページごとに背景画像を変更し...
-
文字列の下に点線を出す
-
テーブルセルの背景画像のサイ...
-
背景画像をくりかえさないhtml
-
テキストの横にアイコンを並べたい
-
テキストのフェードインの方法
-
CSSで背景画像の比率保持、拡大...
-
見出しの複数行の対応について
-
ホームページの背景画像を画面...
-
CSSでの動画のマスク処理
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報