忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[20] [19] [18] [17] [16] [15] [14] [13] [12] [11] [10

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

「img src」 と 「background: url」

以前、alt属性とtitle属性のお話をしましたが、今回は画像の入れ方についてメモ。


画像の貼り方には、

  1. img src="ファイル名"でHTMLに貼り付け。
  2. background: url(ファイル名); とCSSで記述。

のふたつのやり方があります。

前回と少しつながってくるのですが、
「alt属性はimg要素を使う場合必ず書かなくてはいけない属性です。
 もしテキストで表示する意味の無い画像の場合はalt=""とするように仕様書で述べられています。」

Web標準化プロジェクト:http://www.mozilla.gr.jp/standards/webtips0024.html

と記載されていますが、
代替テキストの必要のない画像をHTMLに貼り付けて、空のalt属性でごまかすのは
なんとなく汚いやりかたな気がしてしまいます。

そう考えると、おのずと上記二つの方法の使い分けができますね。
意味のある画像(ロゴ、タイトル、ボタン)=imgタグ
装飾的な役割の画像(背景、リストマーカーなど)=CSS指定
ということになるでしょうか。

いままでなんとなく分類してきましたが、これからは
気を遣って画像を分類していきたいですね。


余談ですが、img srcって「イメージソース」の略なんだそうですね。
これも「5年目の真実」でした。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
04« 2017/05 »06
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
ブログ内検索
忍者ブログ [PR]