ナビゲーションボタンについて

質問

どうぞ、よろしくおねがいします。

ホームページを作る際に、
「TOP」ですとか「Q&A」といったページなどに誘導する
ナビゲーションボタンがありますが、
これは、普通にボタン用の画像を貼り付けて、
それにリンクを貼って並べる、というやり方は一般的ではないのでしょうか？

色々なサイトのソースを見て調べているのですが、
このようなやり方で記述されているサイトがなく、
質問させていただきました。

回答No.2

metametamu

＞このようなやり方で記述されているサイトがなく

その場合の多くはCSSを使っています。HTMLでは文字でマークアップしておき、CSSでそれを画像に置換する方法ですね。
CSSによる画像置換がSEOに良いといわれているので使う人が多いのだと思います。
私もCSSを利用するほうがいいと思いますが、現状それがとても難しいです。
imgによるマークアップは現状だと妥当な選択で、全く問題ありません。

今現在普及している画像置換の方法はtext-indentを利用したものですが、実はあまり良い方法ではありません。(というかこれを使うならimg要素でマークアップした方がいいです)
問題点については検索されればいろいろ出てくると思います。

私としては、現在のナビゲーションを作る上で最適な順はこんな感じではないかと思います。

list-item(CSS)　＞　img要素(HTML)　＞　imgに置換(javascript)　＞　:before(CSS)

list-itemによる方法ははっきり言ってノウハウが必要で他のものより難しいので、次点のimg要素が使いやすいと思います。
IE8が普及しきる頃(2014年くらいでしょうか)になると:beforeを利用した置換が一番オススメです。
長くなりましたが、画像置換は現状では問題点が多く敷居が高いので使わない方がよく、img要素でのマークアップは妥当です。

回答No.1

LOHA

＞普通にボタン用の画像を貼り付けて、
＞それにリンクを貼って並べる、というやり方は一般的ではないのでしょうか？
＞色々なサイトのソースを見て調べているのですが、
＞このようなやり方で記述されているサイトがなく、

そんなはずはありません。
http://www.shiseido.co.jp/
ただ、最近では
http://www.apple.com/jp/
のようにソース上は一見画像が貼られていないようには見えるのですが、実は、文字は表示されないように隠しておき、背景画像をまとめて作っておいて、位置をJavaScriptでちょこちょこ操作するというテクが使われている、というケースが多々見られますね。
また、このサイト(OKWave)のように、本当にただの文字を使うところも結構あります。

なんにせよこれといった決まりはありません。作る人の自由だと思います。