画像置換とは？

画像置換とは？

こんにちは。オッサンです。

先日の試験問題の中に、「画像置換」なる単語がでてきました。

調べましたところ、例えばh１の、文字の代わりに画像を配置するものだそうです。

要は見た目をオシャレにするためにやるんですな。
ネット上の文字だけではデザイン的に充分では無いんでしょうね。

なるほどです。

試験ではこのようにでていました。

１．ナビゲーション領域にある、リンクのスタイルを設定する。

高さを0にし、パディングとオーバーフロー時の処理を設定することで画像置換を行う


２．画像置換によって表示するリンクの画像を設定する。

グローバルナビの nav>ul>li 要素に
文字の代わりに画像を入れるということですね。
これは学校ではやらなかった手法なので勉強になりました。

やっちゃいけない手法

で、この画像置換ですが、これが昔からいろいろと問題になっているらしく、
SEO的に微妙だったりするそうです。

本来文字をマークアップするものだから、という理由らしいんですが。

そんなの試験に出していいのかね（笑）

SEOのために文字を入れて、非表示にしたりと、
色々な手法があるようですが、
現在ではご法度になっている手法もあって、そのあたりは
ここに詳しくかいてありまして、参考になりました。

https://ascii.jp/elem/000/001/207/1207973/

この中の、text-indentで大きな値を指定して見えなくなる方法は、
学校で教わりましたが、
「今は絶対やっちゃいけない」
と教わりました。

昔はよくやる手法で教えていたらしいですが、
その時代によって変わるものなんですね。

そんな訳で、これも勉強になりました。


知識が増えていくのは楽しいものです。
どんどんやっていきます。