見出しをimgで作るときの自分的注意点をまとめてみました。
そもそもhタグの中にimgというのはあまりやらないほうがいいとは思いますが。
目次
hタグ内にdivはNG
cssの都合上imgタグをdivタグで囲うことは多いです。ただhタグを画像表現する際には<h><div><img>とはできません。
hの子にdivはダメ。ブロック要素同士なので当然ですが、普段やらないことをすると当たり前のことを忘れがちです。
imgの視認性
imgのぼやけ問題です。対応としてはまず配置する場所のピクセル×2の大きさで書き出しておくことです。ぼやけてしまった場合cssへの記述で解決できますがここでは具体的な方法やプロパティは割愛します。
またimgのコントラストです。イラストにせよ画像にせよ見出しである以上視認性を確保しなければなりません。
文字情報について
imgで見出しをつくる場合、hタグのテキストをspanで囲ってdisplay:none;するかもしれません。
しかし基本的にdisplay:none;はあまり使わないほうがいいです。「隠し」の悪用もあり、サイト評価が下がる可能性があります。
本当に画像化の意味があるか
画像化の理由として以下などが考えられます。
- 使いたいWebフォントがない。
- 手描きイラストを使いたい。
- 写真を見出しとして使いたい。
ただ本当に画像化する意味があるのかはよく考えたほうがいいと思います。
基本的には画像ではなくテキストで見出しを表示するのが無難です。
コメント