hタグ内は画像がよいか？テキストがよいか？の考察
HTML・CSS, WEB制作の小技や機能 | 2013.09.13
WEBサイトを構築する際には、伝えたい事の内容を吟味して、分かりやすい見出しをつけて階層化することが構造の柱となります。この時の見出しが、いわゆるhタグにあたります。見出しなので、デザイン的には少し目立たせることと、そのフレーズは、長くなりすぎないように、一目で見て分かるものがよいでしょう。
これを踏まえていれば、hタグ内が画像で作成されていても、テキストでもどちらでもよいのですが、数字が大きくなるh3やh4については、目立たせたい度合いが少なめという事に加えて、コンテンツ内容が追加修正される可能性もややありますので、テキストで作成しておくほうが、更新作業がしやすいように思います。
逆に、h1はサイトの根本的な構造が変わらない限り、まず変更することはないので、デザインを重視して画像で作成する事も多いです。
しかし最近、レスポンシブデザインでのサイト制作をしていると、
テキストで作成するか？画像で作成するか？は、やはり一長一短だと感じます。
例えば、目一杯の横幅でタイトル画像を作成した場合、
レスポンシブ対応では、横幅1280ピクセルのパソコン用画面サイズから横幅320ピクセルのスマホ用画面サイズに伸縮します。伸縮幅がかなり広い為、前者は文字が大きすぎたり、後者は文字が小さすぎたりと丁度良い文字サイズにするのが難しいのです。しかし、テキストで作成すると、ややデザイン面で物足りなさを感じることもあります。
悩ましいところですが、今のところは、
●横幅がせまい場合に2行にならない程度に、フレーズが長くなりすぎないようにする事
●ボーダーや背景色または余白の取り方で横幅の領域が感じやすいデザインにする事
この2点を気にして、基本的にはテキストで作成するのがよいかなと思っています。
