Q&A
２のほう本当にそこだけですか？
内部テキストが何もなければ何も表示されないかと思うのですが。
Webプログラミングを少しかじっている程度でデザインに関しては素人です。
気になる事があったので教えて下さい。
よくヘッダの左端にサイトロゴがありますが、あの実装方法についてです。
他にも方法はあると思いますが、以下の２パターン気付きました。
１．aタグでimgタグを囲むパターン
html
1<a href="/"> 2 <img src="logo.png"> 3</a>
２．backgroundに画像を指定するパターン
html
1<a class="navbar-brand" href="/"></a>
css
1.navbar-brand { 2 background: url("logo.png") no-repeat left center; 3 background-size: cover; 4}
自サイトは、勉強サイトを流用してパターン２の方で作ってました。
※意味もあまり分からず
パターン１はサイトロゴ上で右クリックで「新しいタブで画像を開く」が表示されますが
パターン２だと「新しいタブで画像を開く」が表示されません。
色んなサイトを見て回ったのですが、パターン１が多かったです。
両者のメリット、デメリットなど違いは何なんでしょうか？
使い分けなどありましたら教えて下さい。宜しくお願いします。
回答3件
0
ベストアンサー
画像（img 要素）と背景画像（css の background-image）の使い分けで一番大事なのは、「その画像に意味があるかないか」だと思います。ロゴは多くの場合サイト名だったり会社名だったり、そのサイトにとって重要な意味を持つのでたいていパターン１を選びます。
下のサイトはロゴに見出しとしての意味合いを持たせるために img 要素を h1 要素で囲っています。
https://www.nttdocomo.co.jp/
https://www.sony.co.jp/
ただ画像を載せるじゃなくて alt 属性に代替テキストを入れることが大事です。
こうすることで音声読み上げソフトやテキストビューアなどで、画像が見れないユーザーにも情報を伝えることができます。また代替テキストは SEO にとっても重要です。
html
1<img src="logo.png" alt="ここに代替テキストを入れる">
※代替テキストは必ず必要というわけではなくて、例えば小さい丸いアイコンとか意味を持たせたくない場合は<img src="icon.png" alt="">のように alt を空にしても大丈夫です。
逆にbackground-imageを使うのは挿絵のイラストだったり、街並みの写真、シルエット、模様、フレームなど「装飾として配置する場合」です。装飾のための余計なタグを html に追加しないので document の構造を汚さずに済みます。
投稿2020/09/28 09:47
総合スコア484
0
私見ですが。
2は、内在サイズがないので、スクリーンサイズに合わせたレイアウトの変更に弱いような気がします。
1は、内在サイズがあってアスペクト比を参照できるので、高さか幅のどちらかを可変にできます。
イメージ画像であれば、多少見切れてもいいデザインをすることはできますが、サイトロゴが見切れるのは良くないと思うので。
↓これが実装されれば、少し楽になるのですが。
aspect-ratio - CSS: Cascading Style Sheets | MDN
投稿2020/09/28 08:26
総合スコア36960
0
パターン１は、画像を貼るというイメージです。文書中にあるものなので、リンクを貼ることもできますし、ブラウザは画像だと理解しているので、右クリックで「新しいタブで画像を開く」を表示することができます。
パターン２は、ナビバーの壁紙（＝背景画像）としてロゴを配置しようとしています。見た目だけで言えば同じにすることはできますが、壁紙なのでロゴにリンクを貼ることはできません。
（なお、右クリックするとFirefoxでは「背景画像だけを表示」というメニューがあり、新しいタブで画像を開く と似た動きをします）
で、パターン１が選ばれる理由は、左上のロゴをクリックするとトップページに飛ぶ。という動きがある意味お約束（＝そういう動きをするよね。というユーザーの期待）となっているので、パターン２でそれを実装すると面倒だからだと思います。
同じ見た目で同じ動きをするなら、楽な方がいいですよね。
投稿2020/09/28 07:58
総合スコア2027
あなたの回答
tips
プレビュー
