Close
これまで、「ウェブサンプル株式会社」とテキストで表示されていた見出しの部分を、ロゴ画像に変えましょう。
ウェブページ上に画像を表示する場合には、HTMLのimg要素を使用します。
背景画像として表示する場合には、単なるパターン・飾りとして画像を利用しているだけですが、HTMLのimg要素として配置すると「ここに画像があります」という意味を持って画像を表示することになります。
では、ロゴ画像として表示する画像ファイルを用意します。
ダウンロードしたサンプルファイルからlogo.pngをコピーしてimagesフォルダに入れます。
logo.pngをimagesフォルダに入れたら、HTMLファイルのindex に以下の記述を追加してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css">
<title>ウェブサンプル株式会社</title>
</head>
<body>
<div id="pagebody">
<!-- ヘッダ -->
<h1><a href="index "><img src="https://www.htmq.com/wp-content/themes/htmq/htmq-images/logo.png" alt="ウェブサンプル株式会社"></a></h1>
<!-- メインメニュー -->
<ul id="menu">
<li><a href="index ">ホーム</a></li>
<li><a href="product ">製品紹介</a></li>
<li><a href="profile ">会社概要</a></li>
<li><a href="contact ">お問合せ</a></li>
</ul>
<!-- インフォメーション -->
<h2>新着情報</h2>
<h3>新商品のご案内</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<h3>展示会への出展</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<h3>環境への取り組み</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<!-- フッタ -->
<small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small>
</div>
</body>
</html>
保存をしたらブラウザで表示してみましょう。画像が表示されれば成功です。
上記のHTMLソースでは、img要素でロゴ画像を指定しています。
さらに、そのロゴ画像をクリックしたらトップページを表示するように、img要素にa要素でリンクを指定しています。
ロゴ画像にリンクを指定したことで、ブラウザによっては画像の周囲にボーダーが付けられた状態で表示されています。
このボーダーは、次回消してしまうことにしましょう。
ユーザーがウェブサイトを利用する際には、リンクをたどって様々なページを閲覧します。
それぞれのページが統一感の無いデザインになっていて、ページごとに操作方法が異なっていると、ユーザーにとっては使いにくく不安を感じるウェブサイトになりがちです。
ウェブ制作では、ユーザーを迷わせないための配慮が必要となります。
ユーザーに安心感を持ってウェブサイトを利用してもらうために効果的なのが、ロゴやメニューの表示位置を統一しておくことです。
どのページへ移動しても、常に同じ位置に同じロゴ画像を表示させることで、同じウェブサイト内にいることをユーザーに知らせることができます。
また、ウェブサイト内のどのページにいても、ロゴ画像をクリックすればホーム（トップページ）へ戻れるという決まりごとを守っておくと、ユーザーに安心感を与える効果があります。
| <前へ | 目次へ | 次へ> |
どのカジノが自分に最適か分からないですか?