[11-5] 画像にリンクを貼ろう

最終更新日:2017年09月17日  (初回投稿日:2010年12月06日)

<a>要素を使ったリンクは、テキストだけでなく画像にも貼れます。
<a>テキスト</a> <a> <img> </a> にするだけ。とっても簡単です。

使用する要素 <a href="URL"><img src="画像のURL" alt="テキスト"></a>

<img>要素の alt属性を必ず入れよう

前回までのファイルの、テキストの部分を画像に入れ替えます。
index.html の青バック部分が、前回から修正した箇所です。

<!DOCTYPE html>
<html>
<head>
〜省略〜
</head>
<body>
<div><!--本文START-->
<h1>リンクしてみよう</h1>
<a href="second.html"><img src="image/forest.jpg" alt="森林イメージ" width="240" height="160"></a>
<p>
木曽路はすべて山の中にある。あるところは岨づたいに行く崖の道であり、
あるところは数十間の深さに臨む木曽川の岸であり、あるところは山の尾
をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。
</p>
<p>
東ざかいの桜沢から、西の十曲峠まで、木曽十一宿はこの街道に添うて、
二十二里余にわたる長い渓谷の間に散在していた。道路の位置も幾たびか
改まったもので、古道はいつのまにか深い山間に埋もれた。<br>
<span>(島崎藤村「夜明け前」序の章より)</span>
</p>
<p>
<a href="second.html#profile">作者の紹介</a>
</p>
<p>
<a href="second.html"><img src="image/gotoNext.gif" alt="次のページへ"></a>
</p>
</div><!--本文END-->
</body>
</html>

2箇所を変更しています。
9行目の「森のイメージ写真」に 次のページへのリンクを付けてます。
25行目は、テキストの代わりにボタン画像を作って <img>要素で配置しました。

ボタン画像はこれ↓「image」フォルダに入れた「gotoNext.gif」というファイルなので「 src="image/gotoNext.gif" 」という指定になってます。

<img>要素には alt属性を使って代替えテキストを指定しています。
<a href="second.html"><img src="image/gotoNext.gif" alt="次のページへ"></a>

これはアクセシビリティ的に大事です。
何らかの理由で画像が読み込めない場合、画像がボタンだとユーザは押せません(見えなくて)が、代替えテキストがあればクリックできるから。
リンクを貼った <img> には、必ず altを使おう

画像のボーダー(枠)を消しとこう

古いブラウザでは、リンクが貼られた画像にボーダーが付く場合があります。
こんなふうに。

「この画像にリンクがあります」と教えるためなんですが、逆に見にくい場合のほうが多いので、画像のボーダーを消しておくのが一般的。
(新しいブラウザは、このデフォルトスタイルはもう無いと思うんだけど、一応習慣でやってます)

下記のように、<head>部に書いているCSSの「img」要素の部分に「border:none」を追加しておきます。

img {
	float:left;
	margin-right:1em;
	margin-bottom:1em;
	border:none;
}

border:none」は実は「ショートハンド」という書き方で、実際は「border-style: none」という指定です。
ボーダーに関しては「はじめてのCSS」カテゴリーの 【13-1】borderと borderのショートハンド をご覧ください。

さて、プレビューしてみましょう。こんなかんじになります。

次回予告

次回は、せっかくなので、ボタン画像をマウスオーバーで変化させてみましょう。
CSSを使うので、ちょっとHTMLから離れちゃいますが。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

画像の枠が表示されない

html練習中の初心者です。
画像にclass指定をしてcssでborderを付けようとすると、うまく反映されません。
img#class名{border:~~;}では反映されず、img{border:~~;}では反映されます。
floatはクラス名指定でも反映されるようなのですが・・・
そういう仕様なのでしょうか。
また、一部の画像にだけ枠を付ける場合はどのようにすればよいのでしょうか。

Re: 画像の枠が表示されない

凡ミスでしょう。
「#」は id の場合です。
class は「.」です。

img.class名 {} じゃなきゃブラウザは何もしてくれないでしょうね。

CSSのセレクタに関してはこちらを↓
http://honttoni.blog74.fc2.com/blog-entry-215.html
【3】id とか classって何?(セレクタの「種類」を知っておこう)
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.