ほんっとにはじめてのHTML5とCSS3：[11-5] 画像にリンクを貼ろう

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

最終更新日：2019年03月22日　（初回投稿日：2010年12月06日）

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

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

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

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

<!DOCTYPE html>
<html lang="ja">
<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から離れちゃいますが。

関連記事

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

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

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2019-03-22（Fri）│
投稿日：2010-12-06（Mon）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿

画像の枠が表示されない

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

2016-05-29 19:02 :
初心者

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

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

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

CSSのセレクタに関してはこちらを↓
http://honttoni.blog74.fc2.com/blog-entry-215.html
【3】id とか classって何？（セレクタの「種類」を知っておこう）

2016-06-03 16:09 :
yuki★hata

Pagetop ↑