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

リンクはテキストだけでなく画像にもはれます。
ですから、画像でボタンを作る事もできます。
というわけで、今回は画像にリンクを貼ってみましょう。

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

今回のサンプルも圧縮(ZIPファイルに)してあります。今回は aaa.html を使います。
ダウンロードは、コチラから(ダウンロード用のページが別ウィンドウで開きます)
★別ウィンドウで開きたくない方は、コチラから

テキストの代わりに画像を置くだけ

まずは、一番単純な方法で画像にリンクを貼りましょう。
前回までにやった、テキストにリンクを貼る方法のでのアレンジで、
テキストの部分を画像に入れ替えるだけです。

下記の aaa.html での青バック部分が、前回から修正した箇所です。

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

青バックの部分は2箇所です。
最初の10〜12行目は、森林のイメージに bbb.html へのURLを貼ってみました。

<a href="bbb.html">
<img src="image/forest.jpg" alt="森林イメージ" width="240" height="160">
</a>

2箇所目の27行目は、ボタン画像を作って「作者の紹介」のテキストリンクの代わりにしてみました。

<a href="bbb.html#profile"><img src="image/11-5_btn.gif" alt="作者の紹介"></a>

ボタン画像はこれです↓「image」フォルダの中に入っていますよ。

ボタン画像「11-5_btn.gif」

画像のボーダー(枠)を編集しよう

上記のように画像にリンクをつけたところで、
aaa.htmlを保存して、ブラウザでプレビューしてみてください。

画像にリンクを貼ったプレビュー(画像にボーダーがついています)

ブラウザによっては、このプレビューのように、森の写真にもボタンにもボーダー(枠)が付いてしまう場合があります。

これは、「この画像にリンクがあります」と教えるために付くのですが、ブラウザのデフォルトの指定はそれぞれなので、場合によっては意図せぬ表現になって、逆に見にくくなる可能性もあります。
そこで、この画像ファイルのボーダーを編集しておきましょう。

下記のように、<head>部に書いているCSSの「img」要素の部分を編集します。
下記は、ボーダーを無くしてしまう指定です。

img {
float:left;
margin-right:20px;
border-style: none;
}

ボーダーの色や太さなどを変えたい場合は、オリジナルの指定をします。たとえば、
border: solid 2px #FF99FF; ←ボーダー上下左右を実線で、線幅2px、カラーは#FF99FF
border-left: dotted 1px #999999; ←ボーダー左を点線で、線幅1px、カラーは#999999
などと指定します。

●このような「プロパティ:線のstyle(半角スペース)太さ(半角スペース)色」といった
複数のプロパティをひとまとめにした書き方を 「CSSのショートハンド」 と言います。
CSSのショートハンドについての詳細は「CSSレイアウトメモ:TIPS [CSSのショートハンド] 」をご覧ください。

●ボーダーの指定については、指定見本をつくってあります。「CSSレイアウトメモ:ボーダー指定見本」をご覧ください。

さて、とりあえず今は、ボーダーを無しにしてプレビューしてみましょう。

画像にリンクを貼ったプレビュー(画像のボーダーを無しにしました)

いかがでしょう。
ご自分で実験して、枠線をいろんな太さや色で指定してみてください。

次回は、せっかくですから、リンクのロールオーバー時の画像を変化させてみましょう。
これはCSSの小技になってしまって、ちょっとHTMLから離れますが、
おもしろいですから、ぜひやってみましょう!

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

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

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

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

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

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

テーマ : webサイト作成
ジャンル : コンピュータ

tag : HTMLソース a要素

スポンサーリンク

コメントの投稿

画像の枠が表示されない

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
07 | 2017/08 | 09
- - 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.