Step.7 画像にリンクを貼ってみよう
画像を貼ってみよう
サイトのデザインはともかく、すんごい今さらだけどさ、メルちゃんはどんな内容のサイトを作りたいの？
へへー、お料理サイトなんていいかなー！とか思ってさ！
レシピとか書きつつ、写真のっけて、自分で感想書いてさ～♪
……てか、それだったらサイト名もっとそれらしく料理って文字でも入れなよ。わかりづらいなぁ
で、それやるにはどうしたらいいか教えてよ！
やっぱり画像があって、画像に惹かれた人がその料理のレシピ知りたいなーってページに入ると思うんだよね……。だから画像の一覧みたいなのがあって、そこからのリンクがいいかなぁ。
ほら、レストラン行ったらジュースはジュースでまとまってメニューに載ってるでしょ？ああいうわかりやすさも必要
でも、それやるにはまず画像が必要になるんだけれど、メルちゃん画像用意しているの？
わかった。じゃあこの３枚でどうかな
ひとまず、この画像をメルのパソコンに保存してね。画像を右クリックして「名前を付けて画像を保存」で保存できるから、3枚とも保存ね。保存する際の画像のファイル名は保存時に表示される「image1.jpg」「image2.jpg」「image3.jpg」のままでいいよ。
index.htmlファイルのあるフォルダ内に更にフォルダを新規作成してね。フォルダ名は何でもいいけれど「image」とか無難でいいんじゃないかな
で、そのフォルダの中にさっきの3つの画像を保存してね。
画像を貼り付けるタグは <img src=”画像のURL”> だよ。
はて、ここでちょっとURLのお話をしていいかな？
ファイルの場所とURLの関係
特に今はサーバーにHTMLファイルとかをアップロードしていないからね。自然とフォルダ名、ファイル名だけでURLを指定するしかないの。
まぁ、前にも言ったようにサイトが出来上がったら教えるからあんまり気にしないで。
んー、よくわかんないからやってみていい？
あの3つの画像の1つ目を呼び出すには、<img src=”image1.jpg”>にしたらいいのかな？
<img src="image/image1.jpg">
メルちゃんの素敵なサイト ━┳ index.html ┣ style.css ┗ image ━━┳ image1.jpg ┣ image2.jpg ┗ image3.jpg
で、もしも image の更に下層のフォルダを作成し、それをindex.html へ呼び出したい場合は……
メルちゃんの素敵なサイト ━┳ index.html ┣ style.css ┗ image ━━┳ image1.jpg ┣ image2.jpg ┣ image3.jpg ┗ test ━━┳ test1.jpg ┗ test2.html
<img src=”image/test/test1.jpg”>と、いう感じに、スラッシュ「/」でフォルダを区切り指定していくよ。
メルちゃんの素敵なサイト ━┳ index.html ┣ style.css ┗ image ━━┳ image1.jpg ┣ image2.jpg ┣ image3.jpg ┗ test ┳ test1.jpg ┗ test2.html
test2.html に style.css ファイルを呼び出したいとする。この場合のURLはこうなるよ。
<link rel="stylesheet" href="../../style.css">
「../」が一つ上のフォルダって意味になるね。
ちょっと複雑なのもやっておこうか。
メルちゃんの素敵なサイト ━┳ index.html ┣ style.css ┗ image ━━┳ image1.jpg ┣ image2.jpg ┣ meru ━━━ test.jpg ┗ test ━━┳ test1.jpg ┗ test2.html
「image」フォルダ内に「meru」というフォルダを作ったよ。
その中の「test.jpg」というフォルダを「test2.html」というファイルに呼び出したい場合、メルちゃんどうする？
<img src=”../meru/test.jpg“>……かな？
[code language=”html” title=”HTML” highlight=”14-16″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><p>メルちゃんの素敵なサイト★</p></header>
<main>
<p id="main1">メイン</p>
<p id="main2">行間を試すために文字を沢山書いておきます。文章を読みやすくするには多少行間を開けておいたほうが良いでしょう。文字の大きさも、女性は小さい文字を好むことが多いようですが、小さすぎると大変読み辛くなり、せっかくサイトを作ったのに見てもらえなくなったりしますので単純に見た目だけに拘らず、見やすさ、使いやすさ、わかりやすさ、といったものに目を向けるのも大切だと思います。</p>
<img src="image/image1.jpg">
<img src="image/image2.jpg">
<img src="image/image3.jpg">
</main>
<footer id="main1"><p>コピーライト</p></footer>
</body>
</html>
[/code]
やっぱ画像があると全然違うね！すげぇ！
リンクを貼ってみよう
とは言っても、リンク先のページをまだ用意できてないけどね。とりあえずタグから出すよ。
<a href=”リンク先URL”>リンクを貼る文字か画像</a>
って感じだよ。テキストリンクならば開始タグと閉じタグの間はテキストを入れればいいよ。
今回は画像でリンクをしたいわけだから、<a>要素と<img>要素を組み合わせるよ。
<a href=”リンク先URL”><img src=”画像URL”></a>
[code language=”html” title=”HTML” highlight=”14-16″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><p>メルちゃんの素敵なサイト★</p></header>
<main>
<p id="main1">メイン</p>
<p id="main2">行間を試すために文字を沢山書いておきます。文章を読みやすくするには多少行間を開けておいたほうが良いでしょう。文字の大きさも、女性は小さい文字を好むことが多いようですが、小さすぎると大変読み辛くなり、せっかくサイトを作ったのに見てもらえなくなったりしますので単純に見た目だけに拘らず、見やすさ、使いやすさ、わかりやすさ、といったものに目を向けるのも大切だと思います。</p>
<a href="test.html"><img src="image/image1.jpg"></a>
<a href="test.html"><img src="image/image2.jpg"></a>
<a href="test.html"><img src="image/image3.jpg"></a>
</main>
<footer id="main1"><p>コピーライト</p></footer>
</body>
</html>
[/code]
見たことある？
新しいウィンドウで開くか、新しいタブで開くかはブラウザ側の設定次第なんだけどね。
でも私なんか、あのいつの間にかタブがめちゃんこ増えてるの好きじゃないんだよね
まぁ要は使いどころだから、とりあえず覚えておきなよ。
<a href=”リンク先URL” target=”_blank”>リンクを貼る文字か画像</a>で新しいウィンドウ（orタブ）で開くよ。
まぁオススメ調味料とか紹介するのに外部リンク使うときがあったら新しいウィンドウで開いてもいいんじゃない？
例えばメルちゃんが、あまり知られていない美味しい調味料を見つけたとして、その調味料の公式サイトとか調味料を販売しているサイトとかがあったらそのサイトへ飛べるようにリンクを貼る。これも外部リンクだね。
URLの基準やtarget属性のデフォルト値を変更する<base>要素
空要素で<head>要素内に書くよ。今までURLは呼び出すHTMLファイルの位置を基準としてファイル名、フォルダ名を指定するって話をしたけど、この<base>要素はその基準を変えることができるよ。あと、デフォルトのtarget属性の値も設定しておけるよ
[code language=”html” title=”HTML” highlight=”6,15″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
<base href="image/" target="_blank">
</head>
<body>
<header><p>メルちゃんの素敵なサイト★</p></header>
<main>
<p id="main1">メイン</p>
<p id="main2">行間を試すために文字を沢山書いておきます。文章を読みやすくするには多少行間を開けておいたほうが良いでしょう。文字の大きさも、女性は小さい文字を好むことが多いようですが、小さすぎると大変読み辛くなり、せっかくサイトを作ったのに見てもらえなくなったりしますので単純に見た目だけに拘らず、見やすさ、使いやすさ、わかりやすさ、といったものに目を向けるのも大切だと思います。</p>
<a href="../test.html"><img src="image1.jpg"></a>
<a href="test.html"><img src="image/image2.jpg"></a>
<a href="test.html"><img src="image/image3.jpg"></a>
</main>
<footer id="main1"><p>コピーライト</p></footer>
</body>
</html>
[/code]
画像2と3はリンク先修正していないからリンク切れを起こして画像すら表示されなくなっているでしょう？
はて、今回は以上ね。次回は見出しをつけてみよう。