![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
HTMLの画像のリンクの<タグ>について。わかる方、教えてください。
HTMLの勉強をはじめたのですが。画像のリンクのタグのところで、つまずいています。
↓学校でとったノートです。
ひとつひとつの記述の意味などを、どうか解説して教えてください。
<a href="../photo01.jpg">
<img border="0" src="../photo01.jpg" alt="グランドキャニオンの写真" title="グランドキャニオンへ旅行をした時の思い出の写真。
クリックしたら拡大します" width="100" />
もう、なにがなにやら・・・混乱してしまっているのですが、とくに../というのは、現在の場所からの相対的パスの記述のようなのですが。絶対的パスをするときの記述のしかたが、わからないのです。
教えてください。お願いします。m(_ _)m
No.1ベストアンサー
- 回答日時:
独学で怪しい記憶ですが
<a href="">~</a>
はハイパーリンクを張るための記述です
クリックしたら他のページに飛ぶやつですね
今回は画像をクリックで拡大(画像自体を表示)するために使ってます
例で言うと一個上の階層のphoto01.jpgにアクセスしよう!っていうリンクになります。
終了タグ</a>が出るまでをリンクしますので</a>を必ずセットとして書きます
<img>については
borderは枠の設定みたいなもので、数値を大きくすると枠が大きくなります
リンクタグと併用してるから使ってるのかな?
srcは表示する画像のパスです。
相対パスなので一個上のフォルダを参照しているようですね
abc/def/ghi.html
だとして考えると
「./」はdefフォルダの中身を指定します(同階層)
「../」はabcフォルダの中身を指定します(一つ上の階層)
絶対指定は所謂アドレス全部のようなもので
「http://www.abc.com/def.html」
と記述すると絶対パス
defフォルダ同階層から指定するなら
「./def.html」か「def.html」となります。
これが相対パスです
altは画像が表示されなかったときのための文だったと思います。試しに画像を存在しないものにすると分かりやすいです
titleは画像にマウスを乗せたときに表示される文です。画像タイトル書いたりとかでしょうか
widthは画像の幅を指定しています。指定しないと画像のそのままサイズになってしまいます。
(^^)こんにちは。
うわーあぃ(感激!)
ありがとうございますぅ!White wolf さんアリガトウ!!
フムフム・・・だいぶ理解できてきました。少し復習します。まちがっていたらば指摘して=教えてください。
○<a href="">~</a>は、ハイパーリンクのための記述である。
○ハイパーリンクとは、他のページに飛ぶリンクのことである。
○今回の学校の例は、画像を表示するためのもので(画像自体をクリックしたら拡大をするように指定つき)
(^^) まずはココまで理解しました。
○<img border="0" のborderは枠の大きさのコトで"0"に入る数字によって変化する
○<img border="0" src= src=はパスのことを示している
<img border="0" src=../phot01.jpg 例は「ひとつ上の階層から写真を参照」と訳せる。(./ は同階層 ../ はひとつ上の階層を示す)
○<img border="0" src=../phot01.jpg art=グランドキャニオンの写真
artは画像が表示されなかったときの文の記述である
(^^)ナルホド!表示に失敗すると、このメッセージが・・了解!
○<img border="0" src=../phot01.jpg art=グランドキャニオンの写真 title=グランドキャニオンへ旅をしたときの思い出の写真
title=は、画像にマウスをのせたときに表示される文章 ナルホド・・・
○<img border="0"
src=../phot01.jpg
art=グランドキャニオンの写真
title=グランドキャニオンへ旅をしたときの思い出の写真
クリックしたら拡大します。width="100"/>
このクリックしたらば拡大します。width="100" の"100"は←拡大した際の幅のサイズを指定いしている
(指定しなければ、モトのサイズで表示されてしまう)
おかげさまで、だいぶ気持ちが楽になってきました♪
やはり src =のパスのところが、まだチョット難しいですね。
完全に理解できるように頑張ります。
m(_ _)m今回は助かりました。スペシャル感謝です。
No.4
- 回答日時:
昨日は携帯から書いたのでパソコンから補足します。
絶対パスと相対パスはもっと簡単に例え話にするといいかもしれません。
例えば、マンションがあったとしてフォルダで考えるとこうしたとします。
./HTMLマンション/2階/201/a.html
./HTMLマンション/2階/202/b.html
このとき、a.htmlさんから見て考えて
b.htmlさんを呼びたいと思った場合
■相対パス
同じマンションにすんでいる「a.html」さんだからこそいちいち「どこのマンションの何階、何号室の何さん」まで言わなくても
「2階の202のb.html」さんとだけ言えば通じるという感じです。
相対パスは今の自分の居場所から考えるのでスタート地点は「./HTMLマンション/2階/201/a.html」です
そこから「b.html」さんへたどり着くためには
一階層フォルダを上がって、202フォルダ(202号室)へといかなければなりません。
そこで「../202/b.html」と記述すると
「../」なので一つ上階層へ移動し、「202」を開き「b.html」さんへとアクセスできます。
■絶対パス
絶対パスはどちらかというと同じ場所に住んでいるわけじゃなくて
他の場所から伝える際に使うような感じです。
HTMLマンションを知らない人に「2階の202にいるよ」と言っても通じませんから、絶対パスとしてどこに住んでいるか全てを伝えなければならないので
「b.htmlさんはHTMLマンションの2階、202号にいるよ~」と他の人に伝える。つまり
「http://www.hogehoge.com/HTMLマンション/2階/202/b.html」のようにアドレスのフル表記になります。
※このhogehoge.comは適当に書いたものなので存在しません。通常はサーバーのアドレスやらが入ります。google.comとか、yahoo.co.jpとか色々ありますね。
自分で書いててこれは分かり安いか不安ですが
参考になれば幸いです。
(^^)こんにちは。
うわぁ~い♪再びありがとうございます。
ハイ、とてもわかりやすいです!なんかイメージつかめてきました。
つまり../は、同じマンションにすんでいるのだから・・・と省略したイメージですね。
ありがとうございます。これから、さらにCSSの勉強がはじまります。
困ったら、また助けを呼びに来ます。
m(_ _)m今後とも、ドーゾよろしくお願いします。
No.3
- 回答日時:
絶対パスとは/からのもの
相対パスとは、
1) ブラウザが現在表示しているページの(パスを含んだ)ファイル名
からの相対的なファイルへのパス
絶対パスとは、
2) 現在表示しているファイルをどこに移動しても特定される絶対的なパス
と理解するのが正しいです。
絶対パスの場合は、/(ルート--根っこ)から始まるパスを記述します。
人によっては、通信プロトコル(http:などの)や、インターネット上のサーバーの位置まで含めることもありますが、本来は/からのものです。
[CJ-Club]-[FAQ]-相対パス? 絶対パス? ( http://www.cj-c.com/faq/pass.htm )
とりあえず、
はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
(^^)こんにちは。
No1 様のおかげで、おおむねのところはつかめたのですが・・・やはり、最後にsrc=のパスがむずかしくて・・・残りました。
http://okwave.jp/qa/q5784591.html
↑の場合は http:// の部分はプロトコルの部分なので省略する場合が、普通と考えて良いということですね。
つまりokwave.jp/qa/q5784591.htmlと記述するわけですね。
ありがとうございます。これだけでも、ひとつ利口になりました。
教えていただいたURLどちらもすごく為になるし、私の目的にあっています。(感激!)
今夜は、じっくりとコレをよく読んで勉強していきます。ありがとうございます。
m(_ _)m
No.2
- 回答日時:
今、ブラウザ使ってこのページ見てるかな?
もしそうならそのブラウザの上の方に いわゆる「アドレスバー」ってのが有ってそこに「URL」と言われる「アドレス」が書かれてるのは判るかな?
それが、絶対(アドレス)。そこを基準に指定するのが相対(アドレス)だよ。
パス、と言っては居るけど、アドレスもパスも、そう大差無いから。
(^^)こんにちは。お返事ありがとございます。
ハイ♪ブラウザとかアドレスバーとか・・・そういう言葉すら、最近わかるようになったばかりのド初心者なんです。
先生に、ブラウザには「ファイヤーフォックス」とか「インターネットエクスプローラー」とかが、あるんですよォ~てネ(笑)
>パス、と言っては居るけど、アドレスもパスも、そう大差無いから。
この言葉!目からウロコでアリガタイです。
それなら、いずれは使いこなせるかも・・・そんなような気がしてきました。そっかあ・・・って気分になってきました。
../は、当分は悪夢のようです。( ^^;)
優しい回答をありがとうございました。勇気をもらいました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- その他(プログラミング・Web制作) pythonでDepixを起動 5 2022/12/18 08:04
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
医療画像(Windows用)をMacで...
-
32MBは重いでしょうか?
-
HTMLからフォルダを開きたい
-
Excelで、社外秘(閲覧のみ)と...
-
htmlファイルの表示が真っ白
-
HTMLページが勝手にダウンロー...
-
社内で利用するWebサイトを立ち...
-
リンク先からリンク元の、同じ...
-
HTMLで別PCのフォルダを開く
-
【HTML】1クリックで複数ファイ...
-
iPadの標準ブラウザでローカルH...
-
メールに添付されたhtmlファイ...
-
2つのページを重ねたい
-
form action="#"
-
URLに「.html」の拡張子がなく...
-
フォルダ内の最初のファイル名...
-
HTMLタグのみ削除したいのです。
-
【VB.NET】WebページのDOMソー...
-
generatorとは?
-
java_run.batがダウンロードで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
医療画像(Windows用)をMacで...
-
FFFTPで画像のアップロードの仕方
-
32MBは重いでしょうか?
-
ホームページビルダーでHTMLメ...
-
エクセルで作成した表にgifの画...
-
フロントページエクスプレスと....
-
画像を直接アドビホトショップ...
-
宅ふぁいる便で送られてきた画...
-
ヤフオク画像が見れない
-
インターネットの画像の保存に...
-
世界地図に書き込み、自社ホー...
-
FTPで画像がUPできません
-
エクセルに貼り付けた画像が壊れる
-
DreamweaverCS5でのHP公開...
-
ウェブサイト1ページあたり、フ...
-
FFFTPアップロードの件
-
投稿サイトに画像添付で送ると...
-
MacでTiff画像が表示されない
-
HP作製でアイコンが・・・
-
無料のHP
おすすめ情報