WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:リンクについて

蓮井利子 [MAIL] [WriteDate : Wed May 16 16:10:57 2001]

本当に超初心者で、恥ずかしいのですが、今、ホームページを作成中です。そこで、とても基本的な質問があります。よく、文章が書かれていて、その下にアンダーラインが引いてあり、そこにマウスを合わせると、手のマークが出てきて、別のところにリンクしますが、その文章は、JavaScriptというものを使わないといけないのでしょうか?それと、そこをクリックしたら、デジカメで撮った写真の拡大が見られるようにしたいのですが、その場合、どうやればいいのでしょうか?すみません、基本的なことで。でも、どなたか教えてもらえますか?


カヅサツ [MAIL] [URL] [WriteDate : Wed May 16 17:03:34 2001]

> 文章が書かれていて、その下にアンダーラインが引いてあり、
> そこにマウスを合わせると、手のマークが出てきて、別のところにリンクしますが、
> その文章は、JavaScriptというものを使わないといけないのでしょうか?

いいえ、いけなくはないです。
HTML の基本的な働きで十分です。

例:

<p><a href="http://www.yahoo.co.jp/">yahoo</a>で検索してみましょう。</p>

ちなみに、必ずアンダーラインが引かれたり、手のマークが出るとは限りません。

> それと、そこをクリックしたら、
> デジカメで撮った写真の拡大が見られるようにしたいのですが、
> その場合、どうやればいいのでしょうか?

リンク先の URI を「デジカメで撮った写真の拡大」画像のそれにします。
URI は A 要素の HREF 属性値で指定します。
例えばその画像が、HTML 文書と同じディレクトリ(フォルダ)にあり、
画像のファイル名が photo01.jpg であると仮定すると、

<p><a href="./photo01.jpg">デジカメで撮った写真の拡大</a>をご覧下さい</p>

「./」は「HTML 文書と同じディレクトリの〜」という意味です。


TNN [WriteDate : Wed May 16 17:53:18 2001]

例へば、

プレヴュー用のサムネイル(縮小画像)がtphoto01.jpg
拡大写真がphoto01.jpg

で、サムネイルをクリックして拡大写真画像に飛ばす場合、

<p><a href="./photo01.jpg"><img src="tphoto.jpg" alt="デジカメで撮った写真"></a></p>

みたいに記述します。


※ファイル名はサンプルです。画像の内容などに応じて適切に名前を附けて下さい。
※HTML文書の記述も、適切に直して下さい。


TNN [WriteDate : Wed May 16 17:55:48 2001]

<p><a href="./photo01.jpg"><img src="tphoto.jpg" alt="デジカメで撮った写真"></a></p>

ソースが美しくない。笑。

<p><a href="./photo01.jpg"><img src="./tphoto.jpg" alt="デジカメで撮った写真"></a></p>

或は、

<p><a href="photo01.jpg"><img src="tphoto.jpg" alt="デジカメで撮った写真"></a></p>


D.D. [URL] [WriteDate : Wed May 16 18:52:54 2001]

そういうものって1つの paragraph になります?


TNN [WriteDate : Thu May 17 01:54:26 2001]

なりませんかね?
しちゃいけませんかね?


D.D. [URL] [WriteDate : Thu May 17 02:09:47 2001]

個人的にはならないと思いますが、するのは自由に決まってます。


TNN [WriteDate : Thu May 17 11:41:27 2001]

>個人的にはならないと思いますが、

なる場合があります。


D.D. [URL] [WriteDate : Thu May 17 12:08:55 2001]

例えばどのような場合でしょうか?
大変興味があるので是非知りたいです。


神大二健 [WriteDate : Thu May 17 14:38:52 2001]

四コマ漫画で

<p><a href="photo01.jpg"><img src="1.jpg" alt="一コマ目"></a></p>

<p><a href="photo01.jpg"><img src="1.jpg" alt="二コマ目"></a></p>

・・・というのはどうでしょう?
paragraphじゃないか(^^;


おーなーしぇふ [WriteDate : Thu May 17 15:46:56 2001]

http://openlab.ring.gr.jp/k16/htmllint/explain.html
の「36」あたりが参考になるかも……。

HTML4.01 Strict で厳しくやるなら、<BODY>内にはいわゆる直接インライン要素が(仕様上)書けないので、<img ..>を<p>で囲んでおくのが適切なようです。
※DIVなどで囲むのは妥当ではないでしょうし?

これが HTML4.01 Transitional なら特に<p>で囲まず、<img ..>だけでも問題とはならないようです。

まとめると:
文書頭で Strict or Transitional どちらを宣言しておくかで、<p>の要不要が決まると思われます。但し、あくまでHTML4.01の仕様上では、ということです。
※違和感を感じるのは確かです(笑)<img が paragraph?
※でも p の他に適当な要素がない……


U-Z [MAIL] [URL] [WriteDate : Thu May 17 15:56:07 2001]

> 例えばどのような場合でしょうか?

特定のフォントを入手しないと閲覧できないようなテクスト(ハングルやアラビア文字等)を画像化し、p1.png,p2.png,p3.pngとした場合。

<p><img src="p1.png" alt="段落の内容(※)"></p>
<p><img src="p2.png" alt="段落の内容"></p>
<p><img src="p3.png" alt="段落の内容"></p>

とかいうのは、どうでしょうか。

※ 代替文字が「段落の内容」と言う文字そのものではなく、(日本語訳するかどうかと言った部分はともかく)画像化されたテクストと等価の文章だとお考え下さい。


TNN [WriteDate : Thu May 17 16:08:04 2001]

誰の発言が原因で「リンクについて」と云ふテーマから
話が逸れていつたのかは明かですが、
まあ、それは良いでせう。

「はじめにテキストありき」の立場から言へば、
全てのHTML文書はテキストがあらかじめ用意されてゐて、そこから
マークアップがはじめられる、と云ふ事になります。

この場合、altに入つてゐる代替文字列は既にテキストに存在する
事が大前提となります。

ですから、imgがインライン要素となり、段落の中に出現するのは
自明です。


ちなみに、今回の「例」のソースですが、
あくまで例は例ですので、現実のHTML文書とは異ります。
ですから、例に関していちやもんをつけるのは筋違ひであります。
話を逸らしたり、いちやもんをつけるべきではない事に
いちやもんをつけたりするのは、テーマから離れた不毛な争ひを
誘発させるだけです。

もし必要な議論であるならば、新規にスレッドを立てた方が
あとから参照するにも便利ですし、最初に質問した人に
覚える必要のない罪惡感を覚えさせる事もなくなります。

D.D.さんには、そのあたりの配慮をしていただければと存じます。
まあ、私の言ふべき事ではないやうな気もしますが。


D.D. [URL] [WriteDate : Thu May 17 17:09:22 2001]

> HTML4.01 Strict で厳しくやるなら、<BODY>内にはいわゆる直接インライン要素が(仕様上)書けないので、
> <img ..>を<p>で囲んでおくのが適切なようです。
> ※DIVなどで囲むのは妥当ではないでしょうし?
<p><a href="./photo01.jpg"><img src="./tphoto.jpg" alt="デジカメで撮った写真"></a></p>
にするぐらいならば、
<div><a href="./photo01.jpg"><img src="./tphoto.jpg" alt="デジカメで撮った写真"></a></div>
の方がマシだと思いますが如何でしょうか?


> 特定のフォントを入手しないと閲覧できないようなテクスト(ハングルやアラビア文字等)を画像化し、
> p1.png,p2.png,p3.pngとした場合。
なるほど。そういうのがありましたか。


>あくまで例は例ですので、現実のHTML文書とは異ります。
TNN [WriteDate : Thu May 17 01:54:26 2001]
TNN [WriteDate : Thu May 17 11:41:27 2001]
あたりと意見が変わった気がしますが、まったく拘りません。
が、元からそういう意見だった場合は、最初からそのように答えてもらえると幸いです。

> ですから、例に関していちやもんをつけるのは筋違ひであります。
例だから実際のHTML文書と異なるならば、わざわざ P 要素の内容として記述する必要はないと考えます。
また、「デジカメで撮った写真」だけでは Paragraph として相応しくないとも思います。

> もし必要な議論であるならば、新規にスレッドを立てた方が
初心者に誤った知識を植え付けかねないと思うから、このスレッドに返信することはまったく問題ないと判断します。
もちろん、
「<a href="./photo01.jpg"><img src="tphoto.jpg" alt="デジカメで撮った写真"></a>」
このようなものだけでは Paragraph として相応しくないという僕の判断自体が誤っている可能性も否定できませんが、仮にそうだとしても、ここに返信することは有意義であるはずです。


TNN [WriteDate : Thu May 17 18:21:08 2001]

><p><a href="./photo01.jpg"><img src="./tphoto.jpg" alt="デジカメで撮った写真"></a></p>
>にするぐらいならば、
><div><a href="./photo01.jpg"><img src="./tphoto.jpg" alt="デジカメで撮った写真"></a></div>
>の方がマシだと思いますが如何でしょうか?

生のdivを使ふのは感心できません。

>あたりと意見が変わった気がしますが、まったく拘りません。
>が、元からそういう意見だった場合は、最初からそのように答えてもらえると幸いです。

意見が變つたかどうかは知りませんが、論理的に互ひに矛盾しない事を私は言つてゐる積りです。

>例だから実際のHTML文書と異なるならば、わざわざ P 要素の内容として記述する必要はないと考えます。

HTMLの話ですから、形式的にHTML的にinvalidとならないやうな書き方をしてゐるだけです。

また、この主張は、以下の主張と矛盾します。

>初心者に誤った知識を植え付けかねないと思うから、このスレッドに返信することはまったく問題ないと判断します。

body直下にimgを書いても良いやうな例示をするのは、「初心者に誤った知識を植え付けかねないと思」ひます。
また、「paragraphとしてふさはしい、ふさはしくない」と云つた「内容」重視の態度は、單にHTMLの形式が問題になつてゐるこのスレッドで不適切であると思ひます。

>このようなものだけでは Paragraph として相応しくないという僕の判断自体が誤っている可能性も否定できませんが、仮にそうだとしても、ここに返信することは有意義であるはずです。

「スレ違ひ」の返信は有意義ではありません。或は、「返信する事に意義がある」と言はれても困ります。


D.D. [URL] [WriteDate : Thu May 17 18:42:43 2001]

> 生のdivを使ふのは感心できません。
「マシだ」と考えています。Paragraph でないものを P の内容にすることは誤りだと考えますから。

> 論理的に互ひに矛盾しない事を私は言つてゐる積りです。
矛盾はないと思います。が、誤解を与え兼ねない表現でしょう。
誤解するのは受け手の勝手なのでそこまで考えてないのかも知れませんが。

> HTMLの話ですから、形式的にHTML的にinvalidとならないやうな書き方をしてゐるだけです。
「DTD 的に Valid である」と「HTML の仕様に従っている」ということは違うものだということはわかってますよね?

> body直下にimgを書いても良いやうな例示をするのは、「初心者に誤った知識を植え付けかねないと思」ひます。
僕は「<p><img src="foo.jpg"></p>」というような形式でデジカメの画像を配置することは HTML の考え方としてあまり望ましくないと判断し、そのように書くぐらいならば、いっそのこと P タグを書かない方が良いと思っています。
P タグの誤った用法を覚えるよりははるかにマシですから。
TNNさんは、(HTMLについてあまり知らないうちは)形式的にだけでもHTML的にvalidであればいいと思ってるのでしょうね。
ま、考え方の違いでしょう。

>「スレ違ひ」の返信は有意義ではありません。或は、「返信する事に意義がある」と言はれても困ります。
なるほど。つまり誰かが誤った知識を広めようと努力していても「無視せねばならない」もしくは、「傍観せねばならない」という考えですか。


TNN [WriteDate : Thu May 17 20:05:32 2001]

>「マシだ」と考えています。Paragraph でないものを P の内容にすることは誤りだと考えますから。

ならば、最初からさう書いていただければ。「そういうものって1つの paragraph になります?」なんて突放した言ひ方ではなくて。笑ひ。

>矛盾はないと思います。が、誤解を与え兼ねない表現でしょう。
>誤解するのは受け手の勝手なのでそこまで考えてないのかも知れませんが。

さうです。

>「DTD 的に Valid である」と「HTML の仕様に従っている」ということは違うものだということはわかってますよね?

HTMLとWAIとは違ふものだと云ふ事はわかつてゐますよね。

>僕は「<p><img src="foo.jpg"></p>」というような形式でデジカメの画像を配置することは HTML の考え方としてあまり望ましくないと判断し、そのように書くぐらいならば、いっそのこと P タグを書かない方が良いと思っています。

その結果として、imgの誤つた用法を覚えてしまふ、とは考へられないのでせうか。

>なるほど。つまり誰かが誤った知識を広めようと努力していても「無視せねばならない」もしくは、「傍観せねばならない」という考えですか。

「それはいかがなものか」の類の事を言ふくらゐなら、黙つてゐて下さい、と云ふ事です。或は、「テーマ自体に関する話の誤り」と「テーマの周辺における誤り」とは異なるものだ、と云ふ事はわかつてゐますよね。

或は、話の本筋を無視して、余計な口を挟むな、と云ふ事。飽くまでテーマは「リンクのしかた」であつて、「imgは、pに含まれるべきか、divに含まれるべきか」ではありません。話の本筋を見失つてはいけません。


TNN [WriteDate : Thu May 17 20:08:50 2001]

しかも、D.D.氏の言ひ方では、「いついかなる場合にも、img要素はp要素に含まれてはならない」と云つた印象を与へてしまひます。これは大嘘ですよね。

自分の発言によつて初心者に大嘘を信じさせてしまふ危険性を、D.D.氏には御考慮いただきたい。たまにまともな事を言ふので、それなりにD.D.氏も他の投稿者から信頼はされてゐる筈です。その信頼を裏切らないで下さい。


SAY [WriteDate : Thu May 17 21:23:36 2001]

1. 要素PはParagraphを表す。
2. Paragraphとは段落である。
3. 段落とは、文書において、あるテーマをもってまとめた(区切った)部分である。
4. HTMLで記述するのは文書である。
5. IMG要素はHTMLで記述された文書を構成する(インライン)要素の一つである。
6. 以上により、テーマをもってIMG要素を記述しまとめたものは、段落である。

IMG要素をP要素で囲わなければならないと言う事は全くありませんが、囲ってはいけないと言う事も全く無い。そこを著者が段落とするか否かと言うだけで。

たまたまカヅサツさんが段落の中にIMG要素がある例を示したと言うだけでしょう。何しろ、「リンクについて」の説明なんですから。例がベストではないと思うなら、ご自分がベストと思う例をD.D.氏自らお書きになれば良い話で、あそこで疑問を呈されても、質問された方は何の得にもなりません。


おーなーしぇふ [WriteDate : Fri May 18 01:14:06 2001]

うーん、「リンクについて」というテーマから離れてしまい、申し訳ありませんでした(^^;)
およそ直接の回答は、2つ目のカヅサツさんおよび3つ目のTNNさんの投稿が有効で、すでに投稿主の問題が解決されていることを期待しています。


で、すでに投稿してしまった分についての補足のみ、蛇足ながら:
p が適切と判断したのは、先のhtml-lintのページ例及びHTML4.01の仕様書の、 IMG などの例で p が使われていることが挙げられます。
※それを踏まえた上で、その他のブロックレベル要素では(あくまで基本的には)しっくりこないという個人的判断もあり。

一方で、div については、たしかにブロックレベル要素ではありますが、「単独では意味がない」という点において、適切ではないと判断しました。
※ p には少なくとも「段落」という意味があるのに対し。

仮に用いるとするならば、<DIV class="photo">などと、class (あるいは id )をつけた上で用いるのが良いかと。
※ただし、このような場合でも仕様書の例ではやはり、p などの要素があらかじめ適用されていますが。

以上補足のみ。
※これ以上、元テーマから離れるのも心苦しいので、私もこのへんで失礼致……(^^;)


D.D. [URL] [WriteDate : Fri May 18 05:26:40 2001]

> ならば、最初からさう書いていただければ。「そういうものって1つの paragraph になります?」なんて突放した言ひ方ではなくて。笑ひ。
「〜なります?」ということから「聞き手はならないと思っている」ということは十分に伝わると思ってましたし、わざわざ書いているのだからなるのかもしれないなぁ、とも思いましたから、「ならない」と断定する書き方ではなく、質問してみたのですけど。

> その結果として、imgの誤つた用法を覚えてしまふ、とは考へられないのでせうか。
「誤つた用法」とは、HTML4.01 Strict でbody直下にimgタグを記述することだと思いますけど、それは
「デジカメの画像はそれだけで paragraph となり得る。」
と誤解するよりマシだと判断します。


> しかも、D.D.氏の言ひ方では、「いついかなる場合にも、img要素はp要素に含まれてはならない」と云つた印象を与へてしまひます。これは大嘘ですよね。
どの発言がそのような印象を与えるのでしょうか?
「<p><a href="./photo01.jpg">デジカメで撮った写真の拡大</a>をご覧下さい</p>」
もダメだなどとは何処にも書いてないですし。

強いて挙げれば
D.D. [URL] [WriteDate : Wed May 16 18:52:54 2001]
> そういうものって1つの paragraph になります?
の「そういうもの」がカヅサツさんのものも指していると誤解されるぐらいでしょうか。



ちゃいぱ@管理人 [WriteDate : Fri May 18 09:15:34 2001]

凄いことなっている!

今、読み返しました。
このスレッドのテーマについては、以下の発言以降は、不要と判断します。
D.D. [URL] [WriteDate : Wed May 16 18:52:54 2001]

しかし、
>「imgは、pに含まれるべきか、divに含まれるべきか」
の議論は有意義だと思いますので、引き続き議論されてもかまいません。
なんたって、本BSSの主旨は、関わる皆さんのスキルアップが目的ですから。

別スレッドを立ち上げましたので、そちらでお願いします。
http://www.parkcity.ne.jp/~chaichan/qanda/qa1191.htm


TNN [WriteDate : Fri May 18 15:52:30 2001]

W3CのHTML Validation Service
http://validator.w3.org/
でHTML文書をチェックし、そのHTML文書がValidであると検証された時には、「検証ずみ」バナーを貼る事が認められてゐます。

で、そのバナー用のサンプルコードが、以下のやうになつてゐるんですね。

 <p>
   <a href="http://validator.w3.org/check/referer"><img
       src="http://www.w3.org/Icons/valid-html401"
       alt="Valid HTML 4.01!" height="31" width="88"></a>
 </p>


D.D. [URL] [WriteDate : Fri May 18 21:21:05 2001]

> このスレッドのテーマについては、以下の発言以降は、不要と判断します。
> D.D. [URL] [WriteDate : Wed May 16 18:52:54 2001]
なるほど。それは失礼しました。
「誰かが本題とはちょっと離れたところで間違ったことを言っていても我々は眺めていることしかできない。」
という方針、了解いたしました。


TNN [WriteDate : Fri May 18 22:26:25 2001]

>なるほど。それは失礼しました。

D.D.さんは、本当に失礼です。


ちゃいぱ [WriteDate : Fri May 18 22:39:48 2001]

>ちょっと離れたところで
今回は、本題よりメインになってしまいましたので...。
ですので、本当にちょっとなら、眺めていないで、ご指摘ください。

本当にD.D.さんをはじめ、親切な方々で本BBSは成り立っています。
皆さま、今後もよろしくお願い致します。


D.D. [URL] [WriteDate : Sat May 19 01:00:25 2001]

> 今回は、本題よりメインになってしまいましたので...。
> ですので、本当にちょっとなら、眺めていないで、ご指摘ください。
了解いたしました。話題が続くようなら、新たにスレッドを立てます。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]
ChaichanPAPA's World