Google
A revolving earth (earthani.gif--64x64) Beaverland Net
HTMLを易しく教えて!
HTML Made Easy!
 
English Version (english.gif--140x51)

 

HTML Made Easy! logo (html01.gif--140x160)

 

JavaScript Made Easy! logo (javascrt.gif--140x360)

 

Slangs not found in a dictionary logo (slangs.gif--140x260)

 

Beaverland Japonica banner (japonic3.gif--140x360)

 

Study in Canada Home Page logo (homepg.gif--160x160)

  1. 出願
  2. 学費・生活費
  3. ビザ
  4. 渡航準備
  5. バンク–バ–
    に留学しよう!
  6. BC州の教育
  7. カナダの教育
  8. 私立高校願書
    の一例 (生徒用)
  9. 私立高校願書
    の一例 (両親用)
  10. 大学入学案内
  11. 私立高校
    入学案内
  12. 全寮制私立高校
    入学案内
  13. 全寮制私立高校
    授業料
  14. 公立高校
    入学案内
  15. バンク–バ–
    公立高校
    2002 / 2003年度
    入学要項
    及び授業料
  16. 語学専門学校
    授業料一覧表
  17. バンク–バ–案内
  18. 御意見・御質問コ–ナ–
  19. 帰国子女の受け入れ
  20. BC州の官公庁
    市町村・大学・高校へのリンク
  21. 留学生のための銀行利用法
  22. 高校生1000人に留学補助

onstore.gif (140x93)

beavbook.gif (120x160)

beavcomp.gif (120x160)

beavmovi.gif (120x160)

beavgift.gif (120x160)

beavtrav.gif (120x160)

music.gif (50x50) Beaverland Music
 
ジャンプ・アクセスって
どうやるの?
(PART 2)
July 1, 2003

 

A chimp in love (310x242) チンプのゴンベイです。
僕、あなたのこと、愛しちゃったんですけど、僕のことどう思いますか?
下のボタンをクリックして教えてください。
small red button off (18x18) 絶対に、嫌い!
small red button off (18x18) 分かんないなー
small red button off (18x18) どうしようかなー。。。困っちゃうなあー。。。
small red button off (18x18) ゴンベイちゃん、好きになってあげてもいいわよ。
small red button off (18x18) あたしも、愛しているわ!キスしてちょうだい!

Chimp in distress (chimp.jpg--189x127)

そんなきつい事を言わないで欲しいなー。。。

return button (return.gif--150x50)

Chimp in puzzle (chimp007.jpg--253x367)

どうしてー分かんないの?

return button (return.gif--150x50)

Chimp in disappointment (chimp009.jpg--225x270)

はっきり、言って欲しいのになあー。

return button (return.gif--150x50)

Chimp in love (chimplov.jpg--167x229)

僕も好き、好きです。あーあ、しあわせだなあー。。。

return button (return.gif--150x50)

Animated lips (lips.gif--132x70)

return button (return.gif--150x50)

唇が止まっている場合には、あなたの
マウス(ポインター)を唇の上に持ってゆくと、
また動き出します。

 

NAME= の代わりに
ID= を使います。

上の例で分かるとおり、前のページの例と全く同じです。しかし、次に示すコードを見ると、かなり違っています。

A chimp in love (310x242) <table id="thisTable"
  class="myTable" width="460">
<tr><td>
<img src="../images/puckerx2.jpg"
  ALT="A chimp in love (310x242)"
  width="310" height="242"></td>

<p>
<a href="#sonna">
small red button off (18x18) <img name="button1" src="../images/butoff.jpg"
  ALT="small red button off (18x18)"
  width="18" height="18" border="0"></a>
絶対に、嫌い!

<p>
Chimp in distress (chimp.jpg--189x127) <table id="sonna" width="100%"
  height="600" class="myTable"
  bgcolor="green" border="0">
<tr><td>
<img src="../images/chimp.jpg"
  alt="Chimp in distress (189x127)"
  width="285" height="195"></td>

<p>
そんなきつい事を言わないで欲しいなー。。。
<P>
<a href="#thisTable">
return button (return.gif--150x50) <img border="0" src="../images/return.gif"
  alt="return button (return.gif--150x50)"
  width="150" height="50"></a>

上のコードで見て分かるように、アンカータッグを使って、ジャンプ・アクセスを起こしている点では、全く変わっていません。 ただ、ひとつだけ違っているのは、name アトリビュートを使う代わりに、id アトリビュートを使っている点です。 (ちなみに、id は identify もしくは identification の略です。)

前のページの例では、アンカータッグを使って  下に示すように、name アトリビュート と共に、ただ名前を設定するためだけにコードを組んでいます。

<a name="sonna"></a>

このページの例では、アンカータッグを使わずに、TABLE タグのなかに紛れこんで、このテーブルに名前をつける形になっています。 いわば、アンカータッグを書く分だけ、手間が省けるというわけです。

href アトリビュートは、そのまま使います。上の点を除いては、全く前の例と同じです。

 

To Part 1

 

Chipmunk pointing to the left (chipleft.gif--178x156) Related
Links


筆者紹介
Akira Kato (kato.jpg--180x135)
  • 日本とカナダの大学で教育を受ける。
  • 横浜にある大手の電器メーカーでコンピューターのソフトウエアの開発に従事する。
  • カナダのノースウエスト隼州政府・財務省に勤務する。
  • バンクーバーのランガラ・カレッジおよびサレーのクワンテレン・カレッジで講師を勤める。
  • ヨーロッパ、東南アジア、中国、北米を幅広く旅行する。
  • 現在、経営コンサルタント、フリーランス・ライターとして活躍している。
  Comments
 
name を id と書き換えるだけでは、だめなのですか?
    - 福島の初心者

この例の場合だと、うまく行きます。しかし、4文字が2文字になっただけで、あまり意味がありません。このページに示したように、 多少工夫すれば、アンカータグの分だけ手間が省けるというのがミソです。
    - Akira

二つとも、全く同じような気がしますが、いったい、name と id はどこが違うのですか?
    - 札幌の天邪鬼

二つとも、ほぼ同じように使うことができますが、違うところもあります。例えば、次に示すようなことは、name を使ったのではできません。

加藤明はよい男?

加藤明はよい男?

上の例は、次のようなコードから成り立っています。

<H3>加藤明はよい男?</H3>

<H3 id="change">加藤明はよい男?</H3>

name="change" と書くと、下の段は、上の段とまったく同じになってしまいます。 要するに、nameはこの場合、使えないわけです。

id の使い方についてもっと詳しく知りたい場合には、このページ(Named Individual Style)を見てください。 また、上の例は、スタイル・シートを使っています。 少し興味のある方は、このページ (CSS Table of Contents) へアクセスすると、スタイル・シートとはどんなものなのかが分かります。
    - Akira

 
 



御意見・御感想
とても良い 良い まあまあ 良くない 最低

お名前:
Email アドレス:
御感想を書いて下さい。



Amazon Electronics Bargain Corner (amazbagn.gif--550x280)

Beaverland ジャポニカ
Re-Discover JAPAN
inserted by FC2 system