小技的なもの ~リンクその3

.

●項目・表に移動させるためには…!

 これまで、小技的なもの・その1~2では、各項目に対してidが自動的に割り振られて

いたので、そのidを見つけてコピーすればOKでした。

しかし、表などにはidが割り振られていません。

 では、同じページまたは別のページの表に対して移動するためのリンクを張れないのか?

というと、ちゃんと張ることができます。

自分でidを作ればOK。

 

 作業に入る前に、1つ重要なルールがあります。

これまでに、id属性の他にname属性というものがありましたが、近年ではid属性の他に

name属性ではなくclass属性が使われています。(多分)

といっても、別に属性がどうこうという事を知識として覚えてください、というわけではないです。

 このidの作成にあたって覚えていてほしい事があるのです。

idもclassも言わばその項目の名前のようなものです。しかし、このidとclassはよく混同されて

しまいますが決定的な違いがあり、その違いというのがidを作るにあたりとても重要なのです。

というウンチクもどうでもいいので、とりあえず「idは1ページに1回しか登場しない」という

事に気をつけて下さい。

このページではidのつけ方だけご説明します。

idをつければ、あとの手順は一緒です。idを付けた際には、どの表が何と言うidだったか

きちんと整理しておくと後々管理が楽だと思います。

 

Sample →表小技ページのborder="1"のサンプルに飛びます。

 

このような表に向けてのリンクをはる際に必要な、表のidを作成する方法です。

なお、行に対してのidは行の「プロパティ」で設定ができます。

ただし、表の1番上の行に対して行わないと、IEの場合はリンク先がページの上部に

表示されるため、表が途中から表示されてしまう可能性があります。

(火狐はリンク先がブラウザの中央に表示されるようです)

【1】移動先の表の入力エリア上にある機能の1番右側「HTML」を開きます。

【2】中略してありますが、これが移動先になる表のHTMLソースです。

  太字がテーブル(表)のタグです。1行目は表の上にあるテキストです。

  赤い部分が今回の肝となる部分です。

 

  <p><strong>border="1"のサンプル</strong></p>
  <table border="1" cellspacing="0" cellpadding="3">
  <tbody>
     ~中略~
  </tbody>
  </table>

 

 

【3】まず、タグは全部半角で打たないといけないので、入力が半角になっていることを

  確認してくださいね。全角だとうまくいきません。

  id="★"

  ★に好きな名前をつけてください。半角英数なら問題ないです。記号を使うなら「-」や

  「_(アンダーバー)」が無難かと思います。

  こんなカンジです。id="★"の手前には半角スペースが入ります。

 

  <p><strong>border="1"のサンプル</strong></p>
  <table border="1" cellspacing="0" cellpadding="3" id="sample_xxx">
  <tbody>
     ~中略~
  </tbody>
  </table>

 

  今回は”sample_xxx”というidをつけてみました。

  idを付けたら、HTMLウィンドウの左下にある「更新」を押し、項目を「保存」したらOK。

  心配な方は、保存の後にもう1度「HTML」を開いて、自動的にJimdoのシステムにより

  修正等がされていないか確かめてください♪

役に立ったら呟いてあげて下さい(・∀・)ノ
Twitter「つぶやく」ボタン