|
|
|
2004年07月01日
カテゴリ：カテゴリ未分類
今回は講師が遅刻してしまったので、即、始める。 リンクの基本形は <a href="URL">テキスト</a> であった。 忘れた方や、追記を見ていない方は前回のページを もう一度おさらいしてほしい。 寄り道だが、ここでHTMLのパターンを見てみよう。 HTMLはタグというものを使って記述するのであった。 タグとは、こんな半角のカッコ <> で囲んだものである。 リンクなら <a> 太字指定なら <b> イタリック指定なら <i> などである。 これらは「ここからタグの内容を適用しますよ」という意味であり、 開始タグと呼ばれる。 これに対して「ここでタグの効力はおしまいだよ」と示すのが終了タグである。 リンクなら </a> 太字指定なら </b> イタリック指定なら </i> 何のことはない、単にスラッシュが付いただけである。 そして、タグの使い方は適用したい文字列を開始タグと終了タグで挟むだけだ。 実演してみよう。 ここで<b>里親募集</b>しています。 ←HTMLソース ↓ ここで里親募集しています。 ←ブラウザ上での表示 ここで<i>里親募集</i>しています。 ←HTMLソース ↓ ここで里親募集しています。 ←ブラウザ上での表示 なんという安直なルールであろうか。 考えた奴はきっと安直な性格だったに違いない。←偏見 これでもHTMLは難しいとおっしゃるかな？ 実際のところはきわめて単純なルールで構成されているのである。 若干の例外はあるものの、所詮はこの組合せなのだ。 ちょっと待て！ リンクの場合はもっとややこしいじゃないか！ 確かに、そのとおり。 タグで挟むだけならネコでも書けそうだ。 リンクの場合、開始タグの中に「href="URL"」というあて先を書かなければ 役に立たなかった。 実はHTMLを見づらくしているのは、このパラメータも元凶のひとつである。 しかし、このパラメータのおかげで、単純なルールにも関わらず、タグは 実に多様な指示をすることが出来るのである。 まあ、HTMLのルールは単純だということと、パラメータがいろいろあるよ、 ということだけ覚えておけば良かろう。 手を広げすぎると、何の説明だか分からなくなるので、リンクの話に戻る。 さて、今回はテキストではなく画像をリンクさせてみよう。 基本形は <a href="URL">テキスト</a> であった。 この、テキストの部分を画像に取り替えるだけの話である。したがって、 <a href="URL"><IMG SRC="画像のパス"></a> となる。 簡単でしょ？ この、<IMG>が画像を表示する開始タグであり、SRC="画像のパス" が 「画像はここにありますよ～」というパラメータである。 パスというのは画像をおいてある場所＋ファイル名である。 楽天日記では通常URLと同じ形式で示す。 ここで、リンクの飛び先URLと混同しないように注意すること。 片方はリンク先を示し、もう片方は画像の置き場所を示すものだ。 実際に書いてみる。 リンクの飛び先をこのサイトのアクセスログ http://plaza.rakuten.co.jp/nyancolon/?func=log とし、 画像はミケの写真を使ってみる。 <a href="http://plaza.rakuten.co.jp/nyancolon/?func=log"><IMG SRC="http://plaza.rakuten.co.jp/img/user/49/28/5934928/39.jpg"></a> 実際のブラウザ上の表示は以下のようになる。 クリックすれば当サイトのアクセスログのページへジャンプする。  <IMG>タグの中には他にもサイズ指定や代替文字指定などをぶち込むことが出来る。 たとえば <IMG SRC="画像のパス" width="320" height="240" alt="目が開いたミケ"> もう、お気づきだろうが、widthが横幅指定、heightが高さの指定である。 この数字をいじれば、元画像を編集することなく、見かけの大きさを変更できる。 もっとも画像の重さとか、きめの細かさは変わらない。 見かけを小さくしても容量は減らせないし、拡大すれば画面は粗くなる。 altは、本来は画像が表示できない場合にその代替として表示される文字列だ。 画像が表示されている場合は、マウスカーソルを画像の上にあわせると まるで説明文のような感じで出てくるアレである。 今回ここまで。 この記事がおもしろかったと思う人は１票！ クリック →  お気に入りの記事を「いいね！」で応援しよう
|
|
|||||
