【第５回目】alt属性
本日で早いもので第５回目。
今回から【あると便利＆喜ばれるタグ・属性】編の始まりです。
ここで紹介する予定のタグは、知っていればお得というもので、
必ず書いておかなければいけないものではありません。
こういうことを書いていると、後々良い結果になるであろうものです。
ここで色々言うよりも、実際の中身で紹介していく方がわかりやすいと思います。
それでは今日も始まり始まり～！
今回の紹介するものは「alt属性」
まず「alt属性」がどんなものかの紹介から・・・
「alt属性」というのは、HPで画像を表示する時に使用する<img>タグの中で使用します。
どんな効果があるかというと、
「画像が表示されない状態の時に、代わりに表示される文字」
のことです。
htmlタグの書き方は以下のような書き方です。
『<img src="ここに画像へのパス名" alt="代わりに表示される文字">』
こんな書き方を書かれてもわからない人のために、これから例を挙げていきます。
まずは、この下の画像で「新着」という文字を表示させる場合はこんな感じです。
(ここでは文字が見えるように、わざと画像を表示されない状態にしています)
(<img src="http://plaza.rakuten.co.jp/img/user/18/80/671880/xx.gif" alt="新着">)
この「alt属性」に文字を書くことで、もしHPで画像が表示されない場合にでも、
どんな画像がここにあるかHPを見ている人にはわかるようになっています。
また、始めの説明で書いていませんでしたが、もう１つ便利な機能があります。
それは・・・説明するよりも実践したほうがわかりやすいと思うので、
ここの下のトロの画像の所にマウスのカーソルを合わせて見てください。
すると、トロの画像からどんな文字が見えましたか？
「見えたかニャ？」っていう文字が見えれば、見事成功です。
もし見えない場合は、今このHPを見ているために使っているブラウザというソフトが
この機能に対応していないから見えないだけです。
たぶんそういう人は少ないと思いますが、一応補足ということで・・・
この「マウスを画像の上に合わせると文字が見える」機能は、
HPを管理している人にも、HPを見る人にとっても便利な機能です。
まずHPを管理する人にとっては、この「alt属性」の所に画像がどんなものかを書くことで、
HPを見る人にわかりやすい説明を書くことができます。
また、この「alt属性」に説明を書くことで、別の場所に説明文を書くスペースを
用意しなくても良いことにもなるので一石二鳥です。
HPを見る人にとっては、その画像が何かわからない場合でも、マウスのカーソルを
画像の上に移動させるだけで、どんなものかわかるので非常に便利です。
このようにHPを管理する側も見る側も非常に便利なものになっています。
ちょっとした工夫でこんなに便利になるのだから、使うしかないでしょう～。
是非、この「alt属性」を使って自分のHPを便利にしていきましょう。
(雑談)
【あると便利＆喜ばれるタグ・属性】編の１回目でしたが、どうだったでしょうか。
このHP講座を作ろうと思った時点では、タグの書き方を説明するつもりはなかった
のですが、段々と時間が経つにつれて、
「せっかく紹介するのならタグの書き方も書いて、みんなに実行してもらおう」
ということでタグの説明を例付きで書いてみました。
例がある方がわかりやすいと思うので、今後はこの書き方で進めていくつもりです。
わかりにくい説明や例があったり、タグの書き方がわからないことがあれば、
私の方に連絡いただければ補足説明いれます。
あと、感想なども随時お待ちしています～。
それでは来週に続く～！
© Rakuten Group, Inc.
