愛猫との日々を、軽い気持ちで書き綴り中。

2011年11月
-
-
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
-
-
-
RECENT
RECENT COMMENTS
ARCHIVES
PROFILE
ミント♂

10月5日生まれ。写真は4ヶ月頃です☆小さい頃の怪我が原因で下半身は麻痺してますが、毎日元気に猫してますv   ===============

芽@管理人

2004年秋、初めて猫を飼いました。やっと扱いにも慣れてきて、今度はblogに手を出してみたいと思います♪      ===============

【web拍手について】

更新が滞っている時にポチポチっとして下さると、管理人のヤル気がUPする♪・・・かもしれませんw拍手と共にメッセージ送信も可能なので、御用の際には是非ご活躍下さい!※メッセージへのお返事は《Diary&BBS》記してみます。(下記リンク欄参照)に掲載予定です。   ===============

★現在のお礼絵

写真で4コマ♪(全5種類・ランダム表示)

LINK
CATEGORY
PR




HTMLタグ?〜imgタグ
さて、それぞれのタグの意味。
今回は一番よく出てくると思われる<img>タグについてです。


<img>は画像を置くという命令のタグです。
ただ置くだけなので『ここまで』という意味である</img>は必要ありません。

でもよく見ると<img>の中にはwidthとかheightとか色々書いてありますよね?
では今回はペログーの投稿画面を例に見てみましょう(^^


スポンサード リンク
ペログーで投稿する時、写真を貼り付けるとこんな文が出てくると思います。
※『左側』を押して投稿した場合、『省略』はその名の通り省略してます(笑


<a href="http://(省略).jpg" target="_blank"><img src="http://(省略).jpg" width="350" height="262" alt="1188134983884541.jpg" border="0" hspace="5" align="left"></a>


今回のテーマは<img>タグなので赤い部分だけ注目して下さいね。

タグの中身を更に省略してみると・・・

<img src="〜" width="〜" height="〜" alt="〜" border="〜" hspace="〜" align="〜">

・・・こんな風になっていると思います。
実はこの『<img』から『>』までの間に書かれている内容には
『どんな飾りを付け加えるか』が書かれています。
つまり『src』『width』『height』『alt』『border』『hspace』『align』という飾りつけを施して
貼り付けましょうという意味になっているんです(^^
タグを書くときは『="〜"』の『〜』の部分を自分好みに変えたり、
必要な装飾部分だけ書いたりすることができます。
(もちろん要らない装飾部分は消すことも可ですv)


以下はそれぞれの飾りの意味です。

src→画像が置いてあるURL(必須)。
 ペログー(猫カテゴリー)でアップロードして使うと
  【http://cat.pelogoo.com/ユーザー名/pic/アップロードした時のナンバー.jpg(もしくは『.gif』『.png』)】という形になる。


width、height→画像の大きさ。widthは幅でheightは高さ。


 alt→カーソルを置いたときに出てくる説明文。


 border→画像の周りを囲む線の太さ。数字が大きいほど太い線。
      リンクが貼ってある場合のみ『border="0"』と書かないと勝手に囲まれてしまう。


 hspace→画像の左右の余白。数字が大きいほど隣に書かれた文字が離れる。

vspace→画像の上下の余白  もあります。)


 align→画像の隣に文字を書くときの位置指定。
     leftは画像が左、文字が右。
      rightは画像が右、文字が左。

     一行だけ入れる場合は『top』『middle』『bottom』も使えます
     二行目以降は画像の下に配置されます。


例:topの場合

  middleの場合

  bottomの場合





※真ん中にしたいときは<div align="center">を使って移動させているので
imgタグの中には含まれていません。
imgの中のalignは、画像と文字の位置関係と考えると解り易いかもです。

ちなみに写真の左右どちらにも文字を入れたくない場合は
『align="〜"』を消して1行改行してから書き始めると
写真の下にレイアウトされます。




この記事へのトラックバックURL
http://cat.pelogoo.com/kyachan/rtb.php?no=1188574947479861



◇ 返信フォーム


名前 :   情報を保存する
メール : 
URL : 
題名 : 

内容 :