ケータイ版 ミニタコ

  HTMLタグ > 画像用追加タグ
画像に関するタグ。
<img src=〜>の < > 内に以下のタグを追加して使います。
画像の横に並ぶ文字の位置

 align=【位置】

top middle bottom

説明のポップアップ 
画像にマウスをのせると、説明などをポップアップして表示します。

 title=【説明など】

読み込み中と読み込めないときの説明 ここに説明が出ます。
画像が読み込まれるまで、または何かの理由で読み込まれないときに画像の代わりに表示される説明など。
読み込み後は、「title」と同じようにポップアップしても表示します。
「title」も両方入れた場合、ポップアップは「title」の方が優先されます。

 alt=【説明など】

画像のサイズ

 width=【幅】 height=【高さ】

★サイズを変える場合、幅か高さのどちらかだけを指定すれば、もう片方も同じ比率で変化します。
比率が違うと縦長や横長になってしまうので、片方の指定の方がよいでしょう。

指定なしでもそのまま表示されますが、サイズを指定しておくと読み込み中からそのサイズが確保されて、 読み込んだら画面がずれる、ということがなくなります。
また、もとの画像より大きくしたり小さくしたりもできますが、画質がかなり悪くなります。
大きな画像をサムネイル ( 案内のための小さな画像 ) として小さく表示するには便利ですが、 素材屋さんの画像や人からもらったイラストなどは、礼儀としてそのままのサイズで使って下さい。
画像の枠の装飾 

 style="border:【太さ】 【色】 【スタイル】"

枠は「border」の代わりに以下のタグを使って、上辺、下辺、左辺、右辺を別々に装飾することもできます。 

上辺 border-top 左辺 border-left
下辺 border-bottom 右辺 border-right

または、太さを「border-width」、色を「border-color」、スタイルを「border-style」として単独での指定もできます。
これを使うとき、半角スペースをあけて4つ並べると、「【上辺】 【右辺】 【下辺】 【左辺】」の順に指定できます。

行間や枠の太さによっては、枠がとび出たり重なったりするので、最小限がいいかと思います。
余白も同時に指定すると完璧ですが、そこまで凝っても…という気もしますw
「HTMLタグ」のトップに戻る
  サイト案内
■メインコンテンツ
イラスト / WEB素材 / CGIスクリプト / HTMLタグ / デスクトップアクセサリ / スナップ写真 / クローゼット / コスプレ写真 / フォント / オークション用テンプレート / ナース勉強会 / ナチュラルライフ / 節約レシピ / リンク集 / 日記 / アルバム / エッセイ / サークル活動・通信販売 / トップページ





タコ缶メルマガ
毎週日曜日22時頃発行。
サイトの更新情報やその裏話、Q&Aなどをお届けします♪

▼トップページを登録
各種ブックマーク
BlogPeople

▼各種ブックマーク・RSS・お気に入り


RSS管理 / RSSページ / RSSって?


  ご用達リンク
  QRコード


  カウンタ
Total:
Today:
Yesterday:

  PR
世界一かわいい年賀状 / おしゃれでかわいい年賀状
プロのイラストレーターさんデザインの年賀イラストが満載です。 見るだけでも楽しい♪

フレッツ光NTT東日本 / NTT西日本
光にするならフレッツ光。

Yahoo! BB ADSL
光が届かないお家には。

楽天カード
楽天でなら2%、他は1%。知ってる限りの最高還元。

Yahoo!JAPANカードSuica
1%還元。ポイントはSuicaにチャージして使えます。

インフォカート
あやしい商材でアフィリエイトw

ホームページ売上アップドットコム
プロ向けSEO対策。

フルーツメール
メールや動画を見てポイント集め。 豪華景品懸賞も。