ホームページ素材 画像の簡単な使い方

素材の使い方
初心者さんのための簡単なHTMLです。
もっと詳しく知りたい方はAll Aboutホームページ作成へ行ってみましょう

ホームページ作成に関しての質問には、メールでも掲示板でもお返事はしません
検索サイトを利用したり、ココの厳選リンクでもHP作成支援系のいろんなサイト様を
紹介してあるので、自分で調べてみましょう。調べ物をするのもネットの楽しみですよ(*^^*)

こちらもオススメ


画像ダウンロードの方法
Windows=絵の上で右クリック→[名前をつけて画像の保存]を選ぶ→名前をつけて保存ボタンを押す
Mac=絵の上で長クリック→[名前をつけて画像の保存]を選ぶ→名前をつけて保存ボタンを押す
ほしい画像をデスクトップやフォルダにそのままドラッグしてもダウンロードできます

画像がうまく保存できない場合(png又はgif画像なのにbmpでしか保存できない等)
ブラウザの上にあるバーの[ツール]をクリック→[インターネットオプション]をクリック→
窓がでたら、[全般]ページの上から2番目の「インターネット一時ファイル」のところにある
「ファイルの削除」をクリック→開いた窓の、「全てのオフラインコンテンツ」にチェックを入れて[OK]をクリック
これで、もう一度画像を保存してみてください。

画像をサーバーにアップロードする方法などは、借りているサーバーのFAQなどに
たいてい書いてありますので、そちらで調べてくださいね。質問されても答えられません。
壁紙
色を指定する <body bgcolor="#ffffff"> #ffffffは色です。好きな色に変えてください。ちなみにコレは白
透過してある壁紙のときなんかにも使えます
画像を指定する <body background="kebe.png"> kebe.pngは自分で付けた名前に代えてください
まとめ・例 <body bgcolor="#ffffff" background="kebe.png">
画像表示
そのまま <img src="icon.png"> icon.pngは自分で付けた名前に代えてください
サイズを指定する <img src="icon.png" width="30" height="30"> width="横のサイズ" height="縦のサイズ"
画像の大きさや自分がしたい大きさに代えてください
まとめ・例
<img src="icon.png"> の場合
<img src="icon.png" width="35" height="20"> の場合
<img src="icon.png" width="70" height="40"> の場合 容量は変わらないまま画像だけが大きく見えます 画像その物をかまわなくても(加工しなくても) タグでのサイズ指定だけで大きさを変えられるので便利です ただし、画像によっては汚くなってしまう物もあるので注意
<img src="icon.png" width="30" height="15"> の場合 上の逆で小さくしてみました。
リンクを貼る
文字で
素材や ぽんぽん
<a href="http://www.tamagochan.com">素材や ぽんぽん</a>
素材や ぽんぽん
<a href="http://www.tamagochan.com" target="_blank">素材や ぽんぽん</a>
画像を使う
素材や ぽんぽん
<a href="http://www.tamagochan.com" target="_blank"> <img src="bana.gif" width="88" hight="31" alt="素材や ぽんぽん"></a>
素材や ぽんぽん  border="0"を付けると画像の周りの線が消えます
<a href="http://www.tamagochan.com" target="_blank"> <img src="bana.gif" width="88" hight="31" border="0" alt="素材や ぽんぽん"></a>
遊ぶ
流れる
(IEのみ可)
○には数字を入れてください。数字が大きくなるほど早くなります。

↑を右から左へ
<marquee scrollamount="○"> <img src="画像の名前" width="30" height="30"></marquee>

↑を左から右へ
<marquee direction="right" scrollamount="○"> <img src="画像の名前" width="30" height="30"></marquee>

↑を往復させる
<marquee behavior="alternate" scrollamount="○"> <img src="画像の名前" width="30" height="30"></marquee>
ロールオーバー
<img src="1.png" onmouseover="this.src='2.png'" onmouseout="this.src='3.png'">

触ってみて
1=最初に出ている画像、2=マウスが触れた時に見せたい画像
3=マウスがはなれてる時に見せたい画像 の3つの画像を使っています

o(*^▽^*)o ̄♪わーい! アリ\(*^▽^*)/ガトゥ
投票していただけると嬉しいです
もっと楽しくコミュニケーション!次世代アバタサイト【ABA★TOWN】
アバター付きブログ
月額263円からのかわいいサーバー!ロリポップ!
かわいいドメインGET

メルマガも発行してみよう