気にいった素材を貼りつけるには？

Question

Windows９８のメモ帳でHP作成の練習をしています。
よく本に気に入ったホームページやフリー素材を保存しておいて
自分のHPに貼りつける事ができます、と書いてあるので
指示通りやってみるのですが　タグ＜IMG＞云々のあとに
貼りつけてみても箱が出てくるだけで　できません。
いったいどうしたらいいのでしょうか？Gifというのもわかりません。
基本的な質問ですみません。どうか教えてやってください．

kumosuke · Accepted Answer

たびたびどうも、Kumosukeです。恥をしのんでやってきました。はてさて、とりあえず参考URL先に飛んでみてもらえますか？ cariさんのHTMLに、こっちで適当に画像をつけて表示させてみました。ちゃんと表示されているでしょうか？「回答に対するお礼」を見て、いくつか思ったんですけど…… まず、HTML内の記述が、ちゃんと締め切られていないんですよね。具体的（参考URL先のHTMLです）にいうと…… 　←これに対する締め切り（1） TikaのWEBサイト　←これに対する締め切り（2）

Welcome to Tika

まだまだ知られていないとてもすばらしいインドネシアの工芸品。
みなさんに知っていただけたら幸せです。

HTMLに挑戦

Runa's Silver
Batik
Kerajinan Tangan

　←（2）　←（1）上のように、（1）（2）がそれぞれないんですけど、cariさんの方はどうでしょう？ HTMLの常識なんですけど、上のようにちゃんと締め切らないといけない（「/」をいれる）ので、タグを書くときは注意してください。あと、画像の保存がうまくいってないようですね。参考URL先の画像を保存してみてください。コンテキストメニュー（右クリック）の「画像に名前をつけて保存」でかまいませんから。場所は……適当でいいんですけど、みやすいようにデスクトップにしておきましょうか。そして、保存した画像をダブルクリックしてみて、ちゃんと表示されるか確認してください。いかがでしょう？ちゃんと表示されていますか？とりあえず、タグで締め切っているかどうかの確認と、画像が表示されているかどうかの確認、結果を教えてくださいね。ではでは。参考URL：http://www.tcat.ne.jp/~hssh/sample.html

kumosuke · Answer

あ…… これはこちらのミスですね。失礼しました。え～

ですね。本当にすいません、「=」を入れ忘れてましたm(_ _)m あとついでなんで、になってますけど。にしたほうがいいですよ。本当に、すいませんでしたm(_ _)m

chocolats · Answer

横からはいってしまって申し訳ないですが、気がついたのでお答えします結論としてのタグの書き方が違います。 HTMLのファイルと同じフォルダにあるxxx.gifという画像を表示させる場合

と書きます。もしそのフォルダの中に「image」というフォルダを作っていれる場合

ですね。＃IMG SRCは大文字でも小文字でもかまいません。画像のファイル名などは実際のものと全く同じになるようにします。

kumosuke · Answer

まいど、Kumosukeです。
sesameさんのおっしゃる通り、ここにHTMLを貼り付けてもらえると、早いんですけどね＾＾；
まあ、そうもいかないでしょうから……
とりあえず、確認してみてください。

●ファイルへのパス名が正しいかどうか。
HTMLと同一フォルダ内にあるのであれば、相対パスでかまわないので、前述した<img src"****.gif">でできるはずなんです。
「箱になって出てしまう」という表現がいまいちよくわからないんですけど……
変なちっこいマーク(画像の読み込み失敗のマーク)がその箱の左上にあるんですよね？
それが表示される以上、タグは間違っていないので、問題はファイル名にあるはずです。
もしかして……その画像ファイル、拡張子がGIFではなくGPEG(JPG)とかPNGだったりしませんよね？
拡張子があっているのなら、ファイル名です。
アドバイスとしては、ファイル名にスペースや全角文字を入れるのやめてやり直してみてください。
それと、ファイル名に大文字を使っているのなら、その辺もしっかりしないとダメですよ。
例：
ファイル名 → KumoSuke.gif　　パス名 → KumoSuke.gif = ○
ファイル名 → KumoSuke.gif　　パス名 → kumosuke.gif = ×

●記述はすべて半角英語で行われているかどうか。
具体例でいくと、"ｋ"と"k"の違いです。
この微妙な差がわかってもらえるでしょうか（笑）
あるいは、"Ｏ"と"O"でもいいですけど。

これらをもう一度確認してみてください。


余談。
＞ でも同じフォルダでも絵は2種類あって　ネットスケープの絵と 
＞ もう一つは白い箱に何かがついてるような絵です。 
ってのは、「白い箱に何かがついてる」ってのは、フォルダのアイコン（見ようによってはそう見えますからね）のことだと予想できるんですけど。
ネットスケープの絵って、HTMLファイル（ or ショートカット）のことじゃ……？
もう一度、拡張子をはっきり確認したほうがいいと思いますよ。
やり方は、フォルダだったらなんでもいいんで、とりあえず開きます。
んで、[ツール]メニューの[フォルダオプション]から、{表示}タグの中の「登録されているファイルの拡張子は表示しない」のチェックを外して、「すべてのファイルを表示する」にチェック。
これで、拡張子を見ることができるはずです。

sesame · Answer

いっぺん、画像ファイルを表示させようとしているHTMLファイルの内容すべてを、ここに貼り付けてみてください。 Test

という感じで。きっと解決の糸口が見つかると思いますよ。 >>でも同じフォルダでも絵は2種類あって　ネットスケープの絵と >>もう一つは白い箱に何かがついてるような絵です。そのネットスケープと白い箱…というのはアイコンの表示ですか？画像の内容そのものはちゃんと表示されますか？それから、その2種類の拡張子はそれぞれ何と何になってますでしょうか？

kumosuke · Answer

横槍ですいません。ちょいと気になったもので。えっと、cariさん。という感じにしてますか？＜IMG.src=" gif"> ← これ間違ってますよ。ドットと半角スペースの位置が…… あと気になったのは、「どうも画像ファイルがHTMLファイルと同じフォルダにあるかどうかというところでつまずいているようなのですが」え～＾＾； 'ホームページ'というフォルダ(とりあえず名前変えなくてもいいです)でいいんで開いてみて、そこに指定したい画像ファイルはありますか？たとえば、'ホームページ'というフォルダの中にさらに'image'とか名前をつけたフォルダがあるのだったら、にしないと表示されませんよ。同一フォルダ内にあるのであれば、相対パスで表示されるはずです。絶対パスで記述してるのでしたら、相対パスに変えてみては？

sesame · Answer

>>保存するときに問題があるのでしょうか？画像に名前をつけて保存と
>>いうのでやってホームページというフォルダにいれているのですが。

「ホームページ」という全角日本語名のフォルダなのが原因なのかな？
普通は大丈夫なはずなんですが、念のため、
C:\homepage\
のような半角英数だけのフォルダをルートに作って、そこに画像ファイルとhtmlを置いてみてください。
メモ帳のファイラより、エクスプローラを使った方がわかりやすくて確実です。

>>＜IMG.src=" gif"> と書いても箱になってでてきてしまいます。
　↑この記号も全角(＜)じゃなく半角(<)が正しいですけど、そこは大丈夫ですか？
「箱になって出てくる」ということは、HTMLの記述自体は合ってるということなので、あと一息のはずです。
自信をもってがんばってください！

sesame · Answer

↑という書き方でふつううまくいくと思いますが、どうでしょうか？練習するだけなら

だけでもO.K.です。(他の項目はインターネットに公開する際にはあった方が良い) 気をつけなければならないのは、・記号も含め、すべて半角英数文字になっているか(全角文字が混じっていないか) ・画像ファイルの名前は合っているか(大文字/小文字も合っている必要があります) ・画像ファイルはHTMLファイルと同じフォルダにあるか。無ければその場所の指定を間違えずにやっているか。等をチェックしてみてください。 Gifというのはwwwで表示できる画像形式の一種で、16色や256色等の色数の少ない画像に向いた形式です。透明色を抜いたり、簡易なアニメーションを作ったりすることもできます。

気にいった素材を貼りつけるには？

たびたびどうも、Kumosukeです。

あ……

横からはいってしまって申し訳ないですが、気がついたのでお答えします

この回答への補足

まいど、Kumosukeです。

この回答への補足

いっぺん、画像ファイルを表示させようとしているHTMLファイルの内容すべてを、

横槍ですいません。

>>保存するときに問題があるのでしょうか？画像に名前をつけて保存と

<IMG src="xxxx.gif"width="100" height="100" alt="画像の説明">

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング