• ベストアンサー

HTMLでホームページ作成(画像の貼り付け方)アドバイスお願いします。

 HTMLで初めてのホームページを作成中です。今、トップページを作っていまして、壁紙を張って(ってまだ、一個しか作業してないですけど(; ̄ー ̄A アセアセ・・・) <HTML> <body background="ch24.jpg"> <body background="ch24.jpg" bgproperties="fixed"> </HTML> といったところまでしか進んでいないのですが、これに自分で書いた画像を貼り付けたいのです。・・・で画像は、筆まめの付属ソフト、筆まめペイントで作成したものなんですが、どうやって貼り付けたらいいのでしょう?  ファイルの拡張子は現在MLBになっています。拡張子は何に変更したらいいのでしょう?  その他、画像の貼り付けに関する簡単なアドバイスがありましたら、お教え下さい。たぶん、複雑な説明をされるとパニクってしまうと思いますので、その点、ご考慮の上お願いします。

noname#1755
noname#1755
  • HTML
  • 回答数8
  • ありがとう数7

質問者が選んだベストアンサー

  • ベストアンサー
回答No.8

まず,画像ファイルとページファイルは同じ場所にありますか? なければ,ページファイルと同じ場所に画像ファイルを移動してください。 それでも画像が表示されなかった場合は,画像ファイルの拡張子を間違った変更方法で変えたのだと思います。 筆まめペイントで,まず,MLBファイルを読み込み,「ファイル」をクリック>「エクスポート」をクリック>「エクスポートする範囲」でエクスポートの方法を選択>「OK」ボタンをクリック>「ファイルの種類」で「PNG」か「JPEG」を選択>ファイル名をつける>「ファイルの場所」で保存先を指定>「保存」ボタンをクリックしてください。 タイトル画像ですから,ここはJPEGを選択すると良いと思います。 なお,筆まめではGIFファイルとして保存が出来ません。 GIFファイルにしたい場合は,まず,上のエクスポート中「ファイルの種類」の選択で「Windows ビットマップ」を選択して保存し,別のGIFファイルに変換できるアプリケーションで変換してください。 なお,タグ内のファイル名,および,拡張子は大文字と小文字を別の文字として扱います。 また,筆まめからエクスポートされた画像ファイルの拡張子は,大文字が使われています。 ですから, <img src="taitol.jpg"> ではなく, <img src="taitol.JPG"> としてください。 全体の書き方は,No.7のpmmaohmさんが説明しているように書けば,一応,表示してくれるはずです。

noname#1755
質問者

お礼

ご回答していただいたのにお礼が遅くなりまして申し訳ありません。普段の生活や、説明を理解し、実行迄の時間が掛かりお礼が遅くなりました事を深くお詫びいたします。大変参考になりました。ありがとうございました。

その他の回答 (7)

  • pmmaohm
  • ベストアンサー率27% (230/822)
回答No.7

picoqさんの書いたタグ ************** <HTML> <head> <title>小さな友だち</title> </head> <body background="ch24.jpg"> <img src="taitol.jpg"> <body background="ch24.jpg" bgproperties="fixed"> </HTML> *************** こうしてみたら? ただし、このHTMLファイルと画像のtaitol.jpgが同じフォルダの中にあること。背景画像についても同様です。 <html> <head> <title>小さな友だち</title> <body background="ch24.jpg" bgproperties="fixed"> <img src="taitol.jpg"> </body> </html> では、もしも画像ファイルが別のフォルダにあるとしたらどのように 1つのフォルダの中に一緒に index.html gazouという名前のフォルダがあり、   gazouフォルダの中にtaitol.jpgがあるとしたら <img src="gazou/taitol.jpg"> となります。 慣れないうちは、フォルダを作らないで、1つのフォルダにバラバラといろんなファイルを置いておくといいですよ。 あとで勉強しながら、なおせばいいです。 HTMLファイルは、デスクトップにあって、 画像ファイルはマイドキュメントにあるということをする人が多いです。 それでアップロードしたとき、画像が見えない!ということが起きます。 タグを書いたらそんなことは起きませんが、書く段階で悩むことになりますね。 HTMLファイルと画像ファイルは、同じフォルダの中に入れてあげるようにしてください。 <center><img src="taitol.jpg"></center> こうやったら、画像が真中に配置されますよ。《おまけ》

noname#1755
質問者

お礼

ご回答していただいたのにお礼が遅くなりまして申し訳ありません。普段の生活や、説明を理解し、実行迄の時間が掛かりお礼が遅くなりました事を深くお詫びいたします。大変参考になりました。ありがとうございました。

  • Ryo-33
  • ベストアンサー率50% (4/8)
回答No.6

ホントわからないことが分かると面白いですよねぇ!(>_<)o" 拡張子というものはそのファイルの「固有」のものです。 ですからWindowsのペイントで作って保存した「*.bmp」というものを「*.jpg」と拡張子だけ変えても中身はビットマップの画像なのです。 ただ拡張子とはコンピュータが判断する材料にすぎないのです。あ、人間もわかりやすくなりますけどね。 そしてビットマップとJpegまた、PingやGif画像はすべて違うということですね。 参考URLに書いてあるヴェクターのサイトから簡単に探すことが出きると思います。 絵を書くのが好きだったりした場合はWindowsにもともと入っているペイントで画像を書くなりするのもいいでしょう。そしてそれをインターネットエクスプローラなどでも見れるようにjpgやgifに変換します。 gifは著作権の問題があるため、pngに切り替わるのでしょうか!?(微妙なところですが…jpgが無難でしょう)。今作っている「*.mlb」のデータを使いたいのであれば、その画像を開いた状態でキーボードの右上らへんにある「Print Screen」ボタンをクリックすると画面の画像がコピーされます。あとはそれをペイントにはりつければバッチシです。ちょっと編集するなりして自分の好みに合わせてください。 そして次にですが、読みこみたい画像の場所をHTMLで指定した場所にきちんと置くということです。 例えば、「HTML」というフォルダの中に「index.htm」のhtmlデータがあるとして、「ch24.jpg」の画像を読み出したいとき…。 <img src="ch24.jpg"> とするのであれば、「index.htm」と「ch24.jpg」の二つのファイルは同じフォルダの中になくてはなりません。 ですから「HTML」フォルダの中に「index.htm」と「image」というフォルダがあり、かつその「image」フォルダに「ch24.jpg」があった場合は、 <img src="image/ch24.jpg"> という風にしていしてやらねばなりません。 もしただ単に<img src="ch24.jpg">としていしてもch24.jpgは表示されません。 なぜならば、コンピュータがch24.jpgを探しきれないからです。 利口そうに見えて結構頭でっかちなのです。ですから気をつけましょうね! またまた分かりにくい説明でしょうが、頑張ってくださいね!

参考URL:
http://www.vector.co.jp
noname#1755
質問者

お礼

ご回答していただいたのにお礼が遅くなりまして申し訳ありません。普段の生活や、説明を理解し、実行迄の時間が掛かりお礼が遅くなりました事を深くお詫びいたします。大変参考になりました。ありがとうございました。

  • the845s
  • ベストアンサー率34% (61/176)
回答No.5

bodyはひとつしか書きませんので、 下側の<body background="ch24.jpg" bgproperties="fixed"> だけで十分です。 また、</html>の前に、<BODY>の閉じが必要ですので、</BODY> ですので、 <html> <body background="ch24.jpg" bgproperties="fixed"> </body> </html> となります。 画像を貼りつける際は、 <img src="**.jpg" width="**" height="**" ALT="**" TITLE="**"> となります。 widthとheightは横幅と縦幅、画像本来の大きさを指定しておきます。 指定しておけば、画像を読み込まないうちでもデザインを崩すことがありません。 ALTは画像が表示されない場合の代替テキスト。 TITLEはマウスを持っていくと表示されるテキストです。 width、heightとALTは必ず付けておいた方が良いです。 使える画像は、皆さんが答えてるとおり、,jpg、.gif、.pngです。 以下のページを参考になさってはいかがでしょう。

参考URL:
http://tohoho.wakusei.ne.jp/www.htm
noname#1755
質問者

お礼

ご回答していただいたのにお礼が遅くなりまして申し訳ありません。普段の生活や、説明を理解し、実行迄の時間が掛かりお礼が遅くなりました事を深くお詫びいたします。大変参考になりました。ありがとうございました。

noname#5549
noname#5549
回答No.4

ども。一歩前進したようですね。(^^) みなさん仰るように、JPEG、GIFのふたつが最もよく使われる形式です。 方法は....もう分かりましたよね。 もし保存形式の中にこのふたつが無い場合は、 pmmaohmさんも仰るようにVector、窓の杜などのオンラインソフト検索ページで、 フリーのコンバーターを拾ってくると良いでしょう。 また、JPEGとGIFどちらかで迷う場合、 写真のように細かな画像はJPEG、 アニメの様にべた塗り部分の多い画像はGIFにしましょう。 JPEGの方が圧縮率は高く、ファイルサイズは小さくなるのですが、 GIFの方が描画速度が速いので同じ画像ならGIFの方が早く出てきます。 この場合は自分で書いたものということですから、 GIFが適当でしょうね。 *念のため補足 拡張子はそのファイルの形式を表すもので、 後で変えれば良いわけではありません。 前回は拡張子が不明との事でしたので、 解決方法のひとつとして加えただけです。 きちんと保存からやりましょう。 (んなこたあ、分かっとるっちゅーねん!という場合は無視を) では、

noname#1755
質問者

補足

どうも、お世話になっています。ところで、今、他の方のやりかたでとりあえずやってみました。でも、まず、画像のファイルの拡張子を変更すると、画像が開け無くなります。 <HTML> <head> <title>小さな友だち</title> </head> <body background="ch24.jpg"> <img src="taitol.jpg"> <body background="ch24.jpg" bgproperties="fixed"> </HTML> ・・・という風に入力してページを開いたところ、やはり画像は表示されず、小さい、赤ばってんマークだけ表示されました。何が問題なんでしょうか? 拡張子はそのファイルの形式を表すもので、 後で変えれば良いわけではありません。 >いや、知りませんでした。後で変更すると、やっぱり問題が発生しちゃうんですかねー?いや、お恥ずかしい限りです。

  • po-net
  • ベストアンサー率36% (172/477)
回答No.3

まずは画像の貼り方から。 <body>~</body>の間に、 <img src="ファイルパス"> と書くのが基本です。 ファイルパス=ファイルの在り処。 試作段階のときと、公開時では場所が変わるので注意すること。。。 画像の形式は・・・、「.gif」や「.jpg」あたりじゃないですかね。 「.bmp」は個人的にオススメしません。 データが大きくなるので、遅い回線の人にはやさしくありませんので。 今は難しい説明はしません。 参考URLはかなり丁寧に説明しています。 自分のスキルに応じて読み進めてください。 それと、このテのHPはインタネット上にたくさんあります。 検索エンジンで調べるといろいろあるので、もっと自分にあったものを探してみてはいかがでしょうか。 ではでは。。。

参考URL:
http://tohoho.wakusei.ne.jp/www.htm
noname#1755
質問者

お礼

ご回答していただいたのにお礼が遅くなりまして申し訳ありません。普段の生活や、説明を理解し、実行迄の時間が掛かりお礼が遅くなりました事を深くお詫びいたします。大変参考になりました。ありがとうございました。

  • pmmaohm
  • ベストアンサー率27% (230/822)
回答No.2

<html> <head> <title>ホームページの題名</title> </head> <body> <img src="画像ファイル名.gif"> </body> </html> <title>と</title>にはさまれたところはあなたのHPのタイトルをつけておかないとせっかくのHPが名無しのごんべえさんになりますよ。 HPに使える画像の拡張子は、jpgまたはgifです。 Vectorなどに行って、画像変換コンバータの使いやすいのを探して、 拡張子の変換をされるとよいかと思います。 http://www.vector.co.jp/ 画像の貼り付けは上記のように<img src="ファイル名.gif(またはjpg)">となります。 画像のリンクの張り方 <a href="リンク先URL"><img src="ファイル名.gif(jpg)"></a>

参考URL:
http://isweb12.infoseek.co.jp/diary/kazuyuka/yuka.hp/hptag.html
noname#1755
質問者

補足

 ありがとうございます。解説どうりやってみたんですが、二つ問題がでました。 まず、画像のファイルの拡張子を変更すると、画像が開け無くなります。 <HTML> <head> <title>小さな友だち</title> </head> <body background="ch24.jpg"> <img src="taitol.jpg"> <body background="ch24.jpg" bgproperties="fixed"> </HTML> ・・・という風に入力してページを開いたところ、やはり画像は表示されず、小さい、赤ばってんマークだけ表示されました。何が問題なんでしょうか?

  • sesame
  • ベストアンサー率49% (1127/2292)
回答No.1

画像はIMGエレメントで貼り付けられます。書式は、 <IMG src="画像ファイル名" width="横ピクセル数" height="縦ピクセル数" alt="代替テキスト"> です。たとえば640*480のch24.jpgというファイルを貼り付けたかったら <IMG src="ch24.jpg" width="640" height="480" alt="ちゃんねる24"> 等とします。 http://tohoho.wakusei.ne.jp/html/img.htm >>ファイルの拡張子は現在MLBになっています。拡張子は何に変更したらいいのでしょう? JPEG、GIF、PNGのどれかにしてください。 それぞれの画像形式の向き不向きについては、 http://oshiete1.goo.ne.jp/kotaeru.php3?q=231086 の質問を参考にしてください。

参考URL:
http://tohoho.wakusei.ne.jp/html/img.htm , http://oshiete1.goo.ne.jp/kotaeru.php3?q=231086
noname#1755
質問者

お礼

ご回答していただいたのにお礼が遅くなりまして申し訳ありません。普段の生活や、説明を理解し、実行迄の時間が掛かりお礼が遅くなりました事を深くお詫びいたします。大変参考になりました。ありがとうございました。

関連するQ&A

  • HTMLでの背景画像設定について

    はじめまして。 HP作成初心者なのですが、いろいろとネットで調べながら作成しています。 フレームを使っていて、メニュー画面側のほうに画像をふたつ使いたいと考えています。 それぞれ左上と左下とで固定する画像なのですが、それがどうしてもふたつ同時に表示できません。 <style type="text/css"> <!-- BODY {background-image : url("bg2.jpg");background-position: 100 0%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> <style type="text/css"> <!--BODY {background-image : url("bg.jpg");background-position: 0 100%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> という感じに記述しているのですが、こうすると、下にあるbg.jpgのみが反映されてしまって、bg2.jpgは反映されません。 また、bg2.jpgの上には文字を重ねたいと考えているのですが、そのようにタグを編集してもうまく表示できません。 ご回答よろしくお願いいたします。

  • HTMLサイトのように…(HTMLについて詳しく分かる方お願いします

    <!-- BODY { background-image : url("○○.jpg"); background-attachment: fixed; background-position:0% 100%; background-repeat: no-repeat ; } --> コレを背景画像のタグとせず、HTMLサイトのように、ページに文字として出したいのですが、どうすればできるのですか? 説明下手ですいません´`

  • Webの背景について

    今HTML、CSSなど使ってHPを作っていますが チェックで作った背景に一つの画像を右下に固定表示させたいのですができるでしょうか? 背景固定はできるんですけど画像を右下にやるのができません。 <body background="imagfolder/02.jpg" bgproperties="fixed"> のタグはチェックの背景になっています。 固定で検索すると <STYLE type="text/css"> <!-- BODY { background-image : url("壁紙のURL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } --> </STYLE> とでてくるんですがどうしてもチェックの上に加工した画像を右下に固定したいので教えてください。 メモ帳より作成しています。 今月中に仕上げたいのでよろしくお願いします

  • ホームページに画像を貼りたい

    テキストエディットでHTMLを書き込んでホームページ作成をしている初心者です☆ 背景に画像を貼りたくてもどうやっても貼れなくて悩んでいます。 使っているパソコンはmacで、写真はFinderの中にあるマイファイルのイメージのoriginal.jpgを使いたいのです。 そこで、HTMLの方は body{background-image:url(マイファイル/イメージ/original.jpg); background-repeats:no-repeat; background-position:center;} と書き込みました。 CSSの方は、 body{ background-image:url(マイファイル/イメージ/original.jpg); background-repeats:no-repeat; background-position:center;} と書き込みましたが、ブラウザで見たところ写真が表示されなくて困っています。 本当に初心者で困っています。 できれば正しい写真の貼り方を教えていただきたいのですが、お願いします。

  • 画像にオンマウスで背景画像を固定

    画像にオンマウスで背景を水平方向+上に固定するにはどうしたら良いのでしょうか? 今現在使用しているタグだと垂直水平方向に繰り返しになってしまいます。 使用しているソースは以下のとおりです。 ---------------------------------- </HEAD> <BODY> <TABLE cellspacing="0"> <TBODY> <TR> <TD onmouseover="body.style.background='url(/image/001.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/001.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/002.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/002.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/003.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/003.jpg" width="200" height="200" border="1"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> ---------------------------------- 「fixed repeat';」を「fixed repeat-x';」に変えてみても変化なしでした。 また、styleに <!-- BODY { background-attachment: fixed; background-repeat: repeat-x; background:position:top} --> を書いてみたりもしたのですが変化なしでした。 ご存知の方、詳しい方アドバイスお願いします。

    • ベストアンサー
    • HTML
  • html言語中央寄せしたい <body background="画像url"について

    HTMLにてHPを作成しようとしています、 以下について教えて頂けますか? やりたい事 背景画像を上中央に固定させ、その画像の上から文章を 記載していきたい。 無い知恵を絞って色々やって見ましたが 背景画像が繰り返し表示されてしまします、 1枚の表示で上中央に表示させたいのですが どのような言語を使えば良いでしょうか? <html> <head> <title> ※タイトル※ </title> </head> <body> <body background="画像のURL" bgproperties="fixed"> <basefont color="#0000ff" size="3"> <br><br><br> <h3 align="center"> <font size="7"> <b> <font color="#ff0000"><font face="フォント名"> ※ここに文章を入れます※ </font> </b> </h3> </body> </html>

  • html言語で背景画像を中央寄せしたい <body background="画像url"

    HTMLにてHPを作成しようとしています、 以下について教えて頂けますか? やりたい事 背景画像を上中央に固定させ、その画像の上から文章を 記載していきたい。 無い知恵を絞って色々やって見ましたが 背景画像が繰り返し表示されてしまします、 背景画像1枚の表示でそれを上中央に表示させたいのですが どのような言語を使えば良いでしょうか? <html> <head> <title> ※タイトル※ </title> </head> <body> <body background="画像のURL" bgproperties="fixed"> <basefont color="#0000ff" size="3"> <br><br><br> <h3 align="center"> <font size="7"> <b> <font color="#ff0000"><font face="フォント名"> ※ここに文章を入れます※ </font> </b> </h3> </body> </html>

    • ベストアンサー
    • HTML
  • Webタグの背景について

    今HPを作っていますが チェックで作った背景に一つの画像を右下に固定表示させたいのですができるでしょうか? 背景固定はできるんですけど画像を右下にやるのができません。 <body background="imagfolder/02.jpg" bgproperties="fixed"> のタグはチェックの背景になっています。 固定で検索すると <STYLE type="text/css"> <!-- BODY { background-image : url("壁紙のURL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } --> </STYLE> とでてくるんですが・・・

  • 背景画像をくりかえさないhtml

     すっごいど基礎な質問ではずかしい限りです。 いま手元にテキストがなく、分からないためみなさん の知恵をおかりしたいと思います。 背景画像をつくったのですが、普通に BODY background="../icon/○○○.jpg" だと、画像をくりかえして表示してしまうのですが これを繰り返さないにするのにはどうするのか?? そのHTMLを教えた下さい!! テキストがないと何もわからない超初心者なので なるべく詳しくお願いします。。。。

    • ベストアンサー
    • CSS
  • IE以外のブラウザで、背景を固定させる方法

    まったく同じタイトルで、質問されているカタがいらっしゃいましたが、回答を読んでも分からなかったので質問させていただきます。 MS FrontPage 2000でHPを作ったのですが、IEではうまく背景固定がされるのですが、Firefoxでは、背景固定ができず、スクロールすると背景が動きます。 HTMLの部分を見ると、 <body bgcolor="#FFFFFF" text="#000000" background="bear.jpg" bgproperties="fixed" background-attachment:fixed > と言う記述があり、この部分がカギになっているようなのですが、どう変えれば、IEでもFirefoxでも固定されて表示されるのか分かりません。お教えいただけないでしょうか?

専門家に質問してみよう