ホームページ作成超初心者です。
初歩的な質問で恐縮です。

ホームページに画像を横に並べて(左→右)表示させたいと思っています。

<img src="画像ファイルのURL">
というHTMLで画像を表示できるところまでわかったのですが、続けて入れると画像が縦に並んでしまいます。

ド素人で申し訳ないですが、どなたか方法を教えて頂けませんか?
よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

<img src="画像ファイルのURL"><img src="画像ファイルのURL"><img src="画像ファイルのURL">・・・




とした場合、横に並びますよ
ただし、画像のサイズとブラウザサイズにもよりますが・・・

ブラウザサイズを無視して横に並べたいのであればTableを組んでしまうのも手です

<table>
<tr>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
</tr>
</table>

これで、横に並べれます


あと、アドバイス
<img src="画像ファイルのURL"> → <img src="画像ファイルのURL" width="横寸法" height="縦寸法" alt="画像の名前">
のように、width、height、altは指定しましょう
    • good
    • 9
この回答へのお礼

教えて頂いたとおりにするとうまくいきました!
ありがとうございました!

お礼日時:2005/02/27 22:36

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラ

添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラーしか出た事がないのですが

Aベストアンサー

他の回答者様の記入通り、拡張子が無い事には判断出来ません。
また、クリックしてもエラーとありますが、webから探すとか出ませんか?
憶測ですが、多分質問者様のPCにこのファイルを開くアプリケーションが
インストールされていないのではないかな?って思います。
参考までに
よくありがちなのは、XPで作ったエクセルファイル等(逆だったかな^^;)を
ビスタのPCで見ると似たようなアイコンになります。
オフィスの互換パックをインストールすると見れます。

Q【CSS】【HTML】横並びメニューについて ホームページに上画像のような4つボタンのある横並びメニ

【CSS】【HTML】横並びメニューについて
ホームページに上画像のような4つボタンのある横並びメニューを作りました。
ぼかしている部分と赤と黄色の棒を背景とし、その上にボタン部分となる各4つの画像を重ねています。

しかし4つの画像をピクセルで位置のの指定をしているため、ページ全体をセンタリングすると、各ボタン画像が背景について行かず下の画像のようになります。

ページ全体をセンタリングした場合も上画像のようにするためにはどうしたら良いのでしょうか?

ページは1000px程度で考えています。
さらにこのページを1920pxまで横に伸ばした場合に余白部分に赤と黄色の棒部分を表示させる方法があれば教えていただきたいです。(メニューから端まで同じデザインが続く感じ)
イメージはhttp://www.kumamoto-med.jrc.or.jpのホームページのような感じです。

ちなみにボタンはa:hoverで切り替えています。

Aベストアンサー

ソース拝見しました。

画像を横並びにする方法は色々ありますが、position: absolute;を使うケースはほとんどありません。
position: absoluteを使うにしても、position:relativeで、起点となる親要素を指定するのが重要です。
今回、画像がずれるという現象も、それに起因しています。

(1) floatとclearfixを用いる方法(floatとその解除)
(2) インライン要素に変えて並べる方法(ブロック要素とインライン要素)

既に古いですが、古いと言っても、この2つがレイアウトの基本です。
これができなければCSSを自身で記述してWebサイトを作るのは無理です。

ただ、今どきは、CSSフレームワークといって、CSSを自身で記述できなくとも、
特定のルールに沿ってクラス名を付与していけば、簡単にレイアウトが組める方法がありますので、
そちらのやり方をオススメします。

"Bootstrap 使い方"で検索してみてください。

こちらをぜひ使いこなして、カッコいいサイトを作ってみてください。

Q右クリで画像保存が出ない!

画像を取りたくて矢印を画像に置くと!手のマークに代わり!右クリができなくなりました。
どうしたらよいのでしょうか?

Aベストアンサー

最近のサイトでは著作権の問題もあり、勝手に保存ができないように右クリックができないように設定しいるところが多くなっているであります。法律に抵触する場合もあるであります。

方法としては、色々あるでありますが、ただ見えてる画像が欲しいのであれば、プリントスクリーンでPC画面全体をコピーして、ペイントソフトにペースト、余分な部分を削除して保存すればいいと思うであります。

プリントスクリーンはググってほしいであります。

Qホームページで写真が縦にズラ~ッと並んでいるページがあるとします。

ホームページで写真が縦にズラ~ッと並んでいるページがあるとします。
そのまま印刷をすると中には写真の途中で次頁にまたがってしまうものがありますが、
ページの作成の仕方次第で例えば「3枚で1頁」等の指定が出来て、
10枚の写真がある際には写真3枚の用紙が3頁+写真1枚の用紙が1頁と
ページ指定が可能だと聞いたのですが本当にそんなことが可能なのでしょうか?
調べても分らなかったものでどなたかお分かりになる方がいましたら
お力添えをお願い致します。

Aベストアンサー

スタイルシート(CSS)を使えば容易に可能です。

ページの頭にしたい、4枚目、7枚目、10枚目の画像表示のところで
page-break-before: always
を指定しておけば、その直前で改ページされます。

http://www.tagindex.com/stylesheet/page/page_break.html

また、media 指定を使えば、画面表示と印刷とでスタイルを切り替えることもできます。
http://www.stylish-style.com/csstec/hi-level/print-css.html

これを使えば、ナビゲーションリンクなどは印刷には出さないなど、
印刷専用のページレイアウトを作ることもできます。

Q 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思

 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思います。着衣・水着・スカート、なんでもOKです(あまり小さいサイズじゃない方がよいです)。どうぞよろしくお願いします。

Aベストアンサー

こちらに数点ありました。
http://bsearch.goo.ne.jp/image.php?UI=web&TAB=web&STYPE=0&CC=1&SCRDEF=0&IMGST=0&IMGSZ=0&IMGC=3&IMGFT=0&IMGFT=1&IMGFT=2&IMGFT=3&MOVPT=0&MOVFT=0&MOVFT=1&MOVFT=2&MOVFT=3&AUDPT=0&NSDP=1&KWDP=1&DC=20&FR=1&SM=mc&OCR=1&SITE=&SITE2=&SITE3=&SITE4=&SITE5=&SITEH=&AUDST=0&AUDMST=0&MOVTHN=0&QGR=1&MOVSC=0&NOJSB=0&QGA=1&NOJS=0&AUDSITE=0&MT=%CD%A7%B6%E1&button=%B2%E8%C1%FC%B8%A1%BA%F7
画像を使用される場合は自己責任でお願いします。

Qgooの無料ホームページへアップした画像を、簡単ホームページに・・・

gooの無料ホームページへアップした画像を、簡単ホームページに・・・
gooの無料ホームページへアップした画像を、
簡単ホームページや別のところでリンクして使う方法がわからないのですが、どなたか教えていただけないでしょうか?
無料HPの方でアップロードした画像をリンクで持ってくる場合、
画像のURLはどうすれば取得出来るのですか?他の無料日記などに、
<img src=・・・・・>のタグで貼る場合に、
・・・・・に入れるURLがわからなくて困っています。
それともこのやり方ではなく、他のやり方でないとダメなのでしょうか?
毎度稚拙な説明&質問ですみません。
出来たら素人向けの説明でお願いします(^^;

Aベストアンサー

『goo』さんの無料HPは『xHoops!』さんに移転してるはずですが、
移転は完了してますか?

アップロードした画像ファイルのURLは、
TOPページの『index.html』と同じ階層なら、
http://users.hoops.ne.jp/ユーザーID/ファイル名.拡張子
となります(多分?)、タグで書くと

<img src="http://users.hoops.ne.jp/ユーザーID/ファイル名.拡張子
" border="0" width="横" height="縦" alt="画像コメント">

ってな感じになります。もっと簡単にするなら
<img src="http://users.hoops.ne.jp/ユーザーID/ファイル名.拡張子">
です。

無料日記に画像を貼り付ける場合は、タグの使用が許可されてる場合だけです
基本のタグは、同じと考えて良いと思います。が・・・タグの書き方等は

『beepのホームページを素敵にしよう』
http://www.soma.or.jp/~beep-pc/

『牛飼いとアイコンの部屋』
http://www.ushikai.com/
ここの2つはシンプルで解りやすいでしょう。
もう少し詳しく書いたほうが良いですか?


          X1turboの友達 hiro。

『goo』さんの無料HPは『xHoops!』さんに移転してるはずですが、
移転は完了してますか?

アップロードした画像ファイルのURLは、
TOPページの『index.html』と同じ階層なら、
http://users.hoops.ne.jp/ユーザーID/ファイル名.拡張子
となります(多分?)、タグで書くと

<img src="http://users.hoops.ne.jp/ユーザーID/ファイル名.拡張子
" border="0" width="横" height="縦" alt="画像コメント">

ってな感じになります。もっと簡単にするなら
<img src="http://users.hoops.ne.jp/ユーザーID/フ...続きを読む

Q●「美人アプリ」の画像を保存したい!

●「美人アプリ」というアプリを使用しています。

●ここで表示される画像を保存したいのですが、方法がわかりません。可能かどうかも。。

●もし、方法をご存知の方がいらっしゃいましたら教えていただけませんか?おねがいします。

Aベストアンサー

保存したい画像を表示させて、↓の方法で画面をキャプチャすると、写真アルバムから見れます。
http://blog.livedoor.jp/sakusakupocky/archives/50263981.html

Qで出る枠

を消すにはどうしたらいいのでしょうか?

Aベストアンサー

<a><img src="x.gif" border="0"></a>
で大丈夫だとおもいます。

Q右クリ禁止のサイトの画像を保存

質問の通りなのですが右クリック禁止のサイトの画像を保存できるようにする方法はないでしょうか?あと、よく海外でおもしろ動画とかを見せてるサイトがありますが、そういった動画を保存する方法はありますか?重ねて質問すいません^^;

Aベストアンサー

そのサイトを見ないとなんとも言えませんが、
JAVAをオフにしてみると右クリック禁止がはずれる事もあります。

それで駄目ならば、プリントスクリーンを取って画像を修正してください。
まぁ画像を持ち出されたくないサイトならばあまり持ち出さないほうがよろしいかと思います。

ちなみに動画を保存する場合は専用のソフトなどが必要。

Qの一括指定

ファイルの中に、<img src=** border=0>のタグが複数あり、
少しでも、ページを軽くしたいので、
cssなどを使用して、border=0というのを一括指定することは可能でしょうか?
わかる方が居りましたら、ぜひ、教えて下さい。
それでは、宜しくお願いします。

Aベストアンサー

できます
参考URLを参照(画像に枠線をつける)なさって下さい。

ただし!!
ネスケ4.7系を使用されている方々には、このCSSでは画像の周りに
青く太い線が表示されてしまいます。
もし、万人向けに作成されるのでしたら、border="0"は指定された方が
いいかと思います。

参考URL:http://www.tees.ne.jp/~maruo/webpage/css/css-html.html


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報