- 締切済み
スタイルシート【複数の画像の配置について】
初めまして、質問させていただきます！ 今、サイトを構築中なのですが、そこで困ったことがおきました。 <link rel="stylesheet" type="text/css" href="./default.css" media="all" /> <style type="text/css"> <!-- Body{ margin:0 margin:0;} --> IMG.a{ position: relative; left:60px; top:60px;z-index:1;} IMG.b{ position: relative; left:100px; top:20px;z-index:0;} </style> </head> <Body Style="margin:0 margin:0;"> <img class="a" src="**" alt="**" width=197 height=143> <img class="b" src="**" alt="**" width=78 height=59> このように、スタイルシートで画像の位置を指定しているのですが、 画像を増やしていくと、下（または上）に余白が出来き、どんどんスクロールが出来るようになってしまい、うまく画像を配置できなくなってしまいます。 ちなみに画像はFireworksで作ったものを書き出したものです。 他にタグを打ち込むなどで、解消できるのでしょうか？ 構築は初めてで、タグの知識もほとんどありません。 どうか、よろしくお願いいたします。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- mazimekko3
- ベストアンサー率38% (74/194)
[./default.css]の内容は？ xhtmlで書くのなら属性値は["]で囲まないといけませんよ。 imgタグのheightとwidthができてないです。 最後に閉じるタグがないです。<img />というように[ /]をつけてください。 また、タグは全て「小文字」です。修正を。 （xhtmlとhtmlがごちゃ混ぜになってます。） 以上ソースの添削 それとrelativeは「標準で表示される位置から、相対的に...」という意味です。 指定以外は標準位置で表示されますよ。 どのように表示したいか分からないので、これ以上書けないですけど。
- CrownMiffy
- ベストアンサー率0% (0/1)
positionプロパティの値をrelativeとした場合は、適用した要素が本来の位置(positionプロパティの値をstaticとした場合の位置)に存在するように振舞われて、次に来る要素が配置されます。 上記のソースの場合、一般的なブラウザでは単純に次々と画像を並べていった時と同じように高さを確保します。
お礼
回答ありがとうございました。 positionプロパティの値について、私はよくわからなかったために、縦長になってしまうことがわかりました。 参考にさせていただきます！
- leap_day
- ベストアンサー率60% (338/561)
こんにちは z-index があるのでおそらく画像の重ね貼りがしたいのかな？と思います その場合は position:relative; ではなく position:absolute; にしてやればいいと思います ただpositionを使った場合上のソース文以下に書いたHTMLは画像の下に回りこむ形になるので見えないテーブルなどで <table border="0" height="215px" style="position:relative;"><tr><td> <img class="a" src="**" alt="**" width=197 height=143> <img class="b" src="**" alt="**" width=78 height=59> </td></tr></table> などのようにして画像のpx分余白を意図的に作ってやらないといけません 画像配置の仕方が重ね貼りでなければまた聞いてください
お礼
回答ありがとうございました。 初心者なので、自分で色々と調べながらやってはいるのですが、なかなか難しいものですね。 回答を参考にし、もう一度やってみます！
画像についてじゃないけど気になったので →Body{ margin:0 margin:0;} →<Body Style="margin:0 margin:0;"> これ 変だよ。 後、何をどう並べようとしてどう違ってるのか判らないので答えようがない 隙間が 60,60 と 100,20 の指定のように見える
補足
すみません、Body{ margin:0 margin:0;}<Body Style="margin:0 margin:0;">は消し忘れてしまいました。 何をどう並べようとしているのかを、文章で書くのは難しいのですが… ノートにふせんと画像が張ってあるようなデザインをfireworksで作りました。そこでふせんを自分の好きな位置に貼り付けたいのですが、なかなかうまくいかなたったので、質問をさせていただきました。
お礼
回答ありがとうございました。 まずタグの知識を増やさないといけませんね……。 添削してくださったのを参考にして、もう一度やってみます。