こんにちわ。

画像ファイルを貼り付けたいのですが、ホームページの下ギリギリに貼ることは出来すか?
(画像の下に背景が見えないようにしたいのです。)

ALGINをtopにしても vspaceを0にしても borderを0にしても駄目でした。
もし何か良い方法をご存知でしたら教えて下さい。
お願いします。

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

A 回答 (2件)

はじめまして。



>画像ファイルを貼り付けたいのですが、ホームページの下ギリギリに貼ることは出来すか?

<IMG SRC="helpme2.gif" style="position: absolute;bottom:0%" alt="">
こんな感じでしょうか?
でも、
>(画像の下に背景が見えないようにしたいのです。)
の意味が上記のものとの関係が良くわかりません。
背景が見えないようにしたいのでしたら、画像の余白部分を白色で色をつけるなどするということだと思うのですが・・・
    • good
    • 0
この回答へのお礼

ありがとうございます。出来ました!

書き方が悪く、疑問を持たせてしまって申し訳ありません。
()内のことはもし、下ギリギリに貼ることが出来なければそのような方法でもいいかな?と思ったのです。
たとえば四角い画像があるとします。そしたら余白って4辺全てを指しますよね。
下側の辺だけ余白部分を白色に設定することが出来るのですか?vspaceを利用すると上下だと思うのですが。

今回の件は解決しているのですが、今後の参考にしたいと思うので、もしよかったらその方法も教えて下さい。

お礼日時:2002/01/10 09:03

お礼の中の問題について解答します。

(ちょっと長いですが・・・)

<html>
<body bgcolor=#ffffcc>
<table bgcolor=white border=1>
<tr>
<td>
<img src="http://www.okweb.ne.jp/images/helpme1.gif" >vspace無し
</td>
</tr>
<tr>
<td>
<img src="http://www.okweb.ne.jp/images/helpme2.gif" vspace=20>vspace=20指定
</td>
</tr>
<tr>
<td>
<img src="http://www.okweb.ne.jp/images/helpme3.gif" style="margin-bottom:1em">margin-bottom指定
</td>
</tr>
</table>
</body>
</html>

上記のHTMLで確認してみてください。
今回も使用しているのは『スタイルシート』です。HTMLだけでは表現に限りがありますので、
スタイルシートも覚えておいてもよろしいと思います。

ただ、スタイルシートにもちょっと問題がありまして、ブラウザ(IEやNN)や、同じブラウザでもバージョンによって、
見え方が異なることがあるということです。
自分ではちゃんと作ったつもりでも、他の人のPCではデザインが崩れてしまう恐れがあります。
しかし、このような問題は徐々に解決していますので、覚えて損はないです。
    • good
    • 0
この回答へのお礼

有難うございます!
とっても役に立ちました。

2つの回答にポイントを付けたいくらいです。同一の人に「良回答」、「次点」の両方を付けることが出来ないのでが残念です。

お礼日時:2002/01/11 16:32

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

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

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

Qborderをページの下まで伸ばしたい

お世話になります。既出の質問を見たのですが、解決できず質問させていただきます。
テーブルを使い左右にレイアウトを分けています。
左のメニュー部分の上下両サイドにborderを設定していますが、メニュー部分の方が圧倒的にメインよりコンテンツが少なく、ページの途中でborderが途切れてしまいます。
メインコンテンツの縦量に合わせて下まで伸びて欲しいのですが、どうすればいいのでしょうか?

恐れ入りますが下記ソースです。
/*CSS*/
body {
margin: 0px auto;
padding: 0px;
height:100%;
width: 760px;
text-align:center;
position:relative;
}
#header {
padding:0px ;
margin: 0px auto;
width: 760px;
height: auto;
}
#contents {
margin: 0px auto;
padding: 0px;
height:100%;
width: 760px;
background-color:#FFFFFF
}
.side{/*メニュー部分*/
margin:0px;
padding:0px 0px 20px;
border:1px #666666 solid ;
width:163px;
height:auto;
}
.footer {/*フッターの背景画像サイズに合わせheightを設定*/
margin:0px;
padding:10px;
width: 760px;
height:72px;
text-align:left;
background-image:url(image/bottom.gif);
background-repeat:no-repeat;
border:0px;
}
.coretable{/*画面レイアウト左右分けテーブル*/
margin:5px 0px 0px;
padding:0px;
width:760px;
}

<!--html-->
<body>
<div id="header">
ヘッダー内容
</div>
<div id="contents">
<table border="0" cellpadding="0" cellspacing="0" class="coretable">
<tr><td width="165" align="center" valign="top">
<div class="side">
メニュー内容
</div>
</td>
<td width="595" align="center" valign="top">
メインコンテンツ内容
</td>
</tr>
</table>
</div>

<div id="footer">
フッター内容
</div>
</body>
</html>

あるサイトで拝見して、
.sideに
height:100%;/* for IE6 */
min-height:100%;
を加え、
html{ height:100%; }
body{ height:100%;}
としてみたところ、borderは伸びず、footerがページの途中に上がってきてしまうという現象でした。
テーブルを使っているのが悪いのでしょうか?

どうかお知恵をお貸し下さい。

お世話になります。既出の質問を見たのですが、解決できず質問させていただきます。
テーブルを使い左右にレイアウトを分けています。
左のメニュー部分の上下両サイドにborderを設定していますが、メニュー部分の方が圧倒的にメインよりコンテンツが少なく、ページの途中でborderが途切れてしまいます。
メインコンテンツの縦量に合わせて下まで伸びて欲しいのですが、どうすればいいのでしょうか?

恐れ入りますが下記ソースです。
/*CSS*/
body {
margin: 0px auto;
padding: 0px;
height:100%;
wi...続きを読む

Aベストアンサー

なにが悪いって、テーブルを使ってるのにtdの中に無意味なdivを
書いてるのが一番悪い。

<td class="side" width="165" align="center" valign="top">
メニュー内容
</td>

これだけ。

Qborderでa:hover下線表示させるとズレる

underline では雰囲気に合わないため、border-bottomでホバー時のリンク下線を表示させています。具体的には以下のような感じです。

a {color: 青;
text-decoration: none;}
a:hover {color: 赤;
text-decoration: none;
border-bottom: dotted 1px 赤;}

これでほとんど問題ないのですが、まれにホバー時にガタッと表示がズレることがあります。よく分からないのですが、ちいさなdiv要素を連続させている部分で起こるような気がします。リンクにマウスオーバーすると、続くdiv部分が下線分?下に動く感じです。

説明がうまくできているか分かりませんが、解決策があったら教えてください。ちいさなことですが、結構気になってしまいます。

Aベストアンサー

> ちいさなdiv要素を連続させている部分で起こるような気がします。
これかな?

アンカーを:hover状態にすると親ブロックの高さが変化する(5.5/6.0) - Internet Explorer (Windows) CSSバグリスト
http://web.archive.org/web/20071216222842/cssbug.at.infoseek.co.jp/detail/winie/b102.html

# 以下、余談
IE8でborderの実験をして、borderの上下が消えるバグらしき現象を発見しました。

-------
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html lang='ja' xml:lang='ja' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta http-equiv='content-style-type' content='text/css' />
<meta http-equiv='content-script-type' content='text/javascript' />
<meta name='author' content='think' />
<title>border</title>
<style type='text/css'>
#A{
background-color: #efe;
border: solid 1px black;
padding: 0.5em;
}
a {
text-decoration: none;
}
a:hover {
/*color: red; ここを加えると、「IE8でborderの上下が消える現象」を回避できる */
border: dotted 1px red;
}
</style>


</head>
<body>

<div id='A'>
<a href='#'>test</a>
</div>

</body>
</html>
-------

調べてみても同じ現象報告は見つからず。
本件とは無関係だとは思いますが、何かの折りに発現しそうなので念のため書いておきます。

> ちいさなdiv要素を連続させている部分で起こるような気がします。
これかな?

アンカーを:hover状態にすると親ブロックの高さが変化する(5.5/6.0) - Internet Explorer (Windows) CSSバグリスト
http://web.archive.org/web/20071216222842/cssbug.at.infoseek.co.jp/detail/winie/b102.html

# 以下、余談
IE8でborderの実験をして、borderの上下が消えるバグらしき現象を発見しました。

-------
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtm...続きを読む

Q←これをCSSでやりたい

製作しているサイトに小さい画像が沢山あります。
今までは<img src="00.gif" border="0">と普通に書いていたんですが、
なにせ画像の数が多いのでいちいち記述すると見直す際に見にくくて邪魔なんです。

この部分のborder="0"をCSSで記述し 、一括で各イメージのボーダーを0pxにする方法って何かありますか?

もちろんborder="5"と記述したらボーダーが5pxになります。

以上宜しく教えて下さい。

Aベストアンサー

img {border: none; }

Qborderの下線が表示されない

手元にソースがないので、正確かわかりませんが・・・
以下のように記述したとします。

<pre class="box">
hoge
</pre>

pre{
margin:10px;
overflow:auto;
}

pre.box{
border:1px #000000 solid;
backgroud-color:#eeeeee;
}

・Firefoxにおいて
この場合、枠線の下線だけが表示されない場合があります。
必ず発生するわけではなく、稀に発生します。

overflow:auto;の影響であることはわかっています。
これを設定しない場合はちゃんと表示されます。

このような現象は何が原因なのでしょうか?
正確なソースがないと何とも言えないでしょうが、何か情報はありませんか?

Aベストアンサー

隣接している場合は複合作用が考えられる。
件のソースだけでは再現しないのでは?

主に表のような使い方をdivでやっていたりすると起きる模様。
また overflow の影響というよりは 描画が狭すぎるのでスクロールバーに関する余裕が無く消える可能性。
もっと長く改行もそれなりにあるテキストで同じかどうか試してみたらどうだろう。


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

おすすめ情報