人に聞けない痔の悩み、これでスッキリ >>

こんにちは!写真をスキャンで読み、フォトショップで加工し、
WEB用に保存(JPG)しFecthでライコス無料ホームページにアップしました。
ここまではなんとかでき、タグを<img src="++++++">として、表示することまではうまくいきました。
●ただ、イメージの周りに隙間が空いちゃうんです。
これを隙間なくウィンドウ内に収めるにはどうすればいいんですか?

これをトップページにし、このイメージ自体にリンクを設定して
ワンクリックしてメニューページに跳ぶようにするつもりです。

●また、ウィンドウの右下の四角を、閲覧者が引っ張って大きさを調整するときにこのイメージ以上に大きくしても余白がつかないようにしたいんです。

●今作成中のこのHPにたどりついた時の、閲覧者が見れる大きさがイメージぴったりの大きさにできればそうしたいです。ちなみに720*519ピクセルです。

質問内容をうまくかけなかったかもしれません。
わからなかったら捕足下さい。
どなたか、教えていただければ幸いです。お願いします☆

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

A 回答 (9件)

こんにちは。


返事遅くなりました。No.6で回答したss_sionです。

私、難しく考えてしまっていたようで(^^;

以下ではどうでしょう??
一応、画像にリンク張る、というのが目的の一つだという前提です。

<HTML>
<HEAD>
<TITLE>test</TITLE>
<script language="javascript">

function winResize(){
iw = 720;
ih = 519;
if(document.layers) {
w1 = window.outerWidth;
w2 = window.innerWidth;
h1 = window.outerHeight;
h2 = window.innerHeight;
w = w1-w2+iw;
h = h1-h2+ih;}
if(document.all) {
w=iw+4;
h=ih+85;}
window.resizeTo(w,h);
}
</script>


</HEAD>

<BODY bgcolor="#CCCCCC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="winResize();" SCROLL="no">
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<TR>
<TD align="center" valign="middle"><a href=""><img src="goo.gif" width=720 height=519 border=0></a></TD>
</TR>
</TABLE>
</BODY>
</HTML>

ウィンドウの自動リサイズを前提で組んでみました。
ただ、NetscapeとIEではスクリプトが対応していたり、していなかったり、といろいろあって、あくまで、擬似的な感じになっています。

まずは、お試しください・・・。
    • good
    • 0
この回答へのお礼

おおおおおおっ!!
これぞ、当初、私がやりたかったやり方です!
今日は久々にいい日だなぁ、って思ってしまいました。
後は、このスクリプトを自分なりに理解しないといけませんね。
頑張ります。今回、丁寧に教えて下さって、ありがとうございました☆
解決方法が見つかったのでこれにて質問を締め切らせていただきます。

お礼日時:2002/05/19 20:07

えっと,(7)でご紹介したのは、Javascriptでなくて、スタイルシートを使っています。


がんばってくださいね♪
    • good
    • 0
この回答へのお礼

返事が遅くなってごめんなさい。
ここ数日はHPをいじっている暇もなくて…。
Javascript使っていない方がどちらかと言えば安心しますね。
便利な反面、適用されない人もいるわけですからね。
ありがとうございます☆

お礼日時:2002/05/19 19:41

まわりに空きができるときに、真ん中に表示したいというお話でしたら、



<html>
<head>
<style type="text/css"><!--
body { background-repeat:no-repeat;
background-position:50%; }
--></style>
<body background="写真画像の名前" bgcolor=cccccc>
背景画像がページの中央に一枚だけ表示されます。
</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございます!!
こんな感じが今のところはベストですね。
なんだか、簡単でしたね。
でも、気になるのはJavascriptが動いているのか?っていうことです。


また、分からないことがあればおしえてください☆
そのときはもっとうまく質問できるようにしたいです。
ありがとうございました☆

お礼日時:2002/05/16 17:00

こんにちは。


ばばば、と書いてしまったので、もっとシェイプアップできるはずなんですが、JavaScriptで書いてしまう、という方法で実現してみました。
今、環境がMacなので、Winの動作保証できないんですが、IEとNN4.xで動作します。
動作の流れとしては、
(1)ウィンドウサイズの取得
(2)画像より大きければ、画像をウィンドウサイズに合わせて拡大
(3)画像より小さければ、画像のサイズは初期値
(4)リサイズしたら、ページをリロードし、(1)~(3)の動作を実行
という感じです。
ただし、このスクリプトだとNNの場合ウィンドウサイズにあわせるとスクロールバーがでてしまうので、ウィンドウサイズから3マイナスしてます。

<html>
<head>
<title>test</title>
<script language="javascript">
function getWinsizeW(){
if(document.layers) return window.innerWidth;
if(document.all) return document.body.clientWidth;
return -1;}
function getWinsizeH(){
if(document.layers) return window.innerHeight;
if(document.all) return document.body.clientHeight;
return -1;}
function imgWrite(){
iw = 720;
ih = 519;
if(document.layers){w = getWinsizeW()-3;h = getWinsizeH()-3;}
if(document.all){w = getWinsizeW();h = getWinsizeH();}
if(w>iw||h>ih) document.write('<a href=""><img src="goo.gif" width='+w+' height='+h+' border=0></\a>');
if(w<=iw || h<=ih) document.write('<a href=""><img src="goo.gif" width=720 height=519 border=0></\a>');
}
var flag
flag=!(document.layers&&parseFloat(navigator.appVersion)<4.5&&document.height>window.innerHeight)
window.onresize = new Function("if(flag){location.reload()}else{flag=true}")
</script>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<script language="javascript">
<!--
imgWrite();
// -->
</script>
</body>
</html>

で上手くいくかと思います。
リンク先は任意で『test.html』にしているので、そこは変えて下さい。

また、ウィンドウリサイズ対応のスクリプトは、mugiさんのページ(http://mugi.ca.tc)にあるスクリプトを参考にしました。
    • good
    • 0
この回答へのお礼

ありがとうございます!
恥ずかしながらコピペで試したのですが、
ブラウザがIE5だからなのか、よくわかりませんが、
思ったような効果ではありませんでした。
JAVAスクリプトはまだわからないので…どうすればいいのか
よくわかりません。
どこら辺が具体的に思っていた通りではなかったかと言うと、
●ウィンドウをいろんな形にすると、それに合わせてイメージも
縦長になったり横長に変形してしまう。
●ウィンドウをいじるたびにたまに縦に同じイメージが地続きになっている。

う~ん、無理なのかな。

どうすりゃ?んんん。
もしかして、下記の回答者の方ののタグと組み合わせるってこと
ではないですよね?
今は。ss_sionさんが教えて下さったタグのみで
やってみています。

お礼日時:2002/05/15 18:51

窓を小さくすると小さくなってしまうのは、(1)で画像の大きさを私が100%のパーセント表示でご紹介したからです。

ごめんなさい。

開く時に窓の大きさを指定するなどの下記のestocさんがご紹介のJAVAスクリプトやを使うのを前提に、
背景に画像を1枚載せる方法をご紹介しますね。


<head>~</head>の中に

<style type="text/css"><!--
body { background-repeat:no-repeat;}
--></style>


<body background="画像の名前" width=画像の横サイズ height=たてのサイズ>

背景画像がページの中央に一枚だけ表示されます。
</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございます!!もうひとつ、疑問があるのですが、
ウィンドウの右下のボタンを引っ張るとウィンドウを大きくできますよね?
イメージ以上にウィンドウを大きくしてしまうと右と下に隙間が開いてしまうんです。これを見せたくないのですが、どうすればいいんですか?
ウィンドウがイメージ以上に大きくなったらイメージの周りに灰色?
っぽくなるような感じがいいんですが。

お礼日時:2002/05/15 17:03

(3)ウィンドウサイズを指定する。



ちょっと調べてみましたら、ウィンドウサイズの指定方法が見つかりましたので、参考にしてみてください。

『最初に開くページのサイズ指定方法』

<HEAD>内に下記内容を加える。
--------------------------------
<SCRIPT LANGUAGE="JavaScript">
<!--
function resizeWindow(){
     window.resizeTo(幅,高);
 }
//-->
</SCRIPT>
--------------------------------

<BODY>タグの中に、
onLoad="resizeWindow()"を付け加える。
--------------------------------
<BODY onLoad="resizeWindow()">
--------------------------------

これで、一旦ページが開いたら、直後にサイズを変更し
望みのウインドウサイズにできるようです。
    • good
    • 0
この回答へのお礼

ありがとうございます!JavaScriptとはこういうものなんですね。
しかし、まだ、解決されていない問題が。
●フォトショップの『画像解像度』で表示されたピクセル*ピクセルで
入れたはずなのに若干横長く表示されてしまいます。
●ウィンドウをちいさくすると画面までもが小さくなってしまいます。
ウィンドウをいじくってもなかのイメージの文字やイラストの大きさは
維持されてほしいのですが。どうか、教えて下さい!

お礼日時:2002/05/14 22:38

(1)隙間なくウィンドウ内に収める



<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
で、隙間がなくなります。
------------------------------------
leftmargin="0" 左マージン0 (IE用)
topmargin="0" 上部マージン0(IE用)

marginwidth="0" マージン幅0(NN用)
marginheight="0" マージン高0(NN用)
------------------------------------
を<BODY>タグに追加してください。

(2)(3)については、yuicaさんの仰る通りかと。

この回答への補足

すみません、発見したのですが、no.1のyuikaさんのタグと組み合わせることによって隙間なくやることができるみたいです。
ありがとうございます!

補足日時:2002/05/14 21:58
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます!
しかし、何の変化もなかったので、変だなぁ?と。
私が使い方を誤っているんでしょうか?

お礼日時:2002/05/14 21:56

あと、<HEAD>~</HEAD>の中に



<script language="JavaScript">

<!--
resizeTo(720,510);
//-->

</script>

で窓の大きさ指定です。

この回答への補足

ありがとうございます。若干横長く見えてしまいますが、
しょうがないのでしょうか?()のなかの数字の単位ってピクセルなんでしょうか?

●説明が足りなかった部分があります。
HPをみるときにもし画面上で2センチに見えたら
右下の引っ張るバーを動かそうが、最大化しようが、
ずっと2センチのまま維持したいのです。
このやり方は御存じでしょうか?お願いします!

補足日時:2002/05/14 22:00
    • good
    • 0

<img src="++++++" width=100% height=100%>にすればOKですよ。

    • good
    • 0
この回答へのお礼

ありがとうございます!
これはうまくいきました!

お礼日時:2002/05/14 21:52

このQ&Aに関連する人気のQ&A

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

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

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

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Q自分のサイトを開いた時にウィンドウのサイズを固定したい

いつもお世話になります。
htmlもよく分からずに自分のサイトを作っている、初心者です。
生意気な事ですが、デザインの関係で
自分のサイトを開いた時にウィンドウのサイズを
固定して見てもらいたいのですが、
どうすればよいのか分かりません。
もしかしたらここで聞く事ではないのかもしれませんが
なにぶんにも初心者なのでおわかりの方がいらっしゃれば
ぜひご教授ください
よろしくお願いします。

Aベストアンサー

サイトトップでJavaScriptから新しいウィンドウを開いて、指定のサイズのウィンドウ上で展開する場合のソース例です。

<html>
<head>
<title>Top page</title>
<script type="text/javascript"><!--
function winopen(){
var MainWin=window.open("tester.htm","MyWebSite","width=600, height=400, statusbar=1, location=1, menubar=1, toolbar=1, resizable=0, scrollbars=1");
}
//--></script>
</head>
<body>
<p><a href="呼び出すページのURL" onClick="winopen(); return false;">ENTER</a></p>
</body>
</html>

このようなソースにすると、このページのリンクをクリックした時に、JavaScriptで新しいウィンドウをサイズを指定して開き、そこに次のページを読み込むようになります。
もしJavaScriptが有効ではない環境で閲覧する場合には、新しいウィンドウは生成されず、トップページを表示したウィンドウ上で次のページが表示されるようになります。

ウィンドウサイズは、window.open()の括弧内にある、widthとheightで指定します。 単位はピクセルです。
その他にもいくつか指定を入れてありますが、このスクリプトの部分については、参考URLが詳しいので、そちらを参照してみてください。


ここからはアドバイスですが、可能であれば、やはりウィンドウサイズをリサイズさせなくてもすむデザインにしたほうが無難と思います。
先ほど書いた、フレームを使ってページの表示領域を制限する方法でも、ウィンドウサイズに左右されないデザインに近づけることができると思います。

他に、テーブルで囲んだり、スタイルシートによって表示の横幅を決めてしまえば、内容を表示する領域を固定値として確保できるので、ウィンドウ幅の差によるデザインの崩れを排除できる可能性もあるでしょう。
テーブルの場合は、通常のテーブルで横幅を指定し、その中に内容をすべて入れてしまえばよいだけです。
スタイルシートの場合は、
<div style="margin: auto; width: 600px;"></div>
で全体を囲めば、ウィンドウの横幅が変わっても内容の表示幅は変わらないようにできます。
もし、デザイン上のウィンドウサイズ指定が、ウィンドウの横幅が変わることでレイアウトが崩れることの防止策であるとするなら、これらの方法も対策になると思いますよ。

参考になれば幸いです。

参考URL:http://tohoho.wakusei.ne.jp/js/window.htm#open

サイトトップでJavaScriptから新しいウィンドウを開いて、指定のサイズのウィンドウ上で展開する場合のソース例です。

<html>
<head>
<title>Top page</title>
<script type="text/javascript"><!--
function winopen(){
var MainWin=window.open("tester.htm","MyWebSite","width=600, height=400, statusbar=1, location=1, menubar=1, toolbar=1, resizable=0, scrollbars=1");
}
//--></script>
</head>
<body>
<p><a href="呼び出すページのURL" onClick="winopen(); return false;">ENTER</a...続きを読む

Qテーブルの表示がずれます

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>

(2)行が2つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト2</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
<tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>
宜しくお願い致します。

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>...続きを読む

Aベストアンサー

こんにちは。
イマイチどうしたいのかがよく判らないので、具体的な説明を補足してください。
ソース自体は間違いではないと思いますが…。
<tr>や<td>の前にある空白はもちろん半角空白ですよね?全角だと不具合がでます。

行が増えると下に表が大きくなるのは必然ですし。
行が1行のものと、2行のものとでは、ページが違うんですよね?
もし、同じページに表示するのであれば、1ページにつき、<html>タグは一組です。(あくまでも基本的に、ですが)
これが、直接行がずれるっていうことにはならないと思いますけど…。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q文字数に応じてfont-sizeを自動変更

エクセルのセルの書式の中にある「縮小して全体を表示する」の様な
ことをしたいのです。

具体的にはtableの固定幅セルのfont-sizeを、文字数に応じて自動的に
設定して、セル内で折り返しが発生しないようにしたい。
といっても、そんなに厳密でなくてもいいので、
「文字数が○文字未満ならfont-size:normal、以上ならsmall」
程度でいいんですが、これをCSSのみかCSS+JavaScriptで
実現できないものでしょうか。
文字数に応じて<td>のclassを変えればいいのでしょうが、
できれば、テキストの修正をすれば自動的に変わる様にしたいです。

Aベストアンサー

完全な回答ではありませんが、

はみ出る部分を省略表示(・・・という表示)にする案ではダメでしょうか?
そこにマウスをあてると、全内容が表示する仕組みです。

以下に参考ページあります。
http://www.salty1.com/rakuraku/241.html

Q大きなHPも一画面で収める方法?

FireFoxを使っています。

HPのサイズが横長になると
下のスクロールバーで移動させないと右端が見れません。
これはHP制作者側のご都合でしょうが、
ブラウザ側で縮小表示して一画面で見れないでしょうか?
そのようなアドオンがありましたらどうかお願いいたします。

Aベストアンサー

FireFox3以降なら、横幅がピクセルで固定してある場合は、
表示→ズームで「文字サイズだけ変更」のチェックを外してから、Ctrl + ―、Ctrl + + で縮小拡大できます。
また、Default FullZoom Level( https://addons.mozilla.jp/firefox/details/6965 )というアドオンを入れておくと画像だけとか細かいズームが可能になります。
他にも
Zoom toolbar ( https://addons.mozilla.jp/firefox/details/6118 )
QuickPageZoom ( https://addons.mozilla.jp/firefox/details/6715 )
 もあります。

こんなアドオンを使わなくてよいように作者が制作してくれるのが筋ですがね。

QinputタグのテキストBOXだけ右寄せにする方法

inputタグのボタンやテキストBOXが混在しているページがあります。
この中のテキストBOXだけ右寄せにしたいと思っています。

原始的なJavaSctiptは使わずに、かつID指定・class指定なしに。
シンプルにきれいに、が希望です。1つ1つ指定というのはしたくないです。

昔はJavaScriptでinputタグのものを全部持ってきて
全ループさせながらtypeを判定しテキストBOXのものだけを
どうこうするとか書きましたが、原始的なので書きたくありません。
というかもう少しスマートな書き方はないものかと思い
質問をすることにしました。


スタイルシートだけで書ければいいなと思いますがこれを知りません。
input:text {…}
みたいな書き方があればいいなと思っています。

これがダメな場合でもprototypeやjquery等のライブラリを使用し
シンプルなJavaScriptの記述で実現できればそれを知りたいです。


・原始的なJavaScriptは使わない
・id・class指定のスタイルシートは使わない
・スタイルシートだけでテキストBOXだけを右寄せにする方法
・JavaScriptライブラリを使用してテキストBOXだけを右寄せにする方法
・スタイルシート単独もJavaScriptライブラリを使用しても出来ない場合は
 「出来ない」との明言を

こんな感じでお願いします。
よろしくお願いします。

inputタグのボタンやテキストBOXが混在しているページがあります。
この中のテキストBOXだけ右寄せにしたいと思っています。

原始的なJavaSctiptは使わずに、かつID指定・class指定なしに。
シンプルにきれいに、が希望です。1つ1つ指定というのはしたくないです。

昔はJavaScriptでinputタグのものを全部持ってきて
全ループさせながらtypeを判定しテキストBOXのものだけを
どうこうするとか書きましたが、原始的なので書きたくありません。
というかもう少しスマートな書き方はないものかと思い
質...続きを読む

Aベストアンサー

はじめまして。
CSSだけで実現する方法としては属性セレクタ(Attribute selectors)と呼ばれる指定方法があります。ただしこれは、一般的なモダンブラウザでは対応しているはずですがIE6以下では反応しません。

書き方としては、
[attribute=value]

inputの1行テキストボックスだけに適応させるには、
input[type="text"] { (ここにスタイル) }

という書き方ができます。
ご参考になれば幸いです。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">


人気Q&Aランキング