【 HP質問過去ログ】

Page-152

【HP質問過去ログ/詳細】　一覧 / 詳細

トップページ： 1頁 2頁 3頁 4頁 5頁 6頁 7頁 8頁 9頁 10頁 11頁 12頁 13頁 14頁 15頁 16頁 17頁 18頁 19頁 20頁 21頁 22頁 23頁 24頁 25頁 26頁 27頁 28頁 29頁 30頁 31頁 32頁 33頁 34頁 35頁 36頁 37頁 38頁 39頁 40頁 41頁 42頁 43頁 44頁 45頁 46頁 47頁 48頁 49頁 50頁 51頁 52頁 53頁 54頁 55頁 56頁 57頁 58頁 59頁 60頁 61頁 62頁 63頁 64頁 65頁 66頁 67頁 68頁 69頁 70頁 71頁 72頁 73頁 74頁 75頁 76頁 77頁 78頁 79頁 80頁 81頁 82頁 83頁 84頁 85頁 86頁 87頁 88頁 89頁 90頁 91頁 92頁 93頁 94頁 95頁 96頁 97頁 98頁 99頁 100頁 101頁 102頁 103頁 104頁 105頁 106頁 107頁 108頁 109頁 110頁 111頁 112頁 113頁 114頁 115頁 116頁 117頁 118頁 119頁 120頁 121頁 122頁 123頁 124頁 125頁 126頁 127頁 128頁 129頁 130頁 131頁 132頁 133頁 134頁 135頁 136頁 137頁 138頁 139頁 140頁 141頁 142頁 143頁 144頁 145頁 146頁 147頁 148頁 149頁 150頁 151頁 152頁

No.9870　２枚の画像を隙間なく並べたい。

画像を２枚横に並べようとしたのですが、何故か上下になってしまいます。

width属性を指定しないと横に並びますが、２枚の間に隙間が出来てしまいます。

どうすれば２枚の間に隙間を作らずに横に並べられるでしょう。

**** test_01.html ****

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head xmlns=">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<link href="test_01.css" type="text/css" rel="stylesheet" />
</head>
<body xmlns=">
<div class="wrapper">
<img class="02" alt="無料査定スタート" src="01_02.jpg" />
<img class="03" alt="買取金額の目安表" src="01_03.jpg" /><br />
</div>
</body>
</html>

**** test_01.css ****

div.wrapper {
margin: 0px auto;
padding: 0px;
text-align: center;

[まこじ]　09/02/02 (月) 16:08

No.9871　Re:２枚の画像を隙間なく並べたい。: これは単純にimgタグ間にある「改行」がスペース1個分に置き換わってるからです。
「改行」を削除して1行に記述すれば隙間はなくなると思います。

それとそれでも2行に跨るのなら、それはブラウザの持つ、「自動折り返し」機能です。
横幅を超えたものは自動的に次の行に表示されてしまいます。

これを解決するには、divタグの横幅を広く取るか、
divタグに「white-space: nowrap;」のスタイルを入れるか、
テーブルタグのセルで1個1個括ってやればいいです。
[atom]　09/02/02 (月) 16:31

No.9872　Re^2:２枚の画像を隙間なく並べたい。: 改行は縦にも横にもスペースを空けるのですね。

勉強になりました。

ありがとうございます。
[まこじ]　09/02/02 (月) 19:42

No.9873　初期文章のまま送信されるのを防ぎたいです

はじめまして。
早速なんですが、メールフォームについて質問させて下さい。

現在ICS（ttp://www.ics.ne.jp/mailfw）というところで、無料のメールフォームを借りています。

フォームはJavaスクリプトで、初期文章（最初から入力している文字）をクリックして消せるようにしています
常に、空白で送信されないように対策しています。
…ですが。
初期文章（例えば、ここに入力して下さい…等）のまま送信されたりします。

そこで。
初期文章のまま送信されないようにしたいのですが…
どうしたら良いのかわかりません。

もしこのような方法が、今レンタルしているメールフォームで出来るのなら、是非詳しく教えていただきたいです。

宜しくお願いします。

…と、半角文字や記号が化けてしまうのですが。
これはどうしようもないんでしょうか。

もしコチラも教えていただけましたら嬉しいです。

[空玉]　09/02/04 (水) 02:41

No.9876　Re:初期文章のまま送信されるのを防ぎたいです: レンタルでしょ？
レンタルなら、ここで質問しても意味はないと思います。

まずはレンタル先に聞いてください。
自分で設置してないなら、相手の仕様に従うしかないでしょう。

そのような問題点を改善できるのか、あるいは回避策があるのか．．
すべて相手次第です

こちらではどうする事もできません。
[atom]　09/02/04 (水) 21:19

No.9877　Re^2:初期文章のまま送信されるのを防ぎたいです: 早速の返信、感謝します。

CGIをレンタルっていうんですかね。
フォームの形などは自分で設定していまして。
タグやスクリプトで、確認画面や空白にしないなどの事が出来ましたので…
何かのタグやスクリプトで出来ると思って質問させていただきました。すみません。

検索していると、何かそれらしいような回避策みたいなものがありましたので…
少々わかりにくいですが、それを参考にしたいと思います。

有難う御座いました。
[空玉]　09/02/05 (木) 02:52

No.9878　外部CSSと画像の表示位置について。

外部CSS内に
img.c{
text-align: center;
}

画像を貼り付けたいHTML内に
<img src="00.bmp" class="c">

という記述をして画像"00"を横幅に対して中央に表示させたかったのですが、画像位置がleftのままで変化がありません。

外部CSSなのでCSSの呼び出しURLが可笑しいのかとためしに太文字にするspan要素の記述をクラス指定で記述しましたが、こちらは上手くいきました。

外部CSSのimg要素でtext-alignを指定してもその通りに表示されないのでしょうか？(以前どこかのサイトで「できる」と書いてあった記憶があるのですが･･･？)

[猫]　09/02/05 (木) 17:34

No.9879　Re:外部CSSと画像の表示位置について。: 画像はテキストではありませんから、直接指定しても変化はありません。

画像をセンタリングするのではなく、画像を取り巻く環境をセンタリングしないといけません。

<div style="text-align: center;">
<img src="00.bmp" class="c">
</div>

すなわち、

<div class="c">
<img src="00.bmp">
</div>

として、cssに

.c{
text-align: center;
}

とすべきでしょう。
[atom]　09/02/05 (木) 17:50

No.9880　Re^2:外部CSSと画像の表示位置について。: > 画像はテキストではありませんから、直接指定しても変化はありません。

早速の回答ありがとうございます。
CSSでimg要素に直接指定するのは無理なのですね。
div要素で新しく構文を加えるようにします。

ありがとうございました。
[猫]　09/02/06 (金) 10:19

No.9881　はじめまして

いつも参考にさせていただいています。

ところでBGMのオン/オフをボタンではなくて文字で表したいのですが、どうすればいいですか？

[ケースケ]　09/02/07 (土) 12:38

No.9882　Re:はじめまして: ここのサイトを参考にしてるならわかると思いますが．．

同じページにちゃんと、文字の場合も解説してますよ。
[atom]　09/02/07 (土) 13:41

No.9883　Re^2:はじめまして: はい、見直したらわかりました！すいません！

ちなみにこのONにしたBGMをループさせたいときはどうすればいいんでしょうか？
[ケースケ]　09/02/08 (日) 04:05

No.9884　Re^3:はじめまして: この質問も、ここのサイトの「HTMLサンプル」－「サウンドについて」で解説しています。
[atom]　09/02/08 (日) 10:00

No.9885　Re^4:はじめまして: すいません。解決しました。

ありがとうございました！
[ケースケ]　09/02/08 (日) 15:47

No.9886　ブラウザ別の微妙な表示の違いの処理。

HTML文の学習のために、勝手ながら既にある以下のサイトをコピーさせてもらっています。

http://gshop2.com/main/

ロゴの横の「HOME」～「お問い合わせ」までのリンクですが、添付ファイルのようにコードしました。添付ファイルでは<>を全角にしてあります。

それをブラウザで見ると以下の通りです。

http://makoji.web.fc2.com/test/test_07/top_page_12.html

ＩＥではこれでそれなりにコピーされているのですが、他のブラウザでは微妙に文字やバーの位置が違います。元のサイトはブラウザの違いに関係なく、そのような狂いは生じないようです。

元のサイトはどのようにブラウザの違いを処理しているのでしょう。

[まこじ]　09/02/09 (月) 16:35

No.9887　Re:ブラウザ別の微妙な表示の違いの処理。: う～ん．．質問がかなり広範囲にわたってますね。

見た目のデザインを統一するのはかなりの手間がかかります。

どこをどのように直したらいいかと言われても、こちらは有料でやってるわけではないので、無料でサポートするには限界があります。

冷たいかもしれませんが、相手のサイトと同じようにしたいなら、先方のサイトを丸ごとコピーしてきて、全く同じ環境にして、ひとつひとつ（1行ずつ）削除したり元に戻したりしながら、どこをどう設定しているのかを調べて行くしかないでしょう。
[atom]　09/02/09 (月) 17:00

No.9888　Re^2:ブラウザ別の微妙な表示の違いの処理。: ありがとうございます。

ちょっとやってみますね。
[まこじ]　09/02/10 (火) 22:25

No.9889　HP作成ソフトでのアップロード

いつもお世話になっております。
訳あって普段つかっているＰＣと別物の中古ＰＣを使って
います。
ですがなぜかＦＦＴＰが使用できず、仕方なく
alphaEDITのＦＴＰアップロード機能を使ってみたのですが、
何故かアップロードした物とは似ても似つかない文字化け
画面になってしまいました。
ＨＰアドレスには問題のページ、添付に元データを
入れておきますので、またご指導頂けたらと思います。
よろしくお願いします。

[遥]　09/02/17 (火) 11:51

No.9900　Re:HP作成ソフトでのアップロード: 大変失礼しました。
見落としてました。

こちらのページは今正常に見れますが、もう問題は解決しましたか？
[atom]　09/02/23 (月) 14:48

No.9904　Re^2:HP作成ソフトでのアップロード: どうぞお気になさらないで下さい。
原因が分からなかったため、とりあえず今は貴サイトで
紹介されていたRootFTPを使っています。
ですが、なんで文字化けしたんでしょうか・・・・謎です（汗）
[遥]　09/02/24 (火) 17:39

No.9905　Re^3:HP作成ソフトでのアップロード: そうですね、alphaEDITや、ビルダーに付いているFTPソフトは設定が少なく簡単そうに見えますが、トラぶったとき原因が分かりません。

FFFTPを使えるようにしてた方がいいですよ。
[atom]　09/02/24 (火) 20:16

No.9912　Re^4:HP作成ソフトでのアップロード: あんまりその辺のシステムがよく分からないので、
さしあたってはRootFTPを使っていこうと思います。
どうもありがとうございました。
[遥]　09/02/26 (木) 11:53

No.9913　Re^5:HP作成ソフトでのアップロード: あ、FFFTPじゃなく、RootFTPを使ってるんですね。

はい、それでもＯＫです。(^_^)
[atom]　09/02/26 (木) 12:37

No.9890　画像にリンクを貼った場合の枠線の色について

こんにちは。お世話になります。

画像にリンクを貼ったとき、その画像に枠線が表示されますが、この枠線を下線だけにしたいと思い、下記のような CSS を書きました。FF で見ると期待した結果が得られたのですが、IE6 では通常状態で #ee0000 の色は表示されているのですが、オン・マウスのときに下線の色が #0040ff に変わりません。

どのような原因が考えられますでしょうか。また、IE の場合にも FF と同様の結果が得られるようにするには、どうすれば良いのでしょうか。

必ずしも下記の方法に拘っているわけではなく、画像に下線が表示され、通常の状態の場合とオン・マウスの場合で（出来れば visited の場合も）その下線の色を変えられれば全く別の方法でも良いと思っています。何か良い方法がありましたら、御教示頂けましたら幸いです。

作成途中ですので、URL は書けませんが、よろしくお願いします。

a img {border-top: none;
border-right: none;
border-bottom: solid 1px #ee0000;
border-left: none;}

a:hover img {border-top: none;
border-right: none;
border-bottom: solid 1px #0040ff;
border-left: none;}

<a href="aaa.html"><img src="gazou.gif" class="a1"/></a>

[肉球仮面]　09/02/22 (日) 01:19

No.9891　Re:画像にリンクを貼った場合の枠線の色について: そちらのcssを私のテストページに貼り付けてテストしたところ正常に、思うような結果が得られました。

テストしたのはIE6.0です。

で、考えられるものとすれば「DTD(Document Type Difinition)」ではないでしょうか？
私のDTDは
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

を使っています。
[atom]　09/02/22 (日) 09:26

No.9892　Re^2:画像にリンクを貼った場合の枠線の色について: atom さん、早速に有り難うございました。

ご教示頂いた DTD に変えてやってみましたが、残念ながら改善は見られませんでした。書いて頂いている DTD をコピペし、更に目視でも確認しましたので、書き間違いということはないと思われます。

引き続き皆様のお知恵を拝借させて頂ければ幸いです。よろしくお願いします。
[肉球仮面]　09/02/22 (日) 10:48

No.9893　Re^3:画像にリンクを貼った場合の枠線の色について: すいません勘違いしてました。

私のバージョンはIE7.0でした。^_^;

スタイルシートはブラウザのバージョンによっても動作が変わりますから、ひょっとしたらIE6.0の特徴かもしれません。

もし、そのページがローカルファイルにあるなら、
不要なところを全部削除して、この掲示板に添付していただけるとIE7.0で確認できますが。
その時には、そのページ内にCSSも記述してないと、別ファイルの場合、動作確認は出来ません。
[atom]　09/02/22 (日) 21:06

No.9894　Re^4:画像にリンクを貼った場合の枠線の色について: atom さん、再度のレスを有り難うございました。ファイルを添付させて頂きます。

今はダミーで下線を #ee0000 にしていますが、実際にはこの下線をページの背景色と同色にして画像だけしか見えないようにしておき、オン・マウスのときだけ下線が別の色に変化して、リンクが貼られていることが閲覧者に分かり易いようにしようという意図です。

画像をロールオーバーにするとかしても「リンクが貼られていることが閲覧者に分かり易いように」という意図は達成出来るのでしょうが、出来るだけシンプルな構成にしたいと思い、下線で表現することを考えているような次第です。

大変お手数をおかけしますが、よろしくお願いします。

P.S. 「すいません」と書かれていることからして、もしかすると atom さんは関西の方でしょうか？　＾＾
[肉球仮面]　09/02/22 (日) 23:34

No.9895　Re^5:画像にリンクを貼った場合の枠線の色について: 画像は×マークで見れませんが、ちゃんと赤からブルーに変わります。

記述は問題ないようですので、ブラウザの問題でしょう。
a:hover imgは特殊なのかもしれませんね。

私は、次のように「a:link img」で基本指定して、「a img」での色指定はしてませんね。

四国ですが、関西弁が好きなので関西なまりがかなり入ってるかもしれません。
[atom]　09/02/22 (日) 23:53

No.9896　Re^6:画像にリンクを貼った場合の枠線の色について: atom さん、有り難うございました。

> 私は、次のように「a:link img」で基本指定して、

すみません、“次のように” というのは、どれのことでしょうか。
結局、IE6 でも表示されるようにするには、別の方法を考えるしかないということになるのでしょうか。
[肉球仮面]　09/02/23 (月) 00:11

No.9897　Re^7:画像にリンクを貼った場合の枠線の色について: そちらは基本指定を「a img」と記述してますが、
同じような機能をあるサンプルで使ってますが、そこのcssでは基本設定を「a:link img」で指定して、「a img」は使ってないけど．．と言う意味です。

> 結局、IE6 でも表示されるようにするには、別の方法を考えるしかないということになるのでしょうか。

そうなんでしょうね。
私がIE6.0ならもっと詳しい回答ができるのですが、同じ環境でないため、詳しく調査が出来ないですね。
[atom]　09/02/23 (月) 08:23

No.9898　Re^8:画像にリンクを貼った場合の枠線の色について: atom さん、何度もご回答を頂き、大変有り難うございました。

IE6 での表示は諦めるか、別の方法を講じるか、少し考えてみようと思います。

またお世話になるかも知れませんが、よろしくお願い致します。有り難うございました。
[肉球仮面]　09/02/23 (月) 10:43

No.9899　Re^9:画像にリンクを貼った場合の枠線の色について: 参考までに、こちら
http://beginners.atompro.net/testcgi/imagebbs/?action=bbslsts

ここに似たような機能の画像リンクがあります。

これがそちらのブラウザで動作しなかったら、IE6.0の可能性が高いです。

参考まで。
[atom]　09/02/23 (月) 14:45

No.9901　Re^10:画像にリンクを貼った場合の枠線の色について: atomさん、有り難うございます。

“No.1 [atom]:投稿のテスト” という代替テキストが付された画像のことですよね？　私のパソだと、IE6 でも FF でも同じに見えるのですが・・・。

IE6 でも FF でも、画像にカーソルを合わせても何の変化も起きませんが、クリックした瞬間に一瞬だけ枠線の色が変わります。
[肉球仮面]　09/02/23 (月) 21:13

No.9902　Re^11:画像にリンクを貼った場合の枠線の色について: そうです。

私はFF3.0.6、IE7.0ですが、どちらもマウスオーバーで枠線が赤になります。
ちなみにWinXP HomeEdition SP3です。
[atom]　09/02/24 (火) 08:04

No.9903　Re^12:画像にリンクを貼った場合の枠線の色について: 昨日やってみたときには、画像にカーソルを合わせただけでは何の変化も起きなかったのですが、今やってみると、マウスオーバーで枠線が赤に変わりました。でも、[9894] で添付させて頂いたファイルの方は相変わらず何の変化も起きません。う～ん・・・？？？

私の方は、WinXP HomeEdition SP2 です。
[肉球仮面]　09/02/24 (火) 15:37

No.9906　Re^13:画像にリンクを貼った場合の枠線の色について: 昨日はデザインが完全に崩れてたでしょう？
もしそうなら、CSSが全然効いてませんでした。^_^;

崩れてないデザインなら、CSSが正しく効いています。

そちらのファイルは最初、DTDだけと思ってたのですが、
今見たらHTMLのヘッダ部分には、デザインをコントロールしそうないろいろなものが付いてましたね。

それが悪影響してるのかもしれないので、不要なものをできるだけ削除して、最低限の機能だけにしたものをここに添付してみました。
まずは確認してくれませんか？
[atom]　09/02/24 (火) 20:27

No.9907　Re^14:画像にリンクを貼った場合の枠線の色について: 有り難うございます。

> 昨日はデザインが完全に崩れてたでしょう？

昨日も特にデザインは崩れてはいませんでした。

アップして頂いている画像を早速拝見しましたが、IE6 だとやはり変化ナシでした。FF だと縦線だけしか表示されませんでしたが (画像の×マークナシ)、マウスオーバーで縦線が赤に変わりました。

でも、何故 [9899] にリンクして頂いている画像は、IE6 でもマウスオーバーで枠線の色が変わるのでしょうね？　いろいろと自分なりに試行錯誤した結果、下記のように、画像だけでなく何か文字も入れてリンクを貼っておくと所期の結果が得られることは分かったのですが、 [9899] にリンクして頂いている画像には文字は入っていませんし・・・。

<a href="aaa.html"><img src="gazou.gif" class="a1"/>あ</a>
[肉球仮面]　09/02/24 (火) 22:51

No.9908　Re^15:画像にリンクを貼った場合の枠線の色について: そうですか、たびたびすみませんね。

ではできる限り、お絵かきに近い形のHTMLソースを作成して添付しました。
これではどうですか？

headタグ内にいくつかmetaタグなどの追記をしました。
また、ソースコードはutf-8で記述しています。
sjisでも結果は同じだと思いますが。
[atom]　09/02/24 (火) 23:30

No.9909　Re^16:画像にリンクを貼った場合の枠線の色について: > そうですか、たびたびすみませんね。

こちらの方こそ、長々とお付き合い頂いて恐縮です。

レスをアップされた時間は23時30分になっていますが、23時35分～40分くらいの間に画像を変更したり (アップし直したり) とかされましたでしょうか？

ここにはパソコンが２台あるのですが、先ず片方のパソで画像を拝見したところ、変化ナシでした。その後、念のためにもう１台の方でも見てみたところ、枠線が青から赤に変わり、背景色 (枠線と画像の×マークの間) がオレンジっぽいような色に変わりました。

どちらのパソも同じ XP HomeEdition SP2 、IE6.0 ですので、「ん？　なんで片方のパソだけ機能するの？」と不思議に思い、再度初めの方のパソで試してみたところ、何と今度は枠線が青から赤に変わりました。

最初１台目のパソで試したときには “変化ナシ” だったものが、２台目のパソで期待どおりの結果が得られ、再び１台目のパソでやり直してみたら初めのときとは違う結果になったということです。それで、もしかすると私が１台目のパソで試してから２台目のパソで試してみるまでの間に、ちょうど atom さんが画像をアップし直したのとタイミングが合ったのかと思ったような次第です。もし画像をアップし直したりとかされていないのであれば、なぜ最初１台目のパソで試したときには “変化ナシ” だったのかが不思議です。
[肉球仮面]　09/02/25 (水) 00:05

No.9910　Re^17:画像にリンクを貼った場合の枠線の色について: そうですか、やったぁ！
これでIE6.0でもこの機能が使える事は実証できたわけですね。

その通りです。

最初、自分が、これぐらいで大丈夫だろう．．と、DTDとCSSだけの設定にしてたのですが、お絵かきのソースを眺めてて、そちらのソースとの違いで、関係しそうなところはすべて挿入してた方がいいかな？と、
３、４度ソース追加をしながらアップしなおしました。

文字挿入が関係しそうなのなら、
a:link{ color: #103894; }
a:visited{ color: #6699cc; }
a:active{ color: #009999; }
a:hover{
color : red;
text-decoration : underline;
background-color: #ffcc99;
}

が必要なのかもしれませんね。

いずれにしても再現できるソースが分かったのですから、後はそのソースを見ながらそちらで改造などしていけばよろしいのではないでしょうか？

あるいは参考にしながらいろいろとテストしてみるのもいいでしょう。
[atom]　09/02/25 (水) 07:17

No.9911　Re^18:画像にリンクを貼った場合の枠線の色について: atom さん、大変有り難うございました。お陰様で希望していた機能が使えそうです。

IE のバグがよく取り沙汰されますが、ページを作成していて、IE と FF の表示の違いに対応するために取られる労力や時間がすごく大きいような気がします。全てのブラウザが Web 標準に準拠していたなら、同じ内容のページを作るとすると、労力や時間はもっと少なくて済むのではないでしょうか。まぁ、ボヤいてみても始まらないのですが・・・。＾＾；

参考書やネットの記事を首っ引きにしながら目下サイト構築中ですので、また分からないことに出くわしましたらお邪魔するかも知れません。その節にはよろしくお願い致します。有り難うございました。
[肉球仮面]　09/02/25 (水) 10:13

No.9914　マウスカーソルについて

はじめまして雄一です。
決まったページで常にマウスカーソルを十字に表示したいのですがいまいちわかりません・・・
CGIゲームなので難しいでしょうか。
どなたか教えていただけましたら嬉しいです。

[雄一]　09/02/28 (土) 00:56

No.9915　Re:マウスカーソルについて: ここのサイトの「CSSサンプル」－「マウスの形状を変更」にあります。
[atom]　09/02/28 (土) 07:58

No.9916　Re^2:マウスカーソルについて: 返信ありがとうございます。
その文字の上部だけ変更します・・・
そうではなく、一定のページ全体で常にマウスカーソルを十字に変更したいんですけどわかりますか？
[雄一]　09/02/28 (土) 12:49

No.9917　Re^3:マウスカーソルについて: 質問ばかりで．．
少しは勉強もしましょうね。

spanタグではなく、bodyタグに指定すればいいだけでしょう？
[atom]　09/02/28 (土) 13:25

Page-152

【 HP質問過去ログ 】