(X)HTML/CSS/Dreamweaverの質問に優しく答えるｽﾚ11

1 ：11/10/16 〜 最終レス ：11/11/25

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問大いに結構。分からない人は何回聞いても結構
(X)HTML / CSS / Dreamweaver の事なら何でもOK
ただし、JavaScript や PHP などはスレ違い / 板違い。該当スレ / 該当板でどうぞ
回答してくれる方は優しい人のみ！
質問者に対して暴言を吐く人は このスレを見るな！！
質問側も節度あるレスで！
質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
(X)HTML/CSS/Dreamweaverの質問に優しく答えるスレ10
http://hibari.2ch.net/test/read.cgi/hp/1311271961/242

2 ：

パスが分からんからアドバイスでけん。

3 ：

passは半角hです。すいません
一応もう一度URL載せておきますね
http://www.dotup.org/uploda/www.dotup.org2146792.zip.html

4 ：

半角の、『h』一文字です。多レスｽﾏｿ

5 ：

前スレID:zUDeShM3
margin-top:-100pxはどうしても必要？結論から言うとこれあると無理でつ。
なし前提でいくと、うまくいかない原因は縦の長さ%とpxを使って指定してるから。
例えば、headerの縦を15%、メイン・サブの縦を85%に指定して、margin-top:-100pxを削除すれば、
前スレのご希望画像になるけど、これじゃ駄目かね？

6 ：

>>5
header縦はどうしてもpxで指定したいです
JSとか使えば出来るんですかね？使う気はありませんが・・・

7 ：

>>6
親要素のheightを%で指定してる以上、子要素も%で指定しないといかんね。
JSというかCSSの組み方の問題。%とpxごっちゃにしたら、どうやってもブラウザの大きさ変えた時に表示狂うよ。
sub,mainも固定値で指定したかったら、bodyも固定値で指定しないと駄目。

8 ：

>>7
なるほど。
親が%の時は%とpxを一緒に使えないというわけですね。
つまり、どうしても実現は不可というわけでしょうか？できるとしたら、全てを%で指定すると。

9 ：

ここでいつも答えてる人って暇なの？

10 ：

ID:zUDeShM3 の意図がよくわからないですね。
「使う気がないけどJSを使えば出来ますか？」と聞いてみたり、「無理ということですが、どうしても無理ですか？」と聞いてみたり…。
結論からいえば、CSS では calc を使わないと無理です。JavaScript でも出来ます。

11 ：

ついでに、table でも出来そうではありますね。

12 ：

</br>タグを入れてないのに本文1と本文2の間にかなり改行されるのですが何ででしょうか？
#center p {
padding: 0.5em 18px 10em;
}
p.sample2 { margin: 80px;}
<font size="3" color="#FF0000">本文1</font></br>
<p class="sample2">本文2</p>

13 ：

pタグ

14 ：

>>10-11
申し訳有りませんでした。私の質問にお付き合いいただきありがとうございました。

15 ：

俺も必死で考えたがpxと%統一しないなら無理だな。
テーブルやフレーム、JSでブラウザサイズ取得していいならいくらでもできるが。
>>12
ソースzipで優しいお兄さん達が答えてくれます。
やっぱソースがないと抜粋箇所以外の部分が問題というパターンが多いはず。

16 ：

ソースというか、ID:zUDeShM3みたいにhtmlとcssのソース付きで、
てっとり早く解凍した後実行できるような形にして。

17 ：

そもそもどういう動作になってほしいんだ？
marginを5pxとかにすりゃ当然改行幅狭くなるが。あと#center pって何か意味ある？

18 ：

>>15
「table で出来る」は「display: table-cell; で出来る」とイコールなので出来ないわけではありません。
未対応ブラウザを切り捨てる必要がありますが…。
ですので、JavaScript で補完するなり、未対応ブラウザは異なるレイアウトを提供するなり、割り切りが必要になります。

19 ：

どっちかというと http://jsfiddle.net/ にUPして貰う方が手間が省けて有り難いな
誰でも簡単に更新できるし、わかりやすい

20 ：

＞display: table-cell
こんなん初めてしったよ(´・ω・`)
でも未対応ブラが多いなら厳しいね。

21 ：

>>20
table-cell の未対応ブラウザはそれほど多くありません。
http://www.quirksmode.org/css/display.html#t06
calc に比べれば切り捨てるブラウザはほんの僅かで済みます。

22 ：

>>12です
どうしても改行をなくすことが出来ないので教えてください
ZIPです
パス　s
http://www.dotup.org/upload.cgi

23 ：

>>12
ブラウザごとにcssがあり、最初にこれが読み込まれます。
なので、自分では設定していなくても、pタグにはブラウザが決めたcssが適応されています。
リセットcssを使ってあげる事で、ブラウザごとの誤差をなくさせる事が一般的です。
pタグは段落の意味があるため、下余白が設けられています。
なので、marginを0pxなどに(再)設定する事で問題が解決されるはずです。
尚、一昨日から規制で即答したかったのですが、現在レス代行してもらっています。
今回はソースのいらない回答でしたが
http://jsfiddle.net/にアップしてもらっていると規制をくらった私でも
コメントを残して更新して回答する事が可能です。是非使ってください。

24 ：

>>23
なるほど！今後是非使わせていただきます
ありがとうございます！

25 ：

HTMLに
<img id="test" style="visibility:hidden;" src="test.png" />
と指定しておき、JavaScript内で条件判定して
$("#test").css("visibility", "visible");
としていますが、表示されず、
$("#test").css("opacity", 1);
を追加すると表示されます。
visibilityをhiddenにするとopacityが0にセットされてしまう仕様ですか？
visibilityとopacityの関連について、詳しく知ってる人いませんでしょうか

26 ：

何度もすみません
リセットｃｓｓググって使ってみたり
margin変えたりしたけど、どうしても
見出し(文字)とタイトル(文字)の間の改行を
無くすことが出来ませんでした
ソースコードです
http://jsfiddle.net/KEFZN/4/

27 ：

div.sample2 {
margin: 80px;
}
↑ここのマージン0にすれば？

28 ：

>>27
初歩的な質問で申し訳なかったです
ありがとうございます

29 ：

>>25
再現できない
http://jsfiddle.net/uG7dw/

30 ：

やっぱちゃんとhtmlごとうｐしてくれればちゃんと解答スレになるんだなｗ

31 ：

クソみたいな回答者が全員消えればちゃんと解答スレになるんだなｗ

32 ：

>>30
大体抜粋箇所以外に問題があることが多いからなあ。
抜粋だけされたって何で答える側が動作させるように体裁整えるとか間違ってるわ。
昨日みたくindex.htmlとcssファイル添付してくれるのが一番有難い。

33 ：

ソース丸ごと上げられても
抜粋して再現するコードをjsfiddleに貼ってくれりゃええ

34 ：

質問者にそこまでしてもらえないと答えられないの？
もっと推測力を磨きましょう。

35 ：

metaタグのdescriptionについて質問があります。
ここの内容をページごとに違うものにしないとネットの検索では不利になるらしいのですが、
例えば
Aというファイルのdescriptionが
ABCDEだった場合
Bのファイルでは、
ABCDEF
とするだけでも別に構わないんですよね？
またコレについてはkeywordsについてもページごとに異なるものを
設定したほうがよいのでしょうか？

36 ：

>>33
firebugつこうてると修正の度に毎回リロードすんのがめんどいねん。

37 ：

すいません追加でもう一つ。
検索サイトでヒットしたときに表示される文章が、
descriptionのものが表示されるんですが、
本文が表示されるようにするにはどうすればよいのでしょうか？

38 ：

>>37
descriptionを設定しなければいいです

39 ：

>>38
なるほど
ありがとうございました。
>>35はkeywordsについてだけ、回答ほしいです
お願い致します。

40 ：

ああ！すいません。
descriptionを設定しないとは、
metaタグごと全て消してよいということでしょうか？
それとも
<meta name="description" content="">
こんな感じに空白にするのでしょうか？
何度もすみません。お願い致します。

41 ：

>>36
kwsk

42 ：

HTML5でPC、スマフォ、携帯対応のホームページを作りました。
携帯の場合CSSが読み込まれないのでbodyの次くらいに
<noscript><font size="2"></noscript>を入れ
bodyが終わるチョイ前に<noscript></font></noscirpt>で
ページ全体のフォントサイズを2にしていますがこれはおかしいでしょうか？
一応表示はされていますがDW上では無効なマークアップと表示されてしまいます。
他に方法を知っていられる方がイましたらご教授いただければ幸いです。

43 ：

>>41
firebugは、CSSやHTML修正するとリアルタイムでブラウザに反映されるから。
更新ボタン押す必要もないし、セーブする必要もない。だから修正作業が超楽。

44 ：

>>43
それが>36に繋がる理由がわからない
Firebugはjsfiddleでも使えるし、何も問題ないように見えるけど

45 ：

>>43
jsfiddleはインラインで埋め込んでるだけだからFirebugで修正できるよ

46 ：

ホームページつくりました。
少し困っていますので、どなたか、ご相談にのってくださいませ。
Index.html
index.file -css.file -base.css
　　　　　　-img.file -logo.gif
　　　　　　-shumi.html
　　　　　　-zikosyoukai.html
みたいな構成ですが。
アップロードして、希望は
�@index.html　を　http://tarou.com/
�Ashumi.html　を　http://tarou.com/shumi.html
としたかったのですが、
�@http://tarou.com/index.html
�Ahttp://tarou.com/index/shumi.html
になってしまいます。
どうしたら上記のような構成にできますでしょうか？

47 ：

Welcome to tarou.com
って言われちゃった

48 ：

ところでFTPはどうしてますか？
そこを書かないとだれも答えられないと思います

49 ：

すみません質問です
CSSでhoverを使うとき、プロパティの部分に別のタグのプロパティを指定することはできますか？
たとえば、タイトル文字の上にマウスカーソルがきたときに、タイトル文字を赤くするのではなくて、
本文の文字を赤くしたい、というような使い方です
お願いします

50 ：

すいません。
サーばーは、ロリポップでレンタルしていて、
ＦＴＰはCYBERDUCKというソフトでアップロードしました。

51 ：

>>45
そうなんだ。使ったことがないからあんま知らないんだよね。ありあり。

52 ：

>>40
metaタグ全部消して良いよ

53 ：

>>49
可能

54 ：

>>46
サーバ上の.htaccessというファイルにindex.htmlを追加してやればおｋ．

55 ：

>>53
すみませんやっぱり見つからないです
どのように指定するのでしょうか？

56 ：

すいません
cssわかりません
背景を青にしたいです
このindex.htmlを、どのように書き換えたらよいでしょうか？
<html>
<head><title>kumakatsu</title>
<span style="color:#009900;"><strong><span style="font-size:large;"><br>kumakatsu</br></span></strong></span>
TOTAL<br>
<a href="http://candybox.to" target="_blank"><img src="http://yellow.candybox.to/kumakatsu/dayx/dayx.cgi?gif" border="0"></a>
<br>
TODAY<br>
<a href="http://candybox.to" target="_blank"><img src="http://yellow.candybox.to/kumakatsu/dayx/dayx.cgi?today" border="0"></a>
<br>
YESTADAY<br>
<a href="http://candybox.to" target="_blank"><img src="http://yellow.candybox.to/kumakatsu/dayx/dayx.cgi?yes" border="0"></a>
<br>
<a href="http://yellow.candybox.to/kumakatsu/dayx/dayxmgr.cgi">集計</a>
</head>
<body>
<br>
<br>つくったもの</br>
<br></br>
<a href="1017.php">占い</a>
<br>クリックしてください</br>
<br></br>
</body>
</html>
<span style="font-size:large;"></span>

57 ：

float:leftによる段組をしていましたが、カラム落ちしまくりでした。
親divの width:100% をやけくそに width:1200px とかしたらあっさり解決しました。
そういう考えでOKでしょうか。それとも、もっとスマートな方法がありますか。

58 ：

解決しました
またよろしくお願いします

59 ：

>>57
display:table系とかどう

60 ：

>>49ですが可能というレスのあとに詳しいことも書かれないということは
かなりな基本的なことだから、ということなのでしょうか？
二日間探し続けて見つからないのですが、ネット上の解説サイトでもよく書かれているような
ことを見落としてしまっているのでしょうか・・・

61 ：

>>60
弟か子孫なら、兄弟結合子とかで出来ると思うよ
あと :target 擬似クラス使うとか

62 ：

ページの配色（文字色、背景色、リンク色など）をどうしようか悩んでいます。
携帯で見やすい配色にしたいのですが、そのあたりを詳しく説明している参考になるサイトはありますでしょうか。
テキストメインのサイトになります。
スレチガイであればお手数ですが、誘導お願いします。

63 ：

>>59
IE7では採用されてないようですが切り捨ててもOKですか？
display:tableはなかなかオシャレだと思いました。

64 ：

XPでIE8が重要な更新になってるからおｋ

65 ：

>>61
すみませんやっぱり分らないです
ttp://zng.info/specs/css3-selectors.html#selector-syntax
このサイトは全部読んでみたんですがやっぱり分りませんでした
わたしのほうの質問の仕方が間違っていたらすみません
詳しく質問を書き直してみます
<font class=fontclass>テスト</font>のテストの文字部分にマウスカーソルがあるとき
<body class=bodyclass>のbodyの背景色を赤にしたいという場合、
CSSでは
.fontclass:hover{background:red}
としてしまうと普通に.fontclass部分が赤になってしまうだけなので
<body>部分、もしくは「.bodyclass」部分を{background:red}としたいのですが、
body font:hover{background:red}
としてしまうと..fontclassにカーソルがあるとき文字が
赤くなるだけでbodyのbackgroundには適用されないですし、
.fontclass{.bodyclass.background:red}
と、適用したいプロパティを指定しようとしても当然文法外として動いてくれません
:hoverを指定したいのは.fontclassで変更したいのは.bodyclassという場合、
javascriptを使わずに書く方法はないでしょうか？

66 ：

>>65
糞古いな。勧告された奴の日本語訳あるからそっち読んだ方がいいよ
http://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/
:hoverから遡って親に反映させるのは、CSS4セレクタ使わないと無理
クリックしたときで良いなら、body:target{background:red;}みたいにして出来るかもね

67 ：

>>66
ありがとうございます
CSS4ということは、どうりで解説サイトを漁っていても出てこなかったんですね
これを機会にCSS4の勉強もやってみます
ありがとうございました

68 ：

全くの素人で済まないのだけど、2chってﾚﾝﾀﾙｻｰﾊﾞｰつかってるの？

69 ：

カテゴリを画像の左上に表示しているのですが
文字が縦に表示される時があります。
全て確実に横に表示するにはどうしたらいいでしょうか？
<span class="cate"><%topentry_category></span>
.cate{
color: #FFFFFF;
font-weight: bold;
background-color: #1E26FC;
padding: 3px 10px 3px 10px;
line-height: 12px;
position: absolute;
z-index: 1;
margin: -6px 0 0 -6px;
}

70 ：

ブログの右端に来た時だけなる様なので、
上に書いたCSSの問題じゃないかもしれません。
エログでなんですが、直し方が分かる方がいましたら教えて下さい。
mimasuka.blog50.fc2.com/

71 ：

firefox,IEともマトモに表示されてるように見えるが。
何がブログの右端に来た時になるんだ？カーソル？

72 ：

トップページの画像の左上にカテゴリが表示されていますよね？
記事が右端に来た時に
カテゴリの表示が縦に表示されているのが気になってます。

73 ：

すいません。
理由が分かりました。
ブラウザの横幅が原因だったみたいです。
ブラウザのサイズで表示が変わらないようにする方法はないでしょうか？

74 ：

そういうことね。ならcateの中のpositionがabsoluteだからじゃない？
relativeにすればいいんじゃなイカ。

75 ：

質問です。
ページ上部にヘッダ固定を試みた際、
positionのfixedを用い、固定自体はできました。
ただpositionを使用するとページサイズが小さいうちはいいのですが、
ページサイズがテキストで300KBを超えたあたりから動作が異様に重くなり、
ホームページに戻ろうとしたり更新ボタンを押すと
しばらくブラウザが固まってしまいます。
試しに意味もなくabsoluteやrelativeだけを入れても同様の結果になりました。
どうにかしてpositionを使わない仕様にすべきでしょうか。

76 ：

relativeにしたら直ったでゲソ。
そのかわり画像の位置が一行分下がってしまった。
とりあえずマイナスマージンで画像の位置を上げたけど
各ブラウザに影響されないような画像の上げ方ないでしょうか？
.box img{
margin: -13px 0 1px;
padding:0;
border:none;
text-align:center;
width: 160px;
height: 120px;
}

77 ：

絶対positionが原因じゃないだろうからソースがわからないとどうしようもない。
サーバにうｐしてるならアドレス貼るか、zipでindex.htmlとcssをおくれやす。

78 ：

>>76
さっき見直したらrelativeになってたから修正したなとわかったｗ
今ちょっとチェックできないけど、ネガティブマージン使ってる箇所にpositionは設定してる？
position設定しないと受け付けないブラウザがあったはず。
俺はfirefoxだけしか見れないけどきちんと表示されてるように見えるけど。

79 ：

>>77
勢いで質問してしまいましたが、
positionが原因でないと信じて疲労の限界まで自力で頑張ります。
どうしても無理だったら貼り付けてお世話になります。

80 ：

特定のキーワードのSEO対策はどうすればいいの？

81 ：

>>78
IE6.0での表示に問題があるみたいですね。
とりあえず .box imgに「position:relative;」を付け足しておきました。
僕もIEは見れないのでチェックできず困ってるんですよね…
もう一つエログをやってるのですが、
IEで表示するとおかしくなってるみたいなので、
どなたか間違ってる所をチェックして頂けないでしょうか？
出来ればそっちのURLは晒したくないので、
ソースを見てみてもいいという方はメール下さい。
shiori_6_12@yahoo.co.jp
よろしくお願い致します。

82 ：

ばれそうな所は削除して、関係ありそうなソースだけ残して
index.htmlとcssのファイルさえzipってくれればいいよ。
オラはjsfiddleとやらの使い方がよく分からんのです

83 ：

>>82
最近ずっと質問答えてくれてる人？
プログラマなんだろうけど、どういう環境でPGしてますか？

84 ：

>>83
サクラエディタ＋firebug
以上ですｗ　DW触ったこともないけど、この２つがあって他に何がいるんだろうと思ってシマウマ

85 ：

jsfiddleは張られたページ開くだけだろ
使い方って何だ

86 ：

>>84
サクラエディタでプロジェクト開発（複数人）とかできるの？
最近やたらと勧められるんだけど。

87 ：

>>77
素人なりに試行したところ、
ご助察のとおりpositionが問題ではなく、
position:fixedを機能させるために新たに追加したdoctype宣言が原因でした。
doctype宣言を入れると、それで何を指定してもページは超重力に見舞われました。
ただ、これがページの仕様と噛み合わなかったのか
自分のPCやブラウザと喧嘩してるのか不明なので、後日ネカフェあたりで検証します。
返信ありがとうございました。

88 ：

>>86
個人事業主だから一人でしか作らないっす
タグ形式＋マクロ＋PHP辞書対応＋grep置換できるとなると
秀丸以外だとサクラしか残らないから（多分）
>>87
オメです。Framesetの宣言追加したということですかね？
多分うｐられても気づかなかったかもｗ

89 ：

http://www.hisakawa.net/hososhitsu/
このサイトのトップはFlashだと思っていたのですがそういう要素が見当たりませんでした
読み込みも速く次々と画像が変わったりするのはどういう技術なのでしょうか？

90 ：

javaの技術のひとつだろうね

91 ：

つ s3Slider
jQuery。head部に書いてあるよ。

92 ：

適当に弄ってたらレイアウトが崩れるのはおそらく直りました。
あと、IEでRSSを見ると更新情報の文字がセンタリングされているみたいで困っています。
更新情報を左に寄せるにはどうしたらいいのでしょうか？
無駄なコードだらけですが、確認お願い致します。
pass：1
http://www5.puny.jp/uploader/download/1319068399.zip

93 ：

ファイル名が文字化け&index.htmlがなくて見られんよ〜

94 ：

>>92
こんなグチャグチャに壊れたファイルを出して。
PCの基本操作をマスターするのが先じゃね？

95 ：

Macなだけだろ

96 ：

95 名前：Name_Not_Found[sage] 投稿日：2011/10/20(木) 10:39:51.09 ID:???
Macなだけだろ

97 ：

>>93 >>94
申し訳ありませんでした。
ファイル名と拡張子を変更してみたので再度確認して頂けないでしょうか？
pass:1
http://www5.puny.jp/uploader/download/1319075144.zip

98 ：

とりあえず適当にalineがcenterになってる所をleftに変えてみたら？

99 ：

>>98
ありがとうございます。
leftに変えたら一発で直りました。
しょうもない質問ですみません。
ありがとうございました。

100read 1read

1read 100read

TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲