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

1 ：11/11/30 〜 最終レス ：12/01/09

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

2 ：

1乙

3 ：

>>1
Ｚ

4 ：

http://www.hncb.jp/
このサイトのように.ｊｐや.comのようにｈｔｍｌファイルでつくられているのに
ＵＲＬの最後に.ｈｔｍｌとなっていないのは何故でしょうか？

5 ：

>>4
「URLが / で終わる場合、その後に○○が続くと見なす」という設定が
Webサーバ側で行われているから。
ちなみに、○○はindex.htmlとは限らない。（むしろ最近ではindex.htmlは希少かも）
ついでに、「ブラウザでソース表示してHTMLが書いてあるからHTMLファイルで作られている」
という思い込みも、正しいとは限らない。

6 ：

>>5
＞「URLが / で終わる場合、その後に○○が続くと見なす」という設定が
Webサーバ側で行われているから。
使用するサーバーによっていちいち表示されないということですか
ありがとうございます

7 ：

サーバーの設定ファイルで自由に設定できるってことです。

8 ：

１おつー
前スレでhtml5ではブロック要素をaタグでくくって問題ないかって話でてたけど
MDNの記事に参考になりそうなものがでたので貼っておきます
第2回　HTML5で使い方が変更されたタグをまとめよう
http://www.mdn.co.jp/di/articles/2605/?page=3

9 ：

節子それMDNやない

10 ：

>>9
頭だいじょうぶ？

11 ：

>>10
？

12 ：

オプソ脳なんだろな。
って書くと褒め言葉に取られるんだろうな。

13 ：

IFRAME内に表示するHTMLファイルを更新しても、
その親のページを表示したときに更新されない時があるんだが、
これは何が原因ですか？

14 ：

>>13
スキル不足

15 ：

>>14
おいコラ
お前何しにきた

16 ：

>>15
主原因を上げてみただけだｗ
つか、答えてあげなよｗ
>>13
まともに答えたらブラウザのキャッシュだろうな
単純にシフト押しながら更新してみ？

17 ：

>>14
ばいいよ

18 ：

>>16
ありがと
いけた
キャッシュ毎回削除する必要があるのか
めんどい(´・ω・｀)

19 ：

>>11
どこからどうみてもMdNでした

20 ：

>>18
ということは、ユーザーもキャッシュが変更されない可能性があるから
iFrame内を更新したら、iframeのURLを
http://www.example.com/iframe.html?t=20111130
みたいに、日付入れると、キャッシュは気にせず表示される
HTMLソース見るとCSSとかのファイル名に、
?t=2011...ってかいてあったりするしね
CSSもキャッシュされるからね
スキル不足とか言ったけど、、、、

反省してない

21 ：

テーブルの行全体にリンクつけてクリックしてページ飛ぶようにしたいのですが、どうすればいいでしょうか
<table>
<tr>
　<td>画像イメージ</td>
　<td>商品名</td>
　<td>カテゴリー名</td>
　<td>価格</td>
</tr>
<tr>
　<td>image/hh.jpg</td>
　<td>田中</td>
　<td>田中本</td>
　<td>50,000</td>
</tr>
</table>
hrefでもformでも一気に囲むとtdのせいでエラー出て出来ません

22 ：

>>18
Cache-Control

23 ：

>>21
addEventListener
tbody省略しない方がいいよ

24 ：

>>21
あんまりスマートなやり方じゃないけど、クリッカブルマップを使用する方法がある。
1×1の透過gifまたはpng画像を作成する。そして、widthとheightを指定して表と同じ
大きさにする。その透過画像を絶対配置を使用して表と重ねる。
最後に、画像にクリッカブルマップを指定してリンクを設置する。

25 ：

そんなことするくらいならonclick属性使った方がまだまし

26 ：

>>21
ulで組み直すのがベスト

27 ：

>>21
これが一番シンプルかな。
IE8,Gecko,Webkit,Operaで確認した。
難点はaにheightを指定しないとリンクが正常に動かない事。
<a href="#" style="display:block; width:XXX; height:YYY;">
<table>
省略
</table>
</a>

28 ：

たくさんの回答ありがとうございます
自分のレベルにあった奴つかって見ます

29 ：

こんにちは質問です
お客がiPad1でレイアウトがずれると言っています。
こちらのiPad2では問題ないです。
iPadならではの原因はありますか
9pxや10pxの文字サイズがどうやら固定で12pxくらいになる？
経験あるかたおねがします

30 ：

Divのなかにさらにdivをおいて、その中の文章が増えたら外側のDivも押し広げられる作りにしたいときは高さ指定をヤメればいいのかと思うんがけんど、
逆に文章が少ないときに最低限は100pxは高さがほしいってときはどうすればよかと

31 ：

min-height

32 ：

>>26
表にul使うやつがあるか

33 ：

2階層上のフォルダやファイルにアクセスするにはパスってどうやって書けばいいんでしょうか？
.../test.html
ってやっても無理でした。
一階層上なら../でいけますが2階層上のファイルにアクセスする方法がわかりません

34 ：

../../でいけました
どうも

35 ：

>>33
../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../
仕様で、何階層上までいけるんだろ

36 ：

>>35
階層は関係なくパス名の最大長までじゃないの？

37 ：

<li>の最後のborderを消したいのと
imgのロゴ以降はfloatを解除したいのですがfloatが解除されてません
この2つがいろいろ調べても出来ません。
私の書き方がまずいのでしょうか？
分かる方おしえてください
http://jsfiddle.net/gpDnh/

38 ：

<li>の最後のborderを消す方法はいろいろあるけど、
:first-child疑似クラスを使用する方法が一番スマートだと思う。
#header li {
padding: 0 10px;
list-style-type: none;
float: left;
border-left: 2px black solid;
}
#header li:first-child {
border: none;
}
borderをrightからleftに変えて、最初のli要素のみborderを表示しないようにする。
フロートが解除されないのは、インライン要素にclearを指定してるから。clearプロパティはブロックレベル要素に
指定しなければならない。さらに、imgはインライン要素なのでブロックレベル要素の中に含めなければならない。
<p><img src="images/logo.gif" alt="ロゴ" width="100"></p>
#header p{
clear: both;
}
imgを<p>要素でマークアップし、clearはp要素に対して指定する。

39 ：

HTMLについての質問です.
Canvasの中に文字,またテキストボックスやボタンの表示をしたいのですが,可能でしょうか？
どなたか教えて頂けませんか？
よろしくお願いします.

40 ：

>>38
ありがとうございます
すごくわかりやすい説明でしたのでできました

41 ：

教えてください。
１、Dreamweaverでブログは作れますか？
２、Dreamweaverはmysql等のデータベースにアクセス可能ですか？

42 ：

Dreamweaver cs5ですが、ファイルを展開する際、
メニューの「ウィンドウ→ファイル」で
・それぞれのフォルダが表示
・フォルダを開くと中のフォルダ、ファイルが表示
・中のフォルダを開くと、さらに中のフォルダ、ファイルが表示〜・・・
という展開方式ですが、
ホームページビルダーの様に、
・トップページ
・その下にリンクをしたファイルを表示
・またその下にリンクしたファイルを表示〜・・・
という展開方式はできるでしょうか？
よろしくお願いします。

43 ：

>>41
1.作れる
2.mysql触った経験ないでしょ？ｗ

44 ：

>>42
cs5を触った経験が短いからなんともだけど
5.5ならー
・トップページ
・その下にリンクをしたファイルを表示
はデフォ

45 ：

質問です。
マウス座標や発生するイベントについてテストするプログラムを書いたのですが、
textareaしか表示されません。どこか間違っているのでしょうか。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=320, user-scalable=no"/>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
window.onload = function() {
document.body.onmousedown = showInfo;
document.body.onmousemove = showInfo;
document.body.onmouseup = showInfo;
};
function showInfo(event) {
var s ="*type = " + event.type;
s += " xy=" + event.x + "," + event.y;
s += " offsetXY=" +event.offsetX + "," + event.offsetY;
s += " target=" + event.target.nodeName;
$("info").valie = S + "\n" + $("info").value;
}
</script>
</head>
<body>
<h1>マウスイベントのテスト</h1>
<textarea id="info" rows="30" cols="80"></textarea>
</body>
</html>

46 ：

書き込んですぐ valie と　Sになっていたのを気づきました。
スレ汚し失礼しました。

47 ：

>>44
cs5.5ですか。
それならばcs5でもできそうですが、
メニュー　→　ウィンドウ　→　ファイル
でリンクしたファイル順に表示されますか？
cs5ではフォルダに入れたファイル名順にしか表示されないので。

48 ：

>>42
【MySQL】下らねぇ質問はID出して書き込みやがれ 2
http://hibari.2ch.net/test/read.cgi/db/1322402682/
こんなんもあるから活用してみたら？

49 ：

CSSってまじめんどくさいな
メリットがさっぱりわからん
特にグーグルの顔色うかがう意味が

50 ：

別に面倒臭けりゃ使う必要もない
ブラウザのデフォルトスタイル任せで表示してれば
あとCSSとグーグル関係ねえ

51 ：

>>50
関係あるだろ

52 ：

CSS使ってないから検索順位が上がらないとか思ってんの？

53 ：

Googleのデザインぱくったらまずそうだなーとかそういうこと？

54 ：

>>52
そうSEO的な意味で。お客はそう思うだろう。

55 ：

マークアップだけで、デザイン調整してないサイトなら、見づらいしお客も来ないわな
そういう意味で検索順位下がるってんなら、一理ある

56 ：

>>49
メリットとしては、
マークアップがしっかりするってことよ。
キレイに書けるようになならないと、
cssちゃんと書けない奴のを共有して仕事するとき
齟齬が酷くてつらいぞ
cssは後々の管理も楽。
使い回しが楽。

57 ：

使いまわしなんてできるかあ？
だったら出来合いのフリーCSSが充実してきておれらの仕事なくなるはずじゃねーの？

58 ：

<h1>
一行目
<h2>二行目</h2>
</h1>
こんなふうにh1にh2を入れ子にするのはダメなんですけ
h1じゃなくdivならアリなの?

59 ：

>>57
もしやってないんだとしたらそうとう効率悪いと思う
フリーのcssに自分が使う背景画像のurlが最初から書いてあるの？
横幅の指定がされているのか？自分でやるだろそれくらいｗ
質問者は本格的な仕事でのcssの事を言ってないと思うので
仕事なくなるうんぬんナンセンス

60 ：

>>58
h1にh2を入れる意味がない
divならあり
h1はレイアウトのためじゃなくて大見出しって意味があるからね
レイアウトとして使おうとするのはよくないよ

61 ：

>>59
だからさ、使い回してないじゃん

62 ：

>>58
W3CのHTML 4.01 Specificationによれば
h1-h6, divは%blockであり、h1-h6の内部は%inlineのみなので、h1-h6の中身にhやdivなどのブロック要素は不可。

63 ：

>>57
使い回しとしては
内部に2カラムのエントリー記事を作る
この設定したcssを全ページで共有するcssにいれておく
そしたら、そのページではcssファイルを読み込む事で利用できる
htmlソースはスニペット使えば問題ない
個別ページで修正する場合は直近の修正用cssでやって上書き修正される
その他にcssではcssをリセットしたりブラウザ�閧ﾌ誤差をなくしたりもできる
htmlソースだけでやろうとするとごちゃごちゃになる
同じ形をしているページのcssを設定するにも一枚ごとに書くとかモッタイナイ

64 ：

>>60
h1の背景に画像おきたかったのじゃ
見出しが二行で、スタイルが異なりたい
CSSってこまわりきかないのな

65 ：

使い回しも何も、マークアップとCSS混同しちゃダメだろう

66 ：

CSSの使いまわしなんてできないよ

67 ：

>>64
小回り効きまくるから安心するんだ
おれの受けた構成イメージが合ってるか分からないけど
<div id="headerArea">
<h1 class="test_1">(X)HTML/CSS/Dreamweverのスレ</h1>
<h2 class="test_2">〜質問に優しく答えよう〜</h2>
</div>
こんな感じでやればいいんじゃないかい？
h1、h2の位置は指定できるし

68 ：

>>64
見出しの中に見出しとか意味わからんだろ
:first-lineなりem要素なり使えよ

69 ：

>>67
h2はサブタイトルを書く要素じゃないぞｗ

70 ：

>>63
こうやって設定したのを類似ページで形を修正して利用できる
別案件でも利用できる
これって十分使い回してると思う

71 ：

使いまわしとか変な根拠持ち出すから・・・

72 ：

>>67
まあそれでいいんだろけんど
ちこしでもタグへらそうかとおもて

73 ：

使い回しをしないっていう人は、毎回フルスクラッチで書いてるの？
簡易なCSSフレームワークを自作したりしないの？

74 ：

それはHTMLも同じ話だ
そういう意味の使い回しじゃないだろ

75 ：

他にどういう意味の使い回しがあるの？

76 ：

>>69
いや、そうだけどこの人は2行にしたいんじゃない？
サブタイトルをh2で指定するサイトとかも実際あるし
要はマークアップ次第でしょう

77 ：

>>74
一人で使い回しじゃないって頑張ってるけど
十分な使い回しじゃねぇかｗｗｗｗｗｗｗｗｗｗｗ

78 ：

>>72
なら
<div id="headerArea">
<h1 class="test_1">(X)HTML/CSS/Dreamweverのスレ 〜質問に優しく答えよう〜</h1>
</div>
タグ減らすならこれでいいんじゃない
2行にするだけなら改行タグいれたり
画像にすればいいんだし

79 ：

>>76
何がマークアップ次第なのかわからんが
サブタイトルを一つ下のレベルの見出しで書くのは意味不明

80 ：

>>79
そうでもないと思うよ
メインタイトルをh1
サブタイトルをh2
ページ内コンテンツのh2と重要性が同程度って事で書いてもいいと思う
気にくわないなら、別タグで好きなようにすればいいよｗ

81 ：

アニメとかのサブタイトルならそれでいいと思うよ

82 ：

>>80
商品のシリーズをh1
シリーズのカテゴリでh2にして
>>67みたいに使う事は多いな
別に意味不明じゃない
意味不明と感じるのは脳のマークアップの問題(藁´･ｗ･｀)

83 ：

矛盾してね

84 ：

>>83
＼　　　/　.::::::::::::::::::::::::;;:;;::,ｯ､::::::　　 )　　 く お 　す
　 ＼　l　 ,ｯｨrj,rｆ'"'"'"　　　 lﾐ:::::::　く　　 れ　 前　 ま
　　　　 Y　　　　　　　　　　 ,!ﾐ:::::::　ヽ　　 な　 は　 な
｀ヽ､　　|　　　　　　　　　　 くミ::::::::　ﾉ 　 い　 帰　 い
　　　　 |､__　 ｬー--＿ニゞ　｀i::::,rく　　 か　 っ
｀`''ｰ-　ゝ､'ｌ　 ￣ﾞ´彑,ヾ　　　}::;! ,ﾍ.）　　 ！　 て
　　　　　 ﾞｿ　　　""""´｀　　　　　〉 L_　 　 　 　
　　　　　 /　　　　　　　　　　i　　,　　/|　　　　　　　　　r
≡＝-　〈´　,,.._　　　　　　　 i　　't-'ﾞ　|　,へ　　　　　,r┘
,､yx=''"　｀ｰ{ﾞ　＿, -､　　　　;　　l　　　ﾚ'　　ヽr､⌒ヽ'
　　　　　　　 ﾞ､`--─ﾞ　　　　　 /!　　　　　　　　 `､
　　_,,､-　　 　 ﾞ､ ー''　　　　／　;　　　　　　　　　　 `､
-''"_,,､-''"　　　 ﾞ､　　　　／;;'　,'　　/　　　　　　　　 、＼
-''"　　　 ／　　　`ｰ─''ぐ;;;;' ,'　　ノ
　　 ／／　　　 /　　　　　ヾ_､=ﾆﾞ

85 ：

>>78
たんなる二行じゃなくって、文字の大きさやいろ変えたいんですよ
タグわけするかクラスわけするしかないでしょう

86 ：

>>85
それならspanタグで調整すればいいんじゃない
<div id="header">
<h1>メインタイトル<br /><span>サブタイトル</span></h1>
</div>
#header {
うんぬんかんぬん
}
#header h1 {
文字の大きさなり
色なり
}
#header h1 span {
文字の大きさなり
色なり
}
こうすればheader内にあるh1、spanにだけcssが適用できて便利だよ

87 ：

すみません2つ教えてください
#grobalnavi liのfontの色が変わりません
#top ul　をfloatで#top p.top1の右にしたいんですけどfloatで指定するとバックグラウンドの色が白くなります
色々やってみましたが一向に改善しません
原因は何でしょうか？
http://jsfiddle.net/EJRx3/

88 ：

>>87
http://jsfiddle.net/EJRx3/1/
日本語でのコメントが打てないから
コメントはこちらで。
font-colorではなく、正しくはcolorで指定すること
> #grobalnavi liのfontの色が変わりません
clearfix使えばいいと思う
topで指定されていたclear:both;を消して、
.clearfixを用意させてもらいました
> #top ul　をfloatで#top p.top1の右にしたいんですけどfloatで指定するとバックグラウンドの色が白くなります
右上に出てるのはよく見てないけど本来の表示でいいのかい？

89 ：

横幅が決まってるならcssの方でも書いてあげればよかったスマソ

90 ：

>>88
ありがとうございます。
clearfixは上級者の人が使うイメージがあって今までfloatのみに頼っていたのですがこれからはclearfix覚えようとおもいます。
ちなみに余談になりますがclearfixのほうが使いやすかったりＳＥＯでfloatに勝るから上級者はclearfixを使っているのでしょうか？

91 ：

>>90
SEOじゃなくて表示が崩れちゃうからだね
とりあえず各ブラウザの崩れをなくしてclea:bothの強化版だと思えばいいかな
cleafixは
floatを使っている外に使えばいいよ
<div class="clearfix">
<div style="float:left;"></div>
<div style="float:right;"></div>
</div>
色んな書き方があるからぐぐっていいものを使えばいいと思う
今回使ったのは俺がいつも使っているやつじゃなくて、適当にぐぐってもってきたものなのでｗ
覚えるっていうより、使えそうなのをコピーしてきてスニペットとかに登録して使い回せばいいかな

92 ：

使い方補足
divにid、ｃｌａｓsセレクタが予め入っているものに関しては
<div id="test1" class="test2 clearfix">
<div style="float:left;"></div>
<div style="float:right;"></div>
</div>
ってかんじ
使いたいところに使えるから便利だよ

93 ：

>>91
clea:bothの強化版ですか
使い方覚えると便利そうなんでいろいろ調べてみます
ありがとうございました。

94 ：

cleanfixって最初覚えるときややこしくて苦労した

95 ：

クリヤーフィックスってなんでCSS標準じゃないの？
標準のclearが役立たずなのはなんなの？
フロートつこうたらレイアウトが崩れる穴だらけの仕様だよな

96 ：

どうも初めまして。昨日からhtmlを勉強してるものなんですが、あるサイトのページのソースをまるまるコピーしてどうなるか試したら元のページは青なのにコピーした方は白のままでした。
何故でしょう？初心者丸出しなんですが、よろしくお願いします。

97 ：

すみません>>96ですが、青が白というのは背景のことで文字自体はしっかり表示されました

98 ：

>>96
恐らく元のページがｈｔｍｌとｃｓｓの両方で成り立ってるページなんじゃないか？
ｈｔｍｌだけでも色を入れることできるけど
そのページはｃｓｓで色を入れてるんだろう

99 ：

ｈｔｍｌは文字（本当は色も入れられるけど）
ｃｓｓはデザインとふまえた上で
ｈｔｍｌ入門サイトでもググったほうが早いかも

100read 1read

1read 100read

TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲
・　次のスレ
4: FC2ホームページが重すぎる (159)
5: + JavaScript の質問用スレッド vol.95 + (129)
6: 【1日1回】クリック募金 +リンクしよ+【無料】 (266)
7: 【SEO】Google対策 パート10【Google】 (108)