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

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問大いに結構。分からない人は何回聞いても結構
(X)HTML / CSS / Dreamweaver の事なら何でもOK
ただし、JavaScript や PHP などはスレ違い / 板違い。該当スレ / 該当板でどうぞ

回答してくれる方は優しい人のみ！
質問者に対して暴言を吐く人は このスレを見るな！！

質問側も節度あるレスで！
質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前スレ
(X)HTML/CSS/Dreamweaverの質問に優しく答えるｽﾚ11
http://hibari.2ch.net/test/read.cgi/hp/1318762819/

1乙

>>1
Ｚ

http://www.hncb.jp/

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

>>4
「URLが / で終わる場合、その後に○○が続くと見なす」という設定が
Webサーバ側で行われているから。
ちなみに、○○はindex.htmlとは限らない。（むしろ最近ではindex.htmlは希少かも）

ついでに、「ブラウザでソース表示してHTMLが書いてあるからHTMLファイルで作られている」
という思い込みも、正しいとは限らない。

>>5
＞「URLが / で終わる場合、その後に○○が続くと見なす」という設定が
Webサーバ側で行われているから。

使用するサーバーによっていちいち表示されないということですか
ありがとうございます

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

１おつー
前スレでhtml5ではブロック要素をaタグでくくって問題ないかって話でてたけど
MDNの記事に参考になりそうなものがでたので貼っておきます

第2回　HTML5で使い方が変更されたタグをまとめよう
http://www.mdn.co.jp/di/articles/2605/?page=3

節子それMDNやない

>>9
頭だいじょうぶ？

>>10
？

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

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

>>13
スキル不足

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

>>15
主原因を上げてみただけだｗ
つか、答えてあげなよｗ

>>13
まともに答えたらブラウザのキャッシュだろうな
単純にシフト押しながら更新してみ？

>>14
死ねばいいよ

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

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

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












反省してない

テーブルの行全体にリンクつけてクリックしてページ飛ぶようにしたいのですが、どうすればいいでしょうか

<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のせいでエラー出て出来ません

>>18
Cache-Control

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

>>21
あんまりスマートなやり方じゃないけど、クリッカブルマップを使用する方法がある。

1×1の透過gifまたはpng画像を作成する。そして、widthとheightを指定して表と同じ
大きさにする。その透過画像を絶対配置を使用して表と重ねる。

最後に、画像にクリッカブルマップを指定してリンクを設置する。

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

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

>>21
これが一番シンプルかな。
IE8,Gecko,Webkit,Operaで確認した。
難点はaにheightを指定しないとリンクが正常に動かない事。

<a href="#" style="display:block; width:XXX; height:YYY;">
<table>
省略
</table>
</a>

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

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

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

min-height

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

2階層上のフォルダやファイルにアクセスするにはパスってどうやって書けばいいんでしょうか？

.../test.html

ってやっても無理でした。
一階層上なら../でいけますが2階層上のファイルにアクセスする方法がわかりません

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

>>33
../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../

仕様で、何階層上までいけるんだろ

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

<li>の最後のborderを消したいのと

imgのロゴ以降はfloatを解除したいのですがfloatが解除されてません

この2つがいろいろ調べても出来ません。
私の書き方がまずいのでしょうか？
分かる方おしえてください

http://jsfiddle.net/gpDnh/

<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要素に対して指定する。

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

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

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

Dreamweaver cs5ですが、ファイルを展開する際、
メニューの「ウィンドウ→ファイル」で
・それぞれのフォルダが表示
・フォルダを開くと中のフォルダ、ファイルが表示
・中のフォルダを開くと、さらに中のフォルダ、ファイルが表示〜・・・
という展開方式ですが、

ホームページビルダーの様に、
・トップページ
・その下にリンクをしたファイルを表示
・またその下にリンクしたファイルを表示〜・・・
という展開方式はできるでしょうか？

よろしくお願いします。

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

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

質問です。
マウス座標や発生するイベントについてテストするプログラムを書いたのですが、
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>

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

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

>>42

【MySQL】下らねぇ質問はID出して書き込みやがれ 2
http://hibari.2ch.net/test/read.cgi/db/1322402682/

こんなんもあるから活用してみたら？

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

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

>>50
関係あるだろ

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

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

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

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

>>49
メリットとしては、
マークアップがしっかりするってことよ。

キレイに書けるようになならないと、
cssちゃんと書けない奴のを共有して仕事するとき
齟齬が酷くてつらいぞ

cssは後々の管理も楽。
使い回しが楽。

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

<h1>
一行目
<h2>二行目</h2>
</h1>

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

>>57
もしやってないんだとしたらそうとう効率悪いと思う
フリーのcssに自分が使う背景画像のurlが最初から書いてあるの？
横幅の指定がされているのか？自分でやるだろそれくらいｗ

質問者は本格的な仕事でのcssの事を言ってないと思うので
仕事なくなるうんぬんナンセンス

>>58
h1にh2を入れる意味がない
divならあり

h1はレイアウトのためじゃなくて大見出しって意味があるからね
レイアウトとして使おうとするのはよくないよ

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

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

>>57
使い回しとしては
内部に2カラムのエントリー記事を作る
この設定したcssを全ページで共有するcssにいれておく
そしたら、そのページではcssファイルを読み込む事で利用できる
htmlソースはスニペット使えば問題ない

個別ページで修正する場合は直近の修正用cssでやって上書き修正される

その他にcssではcssをリセットしたりブラウザ�閧ﾌ誤差をなくしたりもできる
htmlソースだけでやろうとするとごちゃごちゃになる
同じ形をしているページのcssを設定するにも一枚ごとに書くとかモッタイナイ

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

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

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

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

こんな感じでやればいいんじゃないかい？
h1、h2の位置は指定できるし

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

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

>>63
こうやって設定したのを類似ページで形を修正して利用できる
別案件でも利用できる

これって十分使い回してると思う

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

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

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

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

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

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

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

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

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

>>79
そうでもないと思うよ
メインタイトルをh1
サブタイトルをh2

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

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

>>80
商品のシリーズをh1
シリーズのカテゴリでh2にして

>>67みたいに使う事は多いな
別に意味不明じゃない
意味不明と感じるのは脳のマークアップの問題(藁´･ｗ･｀)

矛盾してね

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

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

>>85
それならspanタグで調整すればいいんじゃない
<div id="header">
<h1>メインタイトル<br /><span>サブタイトル</span></h1>
</div>

#header {
うんぬんかんぬん
}
#header h1 {
文字の大きさなり
色なり
}
#header h1 span {
文字の大きさなり
色なり
}
こうすればheader内にあるh1、spanにだけcssが適用できて便利だよ

すみません2つ教えてください

#grobalnavi liのfontの色が変わりません


#top ul　をfloatで#top p.top1の右にしたいんですけどfloatで指定するとバックグラウンドの色が白くなります

色々やってみましたが一向に改善しません
原因は何でしょうか？

http://jsfiddle.net/EJRx3/

>>87
http://jsfiddle.net/EJRx3/1/
日本語でのコメントが打てないから
コメントはこちらで。

font-colorではなく、正しくはcolorで指定すること
> #grobalnavi liのfontの色が変わりません

clearfix使えばいいと思う
topで指定されていたclear:both;を消して、
.clearfixを用意させてもらいました
> #top ul　をfloatで#top p.top1の右にしたいんですけどfloatで指定するとバックグラウンドの色が白くなります

右上に出てるのはよく見てないけど本来の表示でいいのかい？

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

>>88
ありがとうございます。
clearfixは上級者の人が使うイメージがあって今までfloatのみに頼っていたのですがこれからはclearfix覚えようとおもいます。

ちなみに余談になりますがclearfixのほうが使いやすかったりＳＥＯでfloatに勝るから上級者はclearfixを使っているのでしょうか？

>>90
SEOじゃなくて表示が崩れちゃうからだね
とりあえず各ブラウザの崩れをなくしてclea:bothの強化版だと思えばいいかな

cleafixは
floatを使っている外に使えばいいよ

<div class="clearfix">
<div style="float:left;"></div>
<div style="float:right;"></div>
</div>

色んな書き方があるからぐぐっていいものを使えばいいと思う
今回使ったのは俺がいつも使っているやつじゃなくて、適当にぐぐってもってきたものなのでｗ
覚えるっていうより、使えそうなのをコピーしてきてスニペットとかに登録して使い回せばいいかな

使い方補足
divにid、ｃｌａｓsセレクタが予め入っているものに関しては

<div id="test1" class="test2 clearfix">
<div style="float:left;"></div>
<div style="float:right;"></div>
</div>
ってかんじ
使いたいところに使えるから便利だよ

>>91
clea:bothの強化版ですか

使い方覚えると便利そうなんでいろいろ調べてみます
ありがとうございました。

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

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

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

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

>>96
恐らく元のページがｈｔｍｌとｃｓｓの両方で成り立ってるページなんじゃないか？

ｈｔｍｌだけでも色を入れることできるけど

そのページはｃｓｓで色を入れてるんだろう

ｈｔｍｌは文字（本当は色も入れられるけど）
ｃｓｓはデザインとふまえた上で

ｈｔｍｌ入門サイトでもググったほうが早いかも

>>98>>99
す早い回答ありがとうごさいます‼
cssってのもあるんですね…
これから調べたいと思います
ありがとうございました

>>95
ようおっさん
Dをデーとか言っちゃうんだろ？

>>100
htmlを文書構造だけにして
cssでレイアウトを表現するっていうのが今の手法なんです

フォントのサイズや色、レイアウトの横幅指定など見た目に変わるものはcssに書いて
htmlと分けようって感じです。

<div id="" class="">って見かけたことがあると思うのですが
idはそのページ内で一回しか使わない場合
classはそのページ内で何回も使い回す場合に使います
cssについて分からない事があれば重要な事なので都度質問してください

後は、dreamweaver、w3c、html lintのバリデート(構文チェック)をかけながらやっていけば
少しずつ覚えていくと思います。
html4.01、xthml 1.0、html5で作っていけばしっかりした勉強になるはずです

>>101
> Dをデーとか言っちゃうんだろ？
阿呆。デルタに決まってるだろうが

>>102
インテリさまじゃないか

>>102
かっこよくなってるｗ

一つ質問なのですが、HTML5の<!DOCTYPE html>で宣言すると、
複数行のアスキーアート（等身モナーやギコなど）がズレてしまいます。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE6">
を指定してやればズレがなくなることは確認できたのですが、
これ以外にズレをなくす手段はあるのでしょうか。ご教授おねがいします。

>>105
他のブラウザではもっと崩れているんじゃない？
宣言でデフォのcssが変わるんだろうね
reset.cssでぐぐって、一番最初に読み込ませれば
宣言→reset.css(各ブラウザ同表示)→自分で設定したcssたち
って順になるから、崩れはなくなると思う。

reset.css以外にもjsで崩れを防ぐのもあるのでそちらも参照
ただ、俺のよりもっといい方法があると思う
だから、俺の意見はあまり当てにならなそう

すみません、自己解決というわけではありませんが、
調べてみるうちに主な原因はIE9にあるということが判明しました。

火狐やoperaではズレは確認されず、
IE9のサブピクセルあたりが悪さをしているのではと推測。
なんとかIE9で見る際、>>105のタグを用いずに済む方法も模索してみたいと思います。

>>106
返信ありがとうございます。
人に聞くのがクセになってるせいか視野が狭く、
書き込んでから努力する習慣があるようでお目汚ししました。

>>108
あんまりない質問なのでいいんじゃないでしょうか
「解決した」だとフィードバックがなく目汚しですが、
どう解決したかを書いてくれると勉強になります。

IE9はxp環境などでプレビューしにくいと思いますが、
IE9のハックがありますので、IE9だけにcssで調整をかけてみてはどうでしょうか。

ともあれIE10の話も小耳にするし
IEまじで自重、絶滅しろ！！！！

>>105
IE9は環境ないから確かではないけど、多分IE9の問題じゃない
アスキーアートはフォントに依存してるから、デフォルトCSSが変わってるだけだと思う
最低でも固定幅フォントでなければならず、MS ゴシック体で制作する人が多いからCSSでfont-familyを指定してやるといい

>>110
アスキーアートはMSPゴシック基準に作成されることが多いようなので、
font-familyでMSPゴシックを、サイズは16pxで指定済みです。

現状調べている過程で強気な断言はできないのですが、
IE9とMSPゴシックに<!DOCTYPE html>を加えたコンボがいけない気がしています。

また初心者につき詳しくないので具体的な説明はできずソースにも依るでしょうが、
IEtesterで見た目だけを見比べるにIE9は8と似た仕様に則った上で
独自に諸々調整しているようなので、何かあるんだろうなと勘があります。
そのあたり8→9で何が変わったのかも調べてついでに知識も貯めていきます。

アスキーアーーーッ！

>>111
ごめん、MS Pゴシックだったね

<body>〜〜</Body>
ではなく、
<body id="video">〜〜</Body>
となっています。
<body>　の中に、id="video"を書くことを専門用語で何と言うのでしょうか？
これはいったいどういう作業をしているのでしょうか？

>>114
専門用語つーかなんていうか
普通にcssのidセレクタ

css側で#videoっていうのがあって、
そこでbodyタグのレイアウト構造が書かれている

もしくはjsとかでID値をセットして読み取ったり、書いたりだね
まぁ、cssに書かれているっしょ

それより終了タグのbodyが大文字使われてるのが気持ち悪い

>>115
レスありがとうございます。
> それより終了タグのbodyが大文字使われてるのが気持ち悪い
すみません。

ということは、
<body id="video">〜〜</body>
は、
<body>
<div id="video">
〜〜</body>
と同じ、と考えていいのでしょうか？

同じではないよ
それに、divにするならその<div>に対応する</div>も必要

>>116
そうですね。そう思ってもらって大丈夫です。
bodyにvideoという名前をつけるのは私としてはちょっと不思議なのでソースが気になりますが。

bodyにcssで設定するのは文字の大きさ、背景色など
ブラウザウィンドウのレイアウト指定でしょうね。

divに設定するのと同様にbodyに指定していると思います。

>>117
レスありがとうございます。
では、</div>を↓みたいに、ボディーの最後にもってくれば同じになりますか？
<body>
<div id="video">
〜〜</div></body>

>>118
> bodyにvideoという名前をつけるのは私としてはちょっと不思議なのでソースが気になりますが。
エロビデオサイトですw

あと、cssに、
#subPage #wrapper { width: 988px;　}
と、
#subPageと#wrapperが2段構えで定義されているのですが、
この定義のやり方の名称は何と言うのでしょうか？

>>119
てっきり省略してるのかと思ったのだけど
はじめてでちょっとhtmlの事がよく分かっていないのかな？

最後にもってくるとかじゃなくてタグは閉じるものなんです。

<body>
<div id="01">
<div id="01_1">〜〜〜</div>←01_1
<div id="01_2">〜〜〜</div>←01_2
</div>←id01のタグをここで閉じている
</body>←ボディタグ閉じる
閉じ忘れがないようにバリデートかけるのは大事。

<img /><br />のように単独タグはこうやって閉じる。
でもこれはxhtml1.0から。

>>121
子孫セレクタ

>>121
名称とかないよ
#subPage #wrapper { width: 988px;　}
なら、id="subPage"の中にあるid="wrapper"の横幅を988pxにするって書いてある

#subPage, #wrapper { width: 988px;　}
と書かれているなら
id="subPage"とid="wrapper"の二つの横幅988pxって意味

>>123
それだｗ

>>125で121と入れたのはミスです
疲れてるみたいなので休みます⊂⌒~⊃｡Д｡)⊃ ﾄﾞﾃｯ

了解しました、皆さん有り難うございました。

やっぱいいっす

ドリームウィーバーにて編集中、殺気まで普通に編集できていたのに、INDEXを読み込ませると必ずフリーズするようになりました。
メモ帳で開くのと、プラウザで見る場合は問題なし。
メモ帳で編集するのがしんどいので、新しくｈｔｍｌファイルを作り、中身をメモ帳からコピペして読み込ませましたがやっぱりフリーズします。
DWが何か特定条件でフリーズするということはありますか？

殺気がしたから安全のためフリーズしてるんだろ

殺気でソースが崩れた
まぁ、ドリのバージョンいくつかしらんが
不安定になってるのはPCもゴミたまってきたりしてるからっしょ

ただの疑問で恐縮なのですが、>>114についてお願いします。

<body id="video">〜〜〜<body>とするなら、
body{
　〜〜〜〜〜
}
といったようにcssでbodyに直接設定すればいいと思うのは初心者考えでしょうか。

この場合、他の場所でid="video"を使うかもしれない、とも考えられますが、
bodyに指定するような設定をわざわざ他で使うとも思えず、
同ページ内で使用するならidではなくclassが良いのではとも。
別途に識別指定するのは他にどういったメリットがあるのでしょうか。

言われて見るとどっちでも良いかなって思えてくるから困る
idにすれば<a href="#video">ってページ内に書いた時にページのトップに戻るリンクとして使えるんじゃないかな

>>133
<a href="#">

一つのGIF画像（白とピンク色の2色で作った画像なので拡張子はgifにしています）が

IEだとまともに表示されるのにfirefoxだとぐちゃぐちゃになってしまいしっかり表示されません

これの改善方法を教えてください

>>134
その挙動は仕様で規定されてる？

>>132
子孫セレクタを利用してページ毎にスタイルを切り替えてるサイトもある

教えてください。
http://ameblo.jp/wazameba/entry-10954524532.html#cboxを見て
ブログのメッセージボードにガジェットを貼り付けたのですが、
table.gadget{margin:0 auto !important;} /* 中央寄せ */
table.gadget tr:first-child{display:none;} /* タイトル非表示 */
table.gadget tr:first-child+tr+tr>td>div{border:none !important;} /* 外枠非表示 */
table.gadget tr:first-child+tr+tr+tr{display:none;} /* フッタ部非表示 */
をスタイルシートに追加しても
ガジェットのGadgets powered by Google部分のフッターが非表示になりません。

メッセージボードの部分を非表示にするにはどうしたら良いのでしょうか？
また、どこに記述すれば良いのでしょうか？
ちなみに、
/*■メッセージボード - 基本設定 - メインカラム*/
#message{
margin-bottom:14px;
}
#message .contents{
padding:14px 24px;
}

とあります。ここに追加してみても変わりません。
#とかは要りませんか？

×メッセージボードの部分を非表示
○メッセージボードのフッダーの部分を非表示

です。

背景を重ねたくて
background-image: url(画像), url(画像)
とタグを打ったのですが、どういうわけかIEだけ二枚目が表示されません。
Firefox、Chromeだと正常に画像が重なってくれるのですが。
IE、Firefox、Chromeで正常に見れる同一のタグの打ち方はあるのでしょうか。

>>136
"#" == "" == 現在のURI　になって、ページ再読み込みするのが正しい挙動ってことなんかな

>>140
古いIE使ってんじゃない
IE8だと一枚目すら表示されなかったけど

135です。

ヒロシです。

Content-Typeをちゃんと設定しなさい

<Meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
メタタグ入れてもだめでした

お前誰だよ

せんせいトイレぇ
って感じだなｗ

>>147
申し遅れました
135です。

>>147
こんにちは
148です。

先生！
段落で1行入れたいのでbrbrとしてるんですが、html文法チェックで指摘されちゃいます
先生がたは段落毎にpで閉じてますか？

僕は内容が繋がってるので改行がいいと思うんです
でも、先生がたがbrbrって素人が！しねやって言うんでしたら修正します

>>151
CSSでbrのmarginかpaddingいじればいいと思います。

>>151
内容が繋がってるというけれど、pタグのpはparagraphという意味なので段落ごとに構造化するのが仕様上は正しい。
ただそこまで厳密に仕様に即して記述する必要のあるケースは限りなく少ないので、
一般的には連続brを使っても特に問題はないと思う。

>>151
繋がってるなら段落にせずにbr1個で宜しい

>>154
br1個にして、cssで制御だね
pタグもmarginで改行があるように見えてるだけだしね

<br class="test" />

.test {
margin-bottom: 10px;
}
とかで調整すればいいと思うぉ

CSSで無理やり調整するくらいならbr2個にした方が良い

brって見栄え悪くなるから使いたくない。（文字反転の場合）

皆さんありがとうございます。
アドバイス通り、cssで制御します！

155さん、適切なアドバイスありがとうございます！

>>152>>155
これはひどいものを見た。
インライン要素に上下のmarginを指定するバカがどこにいるんだよ。
素人がデタラメで回答するのやめろよ。せめて試してから書けよ。

>>158
155の回答は間違いですよ。その通りに書いても動作しません。

おいやめろ

>>159
　　　　　 　 ,;' '" '' ゛''" ゛' ';;,,
　　　　　　（rヽ,;''"""''゛゛゛'';, ﾉｒ）　　　　デタラメを言う奴は否定しかしない
　　　　　　,;'゛ i ＿　　、＿ iヽ゛';,　　　　代替案を言わないのが荒らしの特徴
　　　　　 ,;'" ''| ヽ・〉　〈・ノ |ﾞ゛ `';,　　　お前それサバンナでも同じ事言えんの？
　　　　　 ,;''　"|　　 ▼　　 |ﾞ゛　`';,
　　　　　 ,;''　　ヽ＿人＿ /　　,;'_
　　　　 ／ｼ、　 ヽ⌒⌒ /　　 ﾘ　＼
　　　　|　　　"ｒ,,　｀"'''ﾞ´　　,,ﾐ゛　　 |
　　　　|　　 　　 ﾘ、　　　　,ﾘ　　　　|
　　　　|　　　i 　　゛ｒ、ﾉ,,ｒ"　i　　　_|
　　　　|　　　｀ー――----┴ ⌒´ ）
　　　　（ヽ　 ＿＿＿＿＿＿ ,, ＿´）
　　　 　（_⌒ ＿＿＿＿＿＿ ,, ィ

お前はもう帰れよ

<script src="//:" というのは何か特別な意味があるのでしょうか？

http://download.dojotoolkit.org/release-1.3.0/
このサイトの dojo.js.uncompressed.js に、こういうソースがあります。

if(dojo.isIE){
// for Internet Explorer. readyState will not be achieved on init
// call, but dojo doesn't need it however, we'll include it
// because we don't know if there are other functions added that
// might. Note that this has changed because the build process
// strips all comments -- including conditional ones.
if(!dojo.config.afterOnLoad){
document.write('<scr'+'ipt defer src="//:" '
+ 'onreadystatechange="if(this.readyState==\'complete\'){' + dojo._scopeName + '._loadInit();}">'
+ '</scr'+'ipt>'
);
}

IEを使っているとここでhttp://にアクセスしようとして警告メッセージが出てしまいます。

ＨＴＭＬもＣＳＳも初心者とプロでは同じデザインをつくるのにも
難しいタグ使ったり書き方が全然違ったりしますよね？

難しく書いたほうがなにかメリットがあるのでしょうか？

意味があるからそういう書き方をしているだけ
それを初心者は理解できていないだけ
プロだからって意図的に難しく書くわけないだろう

難しいと言うよりはプロの方は最新の書き方じゃないのかな
もしくはIE6とかにも対応してるとか

例えばどういう書き方のこと言ってるの?

初心者が難しいタグ使ったり書き方が全然違ったりするんだよね？

(X)HTML/CSS/Dreamweaverの質問に優しく答えるｽﾚ11
http://hibari.2ch.net/test/read.cgi/hp/1318762819/

これのよく回答してくださっている
>>887の方のタグです

スレだとインデント使えないから見にくいだけちゃうん

基本に忠実なだけで
どこにも難しい要素はないと思うが
HTMLの基礎本見りゃ理解できるだろう

http://www.sap.fm/
これはｈｔｍｌとｃｓｓだけでできますか？

どうみてもFlashがある

質問です。上でもちょっと挙げられていましたが、

<p class="sample">見出し</p>
<p class="sample">
〜〜〜〜〜〜
</p>

とした際、brタグを連続して用いて間合いをとらないため、
sampleにmarginを10 0 10 0と設定しているのですが、
これは間違っているのでしょうか。
それとも間違っているわけではないが、変な気がするというものなのでしょうか。

>>173
デザインがそうならそれでいい
使い方、書き方が間違っていることはない

ちなみに
インライン要素には上下の余白は存在していない
狙ったレイアウトにならない
なので、line-haightで調整をすればいい

>>174-175
ありがとうございます。
ブロック要素はmargin、インライン要素はline-height、
デザインでちまちまやりたいときはいっそブロックで囲いこむ、
といったように覚えておきます。

http://www1.axfc.net/uploader/Sc/so/298670.zip

このように img タグの .photo を float:right して文字を回り込ませています。
その際に blockquote も文字はうまく回り込むのですが、背景はいっぱいに広がったままで
よけてくれるわけではありません。

今は img.photo で無理矢理同じ色の背景色にして padding をつけてごまかしています。

p ではなく blockquote だけ全体を
img の横幅を除いた幅に自動でなってくれるようにすることはできないでしょうか?
あるいはもっとスマートなデザインをご存じの方はお教えいただければ幸いです。

>>177
2カラムでやればいいんだよー

┌──┐
│ 絵　│〜〜〜〜
└──┘
ではなく
┌──┐┌──┐
│ 絵　││〜〜│
└──┘└──┘
というイメージですか。>>177さんではありませんが。

>>177
まず試しにpに背景色を指定してみるとわかると思うんですが、
blockquoteの幅に問題があるわけではなく、imgが段落ちしてることがズレの原因ですね。

以下のコードで背景色を指定＋画像の回りこみを解除させてみると、
現状のHTMLがどうなってるのかわかると思います。

p {
margin: 1em;
background: #ccc;
overflow: hidden;
}

で、画像をblockquoteの中に入れて
今回のズレと同じ問題が起きないようにblockquoteにoverflow:hidden;を指定しておけば
うまく表示されると思います。

みなさまありがとうございました。

それ専用にカラムを作るのではなく自動でやりたかったので >>178 さんの方法はパスしました。

>>179 左右逆ですがそうです。

>>180
overflow;hidden; を使う方法で思い通りのレイアウトができました。
ありがとうございました。

>>181
divじゃないだけで、これも２カラムのようなものだよね
まぁ、できてなにより

理由がありマージンをとるためにmargin指定した空のpタグを置きたいのですが、
やはり空のpタグはいけないでしょうか。

divでも出来るようですが、これはあくまでグループごとの囲い込みと聞かされたので。

 （空白)を入れればいいんじゃないかい？

↑＆nbsp;（空白）ね
＆を半角にしたらスクリプトと間違われて消えてた

>>183
あんたがプロじゃなきゃ別にいいと思うよ
空divの方がいい気もするけど

まぁ他に意図した事があるからp使いたいか
頼んできた人が半端な知識しかないんじゃない？

pは文章の段落であって、レイアウトするためのものじゃないんだから
divに空白特殊の方がいいと思うけどね

実際のソース見てみないと言ってる事が正しいか分からないし、
プロじゃないなら自分達が使ってるブラウザで見られればいいんじゃない？

話題の区切りならhrなり入れてCSSで調整すれば

>>183
サイトアップしてみ？

>>183-185 >>187-189
返信ありがとうございました。
おかげさまでhrの存在を思い出し、いろいろ試した所なんとかなりました。

枠などで装飾関連でPタグに＆nbsp;入れてclassで背景画像入れて配置してるんだがこれもダメか

中途半端にvalid目指した結果が<div>&nbsp;</div>

漢ならimgで堂々と装飾すればいい

それは中国という意味ですか

>>193
いちいちalt入れるの面倒でな

alt=''ぐらい入れとけよ

装飾にimg使う奴はalt必須なんて知らない

誰かソースの整理の仕方教えてくれ
どうやって整理すればいいのか謎

>>196
装飾画像なんて背景にしちゃえばいいだろう

>>198
いいものを参考にすればいい

>>199
背景なら上にコンテンツがないとおかしい

｛left: 0;｝
｛ｒｉｇｈｔ: 0;｝

このタグは何をどうすることができるのでしょうか？
ググっても無かったので。

>>202
そりゃ「タグ」でぐぐってもないだろうね

>>203
教えてくれませんか

>>204 将棋の解説で「四六角」とか言うじゃん。
その座標設定と同じ

positionで何をどう　{left: 20px;} {top:30px;}で動かすか
みたいな感じ

「CSS left」でググったら一発で解説ページ出ますよ。

>>205-206
ありがとうございました。

html, body { height: 100%; }
は必須？

不要

cssは大体どれくらいのファイルサイズが妥当でしょうか？
これが正しいという話ではないので率直な意見というか
感想のようなものをお聞かせください

書く人によるから普通も妥当もない。
当然規模にもよるし、インポートで分ければ話も変わってくる
何が何でも最小限に書く人も居れば、
誰が見ても分かりやすいように細かくフルで書く人もいるから倍は違ってくる。

CSSを使ってh1の見出しを別のテキストに置換したいのですが、どうすればいいのでしょうか。

>>212
見出しのスタイル（外見）を変えるのはCSSでできるが、
見出しの文字列を変えるのはCSSの仕事じゃない。

どういうことをしようとしているの？
記事がいくつかあって見出しや内容を動的に変えるならWEB上のプログラムが必要。
作成済みのページを元に内容を書き換えたいのなら、テキストエディタの検索・置換機能でも活用しろ。

>>213
説明不足で申し訳ありません。

通常使っているスタイルシートで
<h1>ああああ</h1>
となっているところを、rel="alternate stylesheet"で別のスタイルシートに交換した際に
<h1>いいいい</h1>
に変更できるようにしたいのです。

>>214
<h1>見出し</h1>
で、「ああああ」、「いいいい」という画像で置換表示でいかんの？

見出しのテキストが変わるのもどうかと思わないでもないけどそこは置いておく

contentプロパティでよくない？

古い ie 見捨てていいなら

IE8みたいな古いブラウザでも対応してるよ

displayプロパティって必要性あるんですか？
どんな時に使うかよくわかりません

>>219
http://w3g.jp/css/display_position/display

こんばわ！
突然ですいません。

はむ速を倒したいんですが、今から2chまとめの、サイトを立ち上げたいです！

どなたか力を貸して下さい！

一人で勝手にやれ

>>218
ie8 が古いとかめぐまれた環境ですね

>>221
ほほう。

倒したいと言うのは月間PV数なのか、それともまとめサイト運営者としての君の収入のことか？
ちなみにハム速運営者で月収250万だからそれ以上の収益を生み出すサイトを立ち上げなきゃならん
君が本気なら力を貸してやってもいいが
その話題するならここはスレチだから他に誘導してくれ。

>>220
</ｂｒ>使えば必要無いですか？

>>225
日本語でおｋ

footerの下に余白が出来てしまいます。
footerにはmin-heightを使ったままでこの余白を埋めるにはどうすればいいのでしょうか？

http://jsfiddle.net/CAbaw/1/

DW CS5.5でHTMLファイルのまま、中にphpのincludeを入力してるんだけど、
デザインビューで見ることが出来ない。phpファイルにすれば見られるんだけどな。
どうしたらデザインビューで見ることが出来ますか？F12でプレビューする以外ないのかな。
ローカルへはXAMPPはインストールして動いてる

>>227
jsfiddleはbody要素とかあらかじめ入ってるから、考慮して貼った方が良いと思うよ

>>227
margin, paddingできっちり埋めるか、縦にセンタリングさせる。

いや〜僕が作った板がこんなに続いてるなんて

感慨深いです

みんなスキルアップがんばってください

>>229
はい
わかりました。

>>230
これでも出来ません
↓
#footer{
min-height: 80px;
background-color: #699600;
margin-bottom: 0;
padding-bottom: 0;
}

#footer .inner{
margin: 0 auto;
width: 800px;
}

>>232
こんなんでどうでしょうか

#footer .inner{
width: 800px;
height: 60px;
margin: 0 auto;
padding: 10px 0;
}

>>233
innerをあつかえばよかったんですね
ありがとうございました！

ひとつの要素にclassを２つ付けたりするのってやらない方が良いのでしょうか？
何か不具合とかあったりします？

別にかまわないし不具合もないが
なんでやらないほうがいいと思ったのか聞きたい

Javascriptで何か不具合が起こったりするのかなと
たとえばその要素のクラスを取得する時2つあったらどーなるのかなとか

classListってもんがあって、一つ以上あるのが前提

なるほどありがとうございます

>>235
ie6 で問題があるくらいかな。複数 class 名

IE6の存在のほうがよっぽど問題だな

あれは問題っていうより存在そのものがバグ

未だに使ってる所があるのが大問題(望むと望まずを限らず)

MSのレンダリングエンジンを更新しない姿勢がアフォ

font-weightって今のブラウザで違いが出るものって有るの？
数値100にしても900にしても結果同じなんだが。

どのブラウザでどんなコードで再現したかを書かないで伝わると思ってるの？

clearfixとclear：bothの違いがわからず、とりあえず検索してある程度理解したつもりなんですが、
極端な違いは以下のとおりで間違い無いですか？

■clearFix　と　clear:both　の違い

.clearfix {
zoom: 100%; /* IEの独自プロパティ */
}

.clearfix:after {
content: ".";　　 　　/* 新しい要素を作る */
display: block;　　　/* ブロックレベル要素に */
clear: both;　　　　　/* 回りこみを解除させる */
height: 0;
visibility: hidden;
}

<div class="clearfix:after">footer</div>

以上の記述はIE用のfloat解除である。
他のブラウザでは、回りこみを解除したい要素へ　clear:both　を指定すれば良い

<div class="clear:both">footer</div>

書いてることめちゃくちゃだったらすみませんorｚ

すみません。下の記述はclassではなくstyleでした。

iframeではhttp://localhost:xxxxのようなURLでも利用可能ですか？

どんだけ教えてくんだよ
なぜ試さない

すみません
出来ました

http://ashiuraaaaaa.blog10.fc2.com/
↑エロサイトで恐縮ですが、
ココみたいなページナビを付けたいのですが、
どんな検索語句でググればいいでしょうか？

>>247
難しく考えましたな。。。

>>252
ページナビってどこのことを言っているの？

>>254
古い投稿を見るためにクリックするところ。
普通だと「古い投稿」「新しい投稿」とかあるでしょ。

>>255
あぁこれか。
インラインフレーム　スクロール　でググればおｋ

>>256
お、ありがとうございます。

左側にメニュー表示させてるんですが、そのメニューを画面の下まで伸ばしたいんです。
<div width=80%>
ここメインページ
</div>
<div width=20%>
これメニュー
</div>

↑こうやって書いてるんですが、下側のdivをposition:fixedにすると、
divの中にどんなコンテンツが入っていようが画面下まで伸びてくれます。
ですが、absoluteやrelativeにすると、divの中の要素が縦に300ピクセルしかなかった場合、
300ピクセルまでしか広がってくれません。
absoluteやrelativeを適用した状態で画面下まで広げるにはどうすればいいですか？
heightは100%に指定してます。

すいません、ここでよろしいでしょうか

http://hinaminozomi.blog134.fc2.com/
このメニューバーおよびステータスバーと、コンテンツの間に出来る溝？を取り払うには、何を記述すればよろしいでしょうか
溝というか、段差というか・・・
（上のサイトは１例として挙げたもので質問者とは無関係です）

どの部分のことを言っているのかさっぱり分からない

俺の質問誰も答えてねーのかよ
無理なら無理とかいってくれよ

お前誰だよ

>>260
ttp://www.42ch.net/UploaderSmall/source/1324178841.jpg

矢印の部分です、右のようにすっきり（フラットに）させたいのです

それってIEだけが出るみたいなだな。
ブラウザ固有の問題じゃね

初心者の素朴な疑問なのですが、
ＡＰエレメントってどうなんでしょうか？

何だか凄く便利で、これさえあれば自由にレイアウトが出来る様な気さえ
してきてしまいますが……便利すぎて怖いです。
ググっても特に問題点について語られていないので、バンバン使っても
問題は無いものなのでしょうか？

実際、ＡＰエレメントだけでレイアウトをしているところもある様なのですが
この手法をマスターしてどこかの制作会社に面接を受けに行ったら
ぶっ飛ばされる様な気がしてなりません。

http://www.dokkyomed.ac.jp/dep-m/cvs/
↑こんな感じです。
「こういう問題点がある」「特に問題は無い」などの、アドバイスを頂けると
嬉しいです。

どんだけ大昔のサイト作りだよそれ

ｄｗって古いやり方なんですか？

大昔のサイト作りなら、廃れていった理由が知りたいのですよ。
こういったコーディングを覚えて良しとするつもりは無くて
「こういう理由で良くない！」というのを知っておきたいのです。

「悪くはないが、もっと良いものがあったので乗り換えた」
という理由で廃れたものも世の中には多くある

>>268
HTMLっていうもんがあってな

それはそれは大変便利なものじゃて・・・さらにCSSというもんもあってな

>>265
PDFとWebサイトを混同した例

HTMLとCSSがわからなくてもDWがあればホームページビルダーみたいに誰でもHPつくれるもんなのですか？

うん

>>274
そうなんだ。
ショック

テーブルのtdとthの幅を
.test td, th {　width:50px; }
という具合にして指定しているのですが、それを実際にブラウザで読み込ませると
なぜかその指定した数値よりも数px大きくなってしまいます
なぜでしょうか？
ブラウザはIE、Chrome、Ff、safariで試しました

table-layoutは？

>>277
設定していろいろいじってみましたが、変わりませんでした

>>276
border-boxの幅を見てるんじゃなくて？
どうやってwidthを確認してる？

>>279
幅は罫線の内側を見ています
確認は、ピクセル定規というソフトを使っているのと、
テーブルを入れるコンテナに治まるように、
テーブルのwidthを設定してもちゃんと入らないことからもわかります
もちろん、罫線の幅やmargin、paddingも計算しています

>>280
罫線の内側から padding-left, padding-right を差し引いた値だよね？
Firebugのメトリックでwidthを確かめた方がいいと思う
それでもwidthが50pxを超えるならセルに長い単語があって折り返し禁止になっている可能性がある

>>280
御託はいいから再現出来るソース
http://jsfiddle.net/

>>281>>282
ありがとうございます
firebugを使って確認してみたところ、指定していなかったpaddingが入っていたので
新たにpadding:0px;と指定したら無くなり、幅もちょうどになりました
もっと早く気付いてやっておくべきでした、すみません。。。

それにしても、このfirebugってのはなかなか便利ですね
サイト制作がはかどりそうです

CSS3とCS3って何が違うんでしょうか？

>>284
大喜利？

284>>
おぉーギリギリ?わらえた

>>285
http://www.amazon.co.jp/Dreamweaver-%E3%83%97%E3%83%AD%E3%83%95%E3%82%A7%E3%83%83%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB%E3%83%BB%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB-CS3%E5%AF%BE%E5%BF%9C-%E9%B7%B9%E9%87%8E-%E9%9B%85%E5%BC%98/dp/4839924341

グローバルナビが変な位置に表示されます
どこにクリアフィックスを入れたらいいのでしょうか？

http://jsfiddle.net/FFWNP/1/

理想
http://userimg.teacup.com/userimg/8624.teacup.com/urlshutoku/img/bbs/0005879.jpg

現在
http://userimg.teacup.com/userimg/8624.teacup.com/urlshutoku/img/bbs/0005879_2.jpg

>>288
#logoのpositionをrelativeにしたらいけない？

>>289
素晴らしいです！できました
ありがとうございました

趣味でHP運営をしてるものです。

メモ帳でcssとhtmlいじくってるんですが、お金まで出してdreamweaver買ったほうが幸せでしょうか？
phpなどは使いません。

もう一度聞きますdreamweaver買ったらHTML　CSSの知識なくても本当にHPつくれるんですか？

>>291
幸せかなんてのは主観的な価値観なので、人に聞いても答えは出ない。

本当に「メモ帳」でいじってんなら、別のフリーのテキストエディタに変えたら？
何の支援機能もない、文字コードへの対応も不十分なものを使い続けるのは
効率悪いよ。

>>293
なるほど。

とりあえずphpとか使わないんでＤＷはあきらめます。

>>294
いや、諦めるんじゃなくて、慣れたら楽ってだけ。慣れるまで大変かな。
エディタなら、NoEditorとかを俺は使ってるけど、それだけで十分

ま、基本はvim使いだがw

DreamWeaverでMysqlをいじりたいんですけど、
操作方法が詳しくのってる教本ってありますか？
中々DB関連までのってる本が無くて･･･

xamppで、Apache＋Mysql＋wordpressで、
バーチャルホストを使いa、b、c、３つのドメインを１つのパソコンで管理しています。
フォルダ的には、
C:/xampp/htdocs/a/、C:/xampp/htdocs/b、/C:/xampp/htdocs/c/の３つです。
で、
通常ですと、http://localhost/にアクセスすると、Apacheの管理画面にアクセス出来ます。
でも、それだと他人にハックされそうな気がして、
http://localhost/にアクセスすると、aのドメインに飛ぶように設定しました。
で、その設定を元に戻したいのですが、どうすればいいでしょうか？
私はバカなのでどんな設定をしたのか忘れてしまったのです。
よろしくお願いします。

http://jsfiddle.net/

の姉妹サイトっぽいのがきたぞ。
CSSやHTMLがリアルタイムで反映されるから超見やすい。

http://dabblet.com/

よっしゃ！

dreamweaverのcs5を使っています。最近どうも画像やcssを更新してもすぐデザインビューに反映されません。
どこかにたまってるキャッシュのようなものをクリアする方法を教えてください。

dreamweaver CS5.5　体験版をインストールしたのですが、テンプレートの機能がグレー表示となって使用出来ないです。
体験版の仕様でしょうか？

自前のサイトで日記書いてる人ってまさかHTML上に日記書いてタグ打ったりしてるわけじゃないですよね？
ビルダーでブログサイトと同じような感じで書いてるんだと思うんですがどうなんですか？

そんな昔のテキストサイトみたいなやり方する人はもうほとんどいないね
WordpressとかmtとかCMSを使ってると思うよ

WordPressとかMTとかCMS実際インスコして使ってみたがなんか慣れないせいで扱いにくいってのがあって自分でphp組んでそれで日記やってるな

HTMLファイルに書いてソースコピペしてDBに

自鯖に、xamppで、Apache＋Mysql＋wordpressを入れています。
バーチャルホストを使いa、b、c、３つのドメインを１つのパソコンで管理しています。
フォルダ的には、
C:/xampp/htdocs/a/、C:/xampp/htdocs/b、/C:/xampp/htdocs/c/の３つです。
で、
通常ですと、http://localhost/にアクセスすると、Apacheの管理画面にアクセス出来ます。
でも、それだと他人にハックされそうな気がして、
http://localhost/にアクセスすると、aのドメインに飛ぶように設定しました。
で、その設定を元に戻したいのですが、どうすればいいでしょうか？
私はバカなのでどんな設定をしたのか忘れてしまったのです。
よろしくお願いします。
他スレでも質問したのですがレスが付かないのでこちらにも書いてみました。

↑誤爆失礼〜

現在フレームとFORMを同時に使った場合の不明部分があります。
ページを仮に「Top」「frame」「page1」「page2」とし
「frame」はフレームページで「page1」と「page2」を表示します。

そこで「Top」からFORMを用いて「frame」へ移動するときにFORMで送信するデータは
「page1」へと送信したいのですがする方法がわかりません。

どうにかして「Top」から「page1」へデータを送りたいです。
よろしくお願いします。

DwCS5でhtmlファイルを開くと、いつからか、
表示スタイルのコード、分割、デザインの内のデザインで開かれるようになりました
これをデフォでコードで開かせるようにするにはどうすればいいでしょうか？

>>308
frameでリクエストを処理すればいいんじゃないの

>>310
「frame」ページでformを使うということでしょうか？
すいません。それも分かりません。よろしくお願いします。

position:absoluteを使うとたとえもともとがdisplay:inlineだろうが強制的にdisplay:blockだとみなされるようだけど
spanとかにposition:absoluteを使うときにも
念のためdisplay:blockかいといたほうがいいのかな

PixivとかいろんなHTML/CSS解説サイトのソースをチラ見すると、ほとんどがサイトタイトル部分に<h1>を使ってることが多いんですが
これはSEO対策になにか関係があるんでしょうか？それともただ<div>や<p>の代わりとして使ってるんですか？

HTML構造の意味的にも、SEO対策としてもそれが正しい

でもグーグルで検索してみると
結構上位にあるのに、HTMLがめちゃくちゃだったりするページ多いよね
全部テーブル使ってレイアウトしちゃってるとか。

SEOあんま関係ないんじゃね。
少しだけあるだろうけど。その少しにメリットを感じるかどうか

最近のSEOはあからさまでなければ多少グチャグチャでもおｋなんじゃない？

むしろみんなが綺麗に書きすぎて同質化しつつあるし

SEOとか気にしないで正しくタグ使えばいい

2、3columnのデザインのサイト作るときっておまえらどうしてる？
-moz-box？float：left；（clearfix）？それともinline-block系？

なんでmozilla限定？

一応使ってるのはchromeだけどおもいつくのがそれとtable-cellくらいしかなかった。
他にももっとあるなら教えて欲しいです。

chromなら-webkit-boxだろ

-moz-column-count
-webkit-column-count
column-count

column-countすげえ･･･こんなに簡略化できたのか･･･

table-cell使ってる

インラインフレームがたまに読み込まれないときがあるんですが、何故ですか？
キャッシュを毎回クリアするしか方法はないのでしょうか？

すいません、質問させてください。
現在CS5を使用しています。
RSA鍵認証を行ってSFTP接続しようとしているのですが、方法が解りません。
鍵生成と、サーバー側の設定が終わって後はどのようにすればよいのでしょうか。
公式のヘルプを見てもクライアント側の設定については特に記述が無いのですが…。
http://kb2.adobe.com/jp/cps/234/234597.html#main__A___________SSH________

大変困り果てております。
どなたかご存じの方がいらっしゃれば、ご教授願います。

以下のような場合、全てにクラス名(ここではSample)を書かなくちゃいけないのでしょうか？
纏められないのでしょうか？

<ol class="Sample">
<li class="Sample">A</li>
<li class="Sample">B</li>
<li class="Sample">C</li>
</ol>

どういうCSSを書くかによるが
まあ普通はそんなアホな書き方はしない

どういう状況なのかしらね

CSSなら
ol.Sample, .Sample li{

}


<ol class="Sample">
<li>A</li>
<liB</li>
<li>C</li>
</ol>

俺ならこうかく

MAMP使ってるのでdreamweber上の　"サイトの管理"のローカルのパスが
/Applications/MAMP/htdocs/
と、アプリケーションフォルダ上なんですが、
これだとサーバー側にDreamweaverのFTPでアップしようとしたとき
ちゃんと動作しません。
(applicationフォルダにおいてなかったら上げれる)

原因は何だと考えられるでしょうか？

>>329
要素名あったり無かったりちぐはぐやな

>>329
何かすげえ初心者に分かりにくい例の書き方するな。

-moz-transformとか-webkit-transformってinherit no
って書いてるけど

<p>あいうえお<img src="url"></p>
これに
p{
-ベンダープレフィックス-transform: rotate(180deg);
}

みたいなことやると、pの中のimgまで回転しちゃうんだけど
これってinheritしてるような気がするんだけど
inheritがnoってpは回転するけどimgが回転しないって意味じゃないの？
どういう意味なの

imgの値にinherit指定して、継承させたらどうなるかやってみるといい
あとプレフィックスなしのプロパティも併記してね

【HTML】
<div class="wrapper clearfix:after" style="width:980px;">
　　　　　<div id="container">
　　　　　　　　　　<div id="left_inner">left</div>
　　　　　　　　　　<div id="right_inner">right</div>
　　　　　</div>
</div>

<div class="footer">footer</div>

【CSS】
#left-container,
#right-container {
　　　　　float:left;
}
#left-container {
　　　　　width:25%;

}
#right-container {
　　　　　width:75%;
}

.footer {
　　　　　width:100%;
}

このソースでfooterを下に送りたいんですが、wrapperにclearfixを付加するとwrapper内でleftとrightを飲んでしまうのは
どうしてなんでしょうか･･･。良かったら教えて下さい。
あとわかりにくかったらすみません。

早速ヘマしてすみません。
left-container、right-containerはleft_innner、right_innnerに置き換えてください

すみません。自決しました。
#left-container,
#right-container {
　　　　　float:left;
}
のところをleftのみにしたらいけました。

自決…。

>>335
＞clearfix:after

ここおかしくないか？
何で擬似要素をクラス名に書いてるの？

自決したそうだから許してやれ

下記のサイトからDLできる全角・半角変換拡張機能 ですが、ファイルがありません。
http://www.adobe.com/jp/devnet/dreamweaver/articles/dw10seminar_conversion_ext.html

character.mxpなんですが、ググっても該当ファイルがヒットしません。
どなたかお持ちの方がおられましたら頂けないでしょうか？

宜しくお願いします。

body領域を横900pxにした時にその900pxの背景色とその900px以外の右と左の背景色を分けたい場合はどうしたらいいですか？

┏━━┳━━━━━┳━━┓
┃　　┃　 900px　┃　　┃
┃灰色┃　　黒　　┃灰色┃
┃　　┃　　　　　┃　　┃
┃　　┃　　　　　┃　　┃

右と左は同色です

テーブルのcolgroupにwidthを指定したら、
text-align:center;を指定していたtd中の文字位置がずれてしまいました
IE7以下のブラウザだけでそうなります
なぜこうなるのでしょうか？
colgroupのwidth指定とtdのcenter指定を同居させるにはどうしたらいいですか？

>>342
http://cssdesk.com/zVbys

>>344
ありがとうございます

id名について気になったので質問します。
id名は文章内で複数の同じ値が出現してはならないと書いてあったのですが、
要素が別なら同じid名を使っても良いのでしょうか？

また、別の要素でも同じid名を使ってはいけない場合、CSSの
要素名#id名: { 〜 } という書き方に意味はあるのでしょうか？
idが一意に決まっているので要素名は書く必要がないと思うのですが。

>>346
Q.要素が別なら同じid名を使っても良いのでしょうか？

A.ダメ


Q.idが一意に決まっているので要素名は書く必要がないと思うのですが。

A.書く必要はない。
メリットは、後から修正する時どの要素に指定しているかひと目でわかる。

>>347
ありがとうございます。

世の中にはidを二つも三つも使ってる阿呆が多い

fromタグを右寄せさせる方法を教えて下さい

text-alignでできませんでした

>>350
>>282

>>350
formじゃなくて？
ボックス自体を右寄せしたいならmargin、paddingでやればいい

>>352
formでした

ありがとうございます

Androidマーケットのように8pxの画像を隙間なしに敷き詰める方法を教えて下さい
背景画像 隙間なしでググったりbackgroundのリピートもやりましたが隙間が空いてしまいます

画像自体に隙間がついてるんじゃないの

>>354
ヒント：background-color: #EDEDED;

>>355
それを考えてAndroidマーケットの8pxの画像を利用してます

分からんからソース貼って
あと画像のURLも

>>358
ソースは多すぎて貼れなかったからURL
https://market.android.com/
画像
https://market.android.com/static/client/images/1307251316-background-stripes.gif

単純に描き方おかしいだけじゃない？SSみせて。

>>360

body {
background: url("back-image.gif");
background-repeat:repeat;
}

です

う、うん。

>>362
これ以外になにか要るの？

cssの本にこうかいてあったから

隙間が空いてしまいます

の様子を見せて欲しかった。
あとソース全部が理想。
テキストファイルくらいうｐれるロダなら腐るほどあるだろう

何が原因かわからないですがサイズが変わっておりそれが原因でした

再ダウンロードしたら直りました

お騒がせしてすいません

俺の書いた>>355がビンゴだったわけで

htmlでホームページを作っています
自分のホームページ内でのリンクがつながりません
自己紹介というリンクを作って、クリックしても自己紹介のページにいきません
どうしたらいいですか？

>>367
ソース貼れ

　フジテレビの報道に鑑みて、記憶するところ、滝川クリステル、安藤優子、木村太郎らは、風説の流布に関与していたものと思われます。
また、株主でなくとも、テレビ放送を見ていた者は、経済活動に大きな影響が、あったように思われます（例；アカウントの削除レベルですらオイルショック的な要素として考えうる点）対比的には、日興コーディアルの粉飾問題は、ほとんど報じられていませんでした。
　２７時間テレビで、明石家さんまが明らかに「キッコーマンの醤油」の瓶（意匠はあるのでしょうか？）をもって「しょうゆうこと」と宣伝していましたが、
その後CMの契約までこぎつけています。また、お礼があったと番組で放送してました。なお、フジテレビも広告主であるキッコーマンとの契約を成立している
これは、著しく公共性を損なっているでしょう。
また、トークの途中でも、醤油の瓶を画面に映し続
けている行為は、サブリミナル効果の観点からも番組放送基準を逸脱しているように思われます。
あるある大事典の頃、わたくし自身、全国規模でなく小規模なマーケットですら、ヨーグルトの売り切れに遭遇しています。
この時の、フジテレビ及びキッコーマンの株価は、どのように変動していたでしょうか？（返信無用）
明石家さんまこと杉本高文が、所属している吉本興業におけるフジテレビの持株比率は、およそ１２％であり、株式を所有する他社の多くは、放送業界である点
を熟慮し、CMを視聴すると、広告業界も含めて、歪と言わざる負えないのではないでしょうか。
ちなみに、茂木友三郎は、キッコーマン株式会社の名誉取締役でありフジテレビの監査役です。

たとえば、歴史というリンクを作ります
トップページはこうです
<a href="index.html">トップ</a>
<a href="about.html">紹介</a>
<a href="intro.html">歴史</a><br>
<a href="bland.html">主なブランド</a><br>
<a href="model.html">出演しているモデル</a><br>
<a href="link.html">リンク集</a><br>
<hr width="500"><br><br>

ちなみに、歴史はintro.htmlと保存されています

HTMLとXHTMLの違いを簡潔にお願いします。
ググッても気難しい解説ばっかでよくわからんちん

俺もそれ知りたいｗ
前に2ｃｈで聞いたことあるけど分からんやったわ

CDATAもよくわからんしなぁ。セキュリティや表示面でXHTMLは強いよ！ってんなら使う。

HTML5にXHTML5を互換させるなら下記の雛形でいいみたい。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>タイトル</title>
</head>
<body>
本文
</body>
</html>

>>373
扱いやすいからアクセシビリティが多少は上がる
あと文法とかチェックするときに、XMLパーサーで処理できるから
HTMLパーサーがHTML5に対応してない環境でも文章校正しやすい

>>374
HTML5はXML宣言は入れられない
XHTML5はXML宣言を省略できる場合もあるけれど

>>375
そうなのか。
ここに書いてあったから正しいものかと思ってた
http://akaato.blogspot.com/2011/06/html5-xml.html

ありがとう

> 互換性の高い XHTML5 の雛型
XHTML5って書いてあるが

ちなみにxmlns、xml:langは意味ないけどHTML5にも入れられる
langだけで良いと思うけども
両方消してHTTPヘッダで指定した方がより良いとも思うけども

一度決めたデザインでサイト作り始めると、2日目くらいで「やっぱこのデザイン駄目だ･･･変えよう」ってなっていつもデザインが決まらない。
紙にデザイン案を描いてみても効果なし。飽きっぽい性格ってどうやったら治るかな？orz

性格についての質問は板違い

できるホームページ HTML入門 Windows対応 改訂版(CDROM付)
http://www.amazon.co.jp/dp/484432456X/

以前ここでHTMLを始めるなら入門書でも買って勉強すればいいと言われ
この本を一通り読み終わったのですが、次はどうすればいいのでしょうか・・・
内容はHTMLの基本とCSSがちょっとでかなり中途半端な気がして次は何をどう勉強すればいいのかわかりません

どうすればいいかは自分で考えなさい。
何もかも他人から教えられると何も作れないよ

ちなみに自分は初期の頃は書籍なんか読まずともサイトは作れてた。

ホームページ作成補助サイトで作り方をしる
　　　　　↓
Windows付属のメモ帳でも作れることを知り驚き作成に精が入る
　　　　　↓
TAG Indexなどをみてどういうタグがどういう動作をしてくれるかを知って頭に叩き込む
　　　　　↓
覚えられないうちはTAG Indexに載ってるタグをコピペして使ったりする
　　　　　↓
HPスペースを借りたくても見つからない → 携帯WEBサイトスペース（ハムスター島を借りて運営した）
　　　　　↓
その後HTMLを無理やり頭にぶち込みカウンターのデイリーが1000を超えるようになったこともあった。（2002年ごろ）


今はそのページは閉じたけど同じ事をしてはいる。

結局のところHTMLとCSSをいっぺんに覚えろってことじゃなく、文字に色々装飾する<font>やリンクを貼るためのタグ<a>、文字を太字にする<b>
段落を作る<p>、改行する<br>、平線を作る<hr>、テーブルを作る<table>、これだけ覚えるでも簡単なサイトはすぐに作れる。
あとは自分のやる気次第。

ちなみにメモ帳に　<font color="#F00">赤字</font>の<b>太字</b>だよ　って貼りつけて　無題.html　って名前で保存して
ブラウザでコレを開いただけでもちゃんとHTMLとして表示されるから。
わかってくると楽しいよ

のちの林家ぺーである

あそこまで中毒になれるならなりたいわｗ
HTMLとCSSは覚えるの簡単だけどJS覚えるのがめっちゃ大変で頭に入ってこないっていうね･･･。

うまく覚えられる方法模索中

>>381さん
HTMLとちょっとしたCSSを使った簡単なサイトは作れるようになったのですが、
本の内容が薄すぎて中途半端なので次はどうすればいいか迷ってるんです・・・
やっぱりホームページ作成支援サイトでタグがどういう動作をしてくれるかを１つ１つしっかり覚えるのが一番なんですかね・・・
中途半端なまま次のステップ（JavaScriptやPHP）などを勉強し始めるのもちょっと気が引けるんですよね・・・

最終的な目標はどのレベルなの？

>>384
俺は381さんと違う人だけど

自分も最初に買った本の内容が薄すぎて

サイトで勉強するのよりも本の方がやりやすかったからその後、別ににＣＳＳの入門書みたいのは2冊やったよ

特にＣＳＳは重点的に勉強してよかったと思うけど

よく使うタグさえ暗記してればｊａｖａscriptに移っても分からない事なんかはその都度ググるなりしてれば解決するんじゃないかな

なんか文章が変になったｗ
スマソ<m(__)m>

まあ人それぞれだわな。
サイトで学べるメリットとしてはタグをコピペしてすぐに反映できることだろう　（書籍にhtmlが付いてることもあるが）

あと、購入後に言うのもなんだけど薄い本は地雷率たかいよ。
ちなみに俺が持ってるのは

現場のプロから学ぶXHTML+CSS 益子 貴寛
http://www.amazon.co.jp/dp/4839929734/ref=cm_sw_r_tw_dp_2FE.ob0MJ4J74

本の厚みは20cmほど。結構なボリュームもあってわかりやすい解説。
この本選ぶときも確かここで聞いたような気がする。

今時のデザインとかの解説も載ってるから（HTML5やCSS3の記載方法ないけど）
興味がある人で本で学びたいって人はこっちを買ってみるといい。

>>385さん
最終的な目標はやっぱり大きすぎる目標とは思いますが企業のサイトみたいなサイトを作ってみたいですね

>>386さん
やっぱり他の本で足りない部分をカバーしたほうがいいみたいですね

>>388さん
どうもありがとうございます
>>380の本は厚さ4cmほどでした・・・
紹介してくださった本も買ってみようと思います

>>389
でもその本を買う前にある程度今ある知識をある程度使ってからにするといいよ。
ろくな知識でその本買って読んでもワカメ状態で3日坊主になるだけだろうし。

>>390さん
レス遅くなってすいません
言われた通り今ある知識を使って色々と試してから新しい本を買って勉強しようと思います

皆さんいろいろと付き合ってくれてありがとうございました

厚さ20cmとは、またすごい本持ってるんだな。

確かによくよく考えてみると20ｃｍの厚みって500ｍｍペットボトルの高さと同じくらいの厚みか

>>393
広辞苑よりあるんだな

趣味でHTMLでサイト作ってるってことを「今WEBコーディングしてる」っていったら「デザイナーでもないのにそれコーディングっていわねーだろｗ」
って言われたんですけど趣味でHTML組むことをなんて言うんでしょうか？

「サイト作ってる」

ありがとうございます。

デザイナーでもないのにそれコーディングっていわねーだろｗ

へー。コーディングて言葉そんなに安易に使っちゃいけなかったのかー。へー。

/public_html
　　　└┬　index.html
　　　　 ├　img（folder）
　　　　　　　　└　logo.png
　　　　 ├　css（folder）
　　　　　　　　└　style.css

こういう階層でimgフォルダにあるlogo.pngをbackgroundプロパティで以下のように呼びだそうとすると
読み込めないんですが、読み込ませる方法を教えて下さい。

<header>
　　　<div id="hd_left"><h1></h1></div>
　　　<nav></nav>
</header>

#hd_left > h1 {
　　　background: url('logo.png') no-repeat;
　　　display: block;
　　　width: 399px;
　　　height: 78px;
}

background: url('img/logo.png') no-repeat;

その場合はCSSファイルからの相対パスになるんじゃないか
なので ../img/logo.png

400です。
>>401　すみません。それではできませんでした。
>>402　なるほど、相対パス使えばよかったんですね･･･。無事出来ました。ありがとうございます！

wordpressのスタイルシートですが、
#branding hgroup {　margin: 0 7.6%;　}
があります。
brandingも hgroupも、要素ではありません。
要素でないものを勝手に作り、セレクタとしていいのでしょうか？
その辺のセレクタの説明をしているページがあれば教えて下さい。
何がなんだかわかりません。

>>404
brandingはIDです。
WordPressのデフォテーマはHTML5になりました。
もう少し調べてみましょう。

初歩的なことですが

h1 {
color: pink;
font-size: 10px;
text-align: left;
}

こんな風に改行する時pink;や10px;やleft;の右に半角スペースは必要なのでしょうか？

marginって小数点指定できたんだ･･･
orz

>>406
必要ないです。
左のもあってもなくてもいいです。

下手したらこれでもいいんです

h1{color:pink;font-size:10px;text-align:left;}

>>408
どうもありがとうございます

>>405
どうもありがとうございます。
本屋に行って来たらhgroupが要素になっててびっくりしました。
つか、brandingはユーザーが勝手に使った単語ですよね？

そうだよ
htmlでは
<mynewtag>あああああ</mynewtag>
こういう新しいタグ、もしくは要素を勝手に追加できるようにはなってないから
そういうことしたいときに
<div class="mynewtag>あああああ</div>
こうやるの。

では、スタイルシートに、
#branding hgroup {　margin: 0 7.6%;　}
と書き、brandingがタグとして使えるように定義した、と考えればいいのですか？

いいえ
「brandingというID（が指定された要素）の子要素であるhgroupに対してスタイルを適用する」
という意味で、あくまでも先に書かれたHTMLの内容に基づいて記述しているに過ぎません
CSSの基本から勉強されることを勧めます

>>413
レスありがとうございます。
たしかに、HTMLに、hgroupが出てくる直前に、<header id="branding" role="banner">の記述があります。

ＣＳ3ってgooglechoromeとsafariしか対応してないってマジ？

クロムでは正常なのにIEはバグる
狐はもっとバグる

chromeは開発ブラウザに一番最適だと思う

chromeはWeb標準に一番忠実だけど、開発はFirebugだな

Firebugもいいけどchromeについてる標準のやつも出来いいぞ？
右クリック→要素を検証

F12使え

chromeのユーザースクリプト開発にFirefoxを使ってる

ＩＥとｆｉｒｅｆｏｘしかインストールてないんだけどＣＳ3使うには
サファリかクロームインストールするしかない？

それはブラウザの拡張なんか？

CS3ってなんだ？Photochopか

>>424
DWじゃないの

すみませんＣＳＳ3でした

サファリかクロームインストールするしかないんでしょうか？

firefoxでもできるよ
-moz-linear-gradient
とか
-moz-animation
とか
使ってる。


chromeだったら
-moz-の部分を
-webkit-にすりゃいいだけ

>>427
ありがとうございます

http://first-web.jp/nyumon/lesson0402i.html
>・同じ名前のidは１ページ（１html）に１度しか使えない
とのことですが、
↓を表示させると段落１も段落２も赤で表示されます。 どうしてでしょうか？

<html>
<head>
<title>初めてWeb入門 テスト用ウェブサイト</title>
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p id="red-accent">段落１。</p>
<p id="red-accent">段落２。</p>
</body>
</html>

スタイルファイル
#red-accent { color: red;}

ちなみに、winXP IE8です。

Netscape 7.1 でも同じでした。 皆さんの環境ではどうでしょうか？

>>431
ブラウザが寛容なだけ。
別にブラウザがIDの重複を検出する義務は無いし。

>>432
どうもです。
じゃ、実際のところ、idとclassは一緒の扱いなんですかね？

実際のところっていうかルールとしてidは一度だけしか使ったらいけないってことだろ
ブラウザが厳しく判断するとidは1段目だけしか使えないことになる
だからルールにはしたがえってことだ

あ、同じidね

>>434-435
どうもでした。

つか、一般用のブラウザは何しろ表示しないといけないから、ルールを甘くしていると。
で、質問ですが、ルールチェック用のルールに厳しい実験用のブラウザ、はないのでしょうか？

なぜidはひとつしか使っちゃだめなのに、使おうとするのか。
まぁ二つ以上id使ってればいいよ。あとで困るのは自分だから
(困らないかもしれないけど)

ソースの間違いをチェックしてくれるサイトでも使えばいいと思うよ

>>439
どうもです。

なぜ仕様に忠実に書く必要があるのかっていうと互換性の問題で
HTMLはCSSとかJSとか複数のレイヤーで扱うから
それぞれが仕様を前提に動くようになってるので、間違いがあるとどこかでバグが起きる

例えばスクリプトでHTMLをパースするときに#red-accentでDOMを取ろうとすると
はじめのひとつしか取れないか、エラーで動かないかってことになる

ってことは、みなさん、idは使わない、って感じですか？

>>442
自分が理解できないからって、勝手に妄想するなよ。
idはバンバン使ってるぞ。

idは一個しか使わない
idは使わない

ぜんぜん意味が違うぞ。
在日の人ですか？日本語を覚えような

>>443-444
レスありがとうございます。
では、とりあえず、idから離れることにして、
↓で、
P.color2 { color : olive ; }
.color3 { color : orange ; }
P.が付く、付かないの違いがあります。
これの名称はそれぞれ何と言うのでしょうか？

<html>
<head>
<style type="text/css">
P.color1 { color : gray ; }
P.color2 { color : olive ; }
.color3 { color : orange ; }
</style>
</head>
<body>
<H3 class="color3">ここはカラー３で指定した見出しです。</H3>

<P class="color1">ここはカラー１を指定した段落です。</P>
<P class="color2">ここはカラー２を指定した段落です。</P>
<P class="color3">ここはカラー３を指定した段落です。</P>

<P><SPAN class="color3">よく使う色</SPAN>は指定すると楽でしょ？</P></body>
</html>

つか、.color3 { color : orange ; } は class属性 ですよね。
では、P.color2 { color : olive ; } は何？という疑問です。

pはタイプセレクタ
.color3はクラスセレクタ

p-type

>>447-448
了解しました、有り難うございます。

<html>
<head>
<style type="text/css">
.cool {background-color: blue; color: red; }
</style>
</head>
<body>
<span class="cool">内容</span>
</body>
</html>

こういう風に、<span>〜〜</span>を<p>〜〜</p>でくくらないの は文法的にありですか？

文書型によってありだったりなしだったり

>>451
では、どの文書型ならありで、どの文書型ならなしですか？

あと、字の背景にも色を付けるやり方は、
>>450のやり方が一番シンプル、って認識でいいでしょうか？

spanはインライン要素
あなたの質問は、body直下にインライン要素を置けるかどうかということ

あとは自分で検索しなされ

どうもです。 <p>〜〜</p>ってブロック要素なんですね。
では、↓のやり方が、字の背景に色を付けたい時には一番シンプル、でいいでしょうか？
<html>
<head>
<style type="text/css">
.cool {background-color: blue; color: red; }
</style>
</head>
<body>
<p><span class="cool">内容</span></p>
</body>
</html>

あと、>>455の 『 内容 』 の文字をブラウザの左上ぎりぎりに貼り付けたいのですが、どうすればいいでしょうか？

* { margin:0; padding:0; }

>>457
おお、すばらしい。
上にピタっと張り付きました。
ありがとうございます。

>>455
<p class=cool> がシンプル
html,body,.cool のmargin,paddingリセット

CSSリセットの王道だわな

*を使ってるやつは情弱

>>459
有り難うございます。
しかし、<p class=cool>だと青帯が右にだらしなく伸びるのでダメです。

じゃあcoolにposition:absoluteかfloat:left
とかつけれ

>>463
おお、出来ました。どうもです。

ていうかHTMLとCSSは別ファイルにしろよと言いたい

ちゃんとしたやつ作るならまだしも、テストや勉強用のための使い捨てCSSなんか
わざわざ別ファイルにする必要はない

今どきthmlとcssを一から勉強するメリットを教えてくれ

著作権のないテンプレートも数えられないくらいある昨今
改変できる程度の能力があればWEB制作ってできるんじゃないの？

甘い考えだとしたら具体的に指摘お願いします

>改変できる程度の能力
を付けるために、
>今どきthmlとcssを一から勉強
してるんだけどw
僕ちゃんの場合。
だから、
>改変できる程度の能力
があるなら、それでいいんじゃないですか？

俺に改変できる程度の能力をくれ。

Dreamweaverって織姫って意味でいいの？

全ブラウザに対応してないCSS3の効果ってどこで見られるんですか？
target-name とか target-position　とか text-outline とかですね。

>>466
それ本気で言ってんのか？ｗｗ　釣りだと思うけど

Dreamweaver使いだけど
新規作成から作ったことないわ

無著作のテンプレートからよさそうなの選んできて改変するだけで十分クライアントの要望に答えられる
ＪａｖａＳｃｒｉｐｔはそうもいかないけど。。。
ボタンとかメニューバーの画像もフォトショでクライアントの要望に沿った色にかえてるだけ

ここの住人ってJSもいけるの？
いけるなら質問したいんだが

JavaScriptは専用スレがあるだろ
商用利用可能な著作権フリーのテンプレートを改変してクライアントの要望に答えられたとしても
クライアントがその元になったテンプレートを見たときたぶんがっかりするだろうと思うよ
Web屋なら最低限のスキルとしてWebページ、ブログだったらテンプレートを一から作れるようにはなってて欲しいけどね
よく言われてることだけど最近のWeb屋は素人みたいなのが多すぎる

body要素の中にそのままインライン要素を入れたらダメなんですか？
例えばですが下記のような感じです
<body>
<font size="-1">本文</font>
</body>

ブロック要素を使うとどうしても表示が崩れてしまう（文字サイズが大きくなったり段落として一段下がったり）
のでできればこのままがいいのですが・・・
CSSはまだ勉強していないので使えません

ちょっとドリームウェーヴァーの勉強すればかっこいいレイアウトがくめるのに
何万も金払ってクライアントばっかみてーｗ

世の中そういうもんじゃね。
情弱から金を巻き上げる
きっとお前もどっかでそんなふうに思われてるよ。

>>476
どっかのサイトに書いてあったけどドリームウェーバーじゃなくてドリームウィーバーらしいよ

Web作成のプロってのは
CSSとかを利用してレイアウトを組む方法を知ってる
じゃなくて
SEO対策、かっこいいデザインじゃなくてたくさんの人に来てもらえるホームページにきてもらえるデザイン
とかだろ？

そういうのはテンプレ改変だけじゃどうにもならんだろ。
今のWebデザインってただDreamweaver使えてCSSやJavascriptの知識だけありゃできるようなもんなん？

>>475
fontみたいな廃止された要素が使えるHTMLでは、どのみちbody直下にインライン要素置ける

>>480
どうもありがとうございます
HTMLではOKということですね
あまりよく知りませんがXHTMLなどはルールが厳しいので使えないということですか
覚えておきます

ブログなんかで...blog/2012_01.htmlのようなファイルを...blog/で読ませるのにはどうしたいいですか？今は...blog/2012_01.htmlと.../blog/index.htmlみたいに2つファイルを用意してコピーしていますがこれって無駄ですよね？

>>481
ごめん語弊があった
×廃止された要素が使えるHTML
○廃止された要素が使える(X)HTMLのバージョン

HTMLでもXHTMLでも移行型ならOKだけど、厳密型だとHTMLでもXHTMLでも駄目

>>482
mod_rewrite

>>483
XHTMLでも移行型なら使えるのは使えるんですね
推奨されないようですけど
たいてい作成する時は移行型みたいなので大丈夫なようです
ありがとうございました

>>484
ありがとうございます
レンタルサーバなんでルート権限ないんですよね
.htaccessいじれば行けそうな気がするんですがみなさんどうしてるんだろ
自鯖ならシンボリックリンク使ったりするんですかね

最初からインストールされてるとこもそれなりにあるでしょ
まず自分のとこで使えるか確認してみ

>>487
限定的にしか使えなくて意図した操作は無理っぽいでPHPでやってみることにしました
何かもっと簡単(?)な方法があったら教えて下さい

>>486
mod_rewriteはロリポップですら使えるから大体のとこでつかえるはず

閲覧者を特定のアドレスに飛ばしたい場合に、リフレッシュのメタタグを使いたいです。
このタグは携帯電話では動作しないらしいのですが、スマホではどういう動作をするのでしょうか？

Locationヘッダ使いましょう

CSSの全くの初心者です。プログラム開発はできます。
おすすめのCSS初心者本をご教授ください。

http://www.amazon.co.jp/gp/product/images/4881667378/ref=dp_image_0?ie=UTF8&n=465392&s=books

>>493
ステマ

最近どのスレでもステマステマうざったいけど
stealthの意味わかってんのか

ステルスマニア？

>>495
もし>>493が著者や出版社だった場合立派なステマだけど？

これ思い出したじゃないか
http://i.imgur.com/84zmr.jpg

>>497
どこが？ｗ

最近アフィのステマ大きく話題になったせいで
ステルスとオープンの線引きが曖昧になっているね。

>>499
一般人装ってるから立派なステマだろ

あらゆるweb上のレコメンドは全部一般を装った業者のコメってことですねわかりました

縦書きで小説風のスタイルにしたくて
文字列は縦書きにはなるのですが文字一文字一文字の向きがおかしいです
どこが間違えているのかおしえてください
よろしくおねがいします

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>レッスン-26</title>
<style type="text/css">

body {
margin: 3em;
line-height: 1.7;
font-family: "@MS 明朝", serif;
-webkit-writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h1>北海道で遊ぼう！</h1>
<p>
　小樽・札幌エリアで海水浴ができるのは、通常は７月中旬から８月中旬までの
<em>約１ヵ月間</em>です。
ただし、その期間でも水温は低く、数十分入っていると寒くなります。
その一方で、北海道では<em>真冬にサーフィン</em>をしている人も多く見かけます。
</p>
</body>
</html>

writing-modeてIE限定じゃないの？

なんでwebkitのプレフィックス付いたプロパティだけなんだよ

3カラムのサイトを左から、サイドバーA、コンテンツ、サイドバーB、とCSSのfloatでレイアウトし、
htmlソースは上から順に、コンテンツ、サイドバーA、サイドバーBと書く場合、
コンテンツとサイドバーAをdivでくくってdivの入れ子にしなければできないでしょうか？

【急ぎです！】
こんにちわ。a:link{------}, a:visited{color: #000} , a:hover{ background-color: transparent;
color: #999;} と指定しても、なぜかhoverした時に文字が白くなってしまいます。（visitedが適用されている文字の場合のみ)
しかもvisitedのところがなぜか黒(#000)ではなく、灰色(#999）で表示されています。。
ほかにリンクのスタイルを指定しているところは無いです。

>>506
うん。実際の表示とHTMLソースの順序をめちゃくちゃにしたいなら
そうするしかない。

あるいはフロートしないで絶対ポジションにするか。

float使わなくていいならbox-ordinal-groupで

>>507
ブラウザか他のリセットCSSかで擬似セレクタがすでに入ってるんじゃないの？

>>510

ほかの疑似セレクタは入れてないはずなんですよね。。
一回試しに、指定するスタイルをCSSの一番下に持ってきて試してみたけど、ダメでした。
原因が全然わからない。。。

そのソースを　http://jsbin.com/　にでも貼りつけて見せてくれると嬉しい

>>504
>>505
どうやったらよいのでしょうか？

>>512
CSSのその部分でよろしいでしょうか？

>>513
探せば一発で出てきたよ。
IEはそのままプレフィクス無しでいけるのはわかるよね。
http://puzzel.jp/blog/webdesign/htmlcss/1347

>>514
CSSだけでいいよ。そのサイトのレンダリングでその特定の不具合が実装されるならね。

突然の質問なんですが、以下のサイトのサンプル1の「floatリストのセンタリング」なんですが、
どうやっても左寄りになってしまうんですが何が行けないんでしょうか？
http://kachibito.net/sample/css-tips-01/#sample01


実際やったもの
http://dl.dropbox.com/u/8986926/thread12.html

すみません。左寄りではなく、（若干）右寄りでした。

そりゃ、left:50%なんてやったら中央より右によるにきまってる

いや見本の方でもul、left50%で　liも-50%で合ってるはずなんですが…

あのね
スタイルシートってのはな、ブラウザでデフォルトでなってるようなのがあるんだ。
たとえばh1はでっかい字、とかね。

で、そういうのの一部に、marginやpaddingというのがある。
だからulとかが右や左によってしまったりするのを防ぐため
リセットcssを用意する等し
*{margin:0padding:0}
みたいにやったりするんだ。

サンプルでは
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote(省略)
background: none repeat scroll 0 0 transparent;
border: 0 none;
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}
ってやってるね
だからulやliに余計なpaddingがついてないんだ。
でも>>516の実際やったものはそういうことしてないしょ
だから余計なulやliに余計なmarginやpaddingが設定されちゃってるんだ。
それでおかしくなってる。
これからはそういうミスしないように絶対にリセットしような。

リセットのことすっかり忘れてました…orz
ありがとうございます、助かりました。

<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
min-width: 775px;
background-color: #ffe5e5;
text-align: center;
}
div#container {
width: 94%;
margin: 0 auto;
padding-bottom: 10px;
position: relative;
}
div.blog-title-outer
, h2.archives-title
, div.article-body
, div.article-footer
, h2.article-title
, div.pager
, ul
, div.index-navigator-outer {
height: 1%;
}

div.blog-title-outer {
background: #ffbdbd url(http://parts.blog.livedoor.jp/img/usr/default_2008/pink/line_r_top_right.gif) no-repeat right top;/* 背景画像：右上 */
text-align: left ; margin-bottom: 10px; }
div.blog-title-outer-2 {
background: url(http://parts.blog.livedoor.jp/img/usr/default_2008/pink/line_r_bottom_right.gif) no-repeat right bottom;/* 背景画像：右下 */
padding-right: 10px;
}
div.blog-title-outer-3 {
background: url(http://parts.blog.livedoor.jp/img/usr/default_2008/pink/line_r_top_left.gif) no-repeat left top;/* 背景画像：左上 */
}
h1#blog-title {
margin: 0;
padding: 35px 20px 0 30px;
font-size: 150%;
font-weight: bold;
}
div.blog-description-outer {
background: url(http://parts.blog.livedoor.jp/img/usr/default_2008/pink/line_r_bottom_left.gif) no-repeat left bottom;/* 背景画像：左下 */
}
p#blog-description {
margin: 0;
padding: 10px 30px 35px;
line-height: 135%;
}
</style></head><body><div id="container">
<div class="blog-title-outer">
<div class="blog-title-outer-2">
<div class="blog-title-outer-3">
<h1 id="blog-title"><a href="http://blog.livedoor.jp/hayainu/" title="涙はやいぬ トップへ">涙はやいぬ</a></h1>
<div class="blog-description-outer"><p id="blog-description">てすと〜</p></div>
</div></div></div></body></html>

長くて申し訳ないのですが、
これを表示させると、細く白い枠が表示されます。
なぜこれが表示されるのかカラクリを教えて下さい。

>>523
にある４この画像はコーナーを丸く切るための画像でしかありません。
なのに、なぜ、白く細い枠組みの線が出来るのか不思議なのです。
たぶん1pxぐらい。

ん？タイトルバー全体に白い枠は付けずに濃いピンクにしたいってこと？

要約するとこうしたいってことかな
http://jsbin.com/emuwen

DreamweaverCS5です。

コード/分割/デザインの切り替えはショートカットキーで出来ますが、
その上位置にソースコードやCSSの欄がありますが、これをショートカットキーで切り替えることって出来ますか？
一通り探したけど設定項目が見当たりませんでした。

>>526-527
レス有り難うございます。

http://jsbin.com/emuwen
これだと、19行目あたりで、『 border:1px solid #FFF; 』 の命令があります。
なので白い線が付くのは理解出来ます。
では、
５２２、５２３の場合、ドコで白い線を付ける命令をしているのか？
という疑問です。

>>516
遅レスだけど、floatじゃなくてdisplay: inline-box;使え

>>529
暇だからソースコピペしてみてみたけど、

div.blog-description-outer {
background: url(http://parts.blog.livedoor.jp/img/usr/default_2008/pink/line_r_bottom_left.gif) no-repeat left bottom;/* 背景画像：左下 */
}

これだろ？

>>531
レス有り難うございます。
私もはじめ、そうかと思い、(http://parts.blog.livedoor.jp/img/usr/default_2008/pink/line_r_bottom_left.gif)をダウンロードしてみたのですが、
コーナーの小さな画像でしかないのです。
さらに、ブラウザの幅を狭めると白線も追随して短くなるので画像ではないと思うのです。
元ネタは、http://blog.livedoor.jp/hayainu/これです。
ここから白線がらみの部分だけを抽出したのが、５２２、５２３です。
ライブドアのデザインで、デフォルト2008（桃,3カラム）というデザインです。

ようは白い線無くなればいい訳だからプレフィックスつけたradiusプロパティでよくね？
って思うけどそういうわけにはいかんのか

>>533
白い線無くなればいい訳ではなく、
５２２、５２３のソースでなぜ白い線が付くのか？という疑問です。

>>530
なにそれ

そういうことね。
えっと、本元さんの角丸画像は外側がbody背景色（薄いピンク）になっていて
白い枠線を挟み中身は白”ではなく”アルファチャンネル（透明）なのよね。

で、backgroundで背景色と背景画像を一括でやってるからタイトルの背景色は濃いピンクになる。

試しに濃いピンク外せばアルファチャンネルになってるのがわかるよ。
こういうことでおｋ？

>>535
こういうことでしょ？
http://110chang.com/lab/centering_list_item/index.html

>>536
レス有り難うございます。
とても高度そうなことなので後で色々検索してみます。
つまり、角丸画像がポイントですか？

単にinline-blockと間違えただけじゃね

prefixなしがinline-blockでクロスブラウザのprefix有りがinline-boxだから何も間違ってないよ

ああごめんごめん、偉そうに言っておいて間違えたわ
>>539の言うとおり

>>538
まだ見てるかわかんないけど図解つくってみたよ。
わかりづらかったらごめんね。

http://i.imgur.com/PEss2.png

>>542
いつもそんなフォントの仕事してるのか？ｗ

>>543
してるわけ無いだろｗ
仕事でこんなフォント使ったら苦情くるわｗｗ

写真屋もってないからこれできないんだけどフリーとかでやる場合って何使えばいいんだろう
http://coliss.com/articles/build-websites/operation/design/how-to-clean-off-bad-banding-from-gradients.html

CSSのaセレクタの擬似クラスのa:focusとa:activeがどんな時に有効になるのかわかりません
調べて見たのですが具体的にどんな風になるのか書いてある文章じゃいまいち理解できませんでした
具体的に簡単に教えていただけないでしょうか

>>545
GIMPでできんじゃね？

>>546
調べて文章読んでわからないんだったら、自分で書いて様子を見るのが一番じゃね

>>548
いまいちわからなかったんですけど
例えば、　a:active { color: red; } はリンクをクリックしたままはなさないでおいた時リンクの文字が赤くなる
a:focus { color: green; }　はTabキーでリンクを選択した場合色が緑になる
これで合ってますか？合ってるなら理解できてるのかな？

はじめまして
よろしくお願いします

今度会社のHPを作ろうと思っています
table多用して作っていくのは、先のことを考えるとやめた方が無難でしょうか？

時代遅れだとは分かっているんですが、あと何年くらい戦えると思いますか？

>>550
ステマ

もうすでにそれでは戦えない状態

ありがとうございます

てことはビルダーなんかでサイト作るのはもうやめた方がいいですかね

ビルダーはやめとけ
どこでも配置モードっていう糞システムがある

ウィーバー買え

何でＴＡＢＬＥ使ったらいけないのかどなたか詳しく教えてください
そもそもＴＡＢＬＥ使ってもＳＥＯではそんなに影響しないんじゃないのですか？
あと他にも使ったらいけないタグあるならおしえてください
よろしくおねがいします

別にない。
テーブルだろうが全部DIVだろうがどうでもいい。
グーグルで検索したらDIVやテーブルタグレイアウトつかったら検索できないとかいわれてたけど
普通に検索の一番上のやつが全DIVレイアウトだったりテーブルレイアウトなんてよくあること。

テーブルはhtml5になって非対応のタグなかったかな？

どちらにしろ無くなる記述だという認識なんですが、
その辺どうなんでしょうかねー？

html5で非対応になるのはタグじゃなくて属性
<table bgcolor="なんとか">
みたいなことはダメってだけで
(CSSでやればいいから)
<table>自体は使える。

>>549
すみません
どなたかこれに答えていただけませんか？

focusってあれだろ、inputとかに指定して文字入力してるときとかの装飾を操作するやつだろ
英語の意味まんまじゃん

>>555
htmlって元々定義から外れた書き方しててもブラウザ側が処理してくれてなんとか見栄えを整えててくれてたんだけど、
textじゃなくてapplicationとしても活用したいってなったとき、xhtml1.1とか言ってたときに
文法間違ってると表示してやらねーみたいな話が出てたんだよ。

その反動でvalidなhtmlで書いてこそwebエンジニアとしてイケてるみたいな一派が盛り上がったからその流れだろ。
まぁ結局xhtmlは頓挫してhtml5になったけどな。セクショニングとか電子書籍ならまだしも広告系webサイトでは守られないよなきっと。

だって守るメリットないからな・・・
本来sectionとか使う部分をdivにしたからといって
デメリットはねーだろ。メリットもねーけど。

少なくとも文書構造守ればロボットが適切に解釈してくれてコンバーション目標達成につながる

というしごく淡い希望はある・・・希望だけど

まあ、とにかくtableはサイト直すのもめんどくさいし
あえて使う意味はないでしょ

less対応のレンサバとか普及してほしいなあ

validで書いておけばブラウザ毎のバグや癖も把握しやすいしな
生産性は向上する

html,CSSは横並びの表示をするのは
float、position、display:table、(CSS#の)display:boxなど

floatを使う→たての長さをそろえてくれない、横の幅がせまくなったりすると
■■みたいに横並びだったのが
こうなる↓
■
■

positionabsoluteを使う
widthとかborderの長さを計算してleftとかやらなきゃいけなくてめんどい
display:tableをつかう、これが正解に近い
display:boxをつかう
これCSS3だっけ。

>>566
>display:tableをつかう、これが正解に近い
display:tableは旧ブラウザで使えないがな・・・

未だにclearfixが無難

>>567
いつの話だよ

<div id="a" style="width:50px; height:50px;position:absolute;">
</div>
<div id="b">
あいうえお
</div>

この"a"の真横に"b"が来るようにしたいのですが
方法とかないでしょうか？
displayはインラインブロックでも何でもいいのですが
この"a"はjavascriptで動かしたり大きくするので、位置を合わせて指定するのではなく
常に横に"b"がくるようにしたいです

BtoBの中小零細企業相手だったら、未だにIE6率2割とかザラだぜ

Javascriptでaを動かすとき同時にbも一緒にうごかせばいいんじゃね？

XHTML 1.0 Transitional準拠で書いています。
以下のように、scriptとnoscriptで同一のidを出力するのも、idの重複とみなされるのでしょうか？

==XHTMLソース==

<script type="text/javascript" src="./hoge.js"></script>
<noscript>
<p id="hoge">ほげ</p>
</noscript>

==JavaScriptソース (hoge.js)==
document.open();

document.write('<p id="hoge">変数の値を書き込んだり</p>');

document.close();

>>571
別にインストールされているIEが6だからってIE6使う必要ないだろ

>>573
重複
あとXHTMLではdocument.write使えない

>>574
ごめんよくわかんないそれ。客の客の2割がIE6を使って製品ページとか見てるってことなんだけど。

囚人のジレンマの話か

>>575
ありがとうございます。JavaScriptもDOMで書き直しました。
これで問題ないと思うのですがどうでしょうか。

==XHTMLソース==

<div id="hoge">
<noscript><p>ほげ</p></noscript>
</div>
<script type="text/javascript" src="./hoge.js"></script>

==JavaScriptソース (hoge.js)==

var hogeObj = document.getElementById("hoge");
var pObj = document.createElement("p");
var tNode = document.createTextNode("なんか変数とか");
pObj.appendChild(tNode);
hogeObj.appendChild(pObj);

>>542
有り難うございます。
つか、http://parts.blog.livedoor.jp/img/usr/default_2008/pink/line_r_top_left.gif
をダウンロードして、MicrosoftPictureManagerというXPに付いているソフトで見てみると、
この画像は、左上の丸角＋左の縦線＋上の横線で構成されていました。
で、不思議なのはこの縦線、横線とも伸び縮みが可能なんですよねw
こんな規格の画像が存在するのでしょうか？

つか、確かに >>542 で言われてる通り、透明部分があるんですね。
つまり、画像は、左上の丸角＋左の縦線＋上の横線＋透明の長方形部分で構成されていると。
しかし、長方形にしても、伸び縮み可能、というのが不思議です。

ここでPHPについて聞くのはスレ違いかもしれませんが
HTMLでヘッダやフッタなど毎度同じ記述をする部分は別ファイル(header.php, footer.phpなど)で読ませたいのですが
<title>などは変数で指定したいです
この場合はどう書けばいいんでしょうか
ちなみにSmartyという便利なものがあるようですがレンタルサーバなので使えません

htmlファイルを作ったのですがどのようにアップすればいいかわかりません。
URLがfile から始まるのですが、httpにするにはどうすればいいでしょうか？

echo "<title>".$hoge."</title>";

>>583
ありがとうございます
できました

>>580
542だけど、伸び縮みする仕組みは簡単にできるよ。
タイトルの部分だけで角丸を上下に描いた状態で左右にするだけでリキッドに対応する。

■□□□□□□□□□□□■
■□涙はやいぬ□□□□□■
■□□□□□□□□□□□■

黒の部分に角丸画像ね
また図で悪いけどこんな感じ
http://i.imgur.com/AD8hm.png

完成のやつは縦に伸びた時のことも考えて作ってるけど縦が固定の場合はこれでOK

CSS3のmultiBackground使えば縦横簡単に対応できるけど
今上であげたやつで縦も可変型にしたい場合はleftとrightの角丸のところをまた分割すればいいよ。

beforeとafter使えば
HTMLのほうに、角丸のレイアウトだけのための余計なdivとかをいれなくてすむから楽だ！

あ、その方法もあるな。すっかり忘れてた。
でもbefor、afterてブラザによって対応非対応があった気がするんだよな。

だからビビってtable-cellやinline-block(box)でなんとかしたりしてる。
IE以外だとdisplayBoxかな。floatレイアウトだといろいろ手間増えて面倒くさい

>>588
Before after非対応はIEだぞ！
ついでにdisplay:tablecellの日対応もIEだ！

IEなんかつかってるやつはじょうじゃく

あぁやっぱりIEか。
でも仕事上6は捨てていいとしてもそれ以上は対応せざるを得ないからな。

before afterひたいおう IE6(7以上ok)
table-cellひたいおうIE6,7(8以上ok)

<div>要素の中にアンカータグ（<a>）を入れて、以下のソースを作り<div>と<a>にheightを指定したあと、
この要素内で垂直に文字を配置したい場合ってどうしたらいいですか？

.hoge {
　　　　　width:320px;
　　　　　height:100px;
}
.hoge a {
　　　　　display:block;
　　　　　height:100%;
　　　　　text-align:center;
}

<div class="hoge">
　　　　<a href="#">hoge</a>
</div>

できたらすべてのブラウザに対応するようにしたいので一部のブラウザでは対応してないtable-cellなどはなしの方向で･･･。
vertical-alignでやろうとも思ったんですが<a>や<div>にdisplay:inline;と書いてやってもできなかったです。（Chromium）

ホームページにそのサイトのファイル容量の合計を表示させたいんですがどのように書けばいいんでしょうか？

<p>2MB</p>

>>594
ありがとうございます
filesize()で一発でした＾＾

>>578
いちおうnoscriptはあまり使わない方が良いけど、文法上は問題ない

>>592
一部のブラウザって古い携帯？

>>596
アホか

日本語でおｋ

>>596
携帯に対応するつもりはないです
スマホには対応しようとは思ってますけど

じゃあvertical-alignとtable-cellでいいんじゃね
box-alignとかはieが対応してないし

verticalでやりたいんですけどdivとaをinline要素にしても効かないんです。

inlineじゃなくてtable-cell

>>582見て
( ﾟдﾟ)・・・
ってなった

でっていう

>>602
div内のa要素自体を垂直中央じゃなく、質問はheightを100％に指定したa要素のテキストだけを垂直中央に配置したいんです。

すみません。592です。
<a>にdivを入れ子でそのdivにwidth、heightを指定し、上下のpaddingを調整して出来ました。

>>603
ネットのしくみ知らない奴なんてそんなもんだろ
サーバってなあに？ってとこから教えないと

>>607
お願いします

例の画像が思い起こされるな
最近では蓮舫か

>>608
だれだよ

IE早くboxに対応しねぇかな･･･
いっつもIEのせいでデザイン狂うわ

草案だし、他のブラウザも中途半端にしか対応してないし、ベンダープレフィックスついてるし

IE10はようやくHTML5やCSS3に対応するらしいな
ブラウザの違いをきにしなくて済むな

個人的にはIE8からすべてにぶち込んで欲しいもんだけどプログラム的にページ表示速度が遅くなったりとか重くなったりとかするからかな。

IEはアップデート遅すぎるのが問題

IE10がでたところでまた中途半端なとこで開発やめて捨てるんだろうなぁ。

IE6を使ってるひとはIE6の何がそんなに魅力なのかね。

魅力を求めていると言うよりそれしか使わざるを得ないのがたくさんいるんじゃない？
Win95、98しかもたないオッサンとか子供とか案外いるし。

仕事以外ではIE無視するサイトつくろう　　と思っても外出先からIEでみると崩れて萎えるんだよな。

頭が痛くなるぜ

「日本男児たるもの浮気はしないので御座る」だとさｗ

名前　山田太郎
住所　東京都なんとか区どこそこ
電話　０１２３４５６７８９
趣味　読書とスポーツ

こういうのを作るのはtableタグ使ってもいいんですか？

レイアウト目的じゃなければいいです。

リスト使えば？

formをsubmitしたらポストしつつアンカーの場所へ移動できればと考え以下のようなものを作成しました。

<form method="post" action="sample.php#pageend">
〜中略〜
<input type="submit" value="OK">
</form>

#pageendを取ればちゃんと機能はしますが#pageendがあることで機能しないようです。
submitで値を渡しつつ#pageendでアンカー先に移動するということは出来ないのでしょうか？
もしそういったことが可能であればアドバイスいただけないでしょうか。

ブラウザは？

一応IE9以上とChromeとFirefoxの最新を対象にしてます。

>>623で普通にpostできる

１つ外部CSSを複数のページに使用している場合に
その複数のページのいくつかが１つ外部CSSに合わなくなった場合どうすればいいのでしょうか
例えばこんな感じです

通常の複数のページの１つ
<h1>文字文字文字</h1>

外部CSS
h1 { margin-left: 50px; }

合わない複数のページの１つ
<h1>文字文字文字文字文字文字文字文字文字</h1>

外部CSS
h1 { margin-left: 50px; }

こういう風にh1要素の文字数が増えていくと、このh1要素の下にある要素とバランスが悪くなる
どうしたいかというとh1 { margin-left: 50px; }　←この50px;のとこを30px;など自由にページ別に変えたい
なおかつ１つの外部CSSで管理したい（h1要素の文字数によって外部CSSの数がどんどん増えてしまうため）
この場合どうすればいいのでしょうか？
XHTML1.0のTransitionalです

文字数が増えても崩れないCSSを書いた方が良いと思うよ

例えばどんな感じでしょうか・・・

見出しが2行になっても以下の要素の位置に影響が出ないようにしたいってことだろ？
h1を絶対配置すればいんじゃね

そのh1だけを内部CSS/style属性で直接書けば良いじゃん

内部cssなんて推奨すんなよ…リニューアルの際に邪魔になる。

まぁそんなこというなら
ある特定の1ページのh1だけのプロパティを変えたいとか
必要のないことも邪魔になるんだけどね。
全部同じにしといたほうがいいじゃん。

クラス付ければいいじゃん

マークアップ替えるなよ

ユニークな指定を必要とせずにテキスト量変化に対応できるような
デザインにするのが正解なんじゃね

テキスト量変化
Javascript、jQueryで全部調整すりゃいいんじゃね
文字の量がある一定数値以上ならwidthを変える
みたいなことCSSだけじゃできんだろ

js切ってる人間のことも考慮したいんだよ

flameをやめてfloat:left;で2カラムレイアウトにしたんですが、
メニューのリストリンクを追加する場合
<div id="sub">
<ul id ="localnavi">
<li><a herf="#">写真1</a></li>
---省略---
<li><a herf="#">写真15</a></li>←これ1つ追加
地道に1ページずつ書き換えるしかないんでしょうか

あとDTDの
HTML 4.01 Transitional URLありとXHTML 1.0 Transitional xml宣言あり
どっちがいいんでしょうか　jsは使ってないです
違いが良くわかりません

HTML4つかっとけ

地味に1ページずつって
100ページあったら100回同じ書き換えするのか？
そんなわけないだろう・・・
もしそんなことしないといけないとしたらコーダーがしんでしまいます

>>640
レスありがとうございます
jsいらんのならHTML4でいいってことですか？

http://q.hatena.ne.jp/1185063872
この質問者さんと同じ状況なんですけど要するにphp使えって事なんでしょうか

ファイルが読み込めるんならなんでもいいけど
まあ今時やるんだったらPHPが簡単お手軽だろう

>>639
MTみたいなパッケージのCMS使えよ

>>641
たしかにphpやjavascriptができるならそれ使えばいいけど
そんなことしなくてもいいよ。

たとえば
a1.html、a2.html・・・a10.htmlがあって
そこに全部写真14まであって、写真15を追加したい

<div id="sub">
<ul id ="localnavi">
<li><a herf="#">写真1</a></li>
---省略---
<li><a herf="#">写真15</a></li>←これ1つ追加

こんなのgrep機能をもってるエディタ使えば余裕
grep機能ってのは、簡単に言っちゃえば
高機能な検索置換な

たとえば普通のテキストエディタだと
たくさんのテキストファイルに一気に
<li><a href="#">写真14</a></li>
の後ろに写真15を追加しろってことはできないが
特定のフォルダにある全てのhtmlファイルの
<a>写真14</a>の後ろに、写真15を追加しろ
みたいなことができる。
ドリームウェーバーのテンプレートとか使えば
さらに快適に

それすら面倒

ものすごーくしょうもない質問なんだけど、

===========
あああ<br /><br />

いいい<br /><br />

ううう
===========

を正しいタグの使い方でやるとどうやるのが美しい？
<p>タグまだなじめなくていっつもこうやっちゃう

タグがなじめないって意味わからない
どういうこと？

別にタグに正しい使い方も間違ってる使い方もないけど。
たとえば
<h1>ああああ</h1>
と
<p>ああああ</p>
どっちが正しい？なんて聞かれても答えようがない

意図した通りに改行されないってことだろ
pタグだとタグ閉じた行の下の余白が邪魔とか

「あああ」じゃなくってもっと意味のわかる文章にしてください

改行の連続はやめろ
CSSでやれ

>>648
そういう場合に下の一行分の余白を消す方法はないんですか？
pタグに限らずh1タグなども含めてです

CSSを使えばいい。

CSSを使えば、ピッチリ詰めたり逆に２行あけたり
他にも中央に寄せたり線引いたり画像置いたり自由自在ですぜ

昔は<br>タグでコンテンツ配置してたな。懐かしや。

brで配置
fontやbgcolorで色かえは基本だ

CSSなんて使わないのは基本。
そんでDTDはStrictとかかいちゃう。

つられないぞ

何がだ

なんだか意味不明になってきちゃって・・・どなたかお力貸して下さい・・・

_______幅300______
| ______　　　　　..|
| |img|　文字〜.|
| |_____|　　　　　.|
| 　　　　　　　　.|
|___________________|

上記のように画像の横に文字を回りこみさせたくて
.test-box{width: 300px;}
.test img {float:left;}
.test p{}
で画像を左に浮かせて回りこみするのは良いのですが、文字が幅300を超えてぶち抜くのです・・・
私の想像では300幅を超えると勝手に改行されて下に降りて行くと思ってたのですが、

_______幅300______
| ______　　　　　..|
| |img|　文字文字文字文字文字文字.|
| |_____|　　　　　.|
| 文字文字文字文字文字文字文字文字文字文字文字文字
|___________________|

こんな風になっちゃうのですが、間違っていますでしょうか？

robots.txtについて
グーグルウェブマスターツールを使ってrobots.txtを生成すると
User-agent: *
Disallow: /admin
Allow: /

という具合にAllow: /が入ります。
拒否しないの以外は許可ってことだと思うですが
Allow: /って必要なんでしょうか？

>>658
.test-boxにword-wrap: break-word;
でどうかな

>>660
レスありがとうございます。

でも駄目でした・・・

>>652-653
具体的にどのプロパティで指定するのか教えていただけないでしょうか

>>662
marginとpadding

>>663
どうも

というか、余白指定なんて初歩の初歩はスレチじゃないのか

＞ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
とテンプレにあったのですいません

>>661
どうやらfloatとbreak-wordは相性が悪いらしい。
調べてたらこんなんあったわ。
http://bit.ly/hpLZBE
あとは頑張ってくれ!!

<img src="" align="left" />
のalign="left"をCSSでやると何になるのでしょうか？
style="text_align:left;"だと違う結果になりました

>>665
おまえがスレチ

>>668
×text_align
○text-align

まあでも自分でロクに調べもしないくせに人に聞くのもどうかと思う
>>662を例に上げるが>>653がCSSで出来ることを書いているのに何故検索しないのか。
「CSS　余白」　とか　「CSS　行幅」でggったらすぐ出るだろ？
まさか検索のしかたもわからないのか？　そんなわけ無いよな？
とりあえずHTMLとCSSのリファレンスサイトをブクマしとけよ。

>>658
HTMLのほうはどうなってる

<div class="testbox"></div>
<img />
<div class="test"></div>
<p></p>

みたいになってたりしないだろうね？

とりあえずスレタイ読みなおしたほうがいい奴が何人かいるな。

>>668
<img src="" align="left" />はimg自体を左寄せにするという意味を持つので
CSSにすると以下のソースと同じ事になる。

img { float: left; }

いえば画像を左寄せ、テキストをその画像の横にと言った感じ。

で、下のtext-alignはその名の通りテキストの水平位置を決めるものなので
imgというブロック要素にテキスト用のオプションを当てても意味が無い。

imgってブロックだっけ？

失礼、勘違いしてた。
imgはインライン要素でした。

いや、空要素だろお前が初心者か

>>677
こいつはインライン要素とブロック要素も知らないくせに人に初心者とか言ってんのか・・ｗ
いや確かにimgは空要素だけどねｗｗ
>>676が言ってる通りimgはインライン要素

>>677
Strictの世界では生きていけないぞお前

altが無いところを見るとHTML5っぽいし、それならインライン要素じゃないけど
でもalignがあるし、インライン要素かも知れない

table要素のcellpadding属性について確認なのですが
例えば、<table cellpadding="15">の場合、言い方が悪いかも知れませんが上、下、左、右
全てに15pxの余白を作るという認識で間違いないでしょうか？

>>681
はい。

HTMLとHTML5の違いについて教えてください

利便性が上がった。

DOCTYPEは4よりも簡略化できるしアウトラインの種類も豊富になった。
<header><hgroup><article><section><aside><footer>
とか

Googleのトップ画像ってあれHTML5動画？

>>684
なるほど
ありがとうございます

>>683
同じものてす。HTML5からバージョンナンバーは廃止されました。

id属性とclass属性はどう使い分ければいいのでしょうか？
同じページ内の場所にリンクする時以外id属性の利点が思い浮かびません
皆さんはどういう風にid属性とclass属性を使い分けていますか？

>>688
ここで説明するのも何ですから以下のサイトを見たほうが早いかもしれません。

スタイルシートの class と id の使い分け [ホームページ作成] All About
http://allabout.co.jp/gm/gc/23897/

そのページ使い分けの説明されて無くね

情報の日付は古いが参考程度にはできると思うが？

>>689
なるほど、全てclass属性でスタイルシートを適用させてもいいけど
一度しか使わないところはわかりやすいようにid属性を使用したほうがいいということですね。
他によく使われるid属性とclass属性の使い分けとかはないのですかね

CSSじゃあまりメリット感じないけどJavascriptでidやクラス使うとよくわかるよ

Javascriptって表記最近流行ってんの？

JavaScript？JS？Ajax？

>>692
http://www.html5.jp/tag/attributes/id.html
http://www.html5.jp/tag/attributes/class.html
http://b.hatena.ne.jp/entry/jintrick.net/agenda/2008/08/id-1.html

迷うなら全部classでいい

>>692
http://togetter.com/li/56633
http://okwave.jp/qa/q6319432.html

>>688
HTML5ではcontextmenu属性やlist属性でIDを指定する必要があったりする

はじめまして。
以下のようなCSSで、bodyの中にmainクラスのdivを置くと、そのdivの幅と高さはbodyの100%ではなく、100%にpaddingで指定した分だけ大きくなってしまいます。
（以下の場合だと100%＋20px）
こういう場合、どのように対応したらいいのでしょうか？
ちなみにIE6は非対応でも構いません。
宜しくお願いしますm(_ _)m

html,body {
width: 100%;
height: 100%;
}

main {
padding: 10px;
width: 100%;
height: 100%;
}

bodyにposition:relativeっていれる(いれなくてもいい)
mainのうぃずとへいとを消す
ポジションをアブソレートにする
トップとぼとんとリフトとレフトを全部0にする
するとおそらく699が想定してるようになる

ちなみに、bodyの高さと横が
仮に1000だった場合
mainの高さと横を980に、
paddingの上下左右を10にしたい
みたいな感じだよね？

だとしたら700みたいな感じでできるはず

>>700
>>701
バッチリ行けました！
深夜なのにありがとうございます！！

HTMLファイル
<div id="test">
<h2>
文章文章文章文章文章文章文章文章文章文章<br />
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章<br />
文章文章文章文章文章文章文章文章文章文章文章文章文章文章<br />
</h2>
</div>

CSSファイル
#test { width: 1000px;
margin-left: auto;
margin-right: auto;
}

〜〜〜〜〜〜〜〜〜〜〜
h2 { background-color: red;
text-align: center;
}

この場合に文章を右揃えにしつつバックグラウンドカラーの中央に文章を配置する方法はありませんか？

このままだとバックグラウンドカラーの中心に来ても文章が中央揃えになってしまうという意味です

ごめん。意味が分からないから絵で説明して

こんな感じです
http://www.dotup.org/uploda/www.dotup.org2535187.jpg

<div id="test">
<p id="contain">
<h2>
文章文章文章文章文章文章文章文章文章．．．
</h2>
</p>
</div>

#test{
width: 1000%;
}

#contain{
margin: 0 auto;
width: 500px;
}

sorry、widthのとこ%じゃなくてpxね

うーんできません
何がいけないんだろう

┌―――――――――――――――――――――――┐
｜　　　　　┌―――――――――――┐　　　　　　　　　｜
｜　　　　　｜　　　　　　　　　　　　　　　　｜　　　　　　　　　 ｜

誤爆った

>>707
pの中にh2は入れられません

こういうことだよね？

┌―[test]―――――――――――――――――――┐
｜　　　　　　　┌[contain]―――――――┐　　　　　　　 ｜
｜　　　　　　　｜文章文章文章文章文章　｜　　　　　　　 ｜
｜　　　　　　　｜文章文章文章　　　　　　　｜　　　　　　　 ｜
｜　　　　　　　｜文章文章　.　　　　　　　 　｜　　　　　　　 ｜
｜　　　　　　　｜　　　　　　　　　　　　　　 　｜　　　　　　　 ｜

>>713
はい

#test { width: 1000px;
margin-left: auto;
margin-right: auto;
}

h2 {
background-color: red;
width: 500px;
margin-left: auto;
margin-right: auto;
}

だからこうでしょ？
http://jsbin.com/ubagut

┌―[test]―――――――――――――――――――┐
｜　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ｜
｜　　　　　┌――――――――――――――┐　　　　｜
｜　　　　　｜　　　　文章文章文章文章　　 　　｜　　　　 ｜
｜　　　　　｜　　　　文章文章文章　　　　　　 　｜　　　　 ｜
｜　　　　　｜　　　　文章文章　　　　　　　　 　　｜　　　　 ｜
｜　　　　　　――――――――――――――　　　　 　　｜
｜　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　｜
｜　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　｜

↑こうです

>>716
あ、それです！
それで白い部分も赤にしたらまったく同じ望んでいるものです

横paddingでやるのとは違うの？

あ。合ってたのね。

あれ、でもこれ白い部分のせいで正確に中央にならないような
まぁまったく問題ないんですけど
そういえばpaddingでも同じようなことができますね
padding: 0 200px;　みたいな感じで
というわけで解決することができました
皆さんどうもありがとうございました

CSSをリセットしなさい。

http://www.cssreset.com/

リセットしてどうする

えっ

＞これ白い部分のせいで正確に中央にならないような
デフォルトのマージンや諸々がリセットされてないからおかしくなったりするんでしょ

width決め打ちで中央に寄らないってことじゃないの

tableレイアウトが悪いっていうけど、見出し欄と本文の欄の二段で構成された小さいガジェットみたいなのを置きたい時にtableで二段にして配置するのもtableレイアウトっていうの？

tableタグ使ってたらテーブルレイアウト

そんなんtableレイアウトする利点すらないじゃん

きちんと使う所で使えば問題ねえよ。
てかテーブルタグが本来どういうものに使われるのかを理解しろ

見出し欄と本文欄の間の余白を消せなかったことがあってからテーブルでborderspacing0にして書いてたんだけど、今試したらテーブル使わなくてもマージン0で普通にできた。
たんに相殺されてただけかも。
くだらん質問してすまんかった。

CSSのfloatプロパティを使ってレイアウトする際clearプロパティは使用しなくてもいいのでしょうか？
例えば2カラムでdiv要素でヘッダー、フッター、メイン、サイドバーをidで指定していた場合と考えてください。

もう１つ質問なのですが　<div></div>　←こういう風にタグに何も文字を入れたくない場所には何も文字列を入れなくもていいのでしょうか？
テーブルを使用する際は表示が崩れる可能性があるので何も文字を入れたくない場所は半角空白入れると聞いたのですが
divタグに限らずです

空要素にしてもいいけどちゃんと意味を成すなら使っても良い。
擬似セレクタの :empty 使えば更にいろんなこともできるし。

あとclearfixはデザインするうえでは重要レベルかな。
図で説明するならばこうだ。

http://i.imgur.com/LXwq8.png

最近の回答者は図まで描いてくれて優しい人が多いな

途中送信してしまったが、floatした要素があったとしたら、最後にはちゃんと解除してあげないといけない。
だからclear:both;のみでもいいが、ブラウザによってはclear:both;のみでうまくいかない例がある。

だから外国のとあるデザイナーは考えた。

擬似セレクタを使えば他のブラウザにも対応できるんじゃないかと。
で、できたのがコレ↓

/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}

.cf:after {
clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
（http://nicolasgallagher.com/micro-clearfix-hack/）

まぁとりあえずデザインする上で今言った奴は重要ってことは覚えておくといいよ

とりあえずこっちも

http://i.imgur.com/vTotW.png

長ったらしいCSSハックを使わずにoverflowをつかいましょう。

別に長くないだろ

overflowのhiddenでも解除することはできるけど正確にはclearしてる訳ではないらしいぞ

clearって何か特殊な効果をいれてるわけじゃなくて
marginを計算してるだけでしょ
overflow:hiddenでfloatの下までもってくるならその下は下にくるにきまってるから
いちいちclearいれなくていいよ

<div style="foat:right">B</div>
<div align="left">A</div>

<div style="foat:left">A</div>
<div align="right">B</div>

A　　　　　Bのように表示させたい場合、どちらのほうが良いのですか？

お好きな方で

今までエディタを使用していました。
しかし、ドリームウィーバーの勉強をしたいのですが
オススメの書籍があればぜひ教えて下さい

自分なら迷わずコレをオススメします。
CSSnite監修なので自信を持って薦められます。
内容的には中級〜上級と言った感じでしょうが初級レベルはネットで検索したほうが書籍よりも情報が集まります。

現場のプロから学ぶXHTML+CSS 益子 貴寛
http://www.amazon.co.jp/dp/4839929734/ref=cm_sw_r_tw_dp_JELgpb08CQPX7

>>744の本はやめといたほうがいいよ

他人のおすすめする書籍を否定する前に対立できる書籍を持ってきたらどうだ

>>744
でも、この本なかなか有名だよね

はいはいステマ
え？

>>746
おすすめするってか宣伝にしか見えないわなｗ

1年前に買ってそれからずっと参考書にしてるだけでそれをお勧めしただけだが？
あの文で宣伝乙っていわれんならamazonレビューも同じ事だわな。

ｇｄｇｄ文句垂れてないで役に立つレスでもしたら？

amazonレビューはステマ

書籍の話は荒れるからやめろ

参考書とかそういうもんは人に薦められるんじゃなく自分で下調べして買うもんだからな
だいたい人になんでもすぐ聞くやつは中途半端になんでも終わる

本じゃなくてもここの住民がお世話になった、ためになったと思ったサイトとかないですか？
どうやって人に教えられるまでのレベルになったのか
簡単な経歴のようなものもよければ教えていただけないでしょうか

TAGindex　とほほ　CSSHappyLifeZERO　HTMLクイックリファレンス

っGoogle

>>754
為になったのはほぼ仕様書なんだよね。Q&Aサイトで回答するのも為になったけど。
http://www.tagindex.com/bbs/index.html
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html
http://www.y-adagio.com/public/standards/tr_css2/toc.html
http://hp.vector.co.jp/authors/VA022006/css/

tdの中に<p>タグ使うのは駄目でしょうか？

え・・・tdの中にpいれても少しも問題ないけど・・・
なんで駄目だと思ったの？
もしそんなこと書いてる本で勉強したのなら
そんな本は燃やしてしまいましょう。

構文的に問題あるから使わないほうが良い。

主要ブラウザで問題ないならいいんじゃねーの

文法は問題ないんだからそりゃあ

単純なブログ3カラムレイアウトを作るとき、
左要素(メニュー等)、中央要素(本文等)、右要素(メニュー等)はそれぞれ<div>要素で囲い、float: leftとして並べ
その下にフッターを付ける場合はフッター要素にclear: both というのは理解しました。

この時、中央要素のみを上下2段に分割したい場合、配置の指定はどのようにすれば良いのでしょうか。更新情報リストと本文エリアのような感じです。
中央要素の中に、更に<div>要素でブロックを2つ並べれば良いのでしょうか。
釈然としない説明で申し訳ありませんが、概念的なものでも結構ですのでご教授願います。

ulのリストで入れ子にして書いていくと3つでマーカの種類が終わっちゃうのを
違う記号に指定したいんですができますか？
画像は使いたくないんです
●リスト0
　　○リスト1
　　　　■リスト2
　　　　　　□リスト3
みたいにしたいんですが...

>>762
3カラムブログのソース見ればいいじゃない

HTML5が登場してきて、今どうなってるのかわからないけど、4.01じゃダメなのかな？
数年前に買った本だけど、これでいける？
ttp://www.amazon.co.jp/gp/product/images/4798102423/ref=dp_image_0?ie=UTF8&n=465392&s=books

IE6.0対応とかって書いてるけど、古すぎかな〜

body{text-align:center;}
.mainimage{display:none;}
a:hover .mainimage{display: block; position: absolute; top:100px; left:200px; width:400px; height:400px;}

<img src="サムネイル"><span class="mainimage"><img src="画像"></span></a>
<img src="サムネイル"><span class="mainimage"><img src="画像"></span></a>

こんなかんじで、サムネイルにカーソルを合わせると指定した場所に画像を表示させるギャラリーを作りたいのですが、
400×400pxの枠の中の真ん中に、サイズが異なる画像を表示したいんです。
このタグだと水平方向には中央に表示されますが、垂直方向には中央に表示されません。
どこをどう変えたらいいですか？

現状bodyの最初にh1でページのコンセプトが書かれており、その下に電話番号が書かれています。
で、h1の文字を左に、電話番号を右にして、上面をあわせてほしいと
依頼を受けました。
divで2つに分けて、h1の方にleft、電話番号をrightにしようと思うのですが、
これ、文法的、seo的にはどうなんでしょうか？

ライブドアブログのデザインをカスタマイズするためにcssをいじっています。
「permalink comment trackback」の部分を記事の下に表示させたいのですが

.posted{
width:80px;
float:right;

↑をどう変えればいいのでしょうか？

それはブログ板にいけよ

DwCS5です
サイト管理で登録したサイトから、特定の文字列が存在しないhtmlファイルを探すことはできませんか？

3カラムのサイトのbodyのwidthってだいたいどのくらいが普通なんでしょうか？
あまりに大きすぎるとスクロールバーが表示され見にくくなってしまうので
どのくらいの大きさまでならいいのでしょうか？

ブラウザの大きさは人それぞれでな

それでは話がぜんぜん変わってすみませんが
例えばbodyのwidthを1000pxに指定して2カラムの場合
サイドバーのwidthが180px　メインコンテンツのwidthが720px
ここでメインコンテンツの両端に50pxの余白をmarginプロパティであけた場合
bodyのwidthを100px増やすかサイドバーとメインコンテンツのwidthを調整して1000pxに収めるようにしないといけないのでしょうか？

最終的に何がやりたいんだ？

内部リンク先の文字の背景を変えたいんですが皆さんはどう実装しますか？

>>776
文字の背景→文字の背景色
です、脚注をつくりたいんですが

その前にお前ならどう実装するのか見せてもらおうか

>>776
http://www.w3.org/TR/selectors4/#local-pseudo

>>779
ありがとうございます
でも:targetが使えない...

:targetはCSS3から新しく追加された擬似クラスらしいけど俺が使ってるのはCSS2.1っぽい
CSS3を使うには何かHTMLファイルだったりCSSファイルだったりに宣言文みたいの書くんですか？

:targetじゃなくて:local-link
まだ:local-link使えるブラウザなんてないけど

内部リンクって、内部リンクじゃなくてアンカーのこと言ってるのか
:target使えないのはIEとかで見てるからじゃないの

>>783
四苦八苦してなんとかできました
アンカーっていうんですか
アンカーを相互参照してたのが問題でした...

なんか色々ググっててなんで使えないんだー、と思って
http://jigsaw.w3.org/css-validator/
なんかで調べたら:targetは未知の擬似クラス〜
とか出てきたのであれーと思って迷走してましたorz

http://www.geocities.jp/multi_column/practice/2column1.html

このサイトに

＞　 手順 2. 幅とフロートの指定

＞ボックス B、C には width を指定してあるため、これらに padding や border は指定しません。

とありますがボックスBかCのwidthをボーダーやパディングの分だけ差し引いてもpadding、borderは使用できないのでしょうか？

>>767
vertical-align:middle;は試した？

＜link rel="stylesheet"＞タグを＜div＞タグの中に書いたら、
validator.w3.org で次のようなエラーになりました。

Element link not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
＜link rel="stylesheet" type="text/css" href="/assets/css/form.css" /＞

そこで質問です。
・＜link＞タグが置けるのは、どういった場所でしょうか。
・どのタグがどのタグの中に置けるのかをわかりやすく解説した資料があれば紹介してください。

ヘッダ間

すみません、あげてしまいました。
>>788
やはりそうですか。
ということは、＜head＞タグ内以外では、外部CSSファイルを読み込むことはできないということでしょうか。

で、何がしたいの

HTMLは比較的簡単な言語だと思っていましたが、やはり極めていくと複雑なのでしょうか？

HTMLの仕様の中にDOMが入ってるとか、そういうこと？

３カラムにして左にメニュー　真ん中にメインのコンテンツ（画像とテキスト）　右にap divをいくつか
設置して、その中にメインコンテンツの内容に関連したことをテキストと小さな選択フォームを入れました。
ap divのpositionはrelativeです。メインコンテンツの内容のとなりに右サイドバーのap divがくるように
プレビュー見ながらきちんと位置調整するとDreamweaver上ではどんどんap divたちが下にずれていってしまいます。
何がいけないのかわかる方おられますか。

IE8なのにheaderタグが反映されない
どうすれば・・・

よく見るフリーキーワードやチェックボックスでの検索は何を利用しているのでしょうか？

text-stroke関連って廃止されたのか？

されてないよ

そもそも草案に入ったことなくね

なんか最近出版された本に記載されてたからさ･･･。
使おうと思えば一応使えたからどうなんだろうと思って。

W3Cでもそれらしい記載は見当たらなかったしどういうことなんだろうなぁ

<meta name="author"content="***">

このメタタグってなんなんですか？

サイトの紹介文だったはず

あーごめん違った。

■ 文書の著者

文書の著者を明記します。画面上では表示の変化はありません。contentの部分にはメールアドレスを書いてもよいでしょう。

<meta name="Author" content="hogehoge">

日記なんかで定期的にリンク先を変えたい場合どのようにすればいいんでしょうか？
例えば
トップページに
<a href="201201.html">日記</a>
というリンクがあったとして、毎月リンク先が201202.html, 201203.htmlなど
に変える場合、いちいち手作業でリンク先を変えるのは面倒です
なにか良い方法ありますか？

スラッシュで終わるアドレスに飛んだら最新の記事にリダイレクトする

>>803
phpとかで書き換えたら？
javascript利用して書き換えのほうが簡単だけど、ブラウザ見てる相手のパソコンの日付が間違ってると
その間違った日付にとんじゃう。

php利用出来る環境ならphpの方が簡単だろう

>>805, 806
そうですね
phpのincludeあたりでできそうですね
ありがとうございました

アドレス生成してechoじゃないの

箇条書きにて失礼します

�@
globalnavのliを画面の中央寄せ表示にしたいのですが
margin-left: auto;
margin-right: auto;
を使ってもtext-align: center;をつかっても中央寄せになりません


�A
ブラウザのウインドウサイズを小さくしたら�@のliが二段になります
overflow: hidden;を使ったのですが固定されませんでした
ウインドウのサイズを小さくしても2段にならないように固定したいです

この二つのやり方を教えていただければ幸いです
よろしくお願いします。

http://jsfiddle.net/PADDv/1/

>>809
ulにmargin:autoの中央設定してる
ulのwidthは100%
これじゃulが中いっぱいに広がっちゃって中央になるスペースじゃんｗ

floatしてたら幅が少なくなったら下に回りこむのはあたりまえだな

複数行から成る文章を枠で囲いたいです
その際に枠の幅を文字に合せる方法を教えてください

divだと指定した幅か、画面の幅にしか合わせられない
spanだと1行ずつ囲われる
tableだと可能ですが、スマートではない

と言うことで、良い方法はないでしょうか？

>>810
返信ありがとうございます
widthだったんですね
おかげで中央表示はできたのですが
floatの二段になるほうはできません＞＜
やり方がわるいのかもしれませんがクリアフィックスもできませんでした
これだけ教えていただければありがたいです
よろしくおねがいします<m(__)m>

>>811
width:auto;
float:left;

>>812
ヒント：幅が2メートルしかないスペースに
幅が1.5メートルのデブを横に二人並べることは不可能

今更だけどここって過疎りすぎだよな。
居ても3〜6人くらいしかいないんじゃないか

質問に的確なレスがつくのであれば、別に過疎っていてもかまわない

たまに人が多い板の質問スレで「専門板は過疎っているので…」といって
専門的な質問をする人がいるけど、だいたい放置されてるな
知ってる人が現れないうえに、流れが速いからすぐ埋もれてしまう
回答を催促すると結局専門板に誘導されるという

>>814
小さいウインドウにしたら二段になるので固定して横にスクロール出来るようにしたいのですが
つまりオーバーフローってことですよね？
どうやってもできません＞＜
教えてください
http://jsfiddle.net/yh8yf/

こんな風に固定したいです
http://uploader.sakura.ne.jp/src/up80797.jpg

overflow:hiddenにすればスクロールが出てくると思ってるのか・・・？

君はもうちょっとoverflowのことをググったほうがいい

まぁ、答え書いちゃうけど
二段云々についてはmin-widthで最小幅を固定するか普通のwidthで固定サイズでやれば二段になることはないよ。

>>818-820
ありがとうございました<m(__)m>

>>813
ありがとうございます
どういう仕組みかきれいに幅が文字にそろいました
ただ、回り込みが発生しまくって、デザインが大幅に崩れてしまいました…
float: left;無しの方法はないでしょうか？

普通に需要貼ると思うのに、調べても全く出てこない…
同じくabsoluteも無しの方向で

調べてもでてこないのか。

>>824
ありがとうございます
できました

CS5 を使用しています。

フォルダごとまるごとすべて置換しようと思いました。
　　↓
置換するフォルダを選びました。特に共有とかもしてません。
　　↓
なんか、エラーメッセージがでてきました。
　　↓
DW 「次のファイルはロックされているか、チェックアウトできません:」
　　↓
　　WHY ??

HTMLで質問なんですが…
サイトのタイトルがABCだとして、お気に入り(ブックマーク)に登録した際の名前はDEFにすることは可能でしょうか？

可能です。
ブラウザの「お気に入り」や「ブックマーク」をクリックしたら
名前(N)って書いてるとこの右のテキストエディットボックスにお好きな名前を入力してください

>>828
HTML内で設定することはできませんか。

JavaScriptを使えば、任意の名前でお気に入りに追加するリンクやボタンを
作成できます。ただしIEでしか動きません。

普通にお気に入りに追加する際に名前だけ変える、というのは無理です。

>>830
そうですか…ありがとうございましたm(_ _)m

ナビゲーションバーなどでマウスカーソルを合わせると色が反転したりアンダーラインがでたり画像が変わったりするのは
疑似セレクタの「a:」を利用するのでしょうか？
全てのリンクをそういう風にしたくない場合はクラス値を設定してもいいのでしょうか？

別にいいよ

DreamweaverCS5スーパーリファレンスという本を
片手に、今サイトを作ってます。
htmlはチラっと横目で見る程度、初心者です。

更新系のブログサイトを作ろうと思ってます。

だいたい大まかにはできたんですが、気になることが
１つあって質問しにきました。

ザイーガという更新系ブログのソースを見ていたんですが
「夫より陥没穴に・・」というタイトルの記事で、

<script type="text/javascript"><!--
if (ld_blog_vars) {
ld_blog_vars.articles.push({
id : '53624507',
permalink : 'http://www.zaeega.com/archives/53624507.html',
title : '夫により陥没穴に投げ入れられた瀕死の女性の救出劇（ロシア）',
categories : [ { id:'10017239', name:'動画', permalink:'http://www.zaeega.com/archives/cat_10017239.html' }, { id:'10017255', name:'ハプニング・衝撃', permalink:'http://www.zaeega.com/archives/cat_10017255.html' } ],
date : '2012-01-30 12:00:22'
});
}
//-->
</script>

と、書いてありました。
ハム速のソースをみても、記事のところに同じようなことがかかれてありました。
本にも載ってなかったのでぐぐったんですが、わかりませんでした。
これをつかうと、更新がしやすくなるんですか？？
詳しい方教えてください

イチからブログ作るつもりなんですか？
普通はWordPressとかMovableType使いますけど。

CMSのシステムまで自分で作るって今の>>834には無理だと思う
更新しやすくするっていうのはつまりそういうことでしょ？
>>835が言ってるようにフリーのCMSを使った方がいいと思う
それが嫌ならブログサービスを使うかやっぱり1からCMSを自分で作るしかない

パソコンのマザーボードから作るのと同じだな

>>835
>>836
なるほど！そんな便利なものがあるんですね、
助かりました、ありがとうございます。

このスレに来てなかったら、よくわからないブログっぽいものを作ってるところでしたｗ

>>834
それはLivedoor Blogで生成されたページすべてに挿入されるタグね
ブログパーツが記事の情報を取得できるように挿入されている

今はまだ気にする必要はないものってことで

相談させてください

１・今までＩＥ６、７問題をＣＳＳハックで直してきたのですが、条件付きコメントというものを知り、そちらに切り替えようと思っているのですが
条件付きコメントのほうが推奨されているそうですが、条件付きコメントが万能ならＣＳＳハックなんて誰も見向きもしなかったでしょうし
ＣＳＳハックのほうが、条件付きコメントより優れている点は何かあるのでしょうか？

２・スマートフォンやＰＣの色々なサイズのブラウザに対して、綺麗にレイアウトできるように
CSS3を使ったMedia Queriesを試してみたいのですが、ＩＥ6・7ではＣＳＳ3に対応していないとの事。
ＣＳＳハックや条件付きコメントで対策を行えば、ＳＥＯやレイアウトで問題なく作れるのでしょうか？

1に関してはどっちを使おうと効果は同じ、だが条件付きコメント使うことで今後誰が見ても扱いやすくなるという点ではおすすめできる。
2については以下をみればいい
http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/

長文失礼します。

仕事でhtmlを使用しているのですが、同じチームの人が、aタグの相対パス部分を、自分のテストサーバーのローカルの絶対パスで指定した状態で納品してしまい問題になっています。
その人はDMとWebContentsViewerを使用して作業していて、知らない内に勝手にパスが書き変わっていたので気が付かなかったと言ってます。
私はNotepad++を使用して作業しているため、上記の2つに関しては全くさわったことがないのですが、相対パス部分が勝手に書き変わるなんてことがあるのでしょうか？

どなたか分かる方がいましたら教えてください。
お願いいたします。

>>840
1.条件分岐と比べたCSSハックのメリットは、meta付近の
ソースコードが汚れないのと、サイトパフォーマンスにおいて
優れる点があげられるかな。
条件分岐だとCSSを複数読み込む必要があるから、
サイトパフォーマンスが低下する。
あとは扱うファイルが単純に少なくなるのもメリットだと
思いますね。

2.出来るけどIE6,7の完全対応は厳しい。
CSS3再現用のJSやビヘイビアを読み込む必要があるから、
IE6,7閲覧時に重くなったり、レイアウトが完全に再現
出来なかったりするので。


>>840
DWはデフォルトでhtmlファイルを階層をまたいで移動する際に、
相対パスを書き換える機能がありますね。
自分は絶対パスに書き換わることはないんじゃないかなと
思うけど、何らかの設定が原因でそうなる可能性もあるかも
しれません。
WebContentsViewerについては使ったことがないので、
参考になれば。

間違えた。。。
後ろのレスは>>842宛ですorz

>>843
ありがとうございます。
その人のDWの設定を調べてみます。

なんか昔サイト定義で書き換わる嫌な思い出があったような・・・

みうの新作キタッ。
『googleから「不自然なリンクが付いています」というメールが来ないようにリンクを付ける方法』
⇒http://report.seo-miu.com/

W3C準拠の日本語の仕様書を探しています
「Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト」
↑この本が調べた結果一番高評価だったのでこれにしようかと思っていたのですが
発行が2005年ともう7年前なのでやはり色々と仕様が変わっていたりするのでしょうか？

以前はimgのalt属性に何か書いておけばロールオーバーで表示されなかった？
いつからなくなった？

altでツールチップってIEだけじゃないの

>>848
この本の内容を全部読んでフンフンと全部知っていると思えるなら
別の本を買ってもよいと思う。

この本が日本でのWeb標準の基本教科書とも言えるもので、
益子氏はこの書籍を書いただけで一目置かれている。

>>851
どうもありがとうございます
とりあえずこの本を買ってみて一通り読んでみることにします
改訂されてることもあるとは言え基本は大事なので

スレ違いのような気がするのですが質問させて下さい｡
当方html5でブログを作成しています｡下記のサイトで構文をチェックしたのですが <![if !IE ]> <![endif]> の [ の部分がBogus comment.と表示されます｡
html5では <![if !IE ]> <![endif]> のタグは使用できないのでしょうか｡質問は以上です｡長文失礼しました｡
ttp://html5.validator.nu/

<!--[if ! IE]>-->
<!--<![endif]-->

というか
<!--[if IE x]>
<!--[if lt IE x]>
<!--[if gte IE x]>
これだけあれば十分じゃないの？

>>850
IEでもいつからか出なくなってるよ
出るブラウザある？

853です｡
>>854 >>855 両名のご指摘を受け文法を変更した所､無事問題の解決に至りました｡
御礼申し上げます｡ありがとうございました｡

<div id="menu">
<ul>
<li><a href="sample.html">AAA</a></li>
<li><a href="sample.html">BBB</a></li>
<li><a href="sample.html">CCC</a></li>
<li><a href="sample.html">DDD</a></li>
<li><a href="sample.html">EEE</a></li>

</ul>
</div>
のメニューバーのBBBにだけをドロップダウンさせたいのですがうまくいきません
ドロップダウンのcssとjsは拾い物ですがどうしたらよいでしょうか

ドロップダウンのcss↓
body {margin:25px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}

ドロップダウンのjs↓
var DDSPEED = 10;
var DDTIMER = 15;

// main function to handle the mouse events //
function ddMenu(id,d){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if(d == 1){
clearTimeout(h.timer);
if(c.maxh && c.maxh <= c.offsetHeight){return}
else if(!c.maxh){
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}else{
h.timer = setTimeout(function(){ddCollapse(c)},50);
}
}

// collapse the menu //
function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}

ドロップダウンjsの続き↓
// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh){
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}

// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
var currh = c.offsetHeight;
var dist;
if(d == 1){
dist = (Math.round((c.maxh - currh) / DDSPEED));
}else{
dist = (Math.round(currh / DDSPEED));
}
if(dist <= 1 && d == 1){
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
clearInterval(c.timer);
}
}
連投申し訳ございませんがご指南よろしくお願いします

配布主に聞けよ

てか配布元のデモではちゃんと動いてたの？
そのままコピペして使ってるの？

動きました
headで読み込ませて対象の部分にコピペしてidやclassいじってみましたがレイアウトが崩れます

ごめん。
配布先教えて。

li要素にクラスやID指定するものじゃないの？

配布元見つけた。
HTMLソースから根本的に間違ってる。
CSSやJSではdl、dt、ddが使われてるのにHTMLにはその記載が見当たらない。

それにイベント表記もないから上と合わせて当然動くはずがない。

一応配布していたサイトです
宜しくお願い致します
http://solidstate.jp/Navigation/DropdownMenu/script_4.html

細かいことはいいんだよ！

<div id="menu">
<ul>
<li><a href="sample.html">AAA</a></li>
<li>
<div id="wrapper">
<div class="dropdown">
<h3 id="first-ddheader" onmouseover="ddMenu('first',1)" onmouseout="ddMenu('first',-1)">BBB</h3>
<div id="first-ddcontent" onmouseover="cancelHide('first')" onmouseout="ddMenu('first',-1)">
<ul>
<li><a href="#">BBB 1</a></li>
<li><a href="#">BBB 2</a></li>
<li><a href="#">BBB 3</a></li>
</ul>
</div>
</div>
</li>
<li><a href="sample.html">CCC</a></li>
<li><a href="sample.html">DDD</a></li>
<li><a href="sample.html">EEE</a></li>

</ul>
</div>

こうすればいい

あごめん。
<div id="wrapper">は消してね

親タグを選択でclass=mainを選択した後、親タグの内側のtestを選択状態にするオプションが欲しい、adobe実装してくれないかな

<div class="main">
test
</div>

で、>>858は解決したの？

この右の「理想」のようにしたいのですが、解決方法とかあるんでしょうか？
#aの高さは変わったりするので#cのheightを284pxにする方法はちょっと無理でした
http://fsm.vip2ch.com/-/hirame/hira072466.jpg
<div id="a">
　　 <div id="b">
　　 <div id="c">
　　</div>
</div>

#a{
　　　width:300px;
　　　height:200px;
　　　left:320px;
　　　top:120px;
　　　background-color:#CC66FF;
　　　position:absolute;
　　　overflow:hidden;
　　　border:4px solid;
}
#b{
　　　height:20px;
　　　background-color:#33FF33;
}
#c{
　　　background-color:#00CCFF;
　　　border:8px solid #FFFFFF;
　　　height:100%;
}

<div id="a">
　　 <div id="b"></div>
　　 <div id="c"></div>
</div>

#a{
width:300px;
height:200px;
left:320px;
top:120px;
position:absolute;
overflow: hidden;
border:4px solid;
}
#b{
background-color:#33FF33;
}
#c{
background-color:#00CCFF;
height: 160px;
margin: 10px;
}

さっきサイトいじってて思ったんだが､マーキーって時期に廃止されるんだよな

まじで？マーキーモジュールごと廃案になるん？

>>874
まだ標準化されている途中だと思ったけど、廃案されることが確定していて標準化する？
具体的にはいつ廃案になるの？

>>876
私もいまいちよく分からんのだが下記のサイトにて それっぽい事が記載されてた
ttp://www.tagindex.com/html_tag/basic/absent.html
ちなみにhtml5だが･･･

>>877
そこ独自拡張要素もあると書かれてるけど廃止はやっぱり語弊があるな
marqueeはHTML5で標準化される予定だからtagindexが間違ってる

marqueeはCSS3で標準化される予定だからtagindexは間違ってません

>>878
語弊か その通りだな
html5に付いていけるか心配になってきたorz

>>879
HTMLとCSSは区別しようぜ

教えてください。

<div>
<a href="">
<p>黒文字</p>
<p class="red">赤文字</p>
</a>
</div>

.kana {
color: red
}

a:hover {
color: blue
}

上記のように、黒と赤の混じったテキストがあって
それをリンク指定一箇所で一括指定して
マウスオーバー時には全て青に変わるようにするには
どうやったら可能でしょうか？

上記のままだと、赤文字部分がマウスオーバー時も色が変わりません。
素直にaタグを2箇所に分けてpタグの中に入れるしかないでしょうか？

>>881
HTML5では標準化されないよ

>>882
a:hover *{
color: inherit;
}

divに直接インラインでCSSを適用させるにはどうすればいいんですか？

<div style=" 適用したいスタイルを書く ">
</div>

先ほどの質問が足らなくてすいません。

dreamweaver使ってるんですけどインラインスタイルを書くのに手入力しか方法はないですか？
のツールを使って楽に入力したいんですが。

dreamweaverってメモ帳とかみたいにアイコンWクリックしてすぐ起動できるようにできないの？最初のやつで時間がとられる

自己解決できました。

くだらない質問で失礼しました。

>>888
なんという馬鹿ｗｗｗ

>>884
ありがとうございました。

>>880
すまん、HTML5では標準化されてなかった。
http://www.w3.org/TR/css3-marquee/

>>882
aの中にpを入れるな

>>893
HTML5を使用している可能性は…。

>>892
これは？
http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#the-marquee-element

間違えた。
>>895は>>883宛ね。

cs3のライブラリ機能で困っています。

ライブラリの更新を書けると、htmlのライブラリコードの前後に

</span>ライブラリコード<span>

と、spanコードが前後逆に勝手に挿入されてしまい、更新のたびにページ全体が崩れます。

( ´･ω･`)どこの設定をいじれば治りますか？

>>895
なるほど、HTML5の仕様書で「marquee廃止」って言ってるのか
HTML4.01とかに無いんだから、HTML5の仕様書の書き方に語弊があるな

>>898
どこかに「廃止」と書かれてた？
「時代遅れ」はあるけど「廃止」は見つからなかった。
ちなみにHTMLMarqueeElementはwebkit以外はサポートしてる。

> Obsolete features

>>900
ありがと。

tes

マルチということでなく誘導されたのでこちらで質問します。
こんにちは！初心者ですが質問します。すれ違いなら誘導してください。
いまdream weaver cs5というのを使っていますが、アセットというパレットの
設定のしかたがよくわかりません。ネットで検索したらサイト全体の画像が
表示されるとでているのですが、サイト全体だと自分の管理法もあるのですが
物凄い量の画像が並んでいます。
やりたいことは、このアセットというパレットに今作成しているpageのimages
のフォルダ内の画像だけ表示されて、クリックでプレビューが確認できると
いいのですが、そういう事が可能かどうかもわかりません。
それと、画像を複数挿入した時　プロパティというパレット内の縦とか横の数値が
画像によってバラバラなので、統一したいのですが、縦横変倍がかかってしまい
ます。縦横比を固定して数値を入力できるものでしょうか？

pタグってliタグの中に入れてもいいんですか？

ulとliはセットです。

<ul>
<li><p>内容</p></li>
<li><p>内容</p></li>
<li><p>内容</p></li>
</ul>

このような書き方は文法に問題がありますか？

俺も気になる、誰か教えて＼(^o^)／