【Dreamweaver】HTML/CSS質問・優しく答えるスレ２

>>928です。
>>930を試してみましたが駄目でした。
また、HTTPヘッダを見てみました。無知なのでどこまで晒しても大丈夫かわからないので関係ありそうな部分だけ抜き出してきました。
Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7
Accept-Language: de,en;q=0.7,en-us;q=0.3
ここらへんでしょうか？

どうやらファイルをアップロードする時になにかあるのではと思いました。
FFFTPを使っているのですが、index.php（ファイルを開いてみても文字コードはSJIS、文字化けなし）をアップロードすると、
EUCになってしまいます（このとき文字化けはしていない）
また、上記のファイルの拡張子を変えただけのindex.htmlをアップロードすると、きちんとSJISで文字化けなしで表示されました。
もしかしたらFFFTPの設定が悪いのかもしれません。
どなたかお願いします。

リクエストヘッダじゃなくてレスポンスヘッダな
IEだと無視するから関係ないけどFirefoxの場合レスポンスヘッダとファイルの文字コードに違いがあると化ける

>>936です。
>>939の回答を踏まえて方法を変えましたがうまくいきません。

練習中につき、なるべくスマートな方法を習得する目的で
いったん全セルに背景以外のスタイルを指定して、
背景を追加したい該当セルにのみ追加のスタイル指定をする意図ですが
まったく背景が表示されません。（リンクの有無は関係ないのでソースは簡略化しています）

●css
----------------------------------
.abc {
font-size: 12px;
padding-left: 20px;
}
.abc .sub {
background-image: url(../img/icon.gif);
}

●xhtml
----------------------------------
<tr><td class="abc">背景なしです</td><td>…</td></tr>
<tr><td class="abc sub">背景ありです</td><td>…</td></tr>

参考にしている本では、<div class="abc sub">という記述をしているのですが
<td>要素だとダメなのでしょうか？
<li>要素でも同様のエラーが出てしまって、同一要素に対して2つのクラス指定をして
1つのみの適用と、2つ両方の適用をさせるテクニックが再現できません。
原因を教えてください。

>>954
CSSの基本であるセレクタを理解していないので勉強をした方がいい
ttp://hp.vector.co.jp/authors/VA022006/css/selector.html

一応教えてやると.abc .sub {}が間違ってる
.sub {}が正解。参考にしてる本もそうしてあるだろ？
class="abc sub"は.abc {}と.sub {}の両方を反映する

↓の場合は.abc .sub {}でいい
<td class="abc"><a class="sub">hoge</a></td>
あまり関係はないけど.abcをtd.abcに変えておくと他の要素でも同じクラス名で別のプロパティを指定できたりする

セレクタのパターンこんなにあるんやね
参考になった

いっぱいあるけどIE6のせいであまり使えない

隣接セレクタさえあればidもclassも使わなくていいんだけどなぁ。メンテしづらいだけだけど
せめて:before,:afterさえ使えれば表現の幅が広がるのに

>>966
どうもありがとうございます。
できました。

しかし参考にしている本（の付録のソース）では何度確かめても
確実にabc .sub {}となっているように思います。。
なんでだろ？？　たぶん何か見逃しているのかも。
お陰でだんだん理解できてきました。

>>960
abc ,sub じゃねえの？

>>960
セレクタ理解してたらそんな書き方しないからさ…

>>961
.abc, .sub だろｗ
うそ教えんな

×　abc .sub {}
○　.abc .sub {}
でした。変ですね。。。

>>963の　.abc,.sub　 はclass「abc」とclass「sub」へ同じ指定をする記述
>>964の　.abc .sub　はclass「abc」の要素内にあるclass「sub」への指定
 　　　 　 　.abc.sub　 はclass「abc」とclass「sub」の両方が設定された要素への指定　ね

>>965
三つ目はIE7未満では上手く動作しないから人に教えるのには向いてない
IE7未満の場合はCSS側の複数のセレクタのうち最後のセレクタ、つまり.subしか見ないから
<td class="sub"></td>でも反映されてしまう。まぁ>>954のケースなら問題ないわけだけど
ちなみにjQueryを利用すれば上記のバグを解消できる。加えて隣接セレクタなんかも利用できるようになるから便利

td[class="abc sub"]

チラシ風のデザインをHTML化してくれ。
と頼まれて、PhotoShopファイルをもらったんだが、
どうスライスすればいいのか悩む。

チラシ風のデザインを残したい。
というのだが、とりあえずテキスト化したいところを
テキストできるようにスライスすればいいのかな？

でっかい写真画像があったり、角度がついた斜めの写真画像を沢山つかっているのね。
まさにWEBを無視した紙デザイン！

そこでCSSで絶対配置できるように（通常のウェブページと制作するのと同じように）
丁寧にスライスしていくんだけど。

「スライスすることに意味あるの？」
「一枚画像でいいんじゃね？（もちろんSEO対策を取れた上で）」

とか思うようになってきた。

いわゆる大企業の、デザイン化されたページをみても、
堂々と、写真画像をど真ん中でスッパリとぶった切っているのを
見つけたりもする。
また、デザイン構成を無視したスライスを見たりもする。

正しいスライスって良くわからなくなってきた。
悩むなあ。同じようなこと考えている人いない？

そんな重いページは作らない

いやあ。重いっていってもFlashとか使うより遥かに軽いよ。。

>>968
スライスはたいして難しくないっしょー

手抜きしたかったら
　チラシをスキャン
　イラレでpdf保存
　リンク先をチラシ.pdf
これでいくないですか

pdf化は、それはさすがにｗｗｗ

今考えているのは、
�@丹念に構成要素ごとスライスしてCSSで必至に再構築

�Aテキスト以外を抜いて大雑把にスライス分割。
（ページを3分割するぐらい。）
それらを背景画像にさせて、テキスト箇所を絶対配置させる。

�B全部画像wwww。

>>971
グーグル先生や読み上げブラウザが
それで文字を読み取ってくれるならそれでいい

>>968
そもそもスライスしろと言われたのか？
わからないなら「ここをどうしましょう」って聞いて
要望をもらうのが一番丁寧な対応だと思うよ。

相手は紙専門のデザイン会社。あんまりウェブには詳しくない。
だから、スライスの事とかHTMLの事とかは知らないようです。

「ここをどうしましょう？」という具体的な事じゃないけど。
こういうの受けたら、みんなどうするの？と訊いてみたいのです。

元を見ないとわからん

>>970
バーカ、Flash自体は重かないよ
でかいサイズの画像をまとめて埋め込むから重くなるだけ
無知なくせに知ったかすんなｗ

こんばんは。質問のほうお願いします。
現在画像の回り込みをやろうと思っているます。
ｈｔｍｌのほうが
<div id="main">
<ul><li>"平沼グループ"で新党を結成へ</li>
<li>世界のグルメ都市、日本は３位に</li>
<li>新型PS3は1万円値下がりか</li>
<li>藤川議員の"前のｂｌｏｇ"に異変が</li>
<li>誰ともまともに付き合わない岩村</li>
<li>亀田興穀、弟に対戦取られ複雑</li>
<li>来日中の地震遭遇でパニックに</li>
<li>朝の連ドラ"変な展開"で台無し</li>
<li>"インフレが後押しした住宅購入"</li></ul>
<img src="udon.bmp" class="mainimage"alt="19歳なのにおじちゃんよばわり">
<hr width="92%">
<span class="footer"> 注目のワード：サマージャンボ　Ｋ−１　時をかける少女　心霊スポット　伊藤美咲</span>
</div>
ｃｓｓのほうが
.mainimage{float:right;}
#main{
width: 500px;
height: 900px;
float:left;
font-size:small;
list-style-type:disc;}
と記述しております。

そして画像のほうもうまく表示されたのですが、
位置が垂線と
<span class="footer"> 注目のワード：サマージャンボ　Ｋ−１　時をかける少女　心霊スポット　伊藤美咲</span>
のところで回り込みがされてしまいました。私は
<ul><li>"平沼グループ"で新党を結成へ</li>
<li>世界のグルメ都市、日本は３位に</li>
<li>新型PS3は1万円値下がりか</li>
<li>藤川議員の"前のｂｌｏｇ"に異変が</li>
<li>誰ともまともに付き合わない岩村</li>
<li>亀田興穀、弟に対戦取られ複雑</li>
<li>来日中の地震遭遇でパニックに</li>
<li>朝の連ドラ"変な展開"で台無し</li>
<li>"インフレが後押しした住宅購入"</li></ul>
の右に画像が表示されてほしかったのですが
これはどのように改善したらよろしいでしょうか？

例えば、こんなスライスってあり？
http://www.toyotomiusa.com/

そりゃまあ。空のflashは軽いけど。
概して表現としてflash使わないといけないような、ページだと
swfファイルは普通に重いと思うが。

すみません。質問させてもらったのですが少し進展が
ありまして、
<div id="main">
<img src="udon.bmp" class="mainimage"alt="19歳なのにおじちゃんよばわり">
<ul><li>"平沼グループ"で新党を結成へ</li>
<li>世界のグルメ都市、日本は３位に</li>
<li>新型PS3は1万円値下がりか</li>
<li>藤川議員の"前のｂｌｏｇ"に異変が</li>
<li>誰ともまともに付き合わない岩村</li>
<li>亀田興穀、弟に対戦取られ複雑</li>
<li>来日中の地震遭遇でパニックに</li>
<li>朝の連ドラ"変な展開"で台無し</li>
<li>"インフレが後押しした住宅購入"</li></ul>
<hr width="92%">
<span class="footer"> 注目のワード：サマージャンボ　Ｋ−１　時をかける少女　心霊スポット　伊藤美咲</span>
</div>
のように変えましたら一応<hr>の上には行って
画像も右に表示されました。しかしだいぶ
リストの文と画像にすき間ができたのですが
これはなぜでしょうか？

>>979
ないわ

なしでしょw
切り取りが雑すぎなのと、htmlエラーそこまで出してたらﾔﾊﾞｽ

>>981
main{width:500px;}だからだろ

widthの方を少しイジってみて400pｘにしてみました。
そしたら
<span class="footer"> 注目のワード：サマージャンボ　Ｋ−１　時をかける少女　心霊スポット　伊藤美咲</span>
の行が1行で収まっていたものが2行になってしまいました。
これはしょうがないものなのでしょうか？できたら一行でおさめたいのですが。。。

ないよねwww。さすがに。
ま、htmlのエラーはちょっと無視させてもらって。


でもさ、スライスが雑なのはわかるんだけど。
それが、どんなペナルティになるのかな？（SEO的に？）

キチンと商品べつにスライスできたら、
どんな利点があるのかな？

それって、なんだか作成者の意地というか？良心というか？
プライドというか？

そんなものなのかな？

>>986
スライスとかって、HTMLにする意味なくね？

そう！！
>HTMLにする意味なくね？

そこに行き着くｗｗｗ。

昔はさ、スライスすることで画像のサイズを抑えるという
目的あったけど。今は昔ほど容量に気をつけなくてもよくなってきたから。
なおさら。

人は何故それをスライスするのか。。。と悩む。

>>985
main{width:auto;}
あとclass="mainimage"alt="19歳なのにおじちゃんよばわり" がくっついてる
ちなみに知ってるかもしれないけど、画像を見ないときの代替コメントがaltで、ポップアップはtitleだからね

といろいろ愚痴を書き連ねたが。
基本は正しいHTML構文が書ければよい。そこに最大の目的を置くべきかと
今、思った。

その為に必要に応じてスライスしていくということかな。
スライスすべき画像の大きさに気を取られてたのかもしれん。

はい。ありがとうございます。
ｗｉｄｔｈのほうをａｕｔｏにしてみたところ
３カラムでの右っかわが下にずれ落ちてしまいました。
これはｆｌｏａｔの指定が間違っているのでしょうか？
#main{float:left;}
#sidebar{float:left;}
#right{float:right;}
という風に指定しております。

>>991
ソース貼れよ

次スレテンプレ案

スレタイ：(X)HTML/CSS/Dreamweaverの質問に優しく答えるスレ3

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

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

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

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

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

■前スレ
【Dreamweaver】HTML/CSS質問・優しく答えるスレ２
http://pc11.2ch.net/test/read.cgi/hp/1245601603/

#wrapper{
width:900px;
}

#main{
width:auto;
height: 900px;
float:left;
font-size:small;
list-style-type:disc;
}

#sidebar{
font-size:small;
list-style-type:disc;
width: 200px;
height: 900px;
float: left;
}

#right{
width:200px;
height:900px;
float: right; }
cssの方のソースがこちらのほうになっています。

>>981のソースで、
画像とulの間の余白は400pxと、imgの横幅とulの横幅を加えたものの差になる
hrはデフォでブロック要素だったような気がするしdisplay: block;はいらないかも
imgタグを使わなくてもいいんなら#mainに背景画像として適用して、ulにマージンつければ解決
div#main {
width: 400px;
略
}
div#main img {
display: block;
float: right;
width: 画像のサイズ;
}
div#main ul {
float: left;
width: 400pxから画像のサイズを引いたもの;
}
div#main hr {
display: block;
clear: both;
}

あと、imgにはwidth,heightを指定した方がいい

>>974
専門用語を一般用語に言い換えて説明
曖昧な言葉に対し、「こういうことができるんですよ」とWebをみせて定義
「ここはお前に任せるわ」という言葉を引き出す

スーパーのチラシなんかなら１枚絵でそのまま載せても
閲覧者はチラシを見にきてるんだからいいと思うけど、
印刷物のチラシをそのまま載せることに意味がない場合は
WEB用にコンテンツを作り直すのがベストというかマストだなあ。

スライスは、サーバーのレスポンスが悪い場合
ファイルの数だけリクエストが発生してストレスの元になるので
回線が太くなった今となっては諸刃の剣になりつつあると思う。

1000なら、のりぴー不起訴

そっか。今は容量よりファイル数がネックになる事もあるよね。
yahooサイトとか、細かいポイント画像とかは全て1枚画像収めていて
いてそれをCSSで配置してるって聞いたことある。

細かいスライスは意味ないかもね。

次スレ立ててみます

このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。