10/12/11 22:54:22
,で2つ入れれ
201:Name_Not_Found
10/12/12 00:10:00
javascriptでやれ
202:194
10/12/12 00:31:18
＞,で2つ入れれ
a[href^="URLﾘﾝｸ(www.yahoo.)"][href$="co.jp,com"]
こういうことでしょうか？これでも動きません・・・
>>201
CSSでは「または」の表記はどうするのかなと疑問に思いまして。
203:Name_Not_Found
10/12/12 00:43:24
>>195
204:194
10/12/12 00:48:42
>>203
>>202で
a[href="URLﾘﾝｸ(www.yahoo.co.jp)<)"]
と書いたのですが・・
この記述法以外の方法をお尋ねしているのですが・・
205:Name_Not_Found
10/12/12 01:35:28
>>204
で、何を聞きたいの？
206:194
10/12/12 03:07:13
>>205
ですから、CSSで「または」って言う意味を表す語句はなんですか？と最初からお尋ねしているのですが。
207:Name_Not_Found
10/12/12 06:56:04
>>195を最後まで読め
208:Name_Not_Found
10/12/12 11:09:26 QyA57snE
>>194
どうしてこう日本語が通じないのか・・・
「,」区切りでは思ったように動作しなかったって事なんだろ？
だったら>>195に書いてある通りJavaScript使え
もしくは目的のリンクに全部同じクラスを振れ。
209:Name_Not_Found
10/12/12 12:14:25
>>194,199
"," がまさに「または」を表しているわけだが、あなたの期待する動作は「属性セレクタの属性値でOR演算子が欲しい」というところだろうか。
CSSセレクタには正規表現のような仕組みはない。
URLﾘﾝｸ(zng.info)
210:194
10/12/12 22:09:23
>>207-209
(ﾟ△ﾟ)!!
言われてみれば「,」がまさしく「または」の意味を持ちますね
希望通りの「または」の動作をしないのでつい・・失礼しました。
CSSでは私の思う通りの動作を行うことが出来ないと言うことで諦めます
みなさんありがとうございました。
211:Name_Not_Found
10/12/12 22:28:42
","は「または」じゃないだろ「アンド」だ。
212:Name_Not_Found
10/12/12 22:40:34
>>211
"," が AND なら「p要素 かつ class="hoge"」は
p, .hoge { color: red; }
で表せなければならない。
213:Name_Not_Found
10/12/13 16:42:45
>>212
>>211がカタカナで書いた意味を考えるといいんじゃないかな
214:Name_Not_Found
10/12/13 18:35:46
>>213
さっぱりわからん。
「または」でもなく AND でもなく「アンド」に特別な意味がある…？
215:Name_Not_Found
10/12/13 18:51:51
まぁ「または」でも「あんど」でもないのは明白
単に箇条書きだってば
216:Name_Not_Found
10/12/13 19:07:23
>>214
「AND」は「且つ」って意味でしょ？
そうじゃなくて「と」っていう意味で言いたかったから>>211はカタカナにしたんだと思うんだけど
217:Name_Not_Found
10/12/13 19:12:27
何その屁理屈
または、でいいだろ……
218:214
10/12/13 19:25:31
あー、論理学的な意味で AND を用いたわけではなかったのか。
「論理和」や「論理積」でぐぐってほしい。
>>194 の「または」は「論理和」を指していると思われる。(「論理和」「OR」「または」は全て同じ意味)
URLﾘﾝｸ(ja.wikipedia.org)
>>216
その解釈だと "「または」じゃない" と矛盾しないか？
「と」は「または」と同義だと思うのだが…。
219:Name_Not_Found
10/12/13 19:31:23
and と
or または
, 区切り
220:Name_Not_Found
10/12/14 06:57:52
body {
width: 700px;
margin-right: auto;
margin-left: auto;
}
として、bodyが真ん中に来るようにしてたんですが、
頭と尻の部分に横幅いっぱいの画像をいれるため、
bodyに
background: url(foo.jpg) no-repeat top center;
addressに
background: url(bar.jpg) no-repeat bottom center;
とやったら、address要素がbody要素の幅を継承しちゃって700pxの背景になってしまいます
bodyの横幅を継承しないようにする方法はありますか？
221:Name_Not_Found
10/12/14 07:59:54
>>220
addressがbodyの内側にあればそりゃそうなるでしょうよ
222:Name_Not_Found
10/12/14 08:11:15
>>221
『継承しない』って書き方はないってことっスか？
223:Name_Not_Found
10/12/14 08:12:26
bodyは幅100%にして
中に幅700pxのdivを入れれ
224:Name_Not_Found
10/12/14 08:15:15
>>223
代案をだすってことは、ないってことっスかね？
225:Name_Not_Found
10/12/14 09:52:58
>>220
継承もなにもaddressはブロックレベルでしょ
だったら幅指定がない限り100％（＝親要素と同じ）になるのが普通なんじゃね？
<div id="Container">
<div id="SiteWidth">
<address>--</address>
</div>
</div>
body { background: url(bar.jpg) no-repeat bottom center; }
#Container { background: url(foo.jpg) no-repeat top center; width:100%; }
#SiteWidth { width:700px; margin:0 auto; }
226:Name_Not_Found
10/12/14 09:59:44
>>225
親の幅におさまるのが普通だからこそ親の幅無視できる方法ねーの？ってイレギュラーな質問してんだろ
で、できねーの？
なんで屁理屈並べたがるかね
シンプルな質問じゃねーか
できる、できねー
能書き聞きにきてんじゃねーんだよ
と思いましたが
言わないで我慢しますね
回答ありがとうございました
227:Name_Not_Found
10/12/14 10:13:17
変なdiv使わねーで、addressにstyle指定。ブロックなんだから。
228:Name_Not_Found
10/12/14 10:26:31
>>226
狂人あらわる
229:Name_Not_Found
10/12/14 10:28:37
正論じゃない？
質問と無関係な講釈垂れたがる自称中級者が多すぎる
230:Name_Not_Found
10/12/14 11:44:19
なりすましの煽りでしょ
231:Name_Not_Found
10/12/14 12:01:30
回答者は代替案と述べた上で発言すべきだった
232:Name_Not_Found
10/12/14 15:42:07
>>226
久々に香しい逆切れ乞食だなｗ
初心者スレに来てそんなイレギュラーな深読み期待すんなよw
233:Name_Not_Found
10/12/14 15:47:11
700の箱に1000を詰め込もうとかｗ
234:Name_Not_Found
10/12/14 15:58:09
>>226
書かない我慢が出来てない時点で
モニタの前で叫んだ可能性すら否定できないww
235:Name_Not_Found
10/12/14 16:18:10
>>233
親より大きいものを入れることを想定してるoverflowなんかもあるし、あながちおかしな発想でもないと思う
236:Name_Not_Found
10/12/14 16:37:13
でも親要素からはみ出すことを想定した何かはないわけだから、おかしな発想だと思われるのも当然だよな
237:Name_Not_Found
10/12/14 16:46:29
>>220,226
質問はシンプルなんだが、多分前提知識が間違ってる。
あなたのいう「横幅いっぱい」が曖昧すぎるんだが、ウインドウサイズの横幅を指すとしたら CSS では不可能。
代替案としては JavaScript でhtml要素の幅を取得する。
子要素の width が親要素に影響されるのは継承による動作じゃない。
もし、width が継承するのなら親要素が 700px なら子要素も 700px にならなければならないが、そうなってないだろう？
URLﾘﾝｸ(hp.vector.co.jp)
URLﾘﾝｸ(hp.vector.co.jp)
CSSの仕組みを根本から否定するような発想だから、異発想と思われるのは仕方ないかと。
考えるのは悪くないが、CSS を良く理解して欲しい。
238:Name_Not_Found
10/12/15 03:03:41
Google Chromeでの文章の両端揃えは現状では無理なのでしょうか？
239:Name_Not_Found
10/12/15 03:43:32
とある事情により、8*8ドット日本語フォント「美咲フォント」 を使いたいのですが
URLﾘﾝｸ(ymem.web.fc2.com) （試作してみたページ）
Opera(10.63)で見ると、文字が歪んでしまいます。
ローカルで試しても、Web上で@font-faceを使っても結果は同じでした。
何故でしょうか…？
240:Name_Not_Found
10/12/15 06:45:58
Operaだから
詳細は本スレへ
241:Name_Not_Found
10/12/15 07:44:57
>>240
本スレ…ここでしょうか？
web制作管理板 Opera 質問スレッド Part22
ｽﾚﾘﾝｸ(software板)
どちらかというと製作者側というより、閲覧者側としての対処法のスレのように思えますが…
それとも、他に「本スレ」というものがあるのでしょうか。
242:Name_Not_Found
10/12/15 08:36:09
<html><head><style>
h3 {font-size:1em; width:1em; background:pink;}
</style></head><body>
<h3>ファイナルファンタジー</h3>
</body></html>
としたとき、ＩＥ以外では
ファ
イ
ナ
ル
ファ
ン
タ
ジー
となってしまうのですが、綺麗に縦書きするにはどうしたら良いでしょうか？
（スタイルをオフにしたときもおかしくならないようにしたいので、できたら<br />などを使わずに）
span {display:block;}
<span>フ</span><span>ァ</span><span>イ</span>（以下略）
とすれば綺麗にはなりますが、どうも府に落ちなくて…
243:Name_Not_Found
10/12/15 10:17:52
>>241
そこであってる
CSSの記述は関係なく、Operaのフォントレンダリング自体に問題抱えてるから
対処法はOpera製作元にバグ報告・修正要望出すくらいしか無い
244:239=241
10/12/15 11:59:41
>>241
web制作管理板じゃなくてソフトウェア板だった。
>>243
なんと…
素直に画像使うべきだろうか…
245:Name_Not_Found
10/12/15 19:27:09
img要素に対するbefore/after擬似要素が機能しないのですが、これはそういう仕様なのでしょうか
img:after { content: "hoge"; }
のように書いています
a要素やdiv要素などでは機能することを確認しました
動作確認をしたブラウザはIE8、Fx3.6、GC8です
246:Name_Not_Found
10/12/15 19:55:36
img:after { content: "hoge"; }
<img src="" alt="" />
↓
<img src="" alt="">hoge</img>
↓
エラー
247:Name_Not_Found
10/12/15 20:34:44
>>246
なるほど、理屈が解りました、ありがとうございます
248:Name_Not_Found
10/12/16 07:43:01
>>242
禁則処理がかかるからCSSじゃ無理
縦書きのプロパティも存在する（writing-mode）が、IE以外ではあまり対応してないぽい
縦書きは画面の構成上見やすいもんじゃないしどうしてもやりたいなら画像にすりゃいいんじゃないかな
249:Name_Not_Found
10/12/16 19:12:31
フッターを作ってます。
横長のdivに背景画像を入れて、divの中に、トップページ・料金等のテキストリンクをいれたいのですが
横長のdivの上下中央にテキストリンクを持ってこさせるには、どう書いたら正しいのでしょうか？
また中央ではバランスが悪いので、少し上下左右に調整したい場合も知りたいです。
宜しくお願い致します。
250:Name_Not_Found
10/12/16 21:02:55
テンプレのリンク先にある
251:Name_Not_Found
10/12/16 22:43:14
>>249
#footer {
background-image:url("～");
padding-top:3em;
padding-bottom:5em;
}
<div id="footer">初歩的過ぎる</div>
252:Name_Not_Found
10/12/17 05:36:19
>>245の件なのですが
Operaでは期待に沿う表示をしてくれました
これは非正規だけど都合のいい解釈をしているに過ぎないと考えるべきですか？
253:Name_Not_Found
10/12/17 09:59:30
解釈はブラウザごとに異なるからな。
非正規を都合良く解釈とか特にIEが顕著だけど、
その他のブラウザにだって無い訳じゃない。
254:Name_Not_Found
10/12/17 12:03:40
CSS3のメディアクエリなんですが
<link rel="stylesheet" type="text/css" href="large.css" media="only screen and (min-width: 481px)" />
<link rel="stylesheet" type="text/css" href="large.css" media="screen and (min-width: 481px)" />
上記の違いは
上はメディアクエリをサポートしてないブラウザとスクリーンサイズの横幅が481px以上のものに適用
下はスクリーンサイズの横幅が481px以上のものに適用
って解釈で合ってますか？
255:Name_Not_Found
10/12/17 12:44:25
違いますね
256:254
10/12/17 13:16:27
違った…orz
違いを解説して頂けないでしょうか！
257:254（偽物）
10/12/17 15:46:59
>>255
早く教えろよこの役立たず
258:255（偽物）
10/12/17 20:15:53
あほたれ わしはまだ勃つわい !
259:Name_Not_Found
10/12/17 20:37:16
idとclassに指定する文字は大文字と小文字のどっちがいいんですか？
ホームページビルダーを使うとhtmlタグは大文字から小文字に修正されるんですが
idとclassはそのまま変わらず、大文字小文字が入り混じって汚らしくなってしまいました。
260:Name_Not_Found
10/12/17 22:00:03
俺はローワーキャメルケースにしてる
261:Name_Not_Found
10/12/18 00:33:59
>>259
特に規則はない。自分でわかりやすい名前であればいい。
URLﾘﾝｸ(okwave.jp)
262:Name_Not_Found
10/12/18 00:50:02
divの枠を作って、その中に文章を入れてます。
枠の中で空白を作りＦＩＲＥＦＯＸで確認したら、枠自体が大きくなってしまって困ってます。
どうしたら、枠の大きさはそのままで、枠の中の文章と枠の間隔だけを空けれるでしょうか？
■html
<div class="system_textcontents">
文章
</div>
■css
.system_textcontents {
padding: 10px;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
background: #FFFFFF;
width: 726px;
}
263:Name_Not_Found
10/12/18 05:27:27
大きくなった分だけ小さくする
264:Name_Not_Found
10/12/18 05:30:49
>>261
ドキュメントタイプ次第では規則があるぞ
265:261
10/12/19 00:03:29
>>264
言葉が不足していたかもしれない。
アルファベット([a-zA-Z]) の大文字小文字で使えない文字はないという意味。
(X)HTML 系の文書で [a-z] が使えなかったり、[A-Z] が使えない規定はないんじゃないかな。
266:Name_Not_Found
10/12/20 15:15:04
>>262
paddingはwidthに含まれない
widthがautoの場合はpadding分も含めて自動調整するが
固定幅の場合は、width値＋padding値になるから
左右のpadding分を引いた分をwidth値にする
267:Name_Not_Found
10/12/20 20:03:04
企業のイントラで事務関係のWebシステム作ってるとこに配属されました。
rowspan、colspanたっぷりの複雑な帳票、フォームばかりなんですが、
こういったのってtableでカリカリ書くより他どうしようもないですよね？
みんなどうしてるのか気になるんですが、書籍見ても一般サイトの話しかないし、
xhtml + cssを謳ってる地方自治体も、どうもこういう帳票は他の誰かが作ってるようで
非推奨属性使いまくりだったりしています。
例
URLﾘﾝｸ(www.google.co.jp)
268:Name_Not_Found
10/12/20 20:27:24
企業であれこれやってるんだが、帳票の現物はエクセルで作成。配布はまんまかPDFで。
サイトにはそれをgifにして貼るだけでおｋなんだが・・質問の趣旨がもひとつわかんね。
269:Name_Not_Found
10/12/20 21:56:45 /eR/+iXw
IE8で互換モードから標準モードに切り替えると、次のような枠線が非常に暗い色になってしまいます。
<div style="border:4px groove">TEST</div>
互換モード時の明るい色が気に入ってたのですが、#FFFとか色指定してもまだ暗いんですよね。
標準モードの時に、可変サイズの枠を互換モードの時と同じような見栄えにすることはできませんか？
270:Name_Not_Found
10/12/20 23:09:02
>>269
仕様書には「溝っぽく見せろ」とだけ書いてある。その実装はUAによる。
groove,ridgeに頼っていいのはテキストサイトだけだ
271:Name_Not_Found
10/12/20 23:51:10
そういうことを聞きたいんじゃないんですけどね
272:Name_Not_Found
10/12/21 00:49:20
>>269
他も書いて欲しい
273:Name_Not_Found
10/12/21 01:00:59
>>268
ユーザーが入力する部分でのフォームはどのようにされていますか？
うちの場合では申請業務をWeb化するにあたり、
今使っている紙の申請書をそのままWebで再現しろという依頼があったので、
tableでrowspan, colspan付けて、できる限り紙媒体の様式をHTMLで再現しています。
プログラム組む方の人間で、デザインはド素人なのですが、
tableをレイアウトのために使用しないということ程度は聞いたことがあります。
ただ、先の様式x号みたいな形式のものは、そうせざるを得ないのではないかと思った次第です。
が、自信がないのでデザイン専門の方の意見を伺いたかったのです。
274:Name_Not_Found
10/12/21 03:54:23
>>273
紙まんまを再現しろとかいう要件を取ってくるなんて、三流の部署に配属されちゃったね…てのは置いといて
「表ではないもの」のレイアウトのためにtableを使うのが好ましくないのであって
「表」をtableで作るのはなにも間違ってない、そこんとこの区別はまず大丈夫だろうか
で、適当にURLﾘﾝｸ(goo.gl)を例にとって言うけど、まず用紙下部の「表っぽい」部分
俺はこういう帳票の理念については明るくないので正しくない指摘かもしれないが、これは情報としては表ではないと思う
でも体裁としては表であって、それを再現しろってんだから、表で作りゃいい
一方、この用紙の上部、いろんな文言とか表題とか、こいつらはまったく表ではない
だから、こいつらをまとめて一つのtableにぶっこむとか、そういうことは避けるべき
あとTextをうまくMarkupできないのは、自分がその文書をよく理解してないってことを意味するのは覚えとこうな
自分が何をやってるのかもよくわからず1000行の関数を書いちまうプログラマみたいなもんだ
275:
10/12/21 12:48:35
>>273
帳票って要するに書類だよな。
それは単に印刷して書類として使うもの？
それともwebページとして一般公開するの？
Web文書として公開するなら適切なマークアップをして
デザインやレイアウト用途でのtable乱用は避けるべきだけど
あくまでそれを紙の書類として使う為の印刷用ページなら
別にガチガチのtableレイアウトでも問題ないんじゃない？
そもそもweb文書として読まれる事を前提としてないんだし。
276:Name_Not_Found
10/12/22 22:18:29
>>275
広義には書類です。印刷用途の場合は大抵PDFで出力します。
それをiframeでブラウザ上で確認させろと言われることもあります。
狭義には検索結果の明細です。
例えばgoogleの検索結果をNoやサイト名、更新日時といった列で区切り
tableでやたらめったらcolspanとrowspanで
レイアウトしたら帳票と呼びます（業務系界隈では）。
デザイナーの方が見たら卒倒するものばかりです。
URLﾘﾝｸ(www.google.co.jp)
>>274
三流は部署であり会社であり、この業界だと思います。
COBOLの時代から大企業だろうが中小だろうが変わらない風習です。
2010年の現在でも「マウスは難しいからクリックしなくていいように」というユーザーがいる世界であり、
「先方の専務がああ仰っているので何とかするように」となる世界ですし。
何十年も昔からこちらから提案することなく、顧客のいいなりになっていたツケとも言えます。
ともかく、やはり「そもそもそのような体裁を取らない」というのが
真っ当な対応なのでしょうか。うちでは無理そうですが…。
277:276
10/12/22 22:22:18
google画像検索でいいサンプルがありました。
例えば、↓をWebでそのまま起こせと言われている状態です。
URLﾘﾝｸ(www.pca.co.jp)
278:Name_Not_Found
10/12/22 22:31:03 5ARHfYiS
WEBデザインについて学ばないといけないのですが、何かいい本はないでしょうか？
特にCSSについて学びたいです
279:Name_Not_Found
10/12/22 22:52:49
ネットに情報なんていくらでもあるのになぜ本を
280:Name_Not_Found
10/12/22 22:59:40
>>278
っつー事はだ、netの社会のはじっこで生きていくわけだよな ?
netの最大の利点は「情報の検索」と「情報の取捨選択」だ。
いい機会だからその「CSSの何かいい本」を検索してみたらどうだい ?
281:Name_Not_Found
10/12/23 01:31:37
良い事言った！
282:Name_Not_Found
10/12/23 11:09:20
>>280
馬鹿は書き込みしないほうがよいのでは？
話わからないなら消えろよ
283:Name_Not_Found
10/12/23 11:54:17
どうした 、 なんか嫌なことでもあったのか、相談のろか ?
284:Name_Not_Found
10/12/23 12:17:03
探す努力をしないやつが勉強できるはず無いよな
285:Name_Not_Found
10/12/23 13:10:45
子要素に img を持つ a ってどうやって指定すればいいですか？
286:Name_Not_Found
10/12/23 14:11:05
ない
クラスでも付けろ
287:Name_Not_Found
10/12/23 14:16:35
>>278
スタイルシート辞典（翔泳社）
288:Name_Not_Found
10/12/23 16:47:31
>>285
子要素って言い方を知っててなぜそれが分からないのか理解に苦しむ
289:Name_Not_Found
10/12/23 17:14:19
えっ
290:Name_Not_Found
10/12/23 17:32:41
やはり存在しませんか。ありがとうございました
291:Name_Not_Found
10/12/23 18:05:50
>>288
JavaScript や XPath ならともかく、CSSセレクタ では無理だと思うが。
292:Name_Not_Found
10/12/23 19:46:18
生きるの疲れた
293:Name_Not_Found
10/12/23 19:57:38
>>291
キーワードが解るなら調べられるだろ？って意味なんじゃね。
294:Name_Not_Found
10/12/23 20:32:38
>>293
キーワードで調べても分からないから聞いているんだろ、常考。
295:Name_Not_Found
10/12/23 20:33:46
そりゃそうだｗ
296:Name_Not_Found
10/12/23 20:37:07
>>292
自分の常駐スレかと思った
297:Name_Not_Found
10/12/23 21:05:40
>>293
ないものをないと判断するのは難しい。
仕様書を読めるなら別だが、それなら質問しないだろうし。
298:Name_Not_Found
10/12/23 23:13:39
classの位置って決まりっていうか推奨みたいなのってあるんですか？
<img class="abc" src="src.jpg" alt="src">
<img src="src.jpg" alt="src" class="abc">
こんな感じで前に来てたり後ろに来てたりサイトによってまちまちなんですが。
299:Name_Not_Found
10/12/23 23:19:58
決まりはない
どういう順番にするかは好みの問題だな
自分の場合はid→class→その他→イベントハンドラ、って順番にしてる
300:Name_Not_Found
10/12/23 23:54:43
>>299
自分の場合、大体同じだけど 必須タグ (imgの場合src, width, height, alt)を一番先にしているな
301:Name_Not_Found
10/12/24 01:04:42
CSSの理解はできても実践でどう使うかは難しい。
なんか、そのへんのいい入門書はないですか？
WEBサイトにおけるCSSの実際の例みたいなやつ
302:Name_Not_Found
10/12/24 01:07:15
おまえのブラウザは右クリックから
ソースを見ることも出来ないのか。
303:Name_Not_Found
10/12/24 01:09:21
>>301
実戦で難しいってのがわからん
htmlでプレーンな文書を作って、あと全部cssでレイアウトじゃないの
練習のつもりで何かやるんなら架空のwebサイトでも作ってみたら
304:Name_Not_Found
10/12/24 01:22:21
あちこちのサイトのソース見るのは良い勉強になるよな
305:Name_Not_Found
10/12/24 01:25:18
>>301
自分も初心者だけどカッコいいデザインのサンプル見つけて
そのCSSのパラメーターをいじったりして理解→自分でちょっとしたページ作る
ってのが面白いし理解しやすいと思う
まぁ基礎がしっかり身に付かないかもだけどモチベが保てるから継続して学べる
コリスとかかちびとのCSSサンプルは見てて面白いお（^ω^）
306:Name_Not_Found
10/12/24 03:57:32
>>299
どうもありがとう。
307:Name_Not_Found
10/12/25 17:25:17 RI9fhs9a
スタイルシートのセレクタって
divとかpとか無いと駄目なのか？
308:Name_Not_Found
10/12/25 18:08:14
あ？
309:Name_Not_Found
10/12/25 18:27:15
え？
310:Name_Not_Found
10/12/25 20:37:43
ぎ？
311:Name_Not_Found
10/12/25 21:08:06
ご？
312:Name_Not_Found
10/12/25 21:14:28
ぐ？
313:Name_Not_Found
10/12/25 23:07:12
>>307
タイプセレクタは必須じゃないよ
314:Name_Not_Found
10/12/26 15:17:40
>>313
ｻﾝｸｽ
そうなのか
pだと反映されるんだが
適当なのだと反映されなかったんだ
315:Name_Not_Found
10/12/26 16:37:18
>>314
「適当なの」が間違ってるんじゃない？
それだけじゃ何とも答えようがない。
316:Name_Not_Found
10/12/26 16:43:41
要は<div id="***"><p class="***">とかでなく
適当に<A id="***"><Z class="***">でもOKか？と聞きたいのだろう
317:Name_Not_Found
10/12/26 17:08:32
さすがにそれはないだろ
318:Name_Not_Found
10/12/26 17:38:24
それなんてspan？
319:Name_Not_Found
10/12/26 18:29:32
XMLなの？
320:Name_Not_Found
10/12/26 18:32:16
はじめてやります
いろいろおしえてください。
321:Name_Not_Found
10/12/26 18:33:05
>>320
はじめてかいとうします。
しつもんをおしえてください。
322:Name_Not_Found
10/12/26 18:33:13
はじめてやります
いろいろおしえてください。
323:Name_Not_Found
10/12/26 18:35:54
まずは浣腸をしてキレイにしましょう
324:314
10/12/26 20:39:01
>>316の通りだ
fとかkとかでやろうとしてた
pだと段落になりそうだと思ったんだ
325:Name_Not_Found
10/12/26 20:48:40
HTML勉強して来い
326:Name_Not_Found
10/12/26 21:15:19
>>324
それは CSS の話じゃない。
<z> を定義した DTD を用意してやれ。
それとも、不正な (X)HTML であることを前提にしているのか？
327:Name_Not_Found
10/12/26 21:27:20
>>324
文書型は何？
対応する仕様書を読め。
328:314
10/12/26 23:54:27
文章型はHTML 4.01 Transitional・・・
と思ったら書き損ねてた
もっと勉強して来る・・・
ﾚｽｻﾝｸｽ
329:Name_Not_Found
10/12/27 00:51:45
>>328
HTML4.01なら不正文書に対する規定はなく、実装依存。
URLﾘﾝｸ(www.asahi-net.or.jp)
何が目的か知らないが、不正文書にするぐらいなら <div class="z"> の方がまだマシ。
でなければ、HTML4.01 のDTDを元に自分でDTDを作る。
330:Name_Not_Found
10/12/27 04:46:15
#menu ul > li
{
}
などの > で指定するって大抵のブラウザでサポートされてますか?
331:Name_Not_Found
10/12/27 09:03:46
>>330
WinIE6以下以外はサポートされてる
332:Name_Not_Found
10/12/27 09:27:56
>>331
ありがとうございます。
安心して使えます
333:Name_Not_Found
10/12/27 13:14:22
しかしまだIE6は半数以上というところが多いがな、ははっ
334:Name_Not_Found
10/12/27 13:52:16
IEェ…こいつのせいでほんと手間かかる
335:Name_Not_Found
10/12/27 14:01:53
IE6使ってる奴ってなんなんだよ・・・情弱にも程があるだろ(´・ω・｀)
336:Name_Not_Found
10/12/27 14:35:33
どっちが情弱なんだか
337:Name_Not_Found
10/12/27 15:17:23
普通は8にアップグレードされるから情弱は使えないんじゃない？
338:Name_Not_Found
10/12/27 15:18:11
小さいエって、ブーイングのときに使う感じがするが
由来と読み方がわからない
339:Name_Not_Found
10/12/27 15:21:26
サスケェでぐぐれ
340:Name_Not_Found
10/12/27 15:42:54
>>337
勝手にはされないよ
あとOSによっては入れられないOSのところも企業では多い
341:Name_Not_Found
10/12/27 16:55:07
IE6でしか動かない 業務用ASPやサービスを使ってる会社もまだあるから なかなかね…
342:Name_Not_Found
10/12/27 17:34:41
会社のPCだと勝手には入れられなかったりするしね
権限持ってる人が情弱な可能性とか単に数が多くて面倒とかってこともあり得る
俺が前いたところも今年の夏の時点でまだ全台6だった
>>337
いつの間にか自動的にされるわけじゃないからそれは無いと思う
343:Name_Not_Found
10/12/27 23:53:04
うちも一応大企業に分類される会社にいるけど、IE6をIE7以上にアップデートすることは禁止されてる
344:Name_Not_Found
10/12/28 00:39:54
結局、IE6を使い続けているのはほとんどが企業ユーザーだということ
つまりそいつらを相手にするかどうかでIE6への対応を決めればいい
345:Name_Not_Found
10/12/28 06:03:13
ちょっと聞きたいんだけど、CSS3もう実務で使ってる？
346:Name_Not_Found
10/12/28 09:30:49
>>345
うｎ 一部サイトでは使ってる
古いUAだと再現はされないから、情報の閲覧には支障がでないようにするのが大前提だね
347:Name_Not_Found
10/12/29 18:15:15
<div class="clr"></divが出来るのですが"clr"とは何でしょう？？
348:Name_Not_Found
10/12/29 18:38:49
使ってるソフトのスレで聞け
349:Name_Not_Found
10/12/29 18:39:42
>>347
なに？クイズがしたいの？
じゃあ「上は大水、下は大火事。これなーんだ？」
350:Name_Not_Found
10/12/29 18:48:24
>>374
日本語でおｋ
351:Name_Not_Found
10/12/29 18:54:19 2o/k5x41
>>347
id、classは任意
352:Name_Not_Found
10/12/29 23:42:04 9Z+1uLrQ
>>300
altは必須だけどwidthとheightは必須じゃないよ。（HTML5ではaltも必須じゃなくなる。）
353:Name_Not_Found
10/12/30 19:35:39
現在、主にIE6（後方互換モード）,7対策で
・widthとpaddingまたはborderを同時に指定しない（widthの解釈）
・floatを指定した要素に左右marginを指定しない（IEで2倍になる）
・上下marginはできるだけ使わない（バグが多いような気がします）
上記のことを自分なりに決めてCSSを書いているのですが、他に注意するべきCSSのプロパティやそれらの組み合わせってありますか？
もしかしたら無意識のうちにやっているかもしれませんが...
354:Name_Not_Found
10/12/30 20:08:39
当然Fxでも確認してるよね ?
355:353
10/12/30 20:16:56
>>354
有り難うございます。
はい、最初はFirefoxで確認してその後IEとOperaで確認しています
chromeも追加しようかなと思っていますが...
356:Name_Not_Found
10/12/30 21:31:57
IE6は官公庁、大企業、研究所などが多くて
「全く無知」と「解って使っている」の両極端だから
もう無視してもいいかも・・・
>353の3点で充分だと思うよ。
357:Name_Not_Found
10/12/30 21:40:12
超基本なので既にクリアしていると思うが
・属性セレクタ([ ])、チャイルドセレクタ(＞)、white-space:pre あたりは未対応なので使わない
・bodyに font 設定する場合は、基本 table 要素にも同じ設定をする
とか
358:Name_Not_Found
10/12/30 22:04:31
IE6,IE7だとはhasLayout絡みか
互換IE6だとブロック要素のセンター揃えも気をつけねば
359:Name_Not_Found
10/12/30 22:40:39
>>353
標準準拠モードなら回避できるバグばかりではないか…。
後方互換モードを会えて選択するメリットはあるのかな。
360:Name_Not_Found
10/12/31 07:38:37
単純にxml宣言が推奨されてるからじゃね？
UTF-8だと省略可だけど推奨ってことで俺も書いてるし
361:Name_Not_Found
10/12/31 10:28:28
<!DOCTYPE html>でオールオッケーだと思ってるんだけど、なんかまずい事ってある？
362:Name_Not_Found
10/12/31 11:26:26
un
363:Name_Not_Found
10/12/31 13:45:29
>後方互換モードを会えて選択するメリットはあるのかな。
IE5対策
364:Name_Not_Found
10/12/31 14:58:28
>>360
HTTPヘッダでちゃんと文字コードが指定されてたら、どの文字コードでも省略可能ってことになったよ
365:Name_Not_Found
10/12/31 15:04:57 onsTJKN9
>>363
今時IE5なんて無視でしょ。
>>264
まじで？ソース希望。
というか、HTML 4.01でいいじゃん。
366:Name_Not_Found
10/12/31 15:18:40
まだ少数ながらIE5ユーザも居るから、Webで不特定多数を相手にするなら
対応できるならしておいたほうがベター
367:Name_Not_Found
10/12/31 16:06:17
シェア1%以下だろ
対応するコスト考えたらアホらしい
時間と労力の無駄
368:Name_Not_Found
10/12/31 16:06:24
じゃあネスケ4.7にも対応しないといかんな
369:Name_Not_Found
10/12/31 16:29:01
さすがに6まででしょ
それ以前への対応なんてほぼ骨折り損でベターですらない
よほど余裕があるなら好きにすればって感じだな
370:Name_Not_Found
10/12/31 16:35:01
半年前のブラウザ占有シェア調査では１位がIE8(25%、連続1位)で、２位がIE6(15%、増加へ転向)だったからな。
最低この２つには対応で、後は任意かな
371:Name_Not_Found
10/12/31 16:39:11
ベターっていうことなら、
>>370と、あと、FFとかOperaとか有名どころだけ押さえれば、まあ別にいいんじゃね、って思う。
372:Name_Not_Found
10/12/31 16:40:27
ｽﾏﾝ、占有率の数値を間違えてた。
IE8 26%、IE6 17%
（ちなみにIE7とIE8互換モード は別集計）
373:Name_Not_Found
10/12/31 16:51:29
>>372
ちなみに7は？よかったら教えて。
7にした人はたいてい8にしてるから
6よりもパーセンテージが低い、ってことなのかな
374:Name_Not_Found
10/12/31 17:07:29
>>373
7は確か11%。
企業ユースは6が多いし、7使ってる人って不人気OSのVISTA使いが多いんでしょうかね
375:Name_Not_Found
10/12/31 17:15:22
「やること無くて超暇なら対応」ぐらいでいいだろ
376:Name_Not_Found
10/12/31 19:37:21
> HTTPヘッダでちゃんと文字コードが指定されてたら、どの文字コードでも省略可能ってことになったよ
URLﾘﾝｸ(logsoku.com)
に近いものを感じる。
377:Name_Not_Found
10/12/31 19:41:54
XML宣言推奨を打ち消す規定じゃないな。
378:Name_Not_Found
10/12/31 19:46:06
w3c自体、xml宣言を入れないことを推奨してるわけじゃないんだよね
w3c自身も「IE6が面倒だから」という理由が見え隠れしているような･･･。
俺は無難にxml宣言してるけどね
IE6が後方互換でもよっぽど凝ったデザインにしない限り大丈夫だ
379:Name_Not_Found
10/12/31 19:53:47
セキュリティアップデート終わったブラウザに対応したら逆にダメだろ
>>376
ごめん、>>360の二行目に突っ込んだつもりだった
380:Name_Not_Found
10/12/31 19:58:33
HTTPヘッダに文字符号化を指定できるのはXMLに限らないHTTPの規定。
当然、HTMLも省略できる。
そもそも、XML宣言が文字符号化のためだけにあると思っているのがおかしい。
381:Name_Not_Found
10/12/31 20:00:02
>>379
彼はHTTPヘッダで指定すれば省略可だけど推奨ってことで書くんじゃないか？
382:Name_Not_Found
10/12/31 20:13:47
XHTML1.1 1st edition？ではUTF-8/16以外では省略不可だったと思う。今は2ndが勧告されてるけど
URLﾘﾝｸ(www.w3.org)
383:Name_Not_Found
10/12/31 23:19:36
某大手メーカーのWebサイトガイドラインではWinIE5.5もいまだ対象だった
384:Name_Not_Found
11/01/01 13:00:55 uySdSDUj
>>383
そういうのは大抵ガイドラインの更新のし忘れ、あるいは怠り。
385:Name_Not_Found
11/01/01 17:07:14
大手がIE6を切れば少しは早く撲滅するかな
386:Name_Not_Found
11/01/01 17:14:40
>>385
2014年のWindowsXpサポート切れまで待て
387:Name_Not_Found
11/01/01 17:57:10
IE6はもういいよ
IE8が問題
388:Name_Not_Found
11/01/01 18:08:05 L+td9HwC
大人しくIE八苦で個別対応
389:Name_Not_Found
11/01/01 18:26:41
下手なことしなければIEでもなんとかなってる
px単位で細かく揃えようとするときついね
390:Name_Not_Found
11/01/01 21:30:40
そういう問題ではなかろう
391:Name_Not_Found
11/01/01 21:40:01
px単位でっていうのがそもそもアレ過ぎて….
392:Name_Not_Found
11/01/01 22:26:36
細かい位置指定より、border等がうまく機能しないバグの方が問題じゃないか
393:Name_Not_Found
11/01/01 22:30:35
それのせいで位置指定が大変ってことも含んでるんじゃ？
394:
11/01/04 19:23:53
その場合は大抵pxなんて単位を超越してる
395:Name_Not_Found
11/01/04 19:53:50
じゃあそんなものをpx単位で揃えようなんてアホということで終了だよね
396:Name_Not_Found
11/01/05 00:38:15
px使わない奴ってだっせえテキストサイトしか作ったことないの？
397:Name_Not_Found
11/01/05 01:00:17
いきなり何だ
398:Name_Not_Found
11/01/05 06:09:57
どっちがいいじゃなくて、それぞれ使いどころありますがな。
399:Name_Not_Found
11/01/05 15:39:34
人を馬鹿にするのもいい加減にしたらどうだ！！
400:Name_Not_Found
11/01/05 16:25:20
でした
401:Name_Not_Found
11/01/05 20:38:43
お正月だ。餅つけ。
402:Name_Not_Found
11/01/06 16:06:37
あの頃は♪
403:Name_Not_Found
11/01/06 19:43:38
っは！
404:Name_Not_Found
11/01/07 10:55:45
昨夜、ふと気付いてしまった
コーマンとコーモンは一字違い！！！
405:Name_Not_Found
11/01/08 01:03:18
ま、隣同士だからね
406:Name_Not_Found
11/01/08 05:40:57
コーチンを入れて！（挿入的な意味で）
407:Name_Not_Found
11/01/11 10:19:34 HblpUKIT
とあるdivにマウスカーソルが乗ったときに背景色が変わるようにしたいんですが、
どうすればよいでしょうか？
リンクではないのでa:hover以外の方法でありませんか？
神の光臨お待ち申し上げ奉ります。
408:Name_Not_Found
11/01/11 10:35:27
>>407
JavaScriptでやったらいいと思います
神とかいっておだてあげてレスを誘発しようとするのは
自分では効果的と思ってるのかも知れないけど
みすぼらしいだけなので、やめたほうがいいと思います
409:Name_Not_Found
11/01/11 12:12:48
>>407
div:hover
IE6以下にも対応したければJavaScript併用
410:Name_Not_Found
11/01/11 12:15:10
>>407
飛ばないリンク
411:Name_Not_Found
11/01/19 23:44:54 RI1wcpYd
動作環境XP,IE8
ツール VisualStudio2010
問題
Site.css内の記述で
.header
{
position: relative;
margin: 0px;
padding: 0px;
background-image: url("../Styles/071111.png");
width: 100%;
}
と、webアプリケーションの雛型の背景色の部分を背景画像として変更した所
Site.Masterにも他のaspxにも反映されているのにデバッグすると背景色があった
ころのままになっています。甚だ困惑です。原因、対処法の判る方よろしければ
教えて下さい。
412:Name_Not_Found
11/01/19 23:55:35
キャッシュ
413:Name_Not_Found
11/01/20 00:06:36 M6ipxN6v
>>412 俺頭悪いわｗｗｗｗ
ありがとうございました即時解決です。
aspxの中身はきちんと更新されてるから
CSSだけキャッシュ優先とか思いもよらなかった。
414:Name_Not_Found
11/01/21 09:02:33
1. div > div:first-child + div + div + a.test
2. div > div:first-child + div + a.test
3. div > div:first-child + a.test
1,2,3を一度に表記する方法はありませんか？
div > div:first-child( + div){0,2} + a.test
みたいに量を指定したいんです
415:Name_Not_Found
11/01/21 12:03:27
div > div:first-child + div + div + a.test ,
div > div:first-child + div + a.test ,
div > div:first-child + a.test
416:Name_Not_Found
11/01/21 12:19:23 c/reoNen
携帯サイトに用いるCSSはみなさまどうしてますか？
外部ファイルにしたりもできるみたいだけど、実機で確認ができんから実際どのぐらいまでの人にきちんと表示してもらえるかわからん。
まとめサイト的なものも探したけど、２～３年まえのものばっかりなんだよな。
私はこうしてる、とか最近のこと書いてるページとかあれば、教えてください。
417:Name_Not_Found
11/01/21 12:49:48
ドコモとかだと、link要素に加えて、style要素を使えないブラウザもまだ利用されてる
そういうブラウザだとstyle要素のセレクタには、a要素の疑似クラスしか指定できない
それ以外のセレクタを書いてしまうと、style要素の中身が晒されて、ページ内のstyle属性まで機能しなくなる
あとcolorやfontプロパティが指定できるのは基本的にspan要素のみ
418:Name_Not_Found
11/01/21 15:46:49 c/reoNen
>>417 ありがとー
DOCOMOの場合、xhtmlがうんたらかんたらなんだよね。
いっぺんチョーシこいてxhtmlでつくったら
ウェブコンテンツヴューアでエラーでまくりで
上司からやめれと指示されたけど、
あのエラーってあてにしていいもんなの？
419:Name_Not_Found
11/01/21 15:47:32
docomoの一般的なiモードブラウザだと、MIMEタイプをapplication/xhtml+xmlにしないとCSS有効にならないので注意
ガラケだと基本的には２～３年のテクが未だ定石という感じ
最近見た携帯サイトまとめ記事
URLﾘﾝｸ(design.kayac.com)
420:Name_Not_Found
11/01/21 18:05:22
>>419 おおこりゃいい
ガラケって言葉も今おぼえた。
感謝します。
421:Name_Not_Found
11/01/21 20:36:23
そんなんでよく・・・
422:Name_Not_Found
11/01/21 23:34:07
DoCoMoのXHTMLは、HTTPヘッダとmeta要素の両方でContent-Type指定しとかないと
機種によってはCSSいかれるよ
423:414
11/01/22 00:18:01
>>415
確かにそれでも可能なんですが、動的なサイトで、 + divの量が可変するんです
あるときには
div > div:first-child + div + a.test
でも、また違うときには
div > div:first-child + div + div + div + div + a.test
みたいに+ divが増減するんです
その度に + divの量を変更するのでは手間なので一意的に表現する方法はございませんか？
424:Name_Not_Found
11/01/22 00:21:12
CSS3 兄弟
425:Name_Not_Found
11/01/22 00:31:51
動的ならクラス名を振れるだろ
426:414
11/01/22 02:02:24
>>424
もうちょっとｋｗｓｋお願いします
URLﾘﾝｸ(www.htmq.com)
このどこを使えば実現できるんでしょうか。セレクタの所だとは思うのですが、いまいちピンときません
>>425
サイトのスタイルをユーザー側でCSSを使い、変更するというものでして、自分はサイト運営者ではないんです
スタイル変更にはfirefoxのstylishというものを使っています
427:Name_Not_Found
11/01/22 02:44:18
>>426
div が a.test に先行するのは必要条件なの？
div>a.test:first-child ではダメ？
428:427
11/01/22 02:51:11
あるいは、div>div:first-child~a.test かな。
繰り返し回数を任意にするセレクタはないので、完全に期待通りの動作にすることは出来ない。
GreaseMonkey でも使うか、セレクタの方を考え直すしかない。
429:Name_Not_Found
11/01/22 06:50:10
<h2>ナビゲーション</h2>
<ul>
<ll>コンテンツ</li>
<li>...</li>
</ul>
よくあるマークアップだと思うのですが、CSSありだと見出しのナビゲーションを消す場合、SEOも考えるとどれが妥当でしょうか？
・display:none;
・背景色と文字色を同じにする
・z-indexでかぶせる
・インデントで画面外に飛ばす
見出し自体を消すとCSSオフのときに違和感があるのでテキスト自体は消したくないです。
悪気があって消すわけではないのですが、そう捉えられる可能性がありますよね？
検索エンジンでスパムになる境界がいまいち不明です
430:Name_Not_Found
11/01/22 09:46:38
>>426
またサヨクがニワカで保守気取りか
431:Name_Not_Found
11/01/22 15:48:26
>>429
境界がいまいち不明なら消すな。
素人サイトがSEOなど考える必要なし
もっとも効果的なのは内容を充実させることだ !
432:Name_Not_Found
11/01/22 16:05:19 8A+F191Z
::selection { background: rgb(255,255,255); }
で選択文字の背景を白にしたいんだけど、何故か真っ白にならずに背景が透ける。
rgbaで不透明に指定してみたけど効果は無し。 -mozは指定通り真っ白になる。
スタイルを上記だけにしたものだと、真っ白になるのだけど
背景かテキストシャドウを記述すると、透けてしまう。
これどうしてでしょう？
433:Name_Not_Found
11/01/22 16:06:53
>>429
そもそも「見出し」を消す理由は？
434:Name_Not_Found
11/01/22 16:09:39
>>433
デザイン上の都合じゃね？
フッターの見出しとか自分も消すことあるよ
435:414
11/01/22 16:21:15
>>427-428
ご回答ありがとうございます
お教えくださったことを試した結果、div>a.testで出来ました
兄弟の要素（ div:first-child + div + div ）は省略できたのですね。どうもありがとうございました。
436:
11/01/22 16:26:50
>>435
遅レスだがそういった動的で複雑な条件を指定する場合は
htmlも書かんとなかなか理解しづらいぞ
>>432
#fffじゃだめなのか？
437:432
11/01/22 16:35:05
>>436
レスありがとうございます
16進数、試してみたんだけど駄目でしたわ
ユニバーサルセレクタで不透明度100%にして、リセットを試みるも効果なし
デフォルトのライトブルーでも透けてるので、WebKitの仕様かなと思って一旦諦めます
438:Name_Not_Found
11/01/22 19:01:01
>>437
::-moz-selection は有効で ::selection は無効ということかな。
Firefox では先行実装扱いになっているからベンダー接頭辞が必要となる。
他のブラウザでもベンダー接頭辞が必要な扱いとなっている可能性があるので、接頭辞を入れて検証してみるといいと思う。
439:Name_Not_Found
11/01/22 19:11:51
ベンダー接頭辞は使ってもよいか | Web標準Blog | ミツエーリンクス
URLﾘﾝｸ(standards.mitsue.co.jp)
CSS3 module: Syntax
URLﾘﾝｸ(www.w3.org)
Vendor-specific Properties
URLﾘﾝｸ(reference.sitepoint.com)
440:432
11/01/22 19:38:23
>>438
紛らわしくなってしまって申し訳ない。
Gecko用に ::-moz-selection で記述したものは、Gecko系ブラウザで望み通りになるのだけど
特に接頭辞の必要のないWebKit用に書いた ::selection では、WebKit系において透けてしまうという事ですわ。
因にWebKitでは、擬似要素selectionに接頭辞を付けると無効になってしまうようで。
441:think49 ◆bKk/qcAKuM
11/01/22 21:05:14
>>440
こういうことでしょうか？
URLﾘﾝｸ(jsbin.com) (Fx のみOK / GC, Opera はNG)
URLﾘﾝｸ(jsbin.com) (Fx, GC, Opera でOK)
442:Name_Not_Found
11/01/22 23:32:09
>>441
そうです
無理っぽいですな
443:think49 ◆bKk/qcAKuM
11/01/23 14:13:49
>>442
::-moz-selection, ::selection { color: black; background-color: white; }
このようにカンマでセレクタをグループ化すると ::-moz-selection を解釈しないブラウザで動作しなくなりますが、カンマを使わなければ期待通りに動作すると思います。
URLﾘﾝｸ(d.hatena.ne.jp)
444:432
11/01/23 22:03:09
>>443
いやー色々とどうも有り難うございます。
仰るように、それぞれのエンジンに対応したコードを書き、それぞれに効いている上で
微妙に選択色を透けさせてしまうWebKitのレンダリングに対する疑問だったんです。>>432
大した問題ではないですし、仕様だと思うので諦めました。
誤解させてしまって申し訳ない。
445:Name_Not_Found
11/01/26 15:42:12 6rqJuliC
散々出ている質問だと思うのですが
ブログにhtmlで記述した記事の個別のページをIE8で開くと、
文字やレイアウトがずれてしまいます。
Firefox3.6では問題なく開くことが出来ます。
いろいろググッたのですが答えにたどり着けなかったので
教えてください。
URLﾘﾝｸ(blog.livedoor.jp)
446:Name_Not_Found
11/01/26 18:55:42
一から作り直した方が早いんじゃない
447:Name_Not_Found
11/01/26 19:23:54
URLﾘﾝｸ(www.google.co.jp)
まず「色々調べた」とは何を調べたのか聞きたい
そもそも何がどう違うのかも言わずにこれ見て答えろは酷い
448:Name_Not_Found
11/01/26 19:38:36
>>445
CSSの記述のどこかをミスってるんだよ
多分、凡ミス
449:Name_Not_Found
11/01/26 22:48:49 6rqJuliC
445です
>>477
「IE CSS ずれる」とかで検索したり質問サイトを見たりです
CSSやHTMLの知識が無いからどこをさわったらどうなるかが
分からなかったので質問が悪かったのはすみません
450:Name_Not_Found
11/01/26 22:54:19
まず、CSSの基本的な知識を身につけて、それでも分からなかったら質問して下さい。
451:Name_Not_Found
11/01/26 23:36:45
>>449
子供はこんなとこに来ちゃダメだぞ
452:Name_Not_Found
11/01/26 23:42:57
>>449
何食わぬ顔でマルチポスト先を削除するところがまた…。
URLﾘﾝｸ(okwave.jp)
453:Name_Not_Found
11/01/27 00:07:58
ボクもここで質問したかったんだけど、やめたよ。
ここ、怖いおじちゃんがいっぱいいるんだから。
454:Name_Not_Found
11/01/27 00:23:16
>>453
まともな回答もあるんだよ、とはいっておきたい。
過度な期待をされても困るけど。
最近、答えようと思える質問がめっきり減ったよ。
455:Name_Not_Found
11/01/27 00:37:54
>>452
指摘されて質問内容が悪かったと思ったから消しただけ
456:Name_Not_Found
11/01/27 00:50:02
>>455
俺は後から来たので経緯は知らないんだが、誰かにマルチポストを指摘されたのか？
俺は当事者じゃないからしつこくいう権利はないが、「URLﾘﾝｸ(okwave.jp) と URLﾘﾝｸ(knowledge.livedoor.com) にマルチポストしていました。すみません。」ぐらいの謝罪はあっても良かったと思うな。
黙って削除されたら証拠隠滅と受け取られても仕方ない。
457:Name_Not_Found
11/01/27 00:55:18
>>456
しつこい
458:Name_Not_Found
11/01/27 01:09:15
もうちょっと穏やかな雰囲気にならないものか。
回答者には同情するが、それでもなあ…。
459:Name_Not_Found
11/01/27 01:20:17
ゆとりの相手はしてられん
460:Name_Not_Found
11/01/27 01:20:34
>>456
証拠隠滅の意味が分からないのですが何に対してですか？
>>447に「まず「色々調べた」とは何を調べたのか聞きたい
そもそも何がどう違うのかも言わずにこれ見て答えろは酷い」
って言われて、抽象的で分かりにくい質問だったと思ったから削除したまでです。
他のところで質問していることを聞いてはいけないルールでもあるのですか？
それならば謝罪しますけど。
461:Name_Not_Found
11/01/27 01:27:07
追加
質問サイトにした質問に対する回答はまだゼロでした。
462:Name_Not_Found
11/01/27 01:31:58
>他のところで質問していることを聞いてはいけないルールでもあるのですか？
そうです。詳しくは「マルチポスト」でぐぐれば分かります
謝罪して金輪際ネットから姿を消してください
463:456
11/01/27 01:36:13
>>460
俺は>447ではないが…。
447は「抽象的でわかりにくいから、補足してくれ」といっているのでは？
「補足してくれ」を「質問を削除してくれ」と読み替えるのは無理がありすぎる。
> 他のところで質問していることを聞いてはいけないルールでもあるのですか？
ルールではないが、マナーに反しているといえるかと。
「ルールさえ守れば何をやってもいい」と思っているなら、社会勉強が足りないと思う。
URLﾘﾝｸ(www.google.co.jp)
464:456
11/01/27 01:45:33
一つ忘れた。
> 証拠隠滅の意味が分からないのですが何に対してですか？
「マルチポストをなかったことにする」という意味での証拠隠滅。
後からここを見た人はマルチポストがあったことさえわからない。
465:Name_Not_Found
11/01/27 02:14:28
マナー違反してしまったことは謝罪します、すみませんでした。
回答しようとしてくれた方はありがとうございました。
466:Name_Not_Found
11/01/27 02:50:43
>>465
もうあのサイトはダメだろ。
2chはおろかネットに疎いようだし
荒らされて終わり。
身の丈にあったサイト作りなよ。
467:Name_Not_Found
11/01/27 04:37:24
>>449
>>2ちゃんねるのニュース☆ネタのまとめブログ
が下にずれるということでいいの？ 何を聞いているのかはっきりしない
レイアウトや文字が具体的に何なのか言わないし、個別のページというのも存在しないから分からない
IE8で表示が標準モードだと、旧IEのバグは継承されないからずれない
互換モードだと、description の line-height が padding と競合して高さがずれるんだと思う(未検証)
IE7以下を無視して強制的に標準モードするMETAタグを付けるか、CSSでハックするか
line-height を バグを加味して font と padding から逆算した実数にするか、使わないようにするか
空のページの状況から先のことは分からない
468:Name_Not_Found
11/01/27 06:49:16
CSSの継承について質問です
html
<body>
<p id="description">ああああ</p>
<p>いいいい</p>
css
* {margin: 0; padding: 0; font-size:100%;}
p#description {background: #ffffff;}
p {font-size: 150%}
例えばこの場合、p#descriptionのほうにもfont-size:150%が継承されますよね？
これを継承させないようにすることって可能ですか？
適宜、100%を指定しないと無理でしょうか？
「idやclassが指定されていない場合はこのフォントサイズを指定」みたいなことを想定しています。
469:Name_Not_Found
11/01/27 07:24:58
p {font-size: 150%}
p[id], p[class] {font-size: 100%}
470:Name_Not_Found
11/01/27 11:55:17
しつこく言っておく。
>>456は、非常にひつこい。
471:Name_Not_Found
11/01/27 11:59:45
こういう類のやつを「ネット弁慶」と呼ぶ
472:Name_Not_Found
11/01/27 13:23:39
>>467
わざわざ調べていただいてありがとうございます。
マルチポストのことを知らなかったので
質問サイトにも質問をしていました、すみませんでした。
怖いおにいさんにまた叩かれちゃうので書き込みは控えます。
473:Name_Not_Found
11/01/27 13:24:58
自分のことは棚に上げて他人を怖い物扱い
474:Name_Not_Found
11/01/27 13:36:18
爆釣ですね。おめでとう
475:Name_Not_Found
11/01/27 13:55:50
いつまで引っ張るんだよ糞虫ども
476:Name_Not_Found
11/01/27 14:23:34
>>467
個別記事の2chのコピペ文章が
カラムから外れフロートされていた
477:Name_Not_Found
11/01/27 16:12:49
>>476
バグでfloatのmarignが倍になったか、中身のmarginが相殺されず肥大してカラムが崩れたとか
ソースだけじゃ面倒くさいしもう知らね
478:Name_Not_Found
11/01/28 05:17:02
>>477
わざわざ調べていただいてありがとうございました。
理由は分からないけど記事のHTMLのタグの付け方が悪かったみたいで、
なんとか解決しました。
ご迷惑をおかけしてすみませんでした。
479:Name_Not_Found
11/01/28 19:28:32 cSZTy+p4
ie6のバグでmargin:auto;がきかないので
このようにしてセンタリングしてますけど
body{
text-align:center;}
div.wrap{
width:800px;
margin-left:auto; margin-right:auto;}
body自体に横幅、margin:auto;を指定してやれば
ie6でも普通に機能するんですね。さっき気付いたｗ
body{
width:800px;
margin-left:auto; margin-right:auto;}
480:Name_Not_Found
11/01/28 22:00:37
>>479
わりと良く勘違いされるが、margin-left:auto; margin-right:auto; が無効なのは後方互換モードの時だけ。
481:Name_Not_Found
11/01/29 23:14:44
<div style="background-color:cyan;">
<img src="image.png" style="max-width:100px;max-height:100px;float:left;">
タイトル<br>説明文説明文
</div>
と、書きました
URLﾘﾝｸ(sakurasite.homeip.net)
chromeだと一番上の画像の通りにレンダリングされますが、二番目、三番目の様に表示するにはどう書いたらよいでしょうか
文章量は画像より高くなったりならなかったりまちまちです
482:Name_Not_Found
11/01/29 23:37:24
↓div厨だなこりゃ。
<div style="background-color:cyan; min-height:100px;">
<div style="background:url(image.png) no-repeat; min-height:100px;">
<div style="margin-left:200px;">
タイトル<br>説明文説明文
<br>
～<br>
説明文説明文
</div>
</div>
</div>
あるいは
<img>をpositionで位置調節してmargin-leftでいいんじゃね。
<table>でもいい気がするけど。
483:Name_Not_Found
11/01/30 01:19:17
どうも
484:Name_Not_Found
11/01/30 03:18:20
display:block
485:Name_Not_Found
11/01/31 00:44:54
<a href="aaa.html"><img src="aiueo.jpg"></img></a>
aタグで囲まれた画像にマウスオーバーしたときには pointer 、
<img src="aiueo.jpg"></img>
imgタグのみの場合は default っていう風にする方法教えてください
a:hover
{ cursor: pointer; }
img:hover
{ cursor: default; }
とやってもどちらの場合もカーソルの形が default になってしまいます
486:Name_Not_Found
11/01/31 00:47:49 STSQUKFG
a img:hover
{ cursor: pointer; }
487:Name_Not_Found
11/01/31 00:56:06
どうもです
488:Name_Not_Found
11/02/01 13:20:39
質問です
<div id="～" class="～">
と1つのdivに同時に設定しているのを見かけたんですが
何か意味があるんでしょうか？
489:Name_Not_Found
11/02/01 13:29:52
idはCSSだけのものじゃないよ
JavaScriptなんかでも使う
490:Name_Not_Found
11/02/01 15:06:14
>>489 javascriptでも使うんですね！ありがとうござます
でももしこれがCSSのIDセレクタだったらどういう意味があるんでしょうか？
491:Name_Not_Found
11/02/01 15:23:43
>>488,490
id はフラグメント識別子の役割もある。
CSS としてはカスケード処理の関係で複数付けることも良くある。
<div id="Sample" class="hoge foo piyo">
無理して #Sample にまとめるより分けた方が管理しやすいことも多い。
492:Name_Not_Found
11/02/01 16:51:03
>>491
ありがとうございます！参考になりました！
493:Name_Not_Found
11/02/01 19:00:20
いいえ！どういたしまして！
494:Name_Not_Found
11/02/01 20:03:15
>>491
ＩＥ6では確かclassは２つまでしか指定できないんでしたよね。
495:Name_Not_Found
11/02/01 20:12:08
で？
496:Name_Not_Found
11/02/01 20:14:49
ぶ？
497:Name_Not_Found
11/02/01 20:28:54
女
498:Name_Not_Found
11/02/01 20:42:04
>>494
IE6 では .hoge.foo が効かないが、class="hoge foo" は出来るから運用次第では使えるはず。
例えば、タブ型のUIを作りたいとする。
全てのタブは統一されたデザインを持つので、class="tab" を指定する。
その中で一つだけアクティブなタブが存在するので、アクティブなタブには class="active" を追加指定する。
最後にフラグメント識別子のために id を指定する。
<style>
.tab { border: solid 1px black; background-color: glay; }
.active { background-color: white; }
</style>
</head>
<body>
<ul><li><a href="#HTML">HTML</a></li><li><a href="#CSS">CSS</a></li><li><a href="#JavaScript">JavaScript</a></li></ul>
<div id="HTML" class="tab">HTML の解説</div>
<div id="CSS" class="tab active">CSS の解説</div>
<div id="JavaScript" class="tab">JavaScript の解説</div>
499:Name_Not_Found
11/02/02 16:52:54
htmlに
<div id="header">
<p>テスト</p>
</div>
と書かれている時のcssファイル指定には
#header{
border:solid 3px #000000;
}
と
div#header{
border:solid 3px #000000;
}
の二通りの書き方があると思いますが頭にdivを付けない場合と付ける場合とでは何か意味が変わるのでしょうか？
参考書にはよく 「 div#header{ 」と書かれています
「 #header{ 」は「 *#header 」の省略形とも書かれていますがID名は1箇所にしか指定できない事のことで
htmlに <div id="header"> と書いた場合、div#header{と書いた他に例えば「 ul#header 」という別の指定は出来ないと思うのですが
id名のheaderはdiv要素に使われていると一目で分かると言う以外に何か重要な役割を果たしているのでしょうか？
500:Name_Not_Found
11/02/02 17:03:51
＞ID名は1箇所にしか指定できない事のことで
そう。だから明示的であるという以外の意味はない。本来はね。
＞参考書にはよく 「 div#header{ 」と書かれています
そんなはずはないと思うがどちらにせよ書いた奴の考えまでは知らんな。もしかしたらdivから書かなきゃいけないと勘違いしてるかもしれんし。
501:499
11/02/02 17:47:30
#header{ と div#header{ はどちらの書き方も文法的(?)な間違いではなく考え方や好みの違いであり、
どちらかに個々が統一して書いていれば問題はないとの事かな
私の持っている本は div#header、 div#global-nav p#bannerなどの書き方に統一されていたので
#header{ との違いにふと疑問を持った次第です
モヤモヤが解消されそうです ありがとうございます
502:Name_Not_Found
11/02/02 18:05:46
要素名をつけない方がごく微妙に早いらしい
503:Name_Not_Found
11/02/02 19:08:16
やだあたしdiv付けてる怖い…
504:Name_Not_Found
11/02/02 20:56:23
>>503
テーブルで抱いてあげるよ
505:Name_Not_Found
11/02/03 01:25:28
>>500
ごめんなさい、あたしタチなの
footerがっちり芋系が好きなんだけどスペックは？
506:Name_Not_Found
11/02/03 06:08:59
P16px
507:Name_Not_Found
11/02/04 23:15:30
タチって何
508:Name_Not_Found
11/02/04 23:41:01
>>507
「質」のことだろう。
509:Name_Not_Found
11/02/05 10:28:50
テーブルで表がいくつもあるサイトを作ろうと思っています
サイズが違うので一つ一つcssで設定するつもりです
ただデザインは統一したいのでborderやbackgroundなどデザイン部分まとめてだけ設定することってできますか？
510:Name_Not_Found
11/02/05 11:00:23 y+Zyzrxr
一つ一つ違うものはidで指定して、
共通して使うデザイン部分はclassで指定する
511:Name_Not_Found
11/02/05 11:18:39
>>510
<table id=***** class=*****>とするってことでしょうか？
idとclassを一緒につけれるってことをはじめて知りました
ありがとうございます！
512:Name_Not_Found
11/02/05 16:46:22
他のスレでも聞いたのですが、相手にされないのでこちらに移動しました
お忙しいところすみません
当社のDQN社長から2月19日までに会社のHPを作れと言われました
ブログしかやったことがない自分には難題すぎます
「実践 Web Standards Design Web標準の基本とCSSレイアウト&Tips」という
本を買って頑張ってみたのですが無理でした・・・
↓レイアウトは決まっているのですがCSSがわかりません
URLﾘﾝｸ(nagamochi.info)
どなたかCSSを教えてください
宜しくお願い致します
513:Name_Not_Found
11/02/05 18:51:23
>>512
近所にホームページ教室がないかタウンページで調べて味噌
514:Name_Not_Found
11/02/05 18:55:49
で、いくら払うんだい？
515:Name_Not_Found
11/02/05 19:33:35
>>512
初心者には難易度が高すぎる。
基本のレイアウトも作れないレベルなら無理だと思う。
レイアウトができてもその先で必ずつまずく。
516:Name_Not_Found
11/02/05 19:42:01
>>512
ブログにしたら？
ならテンプレに似たようなのがあるかも
もしかすると作者に頼めば作ってくれるかも
517:Name_Not_Found
11/02/05 20:28:42 fDrWbt9R
＞ブログしかやったことがない自分には難題すぎます
ブログが自由自在に操れるならｃｓｓなんて簡単だろ
FC2ブログはhtmlとcssの両方をカスタマイズできるから
それでやってみれば？
518:タクト ◆g3WCyGKBb.
11/02/05 20:29:54
生活保護でこんな立派な部屋を手に入れました！
URLﾘﾝｸ(suzu2011.blog96.fc2.com)
519:Name_Not_Found
11/02/05 20:35:30
>>517
自由自在に操れるとはどこにも書いてないぞ
ブログしかできない人って、htmlすら理解してない人が大半だ
普通のサイト作りに挫折してブログに流れた人も多い品
520:Name_Not_Found
11/02/05 21:32:29
最低限の骨組み
URLﾘﾝｸ(www.dotup.org)
521:Name_Not_Found
11/02/06 11:47:46 NA0YtQF3
>>512は偽者です
Webサイト制作初心者用質問スレ part223
ｽﾚﾘﾝｸ(hp板:4番)
上記スレの>>4です
もう少し自分で頑張ってみることになりました
大変お騒がせいたしました
522:Name_Not_Found
11/02/06 13:55:21
せっかく作ってくれた>>520はスルーなのね
523:Name_Not_Found
11/02/06 14:48:22
>>520が何なのかも分かってないのかも？
524:Name_Not_Found
11/02/06 14:58:51
そのようだなｗ
525:Name_Not_Found
11/02/08 15:34:02
IE8ですが、XPと7で、表示が異なります。
原因は何が考えられますか。
D0CTYPE宣言してません。
MakeShopを使ってるんですが、そこの仕様のため。
それぞれ互換表示、非互換表示で比べましたが、
やはりXPと7で異なります。
XPのIE8をベースにしてたので、
7のIE8だと画像がずれてるところがあるんです。
ふたつの表示を合わせるのは難しいでしょうか。
526:Name_Not_Found
11/02/08 15:42:58
いやDOCTYPE宣言しろよ
527:Name_Not_Found
11/02/08 15:52:10
>>526
本当に、宣言したいです。
MakeShopの仕様で宣言できないから
ブラウザごとの表示ずれを解消するのに
苦労してます。
今回は、同じブラウザでずれが出てるので、
どうしていいのか、行き詰まってます。
528:Name_Not_Found
11/02/08 19:18:36
問い合わせた方がいいんじゃない
文法滅茶苦茶でそもそも宣言のしようがないのかもしれないけど
529:Name_Not_Found
11/02/08 19:39:04
>>525
標準フォントじゃね？
530:525
11/02/08 20:05:01
>>528
<head>内を触れない仕様なんです。
だから、cssやjsを外部読み込みするためのコードは、
body内に記述しているんです。
それでも、動くので、
このへんは、柔軟性があるんですね。
>>529
MSとメイリオの違いは、忘れてました。
書体のツラは、メイリオのほうが横幅がありそうなので、
そのへんは気にして組んでたんですが、
いまずれてるのは、jpg画像が本来より下にずれてるという状況です。
でも、どこかでフォントが影響を及ぼしてないか、
一度チェックしてみます。
ありがとうございます。
531:Name_Not_Found
11/02/10 12:24:21
>>530
そのソフトがどうであれ
メモ帳で開けばいいだけだがな
532:Name_Not_Found
11/02/10 14:07:44
ソフトじゃなくて糞ホスティングらしいよ
533:Name_Not_Found
11/02/10 14:24:54 n8wGoT44
>>531
MakeShopでぐぐってみれば判るのに
534:Name_Not_Found
11/02/10 15:06:46
>>530
CSSはリセットしてあるの？
画像はa要素？
535:Name_Not_Found
11/02/10 16:35:33 ENeYxcbB
┌────┬─┐
｜┏━━━┓｜ ｜↑
｜┃ .┃｜ ｜｜
｜┃ .┃｜ ｜ C
｜┃ .┃｜ ｜｜
｜┃ .┃｜ ｜｜
｜┗━━━┛｜ ｜↓
└────┴─┘
. ←─ A ──→← B →
A: ウィンドウの幅に合うように伸縮
B: ウィンドウの幅によらず固定
C: ウィンドウの高さに合うように伸縮
太線: ウィンドウの幅、高さによって伸縮するoverflow:scrollのボックス
↑みたいなボックスを実現したいのですが
どうしたらいいか教えてください。
536:Name_Not_Found
11/02/10 18:21:58
せめて「こうしてみたんですがうまくいかない」と書いた奴を貼るぐらいはしてほしい
537:Name_Not_Found
11/02/10 19:05:28 n8wGoT44
>>535
まず全体のレクタングルを定義する
次にＡレクタングルを定義してから中のスクロール部分を定義
最後にBレクタングルを定義すればＯＫ
簡単だよ
538:Name_Not_Found
11/02/10 19:59:43
>>537は頭の悪い回答の例です。
みんなは真似しないようにね！
539:Name_Not_Found
11/02/10 20:30:49
>>538 が頭のいい回答をしてくれるようですので、皆沈黙して待つべし。
540:Name_Not_Found
11/02/10 20:57:20
>>539はヘタクソな煽りの例です。
みんなは真似しないようにね！
541:Name_Not_Found
11/02/10 21:00:52
ケチが付いた質問は >>538 に任せて、次の質問どうぞ
542:Name_Not_Found
11/02/10 21:24:56 ENeYxcbB
では失礼して
┌────┬─┐
｜┏━━━┓｜ ｜↑
｜┃ .┃｜ ｜｜
｜┃ .┃｜ ｜ C
｜┃ .┃｜ ｜｜
｜┃ .┃｜ ｜｜
｜┗━━━┛｜ ｜↓
└────┴─┘
. ←─ A ──→← B →
A: ウィンドウの幅に合うように伸縮
B: ウィンドウの幅によらず固定
C: ウィンドウの高さに合うように伸縮
太線: ウィンドウの幅、高さによって伸縮するoverflow:scrollのボックス
↑みたいなボックスを実現したいのですが
↓からどうしたらいいですか？
<div style="width:1000px;">
<div style="width:700px;float:left;">
<div style="width:600px;overflow-x:auto;overflow-y:auto;"></div>
</div>
<div width="width:200px;float:right;">
</div>
</div>
543:Name_Not_Found
11/02/10 21:28:46
では >>538 回答をどうぞ。
544:Name_Not_Found
11/02/10 22:20:20
overflow-xとかって先行実装だよ
545:Name_Not_Found
11/02/10 23:25:35 oed2uBP1
>>542
javascript使わないと無理じゃね？
546:Name_Not_Found
11/02/11 00:14:45
>>542
URLﾘﾝｸ(jsbin.com)
547:Name_Not_Found
11/02/11 12:42:18
少しはテーブルの使い方を勉強しろよ
548:Name_Not_Found
11/02/11 12:56:29
>>547
誰に言ってるんだ？
549:Name_Not_Found
11/02/11 15:03:16
レスアンカーぐらいつけろよ
550:Name_Not_Found
11/02/11 15:18:33 o0lCCYmT
#container {
width:1000px;
margin:0 auto;
background-color:#fff;
}
#main {
width:800px;
float:left;
}
#side {
width:200px;
float:left;
}
<div id="container">
<div id="main">
aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa
</div>
<div id="side">
aa
</div>
</div>
containerの要素（白地の背景、高さ）がmain,sideに受け継がれないんですがどうしたらよいでしょうか？
551:Name_Not_Found
11/02/11 15:34:32
そもそもcontainerに高さを指定していないようだが
背景色もinherit使わんと継承されんよ
552:Name_Not_Found
11/02/11 15:36:33
inherit
553:Name_Not_Found
11/02/11 15:38:38
すみません。
カラーはできました。
ただmainとsideの高さを揃えるにはどうしたら良いのでしょうか？
554:Name_Not_Found
11/02/11 16:00:59
>>553
display: box; か display: table-cell;
IE7以下に対応させたいなら、JavaScript で。
URLﾘﾝｸ(css-tricks.com)
555:Name_Not_Found
11/02/11 16:08:35
>>553
URLﾘﾝｸ(www.google.co.jp)
556:Name_Not_Found
11/02/11 22:28:26 1csCD0bU
>>550
#container {overflow:hidden;}
#main,#side{margin-bottom:-32768px;padding-bottom:32768px;}
追加すれば高さそろう
557:Name_Not_Found
11/02/11 22:45:12
>>554->>556
ありがとうございます
出来ました！
558:Name_Not_Found
11/02/13 00:34:18
text-indent:-9999pxが効かず画像置換ができません。
よろしくお願いします
URLﾘﾝｸ(codepad.org)
559:Name_Not_Found
11/02/13 09:28:48 SaFohdPO
削除 #lie li {display:block;}
追加 #lie a {display:block;}
かな？？違ったらfloatかも
てか、text-indent:-9999pxとか初めて知った
560:Name_Not_Found
11/02/13 12:16:52
タグごとにちゃんとブロックレベルなのかインラインなのか見ておいた方がよくないか？
561:Name_Not_Found
11/02/13 14:40:29
> margin-bottom:-32768px;padding-bottom:32768px;
> text-indent:-9999px
何かまともでないHack臭がしますが、将来的にも大丈夫なの?
562:Name_Not_Found
11/02/13 16:07:48
小手先こねくり集を見てｽｹﾞｰって思ってやってみたってとこかな ?
563:Name_Not_Found
11/02/13 17:34:38
>>text-indent:-9999px
h1とかSpriteメニューのliを、画像だけにしたい時によく使われる
例えばYahooとかAppleとか
だんだんと減ってきている気がしなくもないけど
564:Name_Not_Found
11/02/13 17:49:02 IjIxUKDf
IE 6とIE 7を無視できるようになったら、画像置換は、before/after疑似要素に生成内容としてdataスキームURIの画像を入れる手法が一般的になると思う。
565:Name_Not_Found
11/02/13 18:59:12
>>561
後者はCSSの仕様的に将来的にも恐らく大丈夫
前者はUA依存らしいからそのうちポシャる
566:Name_Not_Found
11/02/13 19:07:09 IjIxUKDf
>>565
> 後者はCSSの仕様的に将来的にも恐らく大丈夫
> 前者はUA依存らしいからそのうちポシャる
根拠を示せますか？
567:Name_Not_Found
11/02/13 19:15:23
>>561
> margin-bottom:-32768px;padding-bottom:32768px;
そもそも>553の要件を満たせていない。
ボックスに border を適用したら border-bottom が見えなくなる。
> text-indent:-9999px
どんな形であれマークアップされたテキストを読めなくするのはSEO対策的によろしくないので、今はあまり使われない。
568:553
11/02/13 19:38:19
marginの件は間違えて書いてましたｗ
text-indentを使わない方がいいとなると、みなさま画像置換はどうされていますか？
569:Name_Not_Found
11/02/13 20:16:40 IjIxUKDf
>>567
> > margin-bottom:-32768px;padding-bottom:32768px;
> そもそも>553の要件を満たせていない。
> ボックスに border を適用したら border-bottom が見えなくなる。
確かにその通りです。
「margin-bottom:-32768px;padding-bottom:32768px;」は、正確には背景が描かれる範囲を拡げるテクニックであり、高さを合わせるテクニックではありません。
ということは、背景が描かれる範囲を拡げる目的であれば、使っても差し支え無いと思います。
>>568
現時点では素直にimg要素。
将来は>>564の方法を使うと思います。
570:Name_Not_Found
11/02/13 20:25:23
>>567
いやいや適切なマークアップのために使うもんだろう
571:567
11/02/13 21:17:19
俺は >565 ではないが、レスをもらったので…。
>>569
> 但し、ブラウザが理解できる値は-32767～32767ですので、その範囲外の数字は指定しないでください。
> URLﾘﾝｸ(scuderia-web.com)
32767 の値に根拠が欲しい。
少なくとも CSS3 では規定されていない。URLﾘﾝｸ(www.w3.org)
実装依存なら 32768px に依存すべきではない。今後、実装が変化する可能性が高い。
>>568
>569の指摘通り、現在は <img src="foo.jpg" alt="テキスト" /> が妥当だと思う。
bot はaltテキストも解釈してくれる。
.hoge { background-image: url("hoge.jpg"); text-indent: -9999px; }
このスタイルには2つの問題がある。
・background-image を前景画像であるかのように使っている。(前景画像はimg要素でマークアップすべき)
・text-indent: -9999px; でテキストを読めなくしている。(検索エンジンスパムと判定される可能性がある。9999px の値に根拠がない。確実に見えなくなることが保証されない。)
基本的に実装を信用すべきではないと思う。
572:556
11/02/13 23:16:11 SaFohdPO
>>567
>561
> margin-bottom:-32768px;padding-bottom:32768px;
> そもそも>553の要件を満たせていない。
> ボックスに border を適用したら border-bottom が見えなくなる。
divを被せてborder-bottomとゆー手があってな・・
>>571
>32767 の値に根拠が欲しい。
とりあえず、自分は20000ぐらいまでにしときます。
てか、553の現状がわからないw
573:Name_Not_Found
11/02/13 23:39:16
＞32767
URLﾘﾝｸ(b.hatena.ne.jp)
URLﾘﾝｸ(css-happylife.com)
574:556
11/02/13 23:46:05 SaFohdPO
とりあえず現状はIE6でも最新の5ブラウザでも32768で問題ないです。
将来はわかりませんけど。
575:567
11/02/14 00:13:00
>>573
ありがとう。IE (バージョン未記入) の実装依存なのか…。
>>572,574
値の問題ではなく、「実装は仕様と比べて不安定だから仕様に準拠すべき」ということを伝えたかった。
全ての実装を確認したとして、ブラウザが更新されて実装が変わる度にコードに修正を加える、なんて面倒くさすぎるんじゃないだろうか。
また、固定値を与える方法は一定の条件を満たさないと期待通りに動作しない。
・32767px 以上の高さのボックスが形成されたときに margin-bottom:-32767px; は破綻する。
・9999px 以上の幅のボックスが形成されたときに text-indent: -9999px; は破綻する。
>554 のように既に CSS に用意されたプロパティがあるのだからそちらを優先して使うべきだと思う。
その上で IE7- だけ処理を分ければいい。JavaScript で対応するか、先述のCSSハックを使うか。(前者の方が安定している)
CSSに限らないが、最も低機能な実装に合わせて不安定なコードを全てのUAに適用するのは無駄に不安定要素を大きくするだけなので、お勧めしない。
576:556
11/02/14 00:34:27 tvSEGdP8
>>575
勉強になりました。ありがとうございますｍ（＿ ＿）ｍ
577:Name_Not_Found
11/02/14 01:45:36
> そちらを優先して使うべきだと思う。その上で IE7- だけ処理を分ければいい。
そこまでするぐらいなら、素直にtableタグを使えば済むのに と思うんだが
578:Name_Not_Found
11/02/14 02:26:39
この流れでなぜtableレイアウトを勧めるんだろう。
579:Name_Not_Found
11/02/14 03:38:07
どのあたりが素直なのかわからんが
boxは先行実装だしtable-cellはtable-rowの中に入れないとあかんし
580:567
11/02/14 09:28:03
>>579
box はまだ安定していないので現実的には table-cell を使うことになるかと。(Recommendation になれば box がより向いている気はするが)
CSS 2.1 table model では table-cell の親要素が table-row ではない場合に対応する要素を補完しなければならないので table-row に関しては問題ないと思う。
URLﾘﾝｸ(www.y-adagio.com)
URLﾘﾝｸ(www.w3.org)
581:Name_Not_Found
11/02/14 15:33:04
>>580
tableもrowもcellも省略できるのか。便利だなこれ
582:Name_Not_Found
11/02/14 22:18:55
>>569
imgは全然素直じゃない
あれは画像がメインの場合であって、メニューの文字を画像に置き換える類のものではない
583:Name_Not_Found
11/02/15 00:00:43
>>582
テキストを画像に置換する実装が素直じゃない、ということかと。
text-indent: -9999px; が素直な実装とは思えない。
584:Name_Not_Found
11/02/15 00:27:48
並べてみればわかる。
URLﾘﾝｸ(codepad.org)
585:Name_Not_Found
11/02/15 00:51:54
素直＝楽 って意味で言ったんじゃないん
586:Name_Not_Found
11/02/15 02:22:38
みんなimgにしないのは、altが要素の代替ではないと考えるからかね
CSSで飛ばした方がHTMLに無理がないと
あとはz-indexか
587:569
11/02/15 03:05:33 DNB9Oy2K
>>583
「現時点では（昔からの習慣に）素直に（従って）img要素（を使います）。」と補完してください。
img要素が理想的な画像置換じゃないことは私も承知しています。
本来内容となるべきテキストを属性値に追い遣るのは変だと思います。
しかしながら、それ以外には、もっと気持ち悪い方法か、理想的だけど実装が追いついていない方法のどちらかしかないのです。
テキストを飛ばす方法は、>>571の指摘する「2つの問題」がありますし、
さらに画像が読み込まれなかったときにテキストが表れないという欠点もあるので、好きではありません。
588:569
11/02/15 03:16:35 DNB9Oy2K
CSS3では、疑似要素ではない、普通の要素の内容も生成内容で置換できるようになります。
（URLﾘﾝｸ(www.w3.org)）
foo {
content: url(...), contents;
}
これが理想的な画像置換でしょうが、広く実装されるまで別の方法で我慢するしかありません。
CSS2で、生成内容はbefore/after疑似要素特有のプロパティでした。
じゃあ、before/after疑似要素に画像を生成して代替手段としよう……と言いたいところですが、
before/after疑似要素をサポートしないブラウザがまだ広く使われています―IE 6とIE 7です。
IE 6とIE 7を無視してよくなったら、before/after疑似要素による画像置換を採用し、
CSS3の時代になったら、普通の要素の内容を生成内容で置換する方法に切り替えると思います。
589:Name_Not_Found
11/02/15 10:08:03 YPlNEjKd
糞IE6対策で標準モードの記述をし、
ローカルで問題無くセンタリングで表示したので鯖に転送したら左寄せ…。
なんだよ、ソースの先頭に自動広告が付いて、強制的に後方互換モードじゃん！
久々に初心者やらかしたｗ
あーあ、また「text-align:center;」のお世話になるのね。
590:Name_Not_Found
11/02/15 12:27:59
糞広告が入った時点でそれはもはやHTMLじゃない……
591:Name_Not_Found
11/02/15 13:09:02
ヘンテコな無料鯖の広告はHTMLを阻害する
592:Name_Not_Found
11/02/17 03:01:13 8zKACwJ8
letter-spacingで横幅を取りたいのですが
1px以下の単位はないのでしょうか？
0だと窮屈ですが、1pxだと開きすぎな気がしてます
593:Name_Not_Found
11/02/17 04:37:04
小数点知らないの？
でもIEだと0.5単位でしか効かなかったかな？
594:Name_Not_Found
11/02/17 13:24:50
スクリーンで0.5pxとかできるのかよ
595:Name_Not_Found
11/02/17 17:48:58
A:hoverにtext-decoration : underline;を記述しているのですがマウスを当てたときに下線が出てきません
要因として何が考えられるでしょうか？
596:Name_Not_Found
11/02/17 18:01:51
マルチ止めれ
180 Name_Not_Found [sage] 2011/02/17(木) 17:50:35 ID:??? Be:
cssでA:hoverにtext-decoration : underline;を記述しているのですがマウスを当てたときに下線が出てきません
要因として何が考えられるでしょうか？
597:Name_Not_Found
11/02/17 18:27:48
>>596
一々うるせえぞカス
お前にはまだ2ちゃんは早い回線切ってロムってろ
598:Name_Not_Found
11/02/17 18:32:44
だまっとけよおっさん年がバレるぞ＾＾；
599:Name_Not_Found
11/02/17 18:38:45
>>597
ﾜﾛﾀ
600:Name_Not_Found
11/02/17 18:42:54
>>597
回線切ってROMｗｗｗｗｗｗｗｗｗﾃﾗ矛盾ｗｗｗｗｗｗｗｗｗｗｗｗｗｗ
601:Name_Not_Found
11/02/17 21:21:37
よ～しパパ 回戦切ってROMちゃうぞ～～
602:Name_Not_Found
11/02/17 21:29:16
回線切るとかテレホーダイかよ
603:Name_Not_Found
11/02/18 02:56:18
ページを表示するときに背景色が遅れて表示されるんですが、CSSに問題があるんでしょうか？
HTMLが問題なのか、ブラウザが問題なのか、サーバーの性能が問題なのか分からないので原因を探ってます。
604:Name_Not_Found
11/02/18 13:49:42
テレホタイムに保存して、後で読んだりしてたな
605:Name_Not_Found
11/02/18 14:20:19 YSS34YOL
<body>
<uho!iiotoko>
<ah!!>
</body>
606:Name_Not_Found
11/02/18 21:52:34
>>603
ソース
607:Name_Not_Found
11/02/18 22:21:12
>>603
cssファイルを一番最後においてないか？
head内においてみ。
608:Name_Not_Found
11/02/19 06:24:43
な ん な ん だ こ の 低 ラ ベ ル は !
609:Name_Not_Found
11/02/19 10:26:04
>>608
お前の寝てる間に、口の中にカメムシ１００匹入りますように。
610:Name_Not_Found
11/02/19 11:43:37
まだカメムシは食ったことが無い
611:Name_Not_Found
11/02/19 14:29:20
パクチーで代用すれば良し
612:Name_Not_Found
11/02/20 12:29:54.12 idSymTrd
既出ならごめんなさい。
下記にbox-shadowを適用させる良い方法教えて下さい。
・IE7以後
・divの枠
・divの枠内背景は透過png(5×5を並べてる）
現状では、カラムが崩れたり、背景全部が黒くなったり、
まったく違う場所に影ができたりと、上手くいきません。
たぶん、私の技術不足が重なっておかしくなってるのだと思います。
そこで、皆様お勧めの方法に絞って、検討したいと思います。
613:Name_Not_Found
11/02/20 13:17:58.95 6sOwfSHS
>>612
filter shadow
614:Name_Not_Found
11/02/20 13:39:24.90
>>612
IE7 は box-shadow に対応していなかったはずだが…。
URLﾘﾝｸ(developer.mozilla.org)
615:Name_Not_Found
11/02/20 15:54:01.25 idSymTrd
>>613,614
ありがとうございます。
枠内の背景自体も黒くなってしまいます。
単一色の背景だと大丈夫です。
そこで、よろしければ追加質問させて下さい。
原因はどちらでしょう？
・そもそも透過pngと併用できない。
・私のやり方が間違ってる。
616:Name_Not_Found
11/02/20 22:15:49.70 hzRvTuWp
>>615
#a{width:100px;height:100px;filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#999999');}
#a div{width:100px;height:100px;background:#fff url('hoge.png');}
<div id="a">
<div></div>
</div>
617:Name_Not_Found
11/02/21 01:29:32.88 c+YD+p//
URLﾘﾝｸ(www.nicovideo.jp)
初心者はこういうのみて勉強するべき
618:Name_Not_Found
11/02/21 02:08:18.49
IEのバージョン毎にバグを把握してコーディングするのが面倒だったら、こういうの使ったらどうかね？
使ってないので使用感は知らないまま勧めてるんだけど
URLﾘﾝｸ(code.google.com)
サンプルは外部リンクになってるけど、ダウンロードしてディレクトリにも置ける
これは何なのかって言うと…続きはGoogleで
URLﾘﾝｸ(www.google.co.jp)
619:Name_Not_Found
11/02/21 02:12:43.53
肝心な事かを書き忘れたけど、バグだけじゃなくて未対応タグとかにも効く
620:Name_Not_Found
11/02/21 03:24:58.34
DWMXをずっと使ってたんだけど
プレビュー機能の無能さにいい加減イライラするので
何かいい感じのCSSエディタないかなと思ってるけど無いですか
DWはCS3が欲しいんだけど今探してもないし
更にDWは学生の時に買ったのでその時は安かったけど
流石に卒業した今ではDW高くて手が出せない
MACだとCODAとかがいいって聞くけど
Windowsで探してます
621:Name_Not_Found
11/02/21 07:48:53.18
>>620
DWはどこが使いやすかった？
622:Name_Not_Found
11/02/21 09:38:58.38 j8NH73Li
>>616
ありがとうございます。
やっぱり透過無くさなくてはいけない感じですね。
>>618
ありがとうございます。
ちょっと私の技量では上手くいかなかったのですが、
このようなのを使う方向で検討進めたいと思います。
623:Name_Not_Found
11/02/21 11:35:10.69
>>622
基本、フォトショップでデザイン組んで
素材作って、それをCSSでコーディングってスタンダードな方法なんだけど
以前はCSSじゃなくてテーブルだったから、DWMXだと
フォトショでスライス切ってDWでソース修正で鬼速だった
けど、MXのプレビュー機能がCSSに追いつかなくなってからはもうグダグダ
プレビュー機能が少しも役に立たないから便利な所が一つも無くなった
様はテーブル時代の時のようにCSSも問題なく
さくさく同時プレビューしてくれよという所です
624:Name_Not_Found
11/02/21 11:37:01.76
すみません>>623は>>621へ
625:</a>
11/02/21 12:44:06.08
test
626:Name_Not_Found
11/02/21 13:40:24.27
ＭＸ古すぎだろw
テーブルレイアウトなんて
ださすぎ
627:Name_Not_Found
11/02/21 13:50:38.82
HTMLコーディングするだけならMXで十分
日本語UTF-8も正常に動くし
628:Name_Not_Found
11/02/21 14:10:30.54
>>620
CS3のプレビューは無能だよ
DWのプレビューがまとに使えるのは、WebKitに乗せ換えたCS4以降
629:Name_Not_Found
11/02/21 14:44:30.20
>>626
いまテーブルは使ってないよ
CSSつってんですが
>>628
そうなんだ！
なんかCS3なら大丈夫って言われてた気がしたけど４からだったのか
有難う御座います助かります
にしても、高いよ・・・高いよDW・・・
630:Name_Not_Found
11/02/22 22:03:57.15
ie6のコメントバグも結構困り者だったな
<!-- 死ねie6!! -->
↓
<!--[if !IE]> 死ねie6!! <![endif]-->
cssの記述に間違いがあると思って何時間費やしたか。。。
631:Name_Not_Found
11/02/24 22:15:41.79
>>630
それはバグなのか…。条件付きコメントなのでは？
632:Name_Not_Found
11/02/24 22:33:06.65
条件付コメントにするのは、コメントバグの回避法らしいよ
633:Name_Not_Found
11/02/24 23:44:13.01
コメントバグｗｗｗ
何年か前に発生したなぁ。
634:Name_Not_Found
11/02/25 00:24:29.77
URLﾘﾝｸ(www.nicovideo.jp)
こういう動画で勉強してからＣＳＳこい
635:Name_Not_Found
11/02/25 02:06:17.99
だからどんなバグなんだ…ってぐぐってみたが、これか
IE6 Duplicate Characters Bug - CSS fixes and workarounds
URLﾘﾝｸ(positioniseverything.net)
636:Name_Not_Found
11/02/28 14:01:02.24
初心者ですがお願いします。
このサイトのフォントを変更したいと思います。
URLﾘﾝｸ(kenji1234.blog75.fc2.com)
/* フォントを変更する */
body{
font-family :'IPAMonaPGothic','ＭＳ Ｐゴシック',sans-serif !important;
}
上記の内容を、サイトのcssの何行目に挿入すれば良いですか？
637:Name_Not_Found
11/02/28 14:02:34.40
文字コード指定以降ならどこでもいい