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
文字コード指定以降ならどこでもいい
638:Name_Not_Found
11/02/28 14:06:59.59
>>637
すばやい回答をありがとうございます。
本当にすみませんが、文字コード指定とはどこですか？
ぐぐったのですがよく分かりませんでした。
お願いします。
639:Name_Not_Found
11/02/28 14:11:18.80
ぐぐって分からんとは重症だな
んじゃ猫でも分かるように教えてあげよう
「１行目じゃなければどこでもいい」
640:Name_Not_Found
11/02/28 14:16:36.71
>>639
分かりやすい説明をありがとうございます。
１行目以外に挿入してみたのですが、なぜかフォントが変更されません。。
何がおかしいのでしょうか？
641:Name_Not_Found
11/02/28 14:26:15.89
>>640
6行目を削除しないとダメだよ
642:Name_Not_Found
11/02/28 14:43:14.75
>>641
できました！感動です！ありがとうございました！
643:Name_Not_Found
11/02/28 14:55:59.80
>>636です、また失礼します。
URLﾘﾝｸ(kenji1234.blog75.fc2.com)
このサイトのフォントは変更できました。
次は２ちゃんねる全体のフォントを変更したいのですが、
そんなことって可能ですか？
（フォントをモナーフォントにして、AAを綺麗に見たいのです。）
重ね重ね心苦しいですがお願いします。
644:Name_Not_Found
11/02/28 15:17:26.15
ユーザースタイルシートでぐぐれ
645:Name_Not_Found
11/02/28 15:19:44.18
>>644
はい、やってみます！
646:Name_Not_Found
11/02/28 15:30:27.86
ユーザースタイルシートを変更しました。（macでsafari使用です）
どうやら全てのサイトに適用されるみたいで…。
2ちゃんねるだけをモナーフォントにしたいです。
分かる方いらっしゃったらどうぞお願いします。
647:Name_Not_Found
11/02/28 15:54:54.45
ユーザースタイルシート Safari でぐぐれ
上位300件くらい読んでも分からなかったらまた来なさい
648:Name_Not_Found
11/02/28 16:01:58.88
>>647
ありがとうございます！やってみます！
649:Name_Not_Found
11/02/28 16:11:55.38
・サイト毎にスタイル－シートを利用するには。
URLﾘﾝｸ(app.m-cocolog.jp)
・SafariStand/ サイトごとにフォントを変更する
URLﾘﾝｸ(wakabamac.blog95.fc2.com)
これらを参考にしたらできました！
本当にありがとうございました。感謝です。m(__)m
650:Name_Not_Found
11/02/28 16:27:25.53
うむ、解決法をしっかり報告
模範的な質問者でござる(＾＾)ｖ
651:Name_Not_Found
11/02/28 18:03:07.94 Z3DA+QVS
稀にみるw
652:Name_Not_Found
11/02/28 20:18:56.06
外部CSSでテーブルを制御したいのですが二つ質問です
3列のテーブルで全体の幅を500pxとする時
100px、200px、200pxで固定したい場合は
どうすればいいでしょうか？
あと一行ごとに背景色を#FFFFFFと#CCCCCCで
交互に変えたいのですがこれもCSSで一括で指定できますでしょうか？
よろしくお願いします
653:Name_Not_Found
11/02/28 21:08:47.02
1．それぞれのカラムにクラスを付与して横幅を指定する
2．「css nth-child(even)」でググれ
654:Name_Not_Found
11/03/01 13:07:40.80
div{display:inline-block;vertical-align:top;}のときに、
☆<div>ａ<br>ｂ</div>とすると、
┏━━┓
┃☆ａ ┃
┃ ｂ ┃
┃ ｃ ┃
┃ ┃
┃ ┃
となってくれますが、
☆<div>ａａａａａ<br>ｂｂｂｂｂ</div>とすると、
┏━━┓
┃☆ ┃
┃ａａａａ┃
┃ａ ┃
┃ｂｂｂｂ┃
┃ｂ ┃
となってしまいます
これを、
┏━━┓
┃☆ａａａ┃
┃ ａａ ┃
┃ ｂｂｂ┃
┃ ｂｂ ┃
┃ ┃
とするにはどうしたらいいのでしょうか？
CSS2.1以下で優しく教えてください
655:Name_Not_Found
11/03/01 14:28:13.65
>>654
body {font-size:80%;}
656:Name_Not_Found
11/03/01 15:04:57.65
なにが
優しく
だ
657:Name_Not_Found
11/03/01 15:09:15.52
>>654
それはどうみても inline-block の挙動じゃない…。
658:Name_Not_Found
11/03/01 15:21:06.09
>>654
URLﾘﾝｸ(jsfiddle.net)
659:658
11/03/01 15:22:30.20
失礼。CSS2.1 では無理だな。
660:Name_Not_Found
11/03/01 15:44:07.79
>>654
HTML5 なら <wbr> が使える。Opera の実装が追いついてなかった気がするが。
661:Name_Not_Found
11/03/01 19:51:14.11
質問失礼致します。
table内でpaddingを指定してもie6では表示されないのですが、以下のような場合、｢あ｣の前にpaddingをとろうとするならどういった記述にすればいいでしょうか？
文字列をclassで指定してmarginをとるべきでしょうか？
<table>
<tr>
<td>あいうえお</td>
</tr>
</table>
662:Name_Not_Found
11/03/01 19:59:16.13
>>661
margin, padding はインラインボックスには適用できない。
inline-block にすればいいが、IE6 は inline-block に対応しないので擬似的に再現する。
URLﾘﾝｸ(www.yomotsu.net)
663:Name_Not_Found
11/03/02 04:12:36.81
すみません。
youtubeをブログに埋め込んだ時、画面を上にスクロールしたら、
埋め込んだyoutubeだけが最前面に表示されるのが嫌で、背面に直したいのですが。。。
対応できるCSSとかありますでしょうか＞＜
Firefoxでは問題なく背面でスクロールするのですが、IE8では最前面になります＞＜
初心者ですみません。。。
664:Name_Not_Found
11/03/02 04:18:58.86
ブログに、PrettyPhotoをプラグイン追加したら、画像広告が出現したのですが、消す方法（CSS）はありますか？
665:Name_Not_Found
11/03/02 08:04:10.97
>>664
PrettyPhotoの規約読みなおせ。
おまえのブログ、アクセスないだろw
666:Name_Not_Found
11/03/02 13:28:26.51
>>665
アクセス少ない人だけに表示されるとかですか？ｗ
規約の場所分かりません。。。
667:Name_Not_Found
11/03/02 14:02:24.97
ハッハワロス
668:Name_Not_Found
11/03/02 14:26:00.82
>>666
広告は消しちゃだめなんだよ。
おまえ成績もわるいだろ。
669:Name_Not_Found
11/03/02 19:24:19.47
>>662
ありがとうございます。
Googleの<if ～>でブラウザ別に対策できると聞いて、埋め込んだのですが改善されませんでした。
効果はあるのでしょうか？
670:Name_Not_Found
11/03/02 19:29:19.37
>>668
あのぉダメなのは分かってますｗ
その上での質問となっております＾＾
671:Name_Not_Found
11/03/02 19:36:02.58
そんな簡単なこと一々聞くなよ＾＾
お前が死ねばそんな悩みなんてなくなるよ＾＾
672:Name_Not_Found
11/03/02 19:57:29.26
ハッハワロス
673:Name_Not_Found
11/03/02 21:01:12.78
￣￣￣￣￣￣￣○￣￣￣￣￣￣￣￣￣￣￣￣￣
O 。
, ─ヽ
＿＿＿＿＿＿＿＿ /,/＼ヾ＼ ／￣￣￣￣￣￣￣￣￣
|＿＿|＿＿|＿＿|＿ __（（´∀｀＼ ）＜ というお話だったのサ
|＿|＿＿|＿＿|＿＿ ／ノへゝ/''' )ヽ ＼＿＿＿＿＿＿＿＿＿
||＿＿| | | ＼´-｀） / 丿/
|＿|＿| 从.从从 | ＼__￣￣⊂|丿/
|＿＿|| 从人人从. | /＼＿＿/::::::|||
|＿|＿|／//ヽヾ＼ / ::::::::::::ゝ/||
────(~～ヽ::::::::::::|／ ＝完 ＝
674:Name_Not_Found
11/03/02 23:44:37.53
>>670
ママに許可とってから
パソコンさわろうな。
675:Name_Not_Found
11/03/02 23:52:41.89
>>670
なっておりますってwww
偉そうだな
676:Name_Not_Found
11/03/03 00:33:43.19
>>670
「ダメなのはわかっているけど、これから君のサイトを荒らしたいからURLを教えて」っていったら、教えてくれるのかな？
677:Name_Not_Found
11/03/03 01:02:43.11
>>670
ダメなのはわかってるけど、今すぐ会いたいから電話番号教えてくれるよね
そしたら方法おしえるよ＾＾
678:Name_Not_Found
11/03/03 01:32:32.08
CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。
※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。
679:Name_Not_Found
11/03/03 01:41:23.67
但し、当然ながら違反行為の回答はNG
680:Name_Not_Found
11/03/03 01:55:50.18
知らない人のレスはいりません
681:Name_Not_Found
11/03/03 11:36:36.98
アナタはワタシを知りません
682:Name_Not_Found
11/03/03 11:37:36.25
えっ ? ひろちゃんだろ ?
683:Name_Not_Found
11/03/03 13:44:35.16
>>680
知ってるがお前の態度が気に入らない
684:sage
11/03/03 15:53:46.72 U5RlTzwm
質問させてください
普通のHTMLページにlightbox2を設置したのですが
レンタルサーバーにUPして確認してみるとうまく表示されませんでした。
cssもjsファイルも絶対パスに書き換えたのですが、なぜでしょうか？
685:Name_Not_Found
11/03/03 18:04:05.48
>>684
> 普通のHTMLページにlightbox2を設置したのですが
普通とはなんぞ
> レンタルサーバーにUPして確認してみるとうまく表示されませんでした。
どう表示されたの？
> cssもjsファイルも絶対パスに書き換えたのですが、なぜでしょうか？
そのパスは合ってるの？
そしてはげしくスレ違い
686:Name_Not_Found
11/03/03 18:56:26.24
>>654
そういうのは、ul>liでやるべきじゃないか？
687:sage
11/03/03 19:15:57.45 U5RlTzwm
>>685
ごめんなさい。自己既決しました。
勉強しながらHP今作ってるんですが、ページ内で使うフォントは
1. "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospaceと
2. ＭＳ Ｐ明朝, MS PMincho,ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, serifと
3. ＭＳ ゴシック, MS Gothic, Osaka－等幅, Osaka-mono, monospaceの中なら
どれを設定するのが一般的ですか
688:Name_Not_Found
11/03/03 19:16:28.97
何も指定しないのが一般的
689:Name_Not_Found
11/03/03 19:28:38.43
2,3は書き方が間違ってるから消去法で1番
690:Name_Not_Found
11/03/03 20:23:04.58
>>687
一般的なのがいいの？それより自分がよく見るとことおなじにすればいいんじゃね？
691:Name_Not_Found
11/03/03 20:40:05.94
３つともダメだな
692:Name_Not_Found
11/03/03 20:50:53.79
>>687
とりあえず、等幅かプロポーショナルかぐらいは自分で決めような。
後は、色んなOSや国(?)に合わせて無難なフォント選んでいけ。
ちなみに、yahoo見たらこんなんなってたぞ。
font-family:"MS PGothic","Osaka",Arial,sans-serif;
693:Name_Not_Found
11/03/03 21:33:18.50
フォントのptとem、%の使い分けってどうやってますか？
694:Name_Not_Found
11/03/03 21:37:56.35
適当
695:Name_Not_Found
11/03/03 21:40:21.81
好きなので
696:Name_Not_Found
11/03/03 22:09:54.57
>>694-695
そ、それぐらいの認識でよいのですね
ありがとうございます
697:Name_Not_Found
11/03/07 17:15:43.68
URLﾘﾝｸ(www.dospara.co.jp)
の左上のバナーのように、一定時間で別のバナーに変更するバナーを設置したいと思います。
解説されてるサイトやヒントがあればよろしくお願いいたします。
698:697
11/03/07 17:16:25.74 XlTmgfE+
ageわすれ
699:697
11/03/07 18:53:46.83
ローテーションバナーで検索したらでてきました。
ありがとうございます。
700:Name_Not_Found
11/03/08 06:50:29.82 Lpx9d7kR
centerで中央配置した2つの要素(id="bbb"とid="ccc")を同じ位置に重ねたいのですがCSSだけでできますか？
<div id="aaa" style="text-align:center;">
<div id="bbb">BBB</div>
<div id="ccc">CCC</div>
</div>
701:Name_Not_Found
11/03/08 08:41:02.07 Lpx9d7kR
重ねたいってのはdivブロックの左上端を同じにしたいってことです。
702:Name_Not_Found
11/03/08 12:45:55.40
>>701
z-index
703:Name_Not_Found
11/03/08 13:32:52.37
#CCCをマイナス補正すれば？
704:Name_Not_Found
11/03/08 14:00:39.10
>>696
意識しないで製作する人間はド素人だけだよ。
ヒントは文字ベースのレイアウト
705:Name_Not_Found
11/03/08 14:10:10.67
>>693
コンテンツによる。
・画像中心なら px
・文字中心なら em
% は親要素に依存する。親要素の font-size が em や px なら上と同じ原理。
ルート要素から % ならデフォルトスタイルシートに依存する。どんな font-size でもレイアウトできるように組まないとダメ。
706:700
11/03/09 15:18:20.57 zUuYVIvM
text-align:centerで画像<img id="xxx">を<div id="aaa">の中央に配置して
画像<img id="xxx">と同じ幅・高さのボックス<div id="bbb">の中の
左上角に画像<img id="yyy">を、右上角に画像<img id="zzz">
を画像<img id="xxx">と重なるように配置したいのですが
CSSだけで可能でしょうか？
<div id="aaa" style="text-align:center;">
<div id="bbb">
<img id="xxx" src="xxx.jpg"/>
<img id="yyy" src="yyy.jpg"/>
<img id="zzz" src="zzz.jpg"/>
</div>
</div>
707:Name_Not_Found
11/03/09 16:20:42.43
>>706
可能です。
708:700
11/03/09 16:54:14.33 zUuYVIvM
どうすればよいですか？
709:Name_Not_Found
11/03/09 18:58:52.75
>>706
テストしてないけどこんな感じ。
#bbb { position: relative; height: 300px; }
#xxx, #yyy, #zzz { position: absolute; }
#yyy { right: 0; }
710:Name_Not_Found
11/03/09 20:30:23.66
>>706
数値***pxは画像に合わせて調整
<div id="aaa">
<div id="bbb">
<img id="xxx" src="xxx.jpg"/>
<img id="yyy" src="yyy.jpg"/>
<img id="zzz" src="zzz.jpg"/>
</div>
</div>
#aaa { text-align:center;}
#bbb { width:***px; margin: 0px auto;}
#xxx{}
#yyy {position: relative; bottom:***px; left:***px;}
#zzz {position: relative; bottom:***px; right:***px;}
711:Name_Not_Found
11/03/09 20:46:52.53
>>710
右と左を間違えた。
#aaa{ text-align:center;}
#bbb{ width:***px; margin: 0px auto;}
#xxx{}
#yyy{position: relative; bottom:170px; right:***px;}
#zzz{position: relative; bottom:170px; left:***px;}
712:Name_Not_Found
11/03/09 20:48:55.58
>>711
テスト用の数値を残したままだった。落ち着け自分。。。
#aaa{ text-align:center;}
#bbb{ width:***px; margin: 0px auto;}
#xxx{}
#yyy{position: relative; bottom:***px; right:***px;}
#zzz{position: relative; bottom:***px; left:***px;}
713:Name_Not_Found
11/03/12 16:54:03.78
jpg画像を画面中央に配置したページを作りたいのですが
>>4のQ6がリンク切れで見つかりません。どなたか参考になる代替案を教えていただけないでしょうか？
714:Name_Not_Found
11/03/12 17:23:40.77
>>713
Q6とは違うと思うけど、単に画像を画面中央に配置できさえすればいいなら、
その画像を背景画像にして
body
{background-image:url("hogehohge");
background-repeat:no-repeat;
background-position:center center;}
とかでいいのでは？
715:Name_Not_Found
11/03/12 17:39:57.85
>>714
レスありがとうございます
コピペしてやってみたのですが中央に移動しただけで持ってくることはできたのですが
画面の「中心」に置くことはできませんでした
どのブラウザからも画像が中心に見えるように配置したいのですが……
716:Name_Not_Found
11/03/12 18:17:40.13
>>713
ｽﾚﾘﾝｸ(hp板:640番)n- の質問は放置するの？
717:Name_Not_Found
11/03/13 07:09:59.67
>>716
お前が答えてやれよ
718:Name_Not_Found
11/03/13 11:55:07.34
>>717
？
719:Name_Not_Found
11/03/13 12:10:01.57
>>718
？
720:Name_Not_Found
11/03/13 14:29:42.15
>>719
？？
721:Name_Not_Found
11/03/13 15:23:28.41
>>716
放置でいいだろ
722:Name_Not_Found
11/03/13 18:14:51.11
>>716
html,body{
margin: 0px;
padding: 0px;
height:100%;
background:url(hogehoge) no-repeat center center;
}
723:Name_Not_Found
11/03/14 17:16:47.59
p {margin-left:2em;}
img {margin-left:3em;}
で左に5emですが、
p {margin-left:2em;}
img {margin-left:3em;}
p img {margin-left:10em;}
にすると12emになりますか？
724:Name_Not_Found
11/03/14 20:25:45.26
>>723
やってみてどうだった？
725:Name_Not_Found
11/03/15 07:41:55.59
テーブルの行毎に背景色を変えたいのですが
<tr>などにclassを付けてないで一気に指定する方法ってありますか?
726:Name_Not_Found
11/03/15 07:43:32.40
すみません。2色を交互に変えたいという意味です。
<tr class="r1"><td></td></tr>
<tr class="r2"><td></td></tr>
<tr class="r1"><td></td></tr>
<tr class="r2"><td></td></tr>
これをclassなしで指定できないものかと・・
727:Name_Not_Found
11/03/15 09:29:42.94
>これをclassなしで指定できないものかと・・
tr:nth-child(even) td{
background: white;
}
th:nth-child(odd) td{
background: red;
}
IEとか除外して良いならこういうのは？
728:Name_Not_Found
11/03/15 09:40:46.74
>>727
おおありがとうございます
スゴイこんな事もできるんですね
729:Name_Not_Found
11/03/16 22:15:47.44
.test{
position: fixed;
top: 20%;
left 20%;
background-color: #85b9e9;
width: 200px;
height:100px;
}
これにpadding: 20px margin: 20px;
など混ぜると中身のテキストにも反映されますが、ボックスの位置自体もpx分ずれてしまいます
box内部のことだけ指定してやってるつもりなのですが、なぜなんでしょうか？
730:Name_Not_Found
11/03/17 00:23:13.14
>>729
まーじんは内部じゃないだろ
731:Name_Not_Found
11/03/17 22:13:31.19
>>730
そうでしたorz
しかしpaddingだけ指定してもずれてしまうのですが
ボックスの位置はpaddingの分も考慮して決めないといけないってことでしょうか？
732:Name_Not_Found
11/03/17 22:51:30.42
そうですよ～
733:Name_Not_Found
11/03/18 17:57:04.45
chrome10
IE8
<ol>
<li><div class="head">あああ</div><div class="body">3時間30分前</div></li>
<p class="however">むむむむむむむむむむむむむむむ</p>
<p class="however">とぅるるるるるるるるるるるるるるるるるるる</p>
<li><div class="head">さぼーん</div><div class="body">2時間30分前</div></li>
</ol>
こーいうマークアップで、
div.headとspan.bodyを横並び、olの横幅は500px、div.headは300px、span.bodyは200px、p.howeverは横500pxいっぱい
olはlist-style-type:decimal;で位置がくずれないようにスタイルしたいんですが、うまくいきません。
ol { list-style-type: decimal; text-align:left; }
ol > li { font: normal 12px/17px Arial; }
div.head { width: 300px; }
div.body {
width: 200px;
float: right;
margin-left: 300px;
color: #F00;
}
p.however {
white-space: nowrap;
font: normal 12px/17px Arial;
color: #333;
}
よろしくおねがいします。
734:Name_Not_Found
11/03/18 22:21:52.64 aARWUhdx
画像
この真下にボックス
と言う形でCSSを組みたいのですが、firefoxとかでサイドバーを出すと
ボックス要素が右側にずれてしまいます。topやleftで%を使ってるからでしょうか？
それとも別の原因があるのでしょうか？
画像はbackgroundにしてfixedやabsoluteなど色々試してみたのですがダメでした
どうすれば位置を固定できるか教えていただけないでしょうか？
735:Name_Not_Found
11/03/19 01:09:17.73
>>733
HTMLの基礎を学べ
>>734
画像をボックスへ
736:Name_Not_Found
11/03/19 05:54:41.64
>>733
ol直下にpは入れられない
737:Name_Not_Found
11/03/19 09:07:40.84
>>735
なるほど、その方法がありましたか。
しかし、これだとボックスに入ってないことになるんですかね？
body {
color: #000000;
font-size: 82%;
font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
background-color: #000000;
background-image: url("../img/hogehoge.jpg");
background-repeat: no-repeat;
background-position: 50% 2.5%;
background-attachment:fixed;
}
}
.main{
position: fixed;
top: 52%;
left:26.20%;
background-color: #FFFFFF;
width: 645px;
height:400px;
padding: 0 5% 1% 5%;
line-height:130%;
letter-spacing: 0.5px;
text-decoration:none;
list-style-type: disc;
list-style-position: outside;
}
738:737
11/03/19 09:08:47.72
backgroundの後の｝は消し忘れorx
739:
11/03/19 09:49:17.71
htmlの方を書かんとワカランだろ
740:Name_Not_Found
11/03/19 10:54:29.69
>>739
こんな感じです
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Strict //EN”
“URLﾘﾝｸ(www.w3.org)”>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Style-Type" content="text/css">
<title> hogehoge </title>
<link rel="stylesheet" href="about.css" type="text/css">
</head>
div class="main">
<ul>
<li>HN<br>test</li>
<li>ああああああああああああ<br>ああああああああああああ</li>
<li>いいいいいいいいいいいいいい<br>ううううううううううううううううううううう</li>
</ul>
</div>
<body>
</html>
こんな感じです
741:Name_Not_Found
11/03/19 11:05:16.17
>>740
ulがbody内にないじゃん
lintで間違いを全部なくす方が早い
742:Name_Not_Found
11/03/19 12:33:51.20
>>741
何度も申し訳ないコピペミスでちゃんとbodyタグの中に全部入ってます
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Style-Type" content="text/css">
<title> hogehoge </title>
<link rel="stylesheet" href="about.css" type="text/css">
</head>
<body>
<div class="main">
<ul>
<li>HN<br>test</li>
<li>ああああああああああああ<br>ああああああああああああ</li>
<li>いいいいいいいいいいいいいい<br>ううううううううううううううううううううう</li>
</ul>
</div>
</body>
</html>
ちゃんと確かめたのですが、やっぱりダメ、でし、たorz
743:Name_Not_Found
11/03/19 12:40:11.86
画像の下にボックスって言ってなかった？
744:Name_Not_Found
11/03/19 12:42:22.27
>>743
そうです、その中にリスト形式で文章を書きたいのですが>>734の状態で……
745:Name_Not_Found
11/03/19 12:51:38.53
lintと言うところでググって見たのですが
divの中で<li>タグは使えないと言うだけで、実際表示上は問題なくリスト化できているのですが
ボックスがずれる原因は分かりませんでした……
746:Name_Not_Found
11/03/19 13:00:45.84
firefoxで表示すると正常なのに、IEtabを使って切り替えたらボックス位置が初期値に戻って左上に表示されるんですが
これってどうすれば治るんでしょうか
747:Name_Not_Found
11/03/19 13:17:22.26
>>745
ul書き忘れてるだろ
748:Name_Not_Found
11/03/19 13:18:12.48
>>746
DTDをへんなのに指定してんじゃね？
749:Name_Not_Found
11/03/19 15:11:45.09
>>745
レスありがとうございます
ulを別にクラス化（ul.hogehoge)で別定義すれば解決するかもしれないと言うことでしょうか
ちょっとチャレンジしてみます！
750:Name_Not_Found
11/03/19 15:12:30.10
>>747さんでしたすみませんorz
751:Name_Not_Found
11/03/19 17:09:50.85
>>749
違う
div内に直接liを書けないという警告がでるってことは
<div>
<li>なんとか</li>
という形（<ul>が書かれていない）になってるってこと
勝手に回答を妄想解釈せず素直に読めよ
あととりあえずまずlintで警告でてるとこ全部解消してみろ
そしたら解決するから
おまいの問題のほとんどがHTMLがでたらめなことが原因
ここに貼ってるソースと問題が発生してるソースは違うだろ
752:Name_Not_Found
11/03/19 18:21:00.15
>>734だけどやっぱりボックスを指定する状態でサイドバー出すだけでもう既にずれてしまう
もはや意味が分からない
753:Name_Not_Found
11/03/19 19:42:35.20
>>752
htmlがめちゃくちゃだからだってば
ほんと飲み込みの悪いやつだな
754:Name_Not_Found
11/03/19 19:44:41.75
なんか意味不明な人がきたな
755:Name_Not_Found
11/03/19 19:55:46.53
ここは昔から意味不明のスレなんだが
756:Name_Not_Found
11/03/19 19:57:17.16
>>755
>>754は誤爆です。
757:Name_Not_Found
11/03/19 20:12:31.00
>>753
頭が悪いのはあれですがlintで全部問題解決してもずれるんですけど……
上記条件で>>737で指定した画像ファイルの直下に>>740のリストタグ外してボックス置いてもずれます
htmlがおかしいならどこが変なのか具体的に指摘してくれないと分からないです
とにかく画像の下のボックスがサイドバー出た時点でずれることの解決とhtmlファイルはあまり関係ないと思うんですけど
758:Name_Not_Found
11/03/19 20:40:13.60
>>734
> firefoxとかでサイドバーを出すとボックス要素が右側にずれてしまいます。
仕様。ウインドウが右にずれるのだからコンテンツも右にずれる。
759:Name_Not_Found
11/03/19 20:45:48.63
え
サイドバーは右に出るんだから左にずれるのが仕様だろ
つか画像も置いた本物のHTMLソースを提示してくれ
あとずれてるSSと
嘘のソースから原因を判明すんのは無理
760:Name_Not_Found
11/03/19 20:49:51.73
Firefoxのサイドバーは左側に出るが、俺の環境が特殊なのか？
761:Name_Not_Found
11/03/19 21:04:07.23
スクロールバーとは違うの？
今時FFなんか使わんからわからん
762:Name_Not_Found
11/03/19 21:26:03.21
人を馬鹿にするのもいい加減にしたらどうだ。
こうした若者が増えていること自体、本当に日本の未来が心配な気がする。
自分の人生が正しいのかどうかを、荒待てて振り返る必要があなたにはありますよ、
ということだけは断言しておきたい。神様
763:Name_Not_Found
11/03/19 22:26:45.22
>>761
Firefoxでなくてもサイドバーは左側に出るのが普通だぞ。Windowsエクスプローラでも左だ。
スクロールバーと混同するぐらいの知識なら回答するなよな。
764:Name_Not_Found
11/03/19 22:40:19.84
>>763
そんな必死に怒るほどの話じゃないだろ
なんにせよずれる理由はhtmlの不備で確定してるし
765:Name_Not_Found
11/03/19 22:49:35.49
>>764
何故確定してるの？
766:Name_Not_Found
11/03/19 22:54:51.78
FF儲がマジギレしたｗ
767:Name_Not_Found
11/03/19 22:58:38.13
>>765
噛み付きたいだけならよそでやってくれ
768:Name_Not_Found
11/03/19 23:20:47.34
>>758でFA
769:Name_Not_Found
11/03/19 23:57:05.99
お前らくだらない事で喧嘩すんな
770:Name_Not_Found
11/03/20 00:28:36.60
こうやって煽りにくるあほはどこにでも沸くんだな
771:Name_Not_Found
11/03/20 03:25:06.30
次の方どうぞー↓
772:Name_Not_Found
11/03/20 04:36:31.85
ふんにゃかふんにゃか
773:Name_Not_Found
11/03/25 17:50:40.20
服を着たままの状態で、女子の肛門の位置を正確に割り出す方法を教えてください。
スレ違いだったら申し訳ありません。
774:Name_Not_Found
11/03/25 18:59:38.08
>>773
ｽﾚﾘﾝｸ(esp板)
775:Name_Not_Found
11/03/26 07:04:52.92
春だなあ・・・
776:Name_Not_Found
11/03/26 13:16:04.80
>>774
ありがとうございます！やってみます！