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
ありがとうございます！やってみます！
777:Name_Not_Found
11/03/28 05:39:11.67 zuNWupxm
背景の色を指定したいのですが、初めにhtmlファイルのヘッダーの中に
body {background-color: #FFEEFF;}
を入れると普通に色が出るんですが、これをcssファイルにコピーすると出なくなります…
なぜでしょうか…？
778:Name_Not_Found
11/03/28 06:07:46.89
別の部分でもダブって違う色指定してるとか
cssへのリンクが間違ってるとか
779:Name_Not_Found
11/03/28 07:04:03.67 zuNWupxm
cssに入力した他のやつはちゃんと出ていて、bodyのとこに入力したやつだけ丸々ダメみたいなんですよね。。。
だからリンクが間違ってるということはないと思うのですが、別の部分で違う色を指定してるというのも探した感じそういったものは見当たりません。。。
昨日から始めた者で専門用語がわからず申し訳ないです…
780:Name_Not_Found
11/03/28 07:24:38.47 zuNWupxm
自己解決しました！
答えてくれた方ありがとうございました！
781:Name_Not_Found
11/03/29 01:41:25.23 AOVl6KRt
昨日に引き続き質問させていただきます！
#wrap {width:720px; text-align:center; vertical-align:middle; padding: 2px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border: 1px solid #00F;}
#inner {margin: 10px;}
#mainwrap {width:480px; height:50px; float:left; font-size: 34px; color: #FF2683;}
#sidewrap {width:220px; height:50px; float:right;}
と入力して、htmlは
<div id="wrap">
<div id="inner">
<div id="mainwrap">文字</div>
<div id="sidewrap">文字</div>
</div>
<div class="clear"><hr /></div>
<div id="footer">文字</div>
</div>
と入力して、文字を上下左右真ん中に置きたいのですが、
上下の真ん中に置くことが出来ません。
左右の中央にはなっています。
どうすればできますか？
782:Name_Not_Found
11/03/29 03:23:01.10
テンプレの>>4を読め
以降もちゃんとスレテンプレのリンク先を全て読んでから質問するように
初心者が質問したくなるような事例の大半はそれで済む
783:Name_Not_Found
11/03/29 10:23:35.57
>>782
それは君がイケメンだからじゃないかな？ 俺だったらたぶん無理。
784:Name_Not_Found
11/03/29 10:33:07.06
2chはイケメン専用ですよ.。そうでない奴は一生ROMってなさい。
785:Name_Not_Found
11/03/29 13:34:21.99
初めからイケメンの人もいないだろうさ
786:Name_Not_Found
11/03/29 17:28:09.62
それは整形したイケメン
787:Name_Not_Found
11/04/01 16:59:49.51
画像を重ねて表示するのはcss3で楽になったと聞きました
どのプロパティで出来ますでしょうか？
788:Name_Not_Found
11/04/01 20:34:02.97
ググるのは嫌ですか ?
789:Name_Not_Found
11/04/02 05:50:27.90
座標が同じなら何枚でも勝手に重なるけど？
790:Name_Not_Found
11/04/02 22:04:54.98
<span class="abc def">とすると、.abcと.defという二つのクラス名を使用できますが、
これをidにも同じようにすることは可能でしょうか。
791:Name_Not_Found
11/04/02 22:49:32.02
idは一意
複数指定はclassの役目。
792:Name_Not_Found
11/04/02 23:44:10.10
>>791
ありがとうございました。
793:Name_Not_Found
11/04/04 04:19:47.09
リストのタイトルのつけ方で質問
<ol>
<li class="title">a</li>
<li value="1">b</li>
<li>c</li>
</ol>
と
<div>
<h2>a</h2>
<ol>
<li>b</li>
<li>c</li>
</ol>
</div>
を考えたんですが、どちらがお勧めですか？それとも、もっと良い書き方ありますか？
794:Name_Not_Found
11/04/04 06:46:21.32
タイトルと内容を同列にしてる前者はダメっしょ
CSSを無効にしたときにどう表示されるか考えてみれ
795:Name_Not_Found
11/04/04 11:16:21.62
cssだけで１枚の30x30のgif画像を横に5回繰り返す方法ってございませんか？
background:url(30x30.gif) repeat-x 5;
796:Name_Not_Found
11/04/04 14:54:19.03
背景色だけ透過して文字色だけは透過しないままにする方法ってないですか？
背景色にopacity:0.2ぐらいにすると文字も極端に薄くなってしまいます
797:Name_Not_Found
11/04/04 16:16:33.14
>>796
RGBaにするかアルファPNG
798:Name_Not_Found
11/04/04 16:38:23.07
>>797先生、ありがとうございます！！！！！！！！！！！！！！！！！
799:796
11/04/04 16:53:48.70
ぼくのは無理層ですよね？
800:Name_Not_Found
11/04/04 18:41:00.42 e/yY687M
ボックスを中央に配置したいのですが
ボックスと親要素に対してposition:relative;を、ボックスにtop:50%;left:50%;で位置的には中央になったのですが
これだと左上が基点になってますので、結果中央から右寄りにボックスがあることになります
これをtext-align:centerと同じような感じでぼっくを中央に寄せるにはどのようにしたらよいのでしょうか？
801:Name_Not_Found
11/04/04 18:47:21.61 YpHaPJey
URLﾘﾝｸ(store.uniqlo.com)
ユニクロのグローバルメニューはある一定以上のスクロールをすると
バーを動かしてもずっと固定され表示され続けています。
この記述の仕方をお教えさい。簡易サンプルがあれば
お教えください。
802:Name_Not_Found
11/04/04 18:54:06.61
>>796
その使い方なら、背景色用に透過pngを作ったほうが早い。
803:Name_Not_Found
11/04/04 18:56:02.19
>>801
スクロール量を調べて特定の量だけスクロールしてあればfixedでメニューを固定してるんだと思う
804:Name_Not_Found
11/04/04 18:57:23.96
>>799
だれ？ｗ
805:８０１
11/04/04 19:20:31.36 YpHaPJey
さっそくのご回答ありがとうございます
８０３＞
素人なもので、簡単なもので構いませんので、
その記載の仕方をお教えいただけませんか？
-----------------------
スクロール量を調べて特定の量だけスクロールしてあれば
fixedでメニューを固定
-----------------------
よろしくお願いいたします。
806:Name_Not_Found
11/04/04 19:28:31.89
これマッチングサイトでも２～５万円ぐらいで成立してる作業だからちったぁ自分で努力しろ
jqueryで使うならスクロールはURLﾘﾝｸ(stacktrace.jp)(val).html
スクロール量を見てメニューのcssを変更するならURLﾘﾝｸ(stacktrace.jp)(properties).html
807:Name_Not_Found
11/04/04 22:31:55.55
>>793
内容によっては
<dl>
<dt>a</dt>
<dd>b</dd>
<dd>c</dd>
</dl>
これもあり
808:Name_Not_Found
11/04/04 22:38:52.09
<ol>
<li class="title">a
<ol>
<li value="1">b</li>
<li>c</li>
</ol>
</li>
</ol>
809:Name_Not_Found
11/04/05 00:29:03.95
春だねぇ
810:Name_Not_Found
11/04/06 11:47:55.03
教えて下さい。
多々ある画像を1枚の画像に結合し、CSSのbackground-positionで指定してやるとサイトが軽くなるという記事を見ました。この場合、
<style>
.test1{
background-image: url(images/AA.gif); width:20px; height: 20px;
background-repeat: no-repeat;
background-position: 0px 0px;
}
.test2{
background-image: url(images/AA.gif); width:20px; height:20px;
background-repeat: no-repeat;
background-position: -20px 0px;
}
</style>
このように指定してやっても軽くなるのでしょうか。それとも、
<style>
#test{
background-image: url(images/AA.gif); width:20px; height:20px;
background-repeat: no-repeat;
}
#test .test1{
background-position: 0px 0px;
}
#test .test2{
background-position: -20px 0px;
}
</style>
このように親要素で指定した上で子要素で位置を指定してやらないと軽くならないのでしょうか。
下の方法でやると、とても大変になりそうで困っています。
知っている方がいましたら教えて頂けないでしょうか。
このスレでの質問と違う内容でしたら申し訳御座いませんがスレの名前でも良いので教えて頂けると助かります。宜しくお願い致します。
811:Name_Not_Found
11/04/06 12:00:26.14
ここ読んでメリットとデメリットを知ってから来てくれ
URLﾘﾝｸ(coliss.com)
812:Name_Not_Found
11/04/06 12:43:55.04
早いお返事ありがとう御座います。
デメリットに関しまして、ブラウザのメモリに関する問題点が上げられていますが、英語のサイトで理解が出来ませんでした。。申し訳御座いません。
具体的にどの程度デメリットが体感出来るのかとても興味深く思います。後で翻訳サイト等にかけて読んでみようと思います。
教えて下さったサイトはとても参考になり、親要素関係なく指定出来る事がわかりました。
このサイトの記述による解釈によると1枚の画像をポジション指定により表示するので、はやり私の書いた上の方法では意味のない、むしろ重くなってしまうという解釈で宜しいのでしょうか？
そこらへんが詳しく書かれていないので最終判断に困っております。宜しければ教えて頂ければ幸いです。
813:Name_Not_Found
11/04/07 13:49:25.19 ATZ3VhwY
背景を透過させたサイトを作っているのですが、
背景だけを透過させたいのに、サイト内のすべての画像が透けてしまいます。
背景のみ透過させる方法はないのでしょうか？
814:Name_Not_Found
11/04/07 13:50:13.20
>>813
>>796-
815:Name_Not_Found
11/04/08 06:07:05.68
>>812
十分理解してるじゃん。
それ以上なにがしたいの？
816:Name_Not_Found
11/04/11 11:30:27.32 5LPARI1S
cssで表の角を丸くする方法で簡単な方法を教えてください。
ネットで見てたらいろいろありますけど、簡単な方法を知りたいです。
できれば、ｃｓｓのみの方法と、画像(丸)1枚を使用する方法の両方を知りたいです。
817:Name_Not_Found
11/04/11 11:33:21.09
URLﾘﾝｸ(lmgtfy.com)
URLﾘﾝｸ(lmgtfy.com)
818:Name_Not_Found
11/04/11 17:39:09.73
>>816
表の角を丸くしてるサイトのソースをパクる
819:Name_Not_Found
11/04/12 06:33:40.97
>>816
ネットで見つけた方法の中で、簡単な方法を使う。
820:Name_Not_Found
11/04/12 23:13:54.32
CSS3で使えなくなったプロパティや値ってありますか？
基本的にCSS2.1に新しいプロパティが加わったと考えて使っても問題ないですか？
821:Name_Not_Found
11/04/12 23:17:36.30
>>820
CSS3 はモジュール化されているからすべてのモジュールを知っている人は少ないと思う。
自分で調べてくれ。URLﾘﾝｸ(www.w3.org)
822:Name_Not_Found
11/04/12 23:31:03.60
わかりました
せっかくなのでまとめた情報をサイトに残したほうがいいですか？
823:Name_Not_Found
11/04/12 23:37:52.71
>>822
まとめてくれるなら助かる。
CSS2.1 は URLﾘﾝｸ(www.w3.org) に property table が用意されている。
CSS3 は URLﾘﾝｸ(www.w3.org) と URLﾘﾝｸ(www.w3.org) を参考に。
CSS3 も URLﾘﾝｸ(www.w3.org) に一覧があると良かったんだが、Draft 段階の文書が多くある中でまとめるのは大変なんだろうな…。
824:Name_Not_Found
11/04/12 23:42:47.99
どうやってまとめるの？
825:Name_Not_Found
11/04/13 00:41:29.88
>>824
あなたは>>820なのか？
CSS2.1 のように property table を作って各セルに「対応/非対応」を入れてみては？
826:Name_Not_Found
11/04/13 05:17:07.71
CSS3って、もう一般化してるの？
827:Name_Not_Found
11/04/13 06:56:41.58
>>826
何を持って一般化と言うか知らんが、
２つ以上のブラウザが実装済みのCSS3プロパティは結構ある。
828:Name_Not_Found
11/04/13 10:42:09.07
>>825
俺は824だよ
何でいきなり自演みたいに認定するの？
829:Name_Not_Found
11/04/13 12:43:14.27
>>828
自演とは思ってないが、便乗質問ならわかるようにしてほしい。回答する方も気を遣うんだ。
830:Name_Not_Found
11/04/13 18:32:01.24
質問の内容と口調的に別人だと思ったけどな。
むしろ822と824の方が近いだろう。
831:Name_Not_Found
11/04/13 19:28:29.85
CSS3まとめ用
IE9
Firefox4
Opera11
chrome10
safari5
832:Name_Not_Found
11/04/13 20:26:33.44
まとめ方なんて人それぞれだろうけど、モジュール名まで書いてくれると親切だな。
+-----------------+------+----------------------------------------+
| property name | CSS2 | CSS3 |
+-----------------+------+----------------------------------------+
| background | ○ | Backgrounds and Borders Module Level 3 |
+-----------------+------+----------------------------------------+
| background-clip | ○ | Backgrounds and Borders Module Level 3 |
+-----------------+------+----------------------------------------+
833:Name_Not_Found
11/04/13 20:54:49.59
>>826
2012年に出すIE10ではCSS3への対応度が向上するらしいよ
834:832
11/04/13 20:59:23.39
background-clip は CSS2 にはないね…。すまんかった。
835:Name_Not_Found
11/04/13 21:12:41.36
一人の人にやらせようとせずてめえも一緒にやれや
836:Name_Not_Found
11/04/13 21:27:05.51
>>824に答えただけで怒られるとは思わなかった
837:Name_Not_Found
11/04/13 21:33:49.49
>>835
つ鏡
838:Name_Not_Found
11/04/13 21:39:01.58
俺は必要に迫られて去年からやってるけどここの連中に見せたいと思わない
839:Name_Not_Found
11/04/13 21:51:59.06
ほぼ煽りしかいないからなあ。
少しでも良くなればとたまに回答しているけど難癖をつけてくる人はいるし、質問者はスルー気味だし、ここの人にお世話になった実感はごく僅かだ。
840:Name_Not_Found
11/04/14 20:02:43.62 PM29wuPy
礼を求めるなら２ちゃんは止めた方がいいよ
質問に対して好き勝手に答えるだけでいいんだよ。
間違ってたら誰かが指摘してくれる。
841:Name_Not_Found
11/04/16 17:04:41.82
<span style="background: no-repeat url('img/creditcard.png');">クレジットカード</span>
文字を見えなくしたいのですが背景画像を前に表示するにはどうしたらいいでしょうか？
842:Name_Not_Found
11/04/16 17:24:30.38
<span style="display:none;">クレジットカード</span>
843:Name_Not_Found
11/04/16 17:45:50.78
>>842
width 指定しても画像は表示されないです。。
844:Name_Not_Found
11/04/16 17:46:19.49 lDo7GZYV
AとBとfloatでわけてBの背景にいろつけたいのですけど
Aの文章が長いせいかBに白い隙間が出来てしまします。
min-hight とかつかってもブラウザによって変わってきます。
対策はあるのでしょうか？
845:Name_Not_Found
11/04/16 17:49:19.26 lDo7GZYV
AとBと色違いで高さをいっしょにしたいってこっとです
846:Name_Not_Found
11/04/16 19:02:11.94
>>841
text-indent -9999pxだっけ。mixiとかそこらじゅうで使われてる。
847:Name_Not_Found
11/04/16 19:18:02.61 Xuq06yW1
css3での質問です。
このサイトのフッターを一番下に表示させたいのですが
sectionのheightを100%にするなど、色々試してみたのですが出来ません！
URLﾘﾝｸ(mrgrotesque.com)
なにかアドバイスよろしくお願い致します！
848:Name_Not_Found
11/04/16 19:26:33.83
>>846
できました。ありがとうございます
849:Name_Not_Found
11/04/16 20:20:51.09 Xuq06yW1
解決しました
850:Name_Not_Found
11/04/16 22:46:43.41
全体的に欧文のページで、一部のセルにだけ和文を使いたいのですが、
<td class="ja">和文</td>
td.ja {font-family: "和文フォント";}
としたところ、文字の上下に妙な余白が出来てしまいました。
margin、padding、vertical-align、line-height、position、displayを使って修正を試みましたが、
ブラウザによっては悪化したり、そもそも根本的な解決になっていなくて気持ち悪かったりで、行き詰まりました。
余白の原因をお教えください。
851:Name_Not_Found
11/04/16 23:37:35.95
自己解決しました。読んでいただいた方、ごめんなさい。
td.ja {line-heightではなく
* {line-heightとしたら、
全体的に若干のレイアウト崩れを起こしたものの、問題の余白は綺麗に消えました。
852:Name_Not_Found
11/04/16 23:52:46.17
最近は質問してから自分で考えるのが流行ってるのか？
853:Name_Not_Found
11/04/17 08:41:50.42
↑は解決しました
854:Name_Not_Found
11/04/17 10:10:40.23
お前の寝てる間に、口の中にカメムシ１００匹入りますように。
855:Name_Not_Found
11/04/17 16:14:24.35
このスレって他のとこと較べて程度低いよね。
読むと気分悪いからブックマークから外した。
たまに気になって見に来たら、この有様ｗ
856:Name_Not_Found
11/04/17 17:32:52.47
>>855
あなたが回答してくれなくなってからこの有様ですよ。
857:Name_Not_Found
11/04/18 03:03:17.56
それコピペ
858:Name_Not_Found
11/04/18 04:38:20.22
firefoxのstylishでGoogleトップの検索フォームの形をいじってるんだけど
検索結果のURLが/search?q=～から#hl=ja&～に変わったため検索結果のフォームまで変わってしまうんだけど対処法ありますか？
859:858
11/04/18 05:20:46.91
自己解決しました！
860:858
11/04/18 05:29:28.77
>>859
その発想はなかった
この板はだめだな
861:Name_Not_Found
11/04/18 08:45:46.07
ID出せよ
862:Name_Not_Found
11/04/18 15:50:52.00
Yahoo!トピックスなどにあるNewの画像を消して文字に置き換えたいです
Userstyles.orgにあるスタイルを参考に
IMG[src="URLﾘﾝｸ(i.yimg.jp)"]{width:0!important;}
IMG[src="URLﾘﾝｸ(i.yimg.jp)"]:after{
content: "New";
}
などと見よう見まねでやってみましたができませんでした
やり方を教えてください
863:Name_Not_Found
11/04/18 15:55:47.30
>>862
>>246参照
864:Name_Not_Found
11/04/18 16:02:25.88
>>863
ありがとうございます
スレ内検索すべきでした すみません
865:858
11/04/18 23:17:08.49
>>858-860
ワロタ
866:858
11/04/19 06:38:29.41
よし！俺も
867:Name_Not_Found
11/04/19 07:03:17.51
CSSめんどくさい
868:Name_Not_Found
11/04/19 09:08:07.43
この明日も見えない大変な時代やからアムウエイや。
アムウエイやってがんばって成功したら幸せな老後が待ってるんやで。
ねずみ講ちゃうで。アムウエイはすごいビジネスなんや！
869:Name_Not_Found
11/04/19 20:28:13.56
>>868
も、もしかして哲さん？
870:Name_Not_Found
11/04/19 20:47:13.78
IE８、sleipnirでデザインが崩れているという指摘をされて
自分もIE８、sleipnirで確認したのですが、デザインが崩れていませんでした。
ＰＣの環境によってデザインが崩れる場合cssのどの部分に原因があるか
教えて頂けないでしょうか。
IE８、sleipnirでデザインが崩れていると指摘して下さった方はFire foxだと
普通にみれたようです。
871:Name_Not_Found
11/04/19 21:02:02.51
フォント設定とか
872:Name_Not_Found
11/04/19 21:10:17.01
>>870
デフォルトスタイルシートが違う
873:Name_Not_Found
11/04/20 07:40:39.84
IEでクライアント領域の境界線を消すのに <body style="border:0;">
としていたんですが、DOCTYPEを指定すると消えなくなりました。
DOCTYPEを指定しても消す方法ありませんか？
874:Name_Not_Found
11/04/20 23:23:05.14
input要素のbuttonで、押す前と押した時の表示を変えたいです（へこませたい）
hoverを使うとマウスが上に来たときに変えることはできますが、
クリックしているときだけ変えることってCSSで可能でしょうか？javascriptとか併用が必要？
875:874
11/04/21 00:45:39.39
hoverではなくてactiveで期待通りの動作でした
ちょっと勘違いしてました 自己解決
876:Name_Not_Found
11/04/21 01:29:05.43
先行実装だからscript使った方がいい気もするけどね
877:Name_Not_Found
11/04/21 06:11:59.40 MumpncBS
YUIのDataTableのスタイルシートを抽出できないでしょうか。
URLﾘﾝｸ(developer.yahoo.com)
元はといえば、やりたいことはよくある入力フォームでテーブルの左側が見出し(項目名ヘッダ？)になってるやつを、
同じ画面にDataTableがあるので見た目を統一したいのです。
なので、
１．単にCSSだけぱくる
２．YUI DataTableを行列変換(！？)して適用
のどっちも解決方法としてありなのですけど。
878:858
11/04/21 06:12:05.81
えっ!?
879:Name_Not_Found
11/04/24 23:07:27.09
id 属性と name 属性の違いがイマイチわかりません。
name は一切使わず、 全てのタグで id のみを使うという方針で問題ないのでしょうか？
880:Name_Not_Found
11/04/24 23:08:20.38
問題ありませんよ
881:Name_Not_Found
11/04/24 23:14:25.02
inputはname属性必須の時があるから
882:Name_Not_Found
11/04/25 01:09:23.10
文書内全体で一意か、同じ要素で一意か
883:Name_Not_Found
11/04/25 01:14:13.26
>>879
nameは汎用属性ではない。まずどの要素のname属性を指しているか、をはっきりさせる必要がある。HTML4 と HTML5 でも若干違う。
884:Name_Not_Found
11/04/25 14:19:01.25
すべての要素の、すべての属性に「font-style: italic;」の値が与えられているものを表すにはどうすればいいんでしょうか。
*[*="font-style: italic;"] や ["font-style: italic;"]
としたんですけどエラーが出ました。
表記法を教えてください。よろしくお願いします
885:Name_Not_Found
11/04/25 15:11:29.33
>>884
「すべての属性」に該当するセレクタはないので不可能です。
URLﾘﾝｸ(zng.info)
886:Name_Not_Found
11/04/25 15:32:17.33
>>884
規定にある要素、属性を一つ一つ指定していけば原理上は可能だな。泥臭い方法だが。
URLﾘﾝｸ(www.whatwg.org)
887:Name_Not_Found
11/04/25 20:29:06.20
>>886
スタイルが指定されてるかを判定する方法なんてあるの？
888:Name_Not_Found
11/04/25 22:11:16.48
>>887
ない。
> すべての要素の、すべての属性に「font-style: italic;」の値が与えられている
これが満たせるだけ。
889:Name_Not_Found
11/04/25 22:15:23.84
すべての属性の定義が曖昧すぎる
<style>
div[id="font-style: italic;"][class="font-style: italic;"][style="font-style: italic;"] { color: red; }
</style>
</head>
<body>
<div id="font-style: italic;" class="font-style: italic;" style="font-style: italic;">sample</div>
890:Name_Not_Found
11/04/25 22:26:35.00
じゃあstyleとtitleとaltくらいでいいか
891:Name_Not_Found
11/04/25 22:30:20.43
>>890
styleとtitleは汎用属性だが、altは汎用属性ではないのでタイプセレクタを併用しないと実装できないよ
892:884
11/04/26 13:55:20.60
みなさんご回答ありがとうございます。
一括で指定するという方法はないようですので、一つ一つ属性を指定していくことにします
ご回答ありがとうございました。
893:Name_Not_Found
11/04/26 14:46:39.18 PPfIx3xx
IE9で出たバグっぽい症状なんだけど、どうしたら解決できるかな？
overflowで横スクロールできるようにして、その中のaタグにマウスカーソルを
持っていったり外したりするたびに、その下の方にある文章がだんだん下がっていく。
IE8以下ではでない。Firefox、Chrome、Safari、Operaでもでなかった。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
a { color: #000000; }
a:hover { color: #ff3333; }
div { width: 5em; overflow: auto; }
p { width: 15em; }
</style>
</head>
<body>
<div>
<p><a href='test.html'>テスト</a></p>
</div>
ここが下がっていく。
</body>
</html>
894:Name_Not_Found
11/04/26 15:55:06.40
>>893
divにheightで回避できるが、それじゃ根本的な解決にはなってないんだよな？
895:Name_Not_Found
11/04/26 16:44:29.54 PPfIx3xx
>>894
高さの決めうちは無理な場所でしたけど、height: 100%;で回避できました。
助かりました。ありがとう。
（positionとかfloatとか試したけど結局だめだったな。）
div { width: 5em; overflow: auto; height: 100%; }
896:Name_Not_Found
11/04/26 22:44:02.99
IE9を使える環境の方に質問します。
IE9で-ms-filter (又はfilter)って効果が有効になってますか？それとも無視されますか？
897:Name_Not_Found
11/04/26 23:08:52.32
>>896
IE9 は opacity が使えるけど、それじゃダメ？
URLﾘﾝｸ(msdn.microsoft.com)
898:Name_Not_Found
11/04/26 23:15:14.21
MSDNではIE8までしか触れられてないな
URLﾘﾝｸ(msdn.microsoft.com)
899:Name_Not_Found
11/04/26 23:16:23.87
>>897
こちらはIE9使えないので、filterのIE9での対応状況を知りたいのです。
900:Name_Not_Found
11/04/26 23:31:39.40
>>899
-ms-filter は IE9 でも使えるんじゃないかな…。
URLﾘﾝｸ(github.com)
URLﾘﾝｸ(stackoverflow.com)
901:Name_Not_Found
11/04/28 14:38:01.14
>>896は逃げたか
902:Name_Not_Found
11/04/28 14:59:10.36
逃げたとかイミフ
903:Name_Not_Found
11/04/28 19:20:47.25
896です。ずっと待ってますが、IE9で実際に試せる環境を持ってる人は居ないんですかね？
904:Name_Not_Found
11/04/28 19:40:53.39
わし Winちゃうねん
905:Name_Not_Found
11/04/28 21:31:56.82
>>903
ここで人に試してもらうのと>>900のリンク先で試した人のログを見るのは信頼性に大差はないと思うんだけどな。
906:Name_Not_Found
11/04/28 22:01:01.96
>>905
900はIE9リリース前の書き込みじゃないの
907:Name_Not_Found
11/04/30 07:25:05.29
css のクラスの指定で
<div class="a">a</div>
<div class="b">b</div>
<div class="a b">a and b</div>
とある時に
3つめの要素のみにスタイルシートを当てる事は
javascriptをつかわずに出来ますか？
908:Name_Not_Found
11/04/30 09:49:58.95
.a.b { }
909:Name_Not_Found
11/04/30 12:07:05.81
>>908
そんなふうにかけたんですね。
ありがとうございます。
910:Name_Not_Found
11/05/01 18:57:54.15 i4M9F+/0
>>612
背景透過PNGと背景影画像のBOXをずらして表示
911:Name_Not_Found
11/05/02 20:37:35.08
>>910
そういうダメテク教えるなよ
912:Name_Not_Found
11/05/02 21:10:54.87
ウソテックイズ
913:Name_Not_Found
11/05/03 07:56:59.85
すみません質問させてください
URLﾘﾝｸ(iup.2ch-library.com)
この画像にあるように自分のブログにも、画面の上に戻ったり
コメントをするボタン？みたいなのを付けたいのですが
これはどこのサービスなのでしょうか？
もしスレ違いでしたら該当スレを教えていただけませんでしょうか？
よろしくお願いします
914:Name_Not_Found
11/05/03 12:57:33.63
この画像をどこから拾ったのか書いてよ
915:Name_Not_Found
11/05/03 13:32:13.37
>>914
レスありがとうございます
２ちゃんブログの俺的ゲーム速報っていうところが使っていて
すごく便利そうだなと思って自分も付けたいと思ったのですが
いくらググッても全然ヒットしなくて質問を書かせてもらいました
なにか情報をお持ちでしたらお願いいたします
916:Name_Not_Found
11/05/03 13:44:56.07
>>915
positionプロパティと、HTMLのフラグメント
てか自分でソース見りゃ早いんじゃないの
917:Name_Not_Found
11/05/03 14:01:58.14
サービスじゃなくて自分で実装してるんでしょ
ソース見たけど単純なものだよ
918:Name_Not_Found
11/05/03 14:08:13.36
>>916
返信ありがとうございます
>>916さんの書いた内容がまったく理解できないほどの
素人なんです
でも一つだけ分かったのは、どこかのサービスを利用してるわけではなく
HTMLというのをいじって自分で作ってるものなんでしょうね
ちょっと初心者にはハードル高そうです
返信ありがとうございました
919:Name_Not_Found
11/05/03 14:10:29.99
>>917さんもありがとうございます
やっぱり自分で実装してるものなのですね
勉強になりました
ありがとうございます
920:Name_Not_Found
11/05/03 14:12:13.21
>>896について、実際に試せる方よろしくお願いします。
IE9標準モードでも-ms-filter (又はfilter)は使えますか？
921:Name_Not_Found
11/05/04 02:28:21.86
>>920
自分で環境用意しなよ
922:Name_Not_Found
11/05/04 03:00:33.92
マジでIE9インストールした奴このスレには居ないの？俺はXpだから無理
923:Name_Not_Found
11/05/04 10:08:53.15
MacのVMにWin7+IE9入ってるけど、なにすればいい？
filter動くか試せばいいの？
924:Name_Not_Found
11/05/04 12:20:11.14
> filter動くか試せばいいの？
その通りです。よろしくお願いします。
Mac上のWin7でもIE8ではfilterは使えたのですよね。
できましたら、HTMLの先頭行にDOCTYPE（＜!DOCTYPE html＞等）宣言文の有無で
filter表示が変わらないことも確認して戴けたらありがたいです。
925:Name_Not_Found
11/05/04 12:32:18.47
どっちも使えたけど
926:Name_Not_Found
11/05/04 13:00:38.42
ありがとうございました。
CSS3を使えるブラウザではfilterと似たような効果で代用していましたが、
そうするとIE9では効果が重複してしまうので片方を殺さないといけないですね。
927:Name_Not_Found
11/05/04 23:12:38.61
次の患者さんどうぞー↓
928:Name_Not_Found
11/05/06 11:30:45.04
zzz
＜⌒／ヽ-、_＿
／＜_/＿＿＿＿／
929:Name_Not_Found
11/05/10 16:22:09.14
左から2番目のセルのみ背景を変えたいのですが
td:eq(1){
background:#f00;
}
としても変わりません
eqを使うものだと思ってたのですが方法ございませんか？
930:Name_Not_Found
11/05/10 16:29:07.22
eq() は jQuery の独自拡張じゃなかったっけ？
URLﾘﾝｸ(api.jquery.com)
931:Name_Not_Found
11/05/10 16:30:25.40
>>929
URLﾘﾝｸ(zng.info)
932:Name_Not_Found
11/05/10 16:32:53.11
929は1000のダメージを受けた
eqじゃないのですね
nth-childでした
ありがとうございます
933:Name_Not_Found
11/05/11 00:27:03.42
は？
934:Name_Not_Found
11/05/11 17:15:25.95
<li>タグの中のテキストを上下左右中央にするのはどうすればいいですか？
一応<li>にwidth170pxとheight30pxの設定をしてます。
935:Name_Not_Found
11/05/11 17:47:50.66
>>934
line-height:30px; text-align:center;