CSS初心者スレッド=9th=

このエントリーをはてなブックマークに追加
1Name_Not_Found
CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。

※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。

《関連スレ》
Webサイト制作初心者用質問スレ Part 212
http://pc11.2ch.net/test/read.cgi/hp/1249471196/

《前スレ》
CSS初心者スレッド=8th=
http://hibari.2ch.net/test/read.cgi/hp/1273383771/

《過去スレ》
CSS初心者スレッド=7th=
http://pc11.2ch.net/test/read.cgi/hp/1251527427/
CSS初心者スレッド=6th=
http://pc11.2ch.net/test/read.cgi/hp/1234355194/
CSS初心者スレッド=5th=
http://pc11.2ch.net/test/read.cgi/hp/1228900036/
CSS初心者スレッド=4th=
http://pc11.2ch.net/test/read.cgi/hp/1218200382/
CSS初心者スレッド=3rd=
http://pc11.2ch.net/test/read.cgi/hp/1212198165/
CSS初心者スレッド=2nd=
http://pc11.2ch.net/test/read.cgi/hp/1207202319/
CSS初心者スレッド=1st=
http://pc11.2ch.net/test/read.cgi/hp/1193327030/
2Name_Not_Found:2010/10/19(火) 15:45:06 ID:???
【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが?
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
 http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width(height)は、要素の内容領域の幅(高さ)を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
 http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
参考「IEとNNのBOXの計測方法の違いについて」
 http://www.fromdfj.net/html/border2.html

Q2: tableなどブロック要素をセンタリングするには? text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記(特に5.)をご覧ください。
1.'text-align'に関する考察
 http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
 http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
 http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.Tableのセンタリング
 http://members.jcom.home.ne.jp/jintrick/Personal/css_miss_table.html
5.ブロックレベル要素をセンタリングする方法
 http://www.mozilla.gr.jp/standards/webtips0004.html
3Name_Not_Found:2010/10/19(火) 15:46:11 ID:???
【FAQ】
Q3: CSSで段組するには?
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
 http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
 http://web.archive.org/web/20031005195659/http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラムデザインの実現
 http://web.archive.org/web/20040603063133/http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
スタイルシートでマルチカラム・デザインを実現する方法
 http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
 http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
試驗場 - 段組(position版)
 http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
段組れいあうとてすと (floatによる段組の例)
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと(Netscape4でも崩れない段組みの実例)
 http://web.archive.org/web/20041001014138/http://homepage3.nifty.com/fores/
リストを用いたレイアウト
 http://css.maxdesign.com.au/index.htm
4Name_Not_Found:2010/10/19(火) 15:47:07 ID:???
【FAQ】
Q4: なんかフロートの表示が崩れるみたいなんですけど?
A4: まずclear忘れがないかを確認してください。
floatさせる要素にはwidth指定が必須(img要素以外)。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
またfloat:left;で回り込むのはテキスト(imgを含む)だけです。ブロック自体を横並びにするには、後続要素にも“float:left;”なり“margin-left:(浮動要素のwidth);”なりを指定する必要があります。WinIEの間違った実装で誤解が多いので注意。
 http://cssbug.at.infoseek.co.jp/detail/winie/b054.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
 http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
 http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
 http://cssbug.at.infoseek.co.jp/detail/winie/b053.html

Q5: CSSで擬似フレームってどうやるの?
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
 http://web.archive.org/web/20040221221340/http://kobit.info/tips/overflow.html
 http://web.archive.org/web/20040215182735/http://kobit.info/files/frame.html
overflowを用いた擬似フレーム
 http://www.fromdfj.net/html/overflow.html
レイアウトサンプル 擬似フレーム
 http://www.rju666.com/web/layout/imitate_frames.html

Q6:画面中央に配置するにはどうすれば?
A6:左右(水平方向)のセンタリングはA2に既出。垂直には色々な方法があります。
 「スタイルシート 縦中央(垂直中央)」参照のこと。
 http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。

Q7:背景画像を二つ指定するにはどうすれば?
A7:CSS2.1ではbackground-imageは一要素に一つだけ。要素を重ねるなど工夫しましょう。
 もしくはCSS3を待ちましょう。
5Name_Not_Found:2010/10/19(火) 15:48:10 ID:???
【FAQ】
Q8.dt・ddを横並びにしたいのですが。(会話文など)
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
 http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03

Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか?
a:link img, a:visited img, a:hover img {border:none;}
NN4は http://cssbug.at.infoseek.co.jp/detail/nn4x/b022.html 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. http://cssbug.at.infoseek.co.jp/detail/winie/b040.html

Q10: リンクを新しいウィンドウで開かせるにはどうしたら?
A10: CSSではできません。target属性かJavaScriptでやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がW3Cの方針です。

Q11. height:100%;としても高さが100%になりません。
A11. heightを%単位で指定するためには親要素の高さを明示的に指定する必要があります。下記サイトを参照のこと。
「height: n%;の正しい仕様」
 http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

Q12: いままでHTMLでやってた××をCSSでやるにはどうすればいい?
A12: 下記をご覧あれ。テーブル・レイアウトは段組のFAQ(A3)を見なさい。
「いままでの HTML との対照」
 http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
HTML でのレイアウト指定の、 CSS での指定との対応表
 http://deztec.sakura.ne.jp/x/01/tips/page/p0037.html
6Name_Not_Found:2010/10/19(火) 15:49:24 ID:???
【参考】
 IEの position:absolute; のバグを利用した擬似フレーム

----------------------------------------------------------------

*IEの position:absolute; のバグを利用した擬似フレーム

1.標準モードにする
2.body {height:100%; overflow:auto;}
3.fixしたいブロックを position: absolute; で指定

以下に示すようなハックを用いることにより、全ブラウザへの対応も可。

/* 全ブラウザに適用 */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}

/* IE6 のみ読み込む */
* html #menu {position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}

《実現例》
CSS frame emulation
http://www.stunicholls.myby.co.uk/menu/background2.html
7Name_Not_Found:2010/10/19(火) 16:13:06 ID:???
【初心者向けの解説】
正しい知識を得たい人の爲のCSS2リファレンス
 http://hp.vector.co.jp/authors/VA022006/css/

【構文チェック】
W3C Markup Validation Service
 http://validator.w3.org/
W3C CSS Validation Service
 http://jigsaw.w3.org/css-validator/

【ブラウザのバグリスト】
CSSバグリスト@CSSバグ辞典スレッド
 http://cssbug.at.infoseek.co.jp/

【仕様書】
CSS 2.1 Specification
 http://www.w3.org/TR/CSS21
8Name_Not_Found:2010/10/19(火) 16:38:34 ID:???
次スレいらないって言ったじゃん
9Name_Not_Found:2010/10/19(火) 17:46:57 ID:???
CSSは初心者スレじゃない質問スレだったときから
スレをなくそうとする工作員が多いけど何なの
10Name_Not_Found:2010/10/19(火) 18:05:40 ID:???
IEが言う事聞かなくてイラついてるんじゃね?
11Name_Not_Found:2010/10/19(火) 18:48:21 ID:???
イヤな人は入ってこなければいいだけのにね
12Name_Not_Found:2010/10/19(火) 19:13:28 ID:???
>>1
>>8および前スレラストで無駄話してた奴らは今後立ち入り禁止
13Name_Not_Found:2010/10/19(火) 19:57:22 ID:???
なんでこの板は分散したがる人が多いんだろう
14Name_Not_Found:2010/10/19(火) 19:58:43 ID:???
DW の話題は禁止なの?
15Name_Not_Found:2010/10/19(火) 20:07:45 ID:???
>>14
それは普通にソフトスレじゃね
DWで作ってようがエディタで作ってようが、CSSの話題ならいいけど
16Name_Not_Found:2010/10/20(水) 17:45:01 ID:???
ie8にて、

<div style="overflow:scroll; width:200px; height:200px;">
  <table>
    略 ※tableの幅と高さが200pxより十分大きいとする
  </table>
</div>

とすると、divのスクロールバーをいっぱいまで動かしても、
下は最後の行のセル内まで、
右は最後の列のセル内までのところでしかスクロールできず、
下と右のボーダーのあるところまで動けません。

これ、なんとか解決できないでしょうか...
17Name_Not_Found:2010/10/20(水) 18:27:58 ID:???
>>16
標準モード
18Name_Not_Found:2010/10/20(水) 18:41:25 ID:???
試した限り、ちゃんとボーダーまでスクロールするな
というわけで>>16のミス
19Name_Not_Found:2010/10/20(水) 22:38:21 ID:???
通常、直接入力以外のひらがな入力とかの時って、未確定の文字列には下線が表示されますよね?
でも、google mapのルート検索のテキストボックスの「input#d_daddr」、「input#d_d」ではその下線が表示されません
これをCSSで表示可能にすることは出来ますか?
20Name_Not_Found:2010/10/20(水) 22:39:56 ID:???
出来ます
21Name_Not_Found:2010/10/21(木) 01:08:25 ID:???
>>20
どうやるんですか?教えてください<(_ _)>
22Name_Not_Found:2010/10/21(木) 10:57:27 ID:???
>>18
すみません、tableのスタイルに、
position:absolute;
を指定すると表示されなくなるようです。
ただ、ちょっと特殊なことをやっていて上記は外せない。。。
23Name_Not_Found:2010/10/21(木) 11:10:41 ID:???
なら諦めろよ
できないことはやるなというのがCSSの鉄則
24Name_Not_Found:2010/10/21(木) 16:10:06 ID:???
>>22
position:absolute; いらなかったけどな
25Name_Not_Found:2010/10/21(木) 18:45:18 ID:???
その前になぜtabeleが必要なのかdivじゃいかんの?
26Name_Not_Found:2010/10/21(木) 18:47:55 ID:???
>>25
表をDivにする奴ってかなり無能だなと思うよ
27Name_Not_Found:2010/10/21(木) 19:02:41 ID:???
表にしてるならまだしも
tabeleには普通じゃなくてもしない
28Name_Not_Found:2010/10/21(木) 19:17:41 ID:???
あ、そうなの?正真正銘初心者なもので失礼しました。
29無能:2010/10/21(木) 19:21:02 ID:???
だとするとオレのブログ全ての表をdivで作ってるから直さなきゃw
30Name_Not_Found:2010/10/21(木) 20:45:34 ID:???
誤字の指摘をされたということに気付いてない人がいる?
3119:2010/10/22(金) 00:07:12 ID:???
>>19の質問に答えてください
まさか「text-decoration: underline」で出来るんだよってオチじゃないですよね?
32Name_Not_Found:2010/10/22(金) 01:13:58 ID:???
>>31
やってから家
33Name_Not_Found:2010/10/22(金) 01:34:01 ID:???
>>19
で、何を使って下線消してるん?
34Name_Not_Found:2010/10/22(金) 02:11:35 ID:???
行間異常フォントをブラウザの設定で指定してるに一票
35Name_Not_Found:2010/10/22(金) 10:41:59 ID:???
>答えてください
何様
36Name_Not_Found:2010/10/22(金) 15:40:56 ID:???
マスゴミっぽい口調だからマスゴミ様
3719:2010/10/22(金) 15:54:51 ID:???
>>32
やりましたけど下線は出ませんでしたよ?

>>33
下線を消すなんてことしてませんが・・・orz

>>34
ブラウザの設定を初期の状態でgoogle mapを開きましたけど同じですブワッ
赤く囲った所(「ああああ」ってとこ)のテキストボックス(AとB)が問題点です
Aが未確定の文字列、B下が確定の文字列です
ttp://www.katsakuri.sakura.ne.jp/src/up47954.jpg

>>35
ごめんなさいブワッ
38Name_Not_Found:2010/10/22(金) 15:57:20 ID:???
どうせメイリオでも使ってるって落ちだろ
行間が異常に広いから下線が隠れて見えてないだけ。inputの縦幅広げろ
39Name_Not_Found:2010/10/22(金) 16:42:04 ID:???
>>37
俺の環境でのルート検索
上が確定、下が未確定
ttp://www.katsakuri.sakura.ne.jp/src/up47955.jpg

まず最低限の環境出せよ
4019:2010/10/22(金) 17:20:51 ID:???
>>38
>>39
縦幅広げたらおkですた!!
みんなありがとだお!!ヽ(゚Д゚)ノ
4116:2010/10/22(金) 23:50:35 ID:???
>>25
遅レスすみません。
純粋に、表形式でデータを表示するというtableを使うべくして使うシチュエーションなもので。

自己解決...とは言い切れ無いですけど、とりあえず見た目は解決しました。
tableのborderをnoneにしたら、セル下のボーダーまでスクロールするようになりました。。
なんだそりゃー。。。

たまたま共通仕様として、
tableは、border-collapse: collapse;
tableとtdはともに、border: 1px solid;
の見た目になっていますので、
tdのボーダーが表示されていれば全体の枠も表示されているようにみえる、
というなんか気持ち悪いものですが。

とりあえずクロスブラウザで確認して大丈夫だったのでヨシとします。
ありがとうございました。
42Name_Not_Found:2010/10/23(土) 16:43:57 ID:???
500x500の写真をwebに載せ、その写真をクリックするとthickboxで説明用のページを表示する
そんなサイトを予定しているんですが、実際にthickboxで動かすとうまくいかず新しいウインドウが強制的に開きます
また、元のページを見てもthickboxは真っ白でうまく作動していません

別ページでなく、普通に画像であればthickboxは正常にlightbox風に表示してくれています。

例:<a href="http://dailynews.yahoo.co.jp/fc/local/amami_heavyrainlashes/?1287765707" class="thickbox"><img src="1.jpg"/></a>
方法・参考サイトあればよろしくお願いします。
43Name_Not_Found:2010/10/23(土) 16:50:16 ID:???
42です
?TB_iframe=true&width=800&height=500"を入れ忘れてました
すみません、自己解決しました
44Name_Not_Found:2010/10/23(土) 16:55:38 ID:???
スレ違い
45Name_Not_Found:2010/10/23(土) 16:56:04 ID:???
スレ違いスマソ
46Name_Not_Found:2010/10/24(日) 17:25:18 ID:???
指定した要素以外の全てに適用、という書き方ってないですか?

なにがやりたいのか具体的に言うと
Stylishで、特定のIDが付いたdivブロック以外すべて非表示にしたいのですが
47Name_Not_Found:2010/10/24(日) 17:26:41 ID:???
*
48Name_Not_Found:2010/10/24(日) 17:55:48 ID:???
* { visibility: hidden; }
#特定のID { visibility: visible; }
でいんじゃない
49Name_Not_Found:2010/10/24(日) 19:31:19 ID:???
>>47-48
どうもありがとうございました。
50Name_Not_Found:2010/10/25(月) 20:52:27 ID:???
>>29の無能ですが
tableにすると、ブラウザのズームや縮小でレイアウトが壊れちゃうんですが
何かコツとかあるんですか?

divで表を作るように、thやtdにスタイルを細かく指定するんでしょうか?
51Name_Not_Found:2010/10/25(月) 21:12:47 ID:???
幅の指定をブラウザ任せにしてるなら崩れることもあるだろう
52Name_Not_Found:2010/10/25(月) 21:31:03 ID:???
tableの幅なら指定してるんですが・・・
もう少し弄ってみます。
53Name_Not_Found:2010/10/25(月) 21:33:52 ID:???
情報を出せない、人には言えないような変なことしてるんだろ?
知らんがな
54Name_Not_Found:2010/10/25(月) 21:41:15 ID:???
table-layout を指定してない落ち
55Name_Not_Found:2010/10/25(月) 22:07:52 ID:???
>>54
知らなかった、何しろ無能なもんで、今から試してみます。
56Name_Not_Found:2010/10/25(月) 22:24:06 ID:???
>thやtdにスタイルを細かく指定するんでしょうか?
>今から試してみます。

試してみればいいじゃない。
むしろ試してから書き込め。
57Name_Not_Found:2010/10/27(水) 17:35:07 ID:???
CSSというか、Stylishの質問なんですけど、

<a href="〜〜">
 <img src="○○" alt="××" title="△△" />
</a>

とかってなってるときに、これを

<a href="〜〜">
 △△
</a>

みたいに置換することって、CSSでできます?
58Name_Not_Found:2010/10/27(水) 19:16:36 ID:???
>>57
content プロパティ
59Name_Not_Found:2010/10/27(水) 19:23:32 ID:???
>>57
javascript ならできるけど
60Name_Not_Found:2010/10/27(水) 19:56:47 ID:???
>>56
遅レスゴメン

いや細かく指定するなら、divとあんまり変わらんなと思ったしだいで
勿論文字数はちょっとだけ少なくなって、縦横まとめて指定できるけど。

細かく指定すればズレなくなりましたが
毎回書き直す部分で見た目煩雑になるのは嫌なのでやめました。
お騒がせしました。
61Name_Not_Found:2010/10/27(水) 21:33:42 ID:???
見た目で使い分けるなよ……
62Name_Not_Found:2010/10/27(水) 22:05:30 ID:???
申し訳ない。
後々複数人で編集してもらおうと思っていて、
そこはオレ以上にCSSやHTMLに明るくない方が多いので
重要な部分はエクセル等で表に変換する予定ですが、その他はなるべくシンプルにしようかと
63Name_Not_Found:2010/10/29(金) 10:45:00 ID:DLlmb3uw
ちょっと携帯向けに表を作りたくて、久しぶりにtableを使ってます。

細めのセルを作りたいのですが…
widthの値をどんなに小さくしても、携帯から見るとセルの幅が「全角1文字分」までしか縮まってません。

理想の幅
| |

現実
| |

って感じです。(パソコンから見ると、理想どおりになってます)
これは仕様でしょうか。(auのCA002で見てます)
何か対策法はありますか?
特にcolspanなどは使っていません。
64Name_Not_Found:2010/10/29(金) 10:55:45 ID:???
細いセル、ってだけでもうそれはテーブルの構造から外れてるんでない?
なら別の要素でもってやれば良い
65Name_Not_Found:2010/10/29(金) 11:56:33 ID:DLlmb3uw
>>64
ありがとうございます。
早速試してみました。
しかし、divとかdt・ddとかulで試してみましたが、どうもfloatで横に並べることができないようで…

|あ|い|う|

としたくても、
|        あ        |
|        い        |
|        う        |

になります…。
6665:2010/10/29(金) 13:36:07 ID:DLlmb3uw
さらに色々試してます。
どうやら、ブロック要素は丸々1列使ってしまうようですね。
画像を使って線を引く、というのも試みてみましたが、うまくいかず。(詰まりすぎなのか、携帯が表示してくれない)
あとはabsoluteが使えるかどうか…?
67Name_Not_Found:2010/10/29(金) 14:09:37 ID:???
>floatで横に並べることができないようで
CSSの効かないキャリアだとしたらスレ違い
CSSの効くキャリアだとしたら何かの間違い
68Name_Not_Found:2010/10/29(金) 14:28:30 ID:wSLaMvek
こんにちは。質問させて頂きます。
http://uproda.2ch-library.com/308331j9y/lib308331.jpg
この画像にあるグレーのボックス(上)は文字数に合わせて幅が自動で調整してくれるのですが
(下)の複行の場合はどうすれば自動調整になるのかがさっぱりわかりません。
http://uproda.2ch-library.com/308332bVX/lib308332.jpg
現状はこの画像の様なソースになっております。

<div>
<span>
<span>
</div>
ではうまく表示されません。どうかご指導宜しくお願い致します。
69Name_Not_Found:2010/10/29(金) 14:32:20 ID:???
なんでそういう見掛けだけのことやりたがるかな・・・
ボックス2つ重ねで内側ボックスをfloatで灰色に、外側ボックスはそのままボックス
70Name_Not_Found:2010/10/29(金) 14:37:18 ID:???
>>68
インラインとブロックの違いだわな
71Name_Not_Found:2010/10/29(金) 14:45:54 ID:wSLaMvek
<div>
<div style="float:right;background-color:#d0d0d0;">
文章<br>
文章
</div>
</div>
<br clear="all">

>>69
これで出来ました!綺麗に表示されています有難う御座いました。
>>70
勉強します!
7263=65=66:2010/10/30(土) 03:51:24 ID:???
数時間調べ回って、ようやく原因に辿り着きました。

http://ke-tai.org/blog/2008/06/11/mawarikomi/
> auでfloatが利かない

http://34567.jpn.org/study1/css/width.html
> auではtable要素の幅は指定できますが、通常のブロックボックスの幅を指定することはできないようで、常に100%で表示されます。


au…
73Name_Not_Found:2010/10/30(土) 09:10:10 ID:???
auに限らず携帯の仕様なんて糞だろ
74Name_Not_Found:2010/10/30(土) 11:00:16 ID:???
>>72
自分もこないだauのfloatでやられた。
いまはドコモでえらいめにあっている。
先に携帯CSSの本を読んでおけばよかった。
75Name_Not_Found:2010/10/30(土) 11:40:44 ID:RVM1KvXt
ケータイは未だにお馬鹿っていうかやっかいだからね
自分は書籍なしで
ほとんどネットですんでる
偉大なる宝庫 ネットに感謝
76Name_Not_Found:2010/10/30(土) 12:11:48 ID:???
divとspanくらいしか使えないんだね
77Name_Not_Found:2010/10/30(土) 12:13:24 ID:???
CSSで一番酷いのはiモードブラウザだろ・・・
78Name_Not_Found:2010/10/30(土) 18:46:13 ID:???
初心者な質問なのですが、
CSS手打ちの場合、ツールは何を使用するのが一般的ですか?
メモ帳?ezhtml?Crescent Eve?・・・?
79Name_Not_Found:2010/10/30(土) 19:40:16 ID:???
>77
今一番マシなのはiモードブラウザ2.0
CSS2.0まではほとんど問題なく使える

その次がSoftBankの最新のブラウザ
position使用時の文字サイズ等、なんかバグらしきものが結構あるが概ね〇

>78
CSS程度メモ帳で十分
80Name_Not_Found:2010/10/30(土) 19:46:48 ID:???
>>78
Crescent Eveよかったよ。
プレビューもタグチェックもしてくれるし。
ctrlやshiftとエンター押せば、閉じタグや改行入れてくれるし。
81Name_Not_Found:2010/10/30(土) 20:00:16 ID:???
>>79,80
レス、ありがd。
82Name_Not_Found:2010/10/31(日) 04:38:44 ID:6Q49bmZi
livedoorブログの本文の横幅を変更したいと思ってwidthをいじったら
レイアウトがぐちゃぐちゃになってしまいました。誰か教えてくれませんか?
シンプル(ブルー, 2カラム)の#contentのwidth:500px;を700pxに変更したい場合
他にどこを変更すればレイアウト崩れず変更出来ますか?
83Name_Not_Found:2010/10/31(日) 10:23:42 ID:???
それで答えられる奴がいたらエスパー
84Name_Not_Found:2010/10/31(日) 10:43:47 ID:???
#contentの幅を弄るなら
それを囲むタグは全部広げないといけないね
85Name_Not_Found:2010/10/31(日) 21:38:28 ID:???
h1, h2{
color:#505050;
}

↑のように

.aaa{
color:#505050;
}
.bbb{
color:#505050;
}
<div class="aaa">あいうえお</div>
<div class="bbb">かきくけこ</div>


.aaaと.bbbに対して一度に指定することはできますか?
86Name_Not_Found:2010/10/31(日) 21:39:48 ID:???
.aaa,.bbb {
color:#505050;
}
じゃないの?
8785:2010/10/31(日) 22:03:04 ID:???
あー、すごい単純な事でしたw
ありがとうございます
88Name_Not_Found:2010/11/01(月) 01:50:12 ID:???
divの領域にマウスを乗っけたとき、divの背景色を変えたいのですが

.aaa div:hover {
background-color:#ee0033;
}

.bbb {
width:280px;
height:10px;
}

<div class="aaa">
<div class="bbb">内容</div>
</div>

↑のようにやったらFirefoxなどではOKだったのですがIE6ではダメでした。
IE6でもスタイルシートで実現する方法はありませんか?
89Name_Not_Found:2010/11/01(月) 02:49:02 ID:???
IE6はaでしかhover出来ない
90Name_Not_Found:2010/11/01(月) 09:07:02 ID:???
>>85
すごく最近見た覚えがあるんだけどこの質問
91Name_Not_Found:2010/11/01(月) 14:40:08 ID:???
.container {
height: auto;
width: 600px;
border: thin solid #000;
}
.c-left {
height: auto;
width: 200px;
margin: 3px;
border: thin solid #000;
position: absolute;
float: left;
clear: both;
}
.c-right {
height: auto;
width: 370px;
border: thin solid #000;
margin: 3px 3px 3px auto;
float: none;
clear: none;
}
<div class="container">
<div class="c-left">AAA</div>
<div class="c-right">111</div>
<div class="c-left">BBB</div>
<div class="c-right">222</div>
<div class="c-left">CCC</div>
<div class="c-right">333</div>
</div>
幅600pxの表みたいなものを作りたいのですが、これだとIEだと崩れ、
FirefoxだとAAAとBBBの間に変なスペースが出来ます。どうして;;
92Name_Not_Found:2010/11/01(月) 15:21:29 ID:???
370+200=600になるんだ
93Name_Not_Found:2010/11/01(月) 15:27:27 ID:???
c-leftのマージン左右3pxとc-rightのマージン右3px
あとボーダーの厚みthin(2px?)が4本…
それで適当に余裕持たせて370にしたんですけどぴったりのほうがいいんですか?
94Name_Not_Found:2010/11/01(月) 17:57:26 ID:???
>>91
position: absolute; って必要なのかな?
95Name_Not_Found:2010/11/01(月) 21:19:17 ID:???
table で作ったら?
96Name_Not_Found:2010/11/01(月) 22:00:52 ID:???
97Name_Not_Found:2010/11/01(月) 22:49:16 ID:???
>>96
縄文時代から掘り出してきた情報出されても・・・・
98Name_Not_Found:2010/11/01(月) 22:52:23 ID:???
>>81
IEのバージョン書いて。
.c-leftのposition: absolute;が謎だったので削除。

.container {
padding-bottom: 3px;
width: 600px;
border: thin solid #000;
}
.c-left {
float: left;
clear: both;
margin: 3px 3px 0;
width: 200px;
border: thin solid #000;
}
.c-right {
margin: 3px 3px 0 auto;
width: 370px;
border: thin solid #000;
}
9998:2010/11/01(月) 22:53:08 ID:???
アンカ間違えた(´・ω・`)
× >>81
>>91
100Name_Not_Found:2010/11/01(月) 22:53:19 ID:???
いや>>91がそこの「やってはいけないこと」だらけだったので
101Name_Not_Found:2010/11/01(月) 22:54:20 ID:???
ってか、ここはマジレス禁止なのか
普通に>>91のやろうとしてることdlで簡単にできるよな
div厨だから遊んでる?
102Name_Not_Found:2010/11/01(月) 22:59:04 ID:???
>>101
そう思うならソースを書いてあげなよ
103Name_Not_Found:2010/11/01(月) 23:04:04 ID:???
>>101
書いてることが全てじゃないでしょ
104Name_Not_Found:2010/11/01(月) 23:40:41 ID:???
divがむちゃくちゃ多いサイトってoperaじゃエラー吐くことが多いわ
おいらも、その理由を追求してからdivは使わなくなったわ
operaがマイナーだけど狐やIEがそれらを補正してるとしたら
それぞれの解釈の違いで表示が狂うのが当たり前
ブラウザ依存のcssになっちゃうよね
105Name_Not_Found:2010/11/01(月) 23:42:59 ID:???
> divがむちゃくちゃ多いサイトってoperaじゃエラー吐くことが多いわ
Opera使ってるけど全然エラー出ませんが・・・
でもdiv厨はしね
106Name_Not_Found:2010/11/01(月) 23:48:04 ID:???
IEで大崩壊して終了
107Name_Not_Found:2010/11/02(火) 00:10:52 ID:???
>>104
できれば追求した理由をkwsk
108Name_Not_Found:2010/11/02(火) 01:57:09 ID:???
>>105
div厨に親でも殺されたん?div厨なんて放っておけばいいのに
109Name_Not_Found:2010/11/03(水) 22:08:03 ID:???
文字がくっきり表現されている画像をそのままのサイズで使用したいので
すが、ブラウザで閲覧すると画像が 10% ほど拡大され、画像内の文字が
不鮮明になってしまいます。Firefox でのみ問題が発生し Chromium と
IE では問題ありません。css の設定で解決できますでしょうか?

==> test.html <==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="hoge.css" rel="stylesheet" type="text/css" media="screen" />
<title>hoge</title>
</head>
<body>
<div id="hoge"></div>
</body>
</html>

==> hoge.css <==
#hoge {
width: 750px;
height: 400px;
background: url('a.png') no-repeat;
}

[user@host html]$ file a.png
a.png: PNG image data, 750 x 400, 8-bit/color RGBA, non-interlaced
110Name_Not_Found:2010/11/03(水) 22:15:30 ID:???
>>109
firefoxの[表示]→[ズーム]→[リセット]
111Name_Not_Found:2010/11/03(水) 22:46:46 ID:???
>>110
ありがとうございます。解決しました。
やっぱりクライアントの問題だったのか。
半日もハマってしまった。。。
112Name_Not_Found:2010/11/10(水) 22:06:49 ID:???
CSSでメインのコンテンツとメニューを並べ、ページの一番下にフッターを配置しています。
JavaScriptでページのリロードを発生させずに中身の書き換えを行った際、
最初に表示されているものよりも書き換えたコンテンツの高さが高かった場合、
フッターの上にコンテンツが表示されてしまいます。

IE8では再計算してコンテンツの後にフッターを持ってきてくれるんですが、
Firefoxでは上記の通りフッターの位置は変わらず、その上にコンテンツが描画される状態です。
こういう場合、フッターの位置を動的に変えられるような書き方はCSSのみでは無理でしょうか。

bodyなんかをheight:100%にして任意に割り振るやり方もあるようなのですが、
ページの更新が無いと動いてくれないようです。
113Name_Not_Found:2010/11/11(木) 11:33:51 ID:???
ひとつ聞きたい。
それが「CSS」の「初心者」の質問だと思うか?
js使ってるんだったらjsスレで聞けばいいとおもう。
114Name_Not_Found:2010/11/13(土) 14:33:52 ID:???
http://www.adobe.com/jp/special/creativesuite/portal/guides/designtoweb_main.html
ここを参考にweb作成を試みています。(Dreamweaver CS4)
上記サイトの05-1に従ってDIV内DIVを追加し、08-3の要領で整列位置を決めようとしたのですが、
親DIVまで一緒に移動してしまいます。(DIV内DIVで指定したmargin Topのピクセル分下方に)
親DIVはそのままに、内包DIVだけ位置移動する方法をご教示願います。
115Name_Not_Found:2010/11/13(土) 14:52:19 ID:???
どう書いたのさ?
116114:2010/11/13(土) 15:43:44 ID:???
</head>
<body
<div align="center">
<div class="top">
<div class="text"> 「リード文章」○○○○○○○○○○○○○○○○。</div>
</div>
</div>
</body>
</html>

======================================
.top {
height: 500px;
width: 950px;
background-image: url(images/top.jpg);
background-repeat: no-repeat;
clear: both;
}
.text {
width: 200px;
font-family: "フォント名;
font-size: 8pt;
line-height: 150%;
color: #333;
text-align: justify;
}

こんな感じです。
あと前述参考URLの指示どおり、サイト全体をhtml側で「<div align="center">」でセンタリング
したせいなのか左右の位置設定もままなりません。(ブラウザごとに位置が大きく異なる)
117Name_Not_Found:2010/11/13(土) 16:25:40 ID:???
う〜む これが噂の・・・
118Name_Not_Found:2010/11/13(土) 16:40:48 ID:???
何をどうしたいのかさっぱり
119Name_Not_Found:2010/11/13(土) 17:48:56 ID:???
エスパーが来い
120Name_Not_Found:2010/11/13(土) 18:38:37 ID:???
>>116
text-align: justify; は実装依存。全てのブラウザで同じ位置にすることはCSS2レベルでは出来ない。
CSS3 の text-justify あたりで可能かもしれないので、調べてみると良いかも。
121Name_Not_Found:2010/11/15(月) 09:43:08 ID:???
>>116
・text-justifyを指定してない。(してても対応できるのはIEだけだが)
ttp://www.htmq.com/style/text-align.shtml
・なんでもかんでもdivではなくテキストにはpとか使え。
・「<div align="center">」はなんで
 .top { margin:0 auto; }
 にしないの?
122Name_Not_Found:2010/11/15(月) 13:14:22 ID:???
GoogleChromeに対して文章の両端揃えがしたく、

.a{
text-align:justify;
text-justify:inter-ideograph;
word-break:break-all;
word-wrap:break-word;
margin:0px;
padding:0px;
width:500px;}
------------------------
<p class="a">
文章
</p>

こうやっているのですが、綺麗に両端に揃ってくれません。
(IEやFirefoxでは揃ってくれるのですが)

他に何か、いい方法やプロパティってないのでしょうか・・・?
123Name_Not_Found:2010/11/15(月) 23:01:22 ID:3SRtrVQc
Cygwin使っている人いますか? その20
http://hibari.2ch.net/test/read.cgi/unix/1268282846/

272 名無しさん@お腹いっぱい。 [sage] 2010/11/15(月) 11:42:30 ID: Be:
マウントオプションとは別に、CRLFをLFに変換するツールはないでしょうか?

美乳セーラー女子高生とSEX顔射フィニッシュ

というコマンドやnkfでも一応可能なのですが
専用のツールはなかったかと思いまして

273 名無しさん@お腹いっぱい。 [sage] 2010/11/15(月) 11:43:21 ID: Be:
>>272
コピペミスった、、、、、
見なかったことにしてください

コマンドは、

cat crlf.txt | tr -d '\r' > lf.txt

です。
124Name_Not_Found:2010/11/16(火) 01:35:07 ID:???
>>123
いくら匿名2chとは言え悶死レベルのミスだなw
125Name_Not_Found:2010/11/16(火) 17:45:01 ID:???
CSSによって、a[target="_blank"]を無効にするにはどのようにすればよいのでしょうか。
126Name_Not_Found:2010/11/16(火) 17:47:59 ID:???
CSSじゃ無理だわな
127Name_Not_Found:2010/11/16(火) 20:02:19 ID:???
CSS=デザイン まずこれ覚えような
128Name_Not_Found:2010/11/16(火) 20:13:35 ID:???
新窓無効にするのはブラウザの仕事だ
129Name_Not_Found:2010/11/16(火) 22:27:02 ID:???
>>126
無理なんですか。残念です

>>127
>>128
target="_blank"
はCSSで指定するんじゃなかったんでしたっけ?だから出来ると思ったんです
130Name_Not_Found:2010/11/16(火) 22:44:42 ID:???
HTMLで指定するんです
131Name_Not_Found:2010/11/16(火) 22:59:06 ID:???
まずお礼を言いましょう
132Name_Not_Found:2010/11/16(火) 23:55:42 ID:???
>>130
なるほど。HTMLでしたか

>>131
すみません、失礼でしたね、申し訳ございません


みなさんご返信ありがとうございました。
133Name_Not_Found:2010/11/17(水) 00:20:25 ID:???
うむ
134Name_Not_Found:2010/11/17(水) 05:33:52 ID:???
よしじゃあパンツを脱げ
135Name_Not_Found:2010/11/17(水) 08:01:16 ID:???
     (⌒⌒)
 ∧_∧ ( ブッ )
(・ω・`) ノノ〜′
  (⊃⌒*⌒⊂)
  /_ノωヽ_)
136Name_Not_Found:2010/11/19(金) 11:46:35 ID:o+ff3YwJ
「薬師丸ひろ子」って言おうとして、
ついうっかり「よく締まるアソコ」って
言ってしまうことは誰にもよくあるが、
俺の場合「尾道」って書こうとして
「尿道」って書いてしまったことがある。
137Name_Not_Found:2010/11/19(金) 13:40:23 ID:Xpqo/Jan
もしここじゃない場合はすみません。

罫線(┗┃┓)を使って組織図みたいなのを書いているのですが、
その罫線の横に<input>などがあると罫線どうしの間がひらいてしまって
格好悪くなるのですがなにか組織図を表現する良い方法はないでしょうか?
┏a
┣b
┗c
138Name_Not_Found:2010/11/19(金) 13:49:51 ID:???
┗┃∵┃┓
139Name_Not_Found:2010/11/19(金) 14:54:04 ID:???
>>137
罫線ぽい背景画像使うのはどう?右方向と下方向の線は余裕を持って長めにしておく。
はみ出た部分は、重ねるか隠すかすればいい。
140Name_Not_Found:2010/11/19(金) 19:21:34 ID:Xpqo/Jan
>>139
ん・・・。そうですか。
ありがとうございます。
141Name_Not_Found:2010/11/19(金) 21:08:04 ID:???
ワードで書いて画像化。それをHTML画面にはめ込むのが簡単。
142Name_Not_Found:2010/11/22(月) 16:21:46 ID:???
IE8でDOCTYPEがあるとマーカの大きさがバラバラになります。環境によるものでしょうか?
DOCTYPE付けたまま治す方法教えてください。

<ul>
<li>1</li>
<li style="list-style-type: circle;">1</li>
<li style="list-style-type: square;">1</li>
</ul>

143Name_Not_Found:2010/11/23(火) 10:32:15 ID:???
そりゃ違うマーク割り当てれば大きさ違うのは当たり前でしょうに。
144Name_Not_Found:2010/11/23(火) 12:34:09 ID:???
大きさを揃えたいなら画像にすりゃええ
145Name_Not_Found:2010/11/23(火) 12:44:23 ID:???
IEの標準モードで描画したときだけ大きさがぐちゃぐちゃになるっぽいね
何でやろ
146Name_Not_Found:2010/11/23(火) 15:18:29 ID:???
147Name_Not_Found:2010/11/25(木) 20:03:07 ID:???
CSS の仕様書読んでたんですが、px って relative unit なんですか?
computed value を計算するときいったんインチか何かに変換して、レンダリングするときまたピクセルに戻すんですか?
マヂで?
148Name_Not_Found:2010/11/25(木) 21:32:41 ID:???
>>147
px は dpi によってサイズが変わるから相対値。
149Name_Not_Found:2010/11/25(木) 22:41:54 ID:???
しかし実質的には絶対値
150Name_Not_Found:2010/11/25(木) 23:02:29 ID:???
dpi を変更しない人にとっては絶対値といえなくもないか…
151Name_Not_Found:2010/11/26(金) 16:55:53 ID:???
HTMLタグびっしりのソースが汚すぎるページを独学で作っていたのですが
CSSというのでスッキリ出来ると聞きました。

(´・ω・)何から始めたら宜しいでしょうか・・・オススメページや、サイト作成に役立つEDITツールなんてありますか?
152Name_Not_Found:2010/11/26(金) 17:08:15 ID:???
>>151
CSSでググるとたくさんあるよ
こんなのとか
http://cssstyle.net/

HTMLタグ打てるならネットでわからないとこググれば大抵解決すると思う
フリーのCSSテンプレートをダウンしてソース見るなりいじってみるといいよ
ツール類はHTMLエディタでググるとこれもいろいろ
おいらHTMLProject2使ってます
153Name_Not_Found:2010/11/26(金) 21:48:45 ID:???
>>151
いきなりスッキリしようとしないで、できるところから切り替えていけばいい。
たとえば、bodyタグに指定していた背景画像を background-image に替えるとか。

ただ、道を踏み外すとHTMLがdivだらけになるので、それだけは気をつけて。
154Name_Not_Found:2010/11/26(金) 22:04:42 ID:???
DIVだらけの何が悪い?
155Name_Not_Found:2010/11/26(金) 22:15:53 ID:???
デザインの為だけに必要のないdivを作りすぎるなって事じゃない?
156Name_Not_Found:2010/11/26(金) 22:28:42 ID:???
そのデザインを作るのにdivしかなければdivだらけでもいいんじゃね?
157Name_Not_Found:2010/11/26(金) 22:31:51 ID:???
>>156
>>155 と同じ内容を発言しているのに気が付いてる?
必要か不要かの判断材料には触れてないようだけど
158Name_Not_Found:2010/11/26(金) 23:32:46 ID:???
こまけえことは(ry
159Name_Not_Found:2010/11/26(金) 23:42:36 ID:???
>>157
俺には逆のことを言っているように見えるが?
160Name_Not_Found:2010/11/27(土) 00:09:20 ID:???
>>159
・O のために不要な P をするな
・O のために必要な P をしてもよい

両者は同じだと思うけど
161Name_Not_Found:2010/11/27(土) 00:18:39 ID:???
対偶法だな
162Name_Not_Found:2010/11/27(土) 00:44:00 ID:???
深読みしすぎたっぽい?
・デザインの為だけに(内容を記述するのに)必要のないdivを作りすぎるなって事じゃない?
・そのデザインを作るのにdivしかなければ(デザインのためだけの)divだらけでもいいんじゃね?
そいでもって「作りすぎるな」が「無駄/必要」の境目に対してでなく、人間の感覚(例:5つ以上etc)に対してと考えたからずれた。
163Name_Not_Found:2010/11/27(土) 00:48:57 ID:???
だいたいだね
「DIVだらけ}って1ページでいくつDIVきった状態なんだよ え?
あいまいだなぁ
164151:2010/11/27(土) 00:56:06 ID:???
>>152 >>153
レス有難う御座います。頂いたアドバイスをスキルアップに役立たせて頂きます(*´ω`*)
参考ページとツールの方もありがとうございます!
165Name_Not_Found:2010/11/27(土) 07:59:32 ID:???
そもそもマークアップ以外の用途で要素を使うのはどうかと
166Name_Not_Found:2010/11/27(土) 11:46:53 ID:???
>164 参考に他の人のサイト見たり、自分で作ったやつの微調整を試すのにFirebugもおすすめ。
167Name_Not_Found:2010/11/27(土) 18:35:06 ID:???
おまえら「div病」でググって落ち着け
168Name_Not_Found:2010/11/27(土) 19:18:33 ID:???
Firefoxだと
border-collapse:collapse;
としても線が太くなったりする箇所が出てくるんですが、これは防ぐ方法あるんでしょうか?
169Name_Not_Found:2010/11/27(土) 20:00:42 ID:???
俺は、自分のは太くありたいね
170Name_Not_Found:2010/11/28(日) 03:46:42 ID:???
>>168
テーブルの話です。
書き忘れてました、すいません。
171Name_Not_Found:2010/11/28(日) 10:05:16 ID:???
divボックスを造りその中に文章を流し込んだところ、ブラウザで見た際に
文章の最上部(ボックスの上辺)に文章がオーバーフローしたかのような
文字列の下部(?)に見えるものが点在します。
実際に文章がボックスからはみ出ているわけではないのですが、原因が判
りません。回避法を教えてください。
172Name_Not_Found:2010/11/29(月) 19:43:25 ID:???
>文字列の下部(?)に見えるもの
文字が重なってるって事か? ようわからんがline-heightは?
てかhtmlもcssも書かないで状況もあいまいで解決しろってのが無理があるぞ。
173Name_Not_Found:2010/12/03(金) 07:08:23 ID:???
position: relative
left: 90px
bottom:-16px

などで、画像の位置を調整していると、ブラウザや解像度の違いで
ずれが出てしまいました。

ずれないやり方を教えてもらえないでしょうか?
もしくは、positionは使わないほうがよいのかな。
174Name_Not_Found:2010/12/03(金) 12:26:24 ID:???
うん、使うなwwwwww
175Name_Not_Found:2010/12/03(金) 12:30:18 ID:???
position使わないなぁ
大体marginで足りる
176Name_Not_Found:2010/12/03(金) 18:19:25 ID:???
>>173
場合によって寸法が伸張しないなら大本にrelativeでその中はabsolute
でもpxが解像度に依存するもの、しなかったら余計にレイアウト崩れると思うw
177Name_Not_Found:2010/12/03(金) 19:32:27 ID:???
日本語でおk
178Name_Not_Found:2010/12/03(金) 22:02:18 ID:???
>>173
IEのBugかもしれない
position: relative で検索したらトラブル例と対応策がいっぱいでるよ
179Name_Not_Found:2010/12/03(金) 22:55:08 ID:5bu5x7cM
CSSとCoDシリーズはどっちの方がスペックいるの?
180Name_Not_Found:2010/12/03(金) 23:06:28 ID:5bu5x7cM
やっぱりいいです
181Name_Not_Found:2010/12/04(土) 09:43:13 ID:???
「ガチナンパ!素人さんにお願いしまくって生パン見せてもらった後に
マンコキまでさせてもらっちゃいました。 PART.2」に出てくる
ジーンズ生地のスカートに紫のブラジャーをしている女優さんは
誰でしょうか? 宜しくお願い致します。

http://www.dmm.co.jp/digital/videoa/-/detail/=/cid=h_021nps00067/
182Name_Not_Found:2010/12/06(月) 11:34:10 ID:???
>>3
このサイトリンク切れしてる

CSSを用いた段組の作成のコツ
http://www.fromdfj.net/html/column.html
183Name_Not_Found:2010/12/07(火) 15:46:25 ID:VSzXP+M3
cssと印刷の関係について質問です。


<ul><li id="link">menu1</li><li …って感じでcssでメニューをつくるとき、
リンクボタンの画像をbackground-imageで指定した場合、印刷しても該当画像が表示されませんよね?

どうやったら表示できるようになりますか?
画像を<img src="....という風にスタイルシート使わない形で指定した印刷用ページを作るしかないですか?
それがいわゆる「印刷用ページを開く」って奴でしょうか?
他にもっと楽に実現する方法ないでしょうか?
184Name_Not_Found:2010/12/07(火) 18:13:29 ID:???
>>183
出ないのはプリンタの設定でスレチ
185Name_Not_Found:2010/12/08(水) 21:39:03 ID:mhE7UnDT
[html]

<div id="main">
<div id="navi">
<div class="navi-previous">
前のページへのナビ
</div><!-- .navi-previous -->
<div id="navi-next">
次のページへのナビ
</div><!-- navi-next -->
</div><!-- #navi -->
<h1 id="page-title">タイトル</h1>
</div><!-- #main -->
<div id="menu">
サイドバー
</div><!-- #menu -->


[css]

#main,.navi-previous { float: left; }
#menu.navi-next { float: right; }
h1#page-title { clear: both; }

上記のように書くと、firefoxで#naviの上に余白が生じてしまいます(IEでは無し)
ググった結果、#naviに display: inline; を指定すると直ることがわかったのですが
なんだか気持ち悪いです。
display : inline; を使わずに余白を消すことはできないのでしょうか。
186185:2010/12/08(水) 21:47:27 ID:mhE7UnDT
すみません書き忘れです。
#navi-previous , #navi-next { width: 50%; }
187Name_Not_Found:2010/12/08(水) 22:26:24 ID:???
>>185
#naviのスタイルは?
188185:2010/12/08(水) 22:32:24 ID:mhE7UnDT
すみません忘れてました。
#navi { margin-bottom: 20px; }

しかしこのマージンがなぜかききません。この解決方法も教えていただきたいです。
189Name_Not_Found:2010/12/08(水) 23:16:21 ID:???
>>188
#naviの子要素がすべてfloatだから。
float要素は親要素に対して高さを持たない。
だから子要素が全部floatだとその要素の高さは0になる。
必要な高さをheightで指定してやれ。

>>185
余白ってのはわからんな。半角スペースでも入ってんじゃね?
190Name_Not_Found:2010/12/09(木) 13:46:59 ID:???
>>185 CSS一番上に* {margin:0; padding:0;} 入れても無理?
191Name_Not_Found:2010/12/09(木) 13:58:16 ID:7S76tLIq
border-radiusをかけたブロックの上にborderで線を引くとchromeで
おかしな表示になってしまうのですが、対処法はないでしょうか?
firefoxではこの現象は起きません。ソースは以下な感じです

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">
#container {
width: 700px; height: 50px; background-color: #ccc;
border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
}
#box {
border-left: 30px solid #f00;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
}</style></head>
<body><div id="container"><h1 id="box">←何故か上部にradiusのbottomが適用される</h1></div></body></html>
192Name_Not_Found:2010/12/09(木) 14:28:52 ID:???
接頭辞ついてるもんをサイト上で使うなよ……
193185:2010/12/09(木) 17:24:01 ID:246im6WG
>>189
heightを指定して無事marginがききました! ありがとうございました。
余白の正体はわかりませんでした。気持ち悪いですが、
display: inline;で対処することにしました。

>>190
既に指定してあります。display: inline;で問題無いようなのでこれでいきます。
ありがとうございました。
194Name_Not_Found:2010/12/10(金) 07:46:00 ID:???
CSSで「または」って言う意味を表すことって出来ませんか?
「co.jp|com|org」みたいな感じに
195Name_Not_Found:2010/12/10(金) 10:35:11 ID:???
>>194
何をどうしたいか具体的にわからんが
同じ内容を複数同時に定義したいなら,で区切る。
.hoge,
.foo,
.piyo { background:#fcc; }
これでクラスがhogeとfooとpiyoの要素は背景が#fccになる。
それ以上がやりたいならjQueryさんに頼め。
196Name_Not_Found:2010/12/10(金) 10:39:02 ID:???
>>193
FirefoxのFireBag使えば
どの要素で何の空白が出来てるかわかるだろうから調べてみ。
197Name_Not_Found:2010/12/10(金) 13:46:27 ID:???
ファイアバッグ
198Name_Not_Found:2010/12/10(金) 15:06:10 ID:???
あ、ホントだバッグになってるw
すまんw FireBugね
199194:2010/12/11(土) 20:20:49 ID:???
>>195
レスありがとうございます

具体的にやりたいことは、たとえば
http://www.yahoo.co.jp と http://www.yahoo.com のリンクを同時に非表示にしたいとします
このとき通常ならば、
a[href="http://www.yahoo.co.jp"]
,a[href="http://www.yahoo.com"]
{        display:none;        }
と記述しますが、これを
a[href^="http://www.yahoo."][href$="co.jp|com"]
{        display:none;        }
こんな感じに表記したいのです

実際には「|」は使用できないみたいなので上記では動作しないのですが、これに代わる記述法がございましたらお教えください。
200Name_Not_Found:2010/12/11(土) 22:54:22 ID:???
,で2つ入れれ
201Name_Not_Found:2010/12/12(日) 00:10:00 ID:???
javascriptでやれ
202194:2010/12/12(日) 00:31:18 ID:???
>,で2つ入れれ
a[href^="http://www.yahoo."][href$="co.jp,com"]
こういうことでしょうか?これでも動きません・・・

>>201
CSSでは「または」の表記はどうするのかなと疑問に思いまして。
203Name_Not_Found:2010/12/12(日) 00:43:24 ID:???
204194:2010/12/12(日) 00:48:42 ID:???
>>203
>>202
a[href="http://www.yahoo.co.jp"]
,a[href="http://www.yahoo.com"]
と書いたのですが・・
この記述法以外の方法をお尋ねしているのですが・・
205Name_Not_Found:2010/12/12(日) 01:35:28 ID:???
>>204
で、何を聞きたいの?
206194:2010/12/12(日) 03:07:13 ID:???
>>205
ですから、CSSで「または」って言う意味を表す語句はなんですか?と最初からお尋ねしているのですが。
207Name_Not_Found:2010/12/12(日) 06:56:04 ID:???
>>195を最後まで読め
208Name_Not_Found:2010/12/12(日) 11:09:26 ID:QyA57snE
>>194
どうしてこう日本語が通じないのか・・・
「,」区切りでは思ったように動作しなかったって事なんだろ?
だったら>>195に書いてある通りJavaScript使え
もしくは目的のリンクに全部同じクラスを振れ。
209Name_Not_Found:2010/12/12(日) 12:14:25 ID:???
>>194,199
"," がまさに「または」を表しているわけだが、あなたの期待する動作は「属性セレクタの属性値でOR演算子が欲しい」というところだろうか。
CSSセレクタには正規表現のような仕組みはない。
http://zng.info/specs/css3-selectors.html
210194:2010/12/12(日) 22:09:23 ID:???
>>207-209
(゚△゚)!!
言われてみれば「,」がまさしく「または」の意味を持ちますね
希望通りの「または」の動作をしないのでつい・・失礼しました。

CSSでは私の思う通りの動作を行うことが出来ないと言うことで諦めます
みなさんありがとうございました。
211Name_Not_Found:2010/12/12(日) 22:28:42 ID:???
","は「または」じゃないだろ「アンド」だ。
212Name_Not_Found:2010/12/12(日) 22:40:34 ID:???
>>211
"," が AND なら「p要素 かつ class="hoge"」は

p, .hoge { color: red; }

で表せなければならない。
213Name_Not_Found:2010/12/13(月) 16:42:45 ID:???
>>212
>>211がカタカナで書いた意味を考えるといいんじゃないかな
214Name_Not_Found:2010/12/13(月) 18:35:46 ID:???
>>213
さっぱりわからん。
「または」でもなく AND でもなく「アンド」に特別な意味がある…?
215Name_Not_Found:2010/12/13(月) 18:51:51 ID:???
まぁ「または」でも「あんど」でもないのは明白
単に箇条書きだってば
216Name_Not_Found:2010/12/13(月) 19:07:23 ID:???
>>214
「AND」は「且つ」って意味でしょ?
そうじゃなくて「と」っていう意味で言いたかったから>>211はカタカナにしたんだと思うんだけど
217Name_Not_Found:2010/12/13(月) 19:12:27 ID:???
何その屁理屈
または、でいいだろ……
218214:2010/12/13(月) 19:25:31 ID:???
あー、論理学的な意味で AND を用いたわけではなかったのか。
「論理和」や「論理積」でぐぐってほしい。
>>194 の「または」は「論理和」を指していると思われる。(「論理和」「OR」「または」は全て同じ意味)
http://ja.wikipedia.org/wiki/%E8%AB%96%E7%90%86%E5%92%8C

>>216
その解釈だと "「または」じゃない" と矛盾しないか?
「と」は「または」と同義だと思うのだが…。
219Name_Not_Found:2010/12/13(月) 19:31:23 ID:???
and と
or  または
,    区切り
220Name_Not_Found:2010/12/14(火) 06:57:52 ID:???
body {
width: 700px;
margin-right: auto;
margin-left: auto;
}
として、bodyが真ん中に来るようにしてたんですが、
頭と尻の部分に横幅いっぱいの画像をいれるため、

bodyに
background: url(foo.jpg) no-repeat top center;
addressに
background: url(bar.jpg) no-repeat bottom center;
とやったら、address要素がbody要素の幅を継承しちゃって700pxの背景になってしまいます
bodyの横幅を継承しないようにする方法はありますか?
221Name_Not_Found:2010/12/14(火) 07:59:54 ID:???
>>220
addressがbodyの内側にあればそりゃそうなるでしょうよ
222Name_Not_Found:2010/12/14(火) 08:11:15 ID:???
>>221
『継承しない』って書き方はないってことっスか?
223Name_Not_Found:2010/12/14(火) 08:12:26 ID:???
bodyは幅100%にして
中に幅700pxのdivを入れれ
224Name_Not_Found:2010/12/14(火) 08:15:15 ID:???
>>223
代案をだすってことは、ないってことっスかね?
225Name_Not_Found:2010/12/14(火) 09:52:58 ID:???
>>220
継承もなにもaddressはブロックレベルでしょ
だったら幅指定がない限り100%(=親要素と同じ)になるのが普通なんじゃね?

<div id="Container">
 <div id="SiteWidth">
  <address>--</address>
 </div>
</div>

body { background: url(bar.jpg) no-repeat bottom center; }
#Container { background: url(foo.jpg) no-repeat top center; width:100%; }
#SiteWidth { width:700px; margin:0 auto; }
226Name_Not_Found:2010/12/14(火) 09:59:44 ID:???
>>225
親の幅におさまるのが普通だからこそ親の幅無視できる方法ねーの?ってイレギュラーな質問してんだろ
で、できねーの?
なんで屁理屈並べたがるかね
シンプルな質問じゃねーか
できる、できねー
能書き聞きにきてんじゃねーんだよ

と思いましたが
言わないで我慢しますね
回答ありがとうございました
227Name_Not_Found:2010/12/14(火) 10:13:17 ID:???
変なdiv使わねーで、addressにstyle指定。ブロックなんだから。
228Name_Not_Found:2010/12/14(火) 10:26:31 ID:???
>>226
狂人あらわる
229Name_Not_Found:2010/12/14(火) 10:28:37 ID:???
正論じゃない?
質問と無関係な講釈垂れたがる自称中級者が多すぎる
230Name_Not_Found:2010/12/14(火) 11:44:19 ID:???
なりすましの煽りでしょ
231Name_Not_Found:2010/12/14(火) 12:01:30 ID:???
回答者は代替案と述べた上で発言すべきだった
232Name_Not_Found:2010/12/14(火) 15:42:07 ID:???
>>226
久々に香しい逆切れ乞食だなw
初心者スレに来てそんなイレギュラーな深読み期待すんなよw
233Name_Not_Found:2010/12/14(火) 15:47:11 ID:???
700の箱に1000を詰め込もうとかw
234Name_Not_Found:2010/12/14(火) 15:58:09 ID:???
>>226
書かない我慢が出来てない時点で
モニタの前で叫んだ可能性すら否定できないww
235Name_Not_Found:2010/12/14(火) 16:18:10 ID:???
>>233
親より大きいものを入れることを想定してるoverflowなんかもあるし、あながちおかしな発想でもないと思う
236Name_Not_Found:2010/12/14(火) 16:37:13 ID:???
でも親要素からはみ出すことを想定した何かはないわけだから、おかしな発想だと思われるのも当然だよな
237Name_Not_Found:2010/12/14(火) 16:46:29 ID:???
>>220,226
質問はシンプルなんだが、多分前提知識が間違ってる。
あなたのいう「横幅いっぱい」が曖昧すぎるんだが、ウインドウサイズの横幅を指すとしたら CSS では不可能。
代替案としては JavaScript でhtml要素の幅を取得する。

子要素の width が親要素に影響されるのは継承による動作じゃない。
もし、width が継承するのなら親要素が 700px なら子要素も 700px にならなければならないが、そうなってないだろう?
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#width
http://hp.vector.co.jp/authors/VA022006/css/box.html

CSSの仕組みを根本から否定するような発想だから、異発想と思われるのは仕方ないかと。
考えるのは悪くないが、CSS を良く理解して欲しい。
238Name_Not_Found:2010/12/15(水) 03:03:41 ID:???
Google Chromeでの文章の両端揃えは現状では無理なのでしょうか?
239Name_Not_Found:2010/12/15(水) 03:43:32 ID:???
とある事情により、8*8ドット日本語フォント「美咲フォント」 を使いたいのですが

http://ymem.web.fc2.com/misaki-test.html (試作してみたページ)

Opera(10.63)で見ると、文字が歪んでしまいます。
ローカルで試しても、Web上で@font-faceを使っても結果は同じでした。

何故でしょうか…?
240Name_Not_Found:2010/12/15(水) 06:45:58 ID:???
Operaだから
詳細は本スレへ
241Name_Not_Found:2010/12/15(水) 07:44:57 ID:???
>>240
本スレ…ここでしょうか?
 web制作管理板 Opera 質問スレッド Part22
 http://hibari.2ch.net/test/read.cgi/software/1289008250/
どちらかというと製作者側というより、閲覧者側としての対処法のスレのように思えますが…

それとも、他に「本スレ」というものがあるのでしょうか。
242Name_Not_Found:2010/12/15(水) 08:36:09 ID:???
<html><head><style>
h3 {font-size:1em; width:1em; background:pink;}
</style></head><body>
<h3>ファイナルファンタジー</h3>
</body></html>

としたとき、IE以外では

ファ



ファ


ジー

となってしまうのですが、綺麗に縦書きするにはどうしたら良いでしょうか?
(スタイルをオフにしたときもおかしくならないようにしたいので、できたら<br />などを使わずに)

span {display:block;}
<span>フ</span><span>ァ</span><span>イ</span>(以下略)

とすれば綺麗にはなりますが、どうも府に落ちなくて…
243Name_Not_Found:2010/12/15(水) 10:17:52 ID:???
>>241
そこであってる

CSSの記述は関係なく、Operaのフォントレンダリング自体に問題抱えてるから
対処法はOpera製作元にバグ報告・修正要望出すくらいしか無い
244239=241:2010/12/15(水) 11:59:41 ID:???
>>241
web制作管理板じゃなくてソフトウェア板だった。

>>243
なんと…
素直に画像使うべきだろうか…
245Name_Not_Found:2010/12/15(水) 19:27:09 ID:???
img要素に対するbefore/after擬似要素が機能しないのですが、これはそういう仕様なのでしょうか
 img:after { content: "hoge"; }
のように書いています
a要素やdiv要素などでは機能することを確認しました
動作確認をしたブラウザはIE8、Fx3.6、GC8です
246Name_Not_Found:2010/12/15(水) 19:55:36 ID:???
img:after { content: "hoge"; }
<img src="" alt="" />
 ↓
<img src="" alt="">hoge</img>
 ↓
エラー
247Name_Not_Found:2010/12/15(水) 20:34:44 ID:???
>>246
なるほど、理屈が解りました、ありがとうございます
248Name_Not_Found:2010/12/16(木) 07:43:01 ID:???
>>242
禁則処理がかかるからCSSじゃ無理
縦書きのプロパティも存在する(writing-mode)が、IE以外ではあまり対応してないぽい
縦書きは画面の構成上見やすいもんじゃないしどうしてもやりたいなら画像にすりゃいいんじゃないかな
249Name_Not_Found:2010/12/16(木) 19:12:31 ID:???
フッターを作ってます。
横長のdivに背景画像を入れて、divの中に、トップページ・料金等のテキストリンクをいれたいのですが

横長のdivの上下中央にテキストリンクを持ってこさせるには、どう書いたら正しいのでしょうか?
また中央ではバランスが悪いので、少し上下左右に調整したい場合も知りたいです。

宜しくお願い致します。
250Name_Not_Found:2010/12/16(木) 21:02:55 ID:???
テンプレのリンク先にある
251Name_Not_Found:2010/12/16(木) 22:43:14 ID:???
>>249
#footer {
background-image:url("〜");
padding-top:3em;
padding-bottom:5em;
}
<div id="footer">初歩的過ぎる</div>
252Name_Not_Found:2010/12/17(金) 05:36:19 ID:???
>>245の件なのですが
Operaでは期待に沿う表示をしてくれました
これは非正規だけど都合のいい解釈をしているに過ぎないと考えるべきですか?
253Name_Not_Found:2010/12/17(金) 09:59:30 ID:???
解釈はブラウザごとに異なるからな。
非正規を都合良く解釈とか特にIEが顕著だけど、
その他のブラウザにだって無い訳じゃない。
254Name_Not_Found:2010/12/17(金) 12:03:40 ID:???
CSS3のメディアクエリなんですが

<link rel="stylesheet" type="text/css" href="large.css" media="only screen and (min-width: 481px)" />
<link rel="stylesheet" type="text/css" href="large.css" media="screen and (min-width: 481px)" />

上記の違いは
上はメディアクエリをサポートしてないブラウザとスクリーンサイズの横幅が481px以上のものに適用
下はスクリーンサイズの横幅が481px以上のものに適用
って解釈で合ってますか?
255Name_Not_Found:2010/12/17(金) 12:44:25 ID:???
違いますね
256254:2010/12/17(金) 13:16:27 ID:???
違った…orz
違いを解説して頂けないでしょうか!
257254(偽物):2010/12/17(金) 15:46:59 ID:???
>>255
早く教えろよこの役立たず
258255(偽物):2010/12/17(金) 20:15:53 ID:???
あほたれ わしはまだ勃つわい !
259Name_Not_Found:2010/12/17(金) 20:37:16 ID:???
idとclassに指定する文字は大文字と小文字のどっちがいいんですか?
ホームページビルダーを使うとhtmlタグは大文字から小文字に修正されるんですが
idとclassはそのまま変わらず、大文字小文字が入り混じって汚らしくなってしまいました。
260Name_Not_Found:2010/12/17(金) 22:00:03 ID:???
俺はローワーキャメルケースにしてる
261Name_Not_Found:2010/12/18(土) 00:33:59 ID:???
>>259
特に規則はない。自分でわかりやすい名前であればいい。
http://okwave.jp/qa/q6299120.html
262Name_Not_Found:2010/12/18(土) 00:50:02 ID:???
divの枠を作って、その中に文章を入れてます。
枠の中で空白を作りFIREFOXで確認したら、枠自体が大きくなってしまって困ってます。
どうしたら、枠の大きさはそのままで、枠の中の文章と枠の間隔だけを空けれるでしょうか?

■html
<div class="system_textcontents">
文章
</div>

■css
.system_textcontents {
padding: 10px;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
background: #FFFFFF;
width: 726px;
}
263Name_Not_Found:2010/12/18(土) 05:27:27 ID:???
大きくなった分だけ小さくする
264Name_Not_Found:2010/12/18(土) 05:30:49 ID:???
>>261
ドキュメントタイプ次第では規則があるぞ
265261:2010/12/19(日) 00:03:29 ID:???
>>264
言葉が不足していたかもしれない。
アルファベット([a-zA-Z]) の大文字小文字で使えない文字はないという意味。
(X)HTML 系の文書で [a-z] が使えなかったり、[A-Z] が使えない規定はないんじゃないかな。
266Name_Not_Found:2010/12/20(月) 15:15:04 ID:???
>>262
paddingはwidthに含まれない
widthがautoの場合はpadding分も含めて自動調整するが
固定幅の場合は、width値+padding値になるから
左右のpadding分を引いた分をwidth値にする
267Name_Not_Found:2010/12/20(月) 20:03:04 ID:???
企業のイントラで事務関係のWebシステム作ってるとこに配属されました。
rowspan、colspanたっぷりの複雑な帳票、フォームばかりなんですが、
こういったのってtableでカリカリ書くより他どうしようもないですよね?
みんなどうしてるのか気になるんですが、書籍見ても一般サイトの話しかないし、
xhtml + cssを謳ってる地方自治体も、どうもこういう帳票は他の誰かが作ってるようで
非推奨属性使いまくりだったりしています。


http://www.google.co.jp/images?q=%E6%A7%98%E5%BC%8F%20%E5%8F%B7
268Name_Not_Found:2010/12/20(月) 20:27:24 ID:???
企業であれこれやってるんだが、帳票の現物はエクセルで作成。配布はまんまかPDFで。
サイトにはそれをgifにして貼るだけでおkなんだが・・質問の趣旨がもひとつわかんね。
269Name_Not_Found:2010/12/20(月) 21:56:45 ID:/eR/+iXw
IE8で互換モードから標準モードに切り替えると、次のような枠線が非常に暗い色になってしまいます。

<div style="border:4px groove">TEST</div>

互換モード時の明るい色が気に入ってたのですが、#FFFとか色指定してもまだ暗いんですよね。
標準モードの時に、可変サイズの枠を互換モードの時と同じような見栄えにすることはできませんか?
270Name_Not_Found:2010/12/20(月) 23:09:02 ID:???
>>269
仕様書には「溝っぽく見せろ」とだけ書いてある。その実装はUAによる。
groove,ridgeに頼っていいのはテキストサイトだけだ
271Name_Not_Found:2010/12/20(月) 23:51:10 ID:???
そういうことを聞きたいんじゃないんですけどね
272Name_Not_Found:2010/12/21(火) 00:49:20 ID:???
>>269
他も書いて欲しい
273Name_Not_Found:2010/12/21(火) 01:00:59 ID:???
>>268
ユーザーが入力する部分でのフォームはどのようにされていますか?
うちの場合では申請業務をWeb化するにあたり、
今使っている紙の申請書をそのままWebで再現しろという依頼があったので、
tableでrowspan, colspan付けて、できる限り紙媒体の様式をHTMLで再現しています。

プログラム組む方の人間で、デザインはド素人なのですが、
tableをレイアウトのために使用しないということ程度は聞いたことがあります。
ただ、先の様式x号みたいな形式のものは、そうせざるを得ないのではないかと思った次第です。
が、自信がないのでデザイン専門の方の意見を伺いたかったのです。
274Name_Not_Found:2010/12/21(火) 03:54:23 ID:???
>>273
紙まんまを再現しろとかいう要件を取ってくるなんて、三流の部署に配属されちゃったね…てのは置いといて
「表ではないもの」のレイアウトのためにtableを使うのが好ましくないのであって
「表」をtableで作るのはなにも間違ってない、そこんとこの区別はまず大丈夫だろうか

で、適当にhttp://goo.gl/b9Jv5を例にとって言うけど、まず用紙下部の「表っぽい」部分
俺はこういう帳票の理念については明るくないので正しくない指摘かもしれないが、これは情報としては表ではないと思う
でも体裁としては表であって、それを再現しろってんだから、表で作りゃいい
一方、この用紙の上部、いろんな文言とか表題とか、こいつらはまったく表ではない
だから、こいつらをまとめて一つのtableにぶっこむとか、そういうことは避けるべき

あとTextをうまくMarkupできないのは、自分がその文書をよく理解してないってことを意味するのは覚えとこうな
自分が何をやってるのかもよくわからず1000行の関数を書いちまうプログラマみたいなもんだ
275 :2010/12/21(火) 12:48:35 ID:???
>>273
帳票って要するに書類だよな。
それは単に印刷して書類として使うもの?
それともwebページとして一般公開するの?

Web文書として公開するなら適切なマークアップをして
デザインやレイアウト用途でのtable乱用は避けるべきだけど
あくまでそれを紙の書類として使う為の印刷用ページなら
別にガチガチのtableレイアウトでも問題ないんじゃない?
そもそもweb文書として読まれる事を前提としてないんだし。
276Name_Not_Found:2010/12/22(水) 22:18:29 ID:???
>>275
広義には書類です。印刷用途の場合は大抵PDFで出力します。
それをiframeでブラウザ上で確認させろと言われることもあります。
狭義には検索結果の明細です。
例えばgoogleの検索結果をNoやサイト名、更新日時といった列で区切り
tableでやたらめったらcolspanとrowspanで
レイアウトしたら帳票と呼びます(業務系界隈では)。
デザイナーの方が見たら卒倒するものばかりです。
http://www.google.co.jp/images?q=%E5%B8%B3%E7%A5%A8+%E7%94%BB%E9%9D%A2

>>274
三流は部署であり会社であり、この業界だと思います。
COBOLの時代から大企業だろうが中小だろうが変わらない風習です。

2010年の現在でも「マウスは難しいからクリックしなくていいように」というユーザーがいる世界であり、
「先方の専務がああ仰っているので何とかするように」となる世界ですし。
何十年も昔からこちらから提案することなく、顧客のいいなりになっていたツケとも言えます。

ともかく、やはり「そもそもそのような体裁を取らない」というのが
真っ当な対応なのでしょうか。うちでは無理そうですが…。
277276:2010/12/22(水) 22:22:18 ID:???
google画像検索でいいサンプルがありました。
例えば、↓をWebでそのまま起こせと言われている状態です。
http://www.pca.co.jp/area_product/images/product/ken/img_apdc_ken5_05.jpg
278Name_Not_Found:2010/12/22(水) 22:31:03 ID:5ARHfYiS
WEBデザインについて学ばないといけないのですが、何かいい本はないでしょうか?

特にCSSについて学びたいです
279Name_Not_Found:2010/12/22(水) 22:52:49 ID:???
ネットに情報なんていくらでもあるのになぜ本を
280Name_Not_Found:2010/12/22(水) 22:59:40 ID:???
>>278
っつー事はだ、netの社会のはじっこで生きていくわけだよな ?
netの最大の利点は「情報の検索」と「情報の取捨選択」だ。
いい機会だからその「CSSの何かいい本」を検索してみたらどうだい ?
281Name_Not_Found:2010/12/23(木) 01:31:37 ID:???
良い事言った!
282Name_Not_Found:2010/12/23(木) 11:09:20 ID:???
>>280
馬鹿は書き込みしないほうがよいのでは?
話わからないなら消えろよ
283Name_Not_Found:2010/12/23(木) 11:54:17 ID:???
どうした 、 なんか嫌なことでもあったのか、相談のろか ?
284Name_Not_Found:2010/12/23(木) 12:17:03 ID:???
探す努力をしないやつが勉強できるはず無いよな
285Name_Not_Found:2010/12/23(木) 13:10:45 ID:???
子要素に img を持つ a ってどうやって指定すればいいですか?
286Name_Not_Found:2010/12/23(木) 14:11:05 ID:???
ない
クラスでも付けろ
287Name_Not_Found:2010/12/23(木) 14:16:35 ID:???
>>278
スタイルシート辞典(翔泳社)
288Name_Not_Found:2010/12/23(木) 16:47:31 ID:???
>>285
子要素って言い方を知っててなぜそれが分からないのか理解に苦しむ
289Name_Not_Found:2010/12/23(木) 17:14:19 ID:???
えっ
290Name_Not_Found:2010/12/23(木) 17:32:41 ID:???
やはり存在しませんか。ありがとうございました
291Name_Not_Found:2010/12/23(木) 18:05:50 ID:???
>>288
JavaScript や XPath ならともかく、CSSセレクタ では無理だと思うが。
292Name_Not_Found:2010/12/23(木) 19:46:18 ID:???
生きるの疲れた
293Name_Not_Found:2010/12/23(木) 19:57:38 ID:???
>>291
キーワードが解るなら調べられるだろ?って意味なんじゃね。
294Name_Not_Found:2010/12/23(木) 20:32:38 ID:???
>>293
キーワードで調べても分からないから聞いているんだろ、常考。
295Name_Not_Found:2010/12/23(木) 20:33:46 ID:???
そりゃそうだw
296Name_Not_Found:2010/12/23(木) 20:37:07 ID:???
>>292
自分の常駐スレかと思った
297Name_Not_Found:2010/12/23(木) 21:05:40 ID:???
>>293
ないものをないと判断するのは難しい。
仕様書を読めるなら別だが、それなら質問しないだろうし。
298Name_Not_Found:2010/12/23(木) 23:13:39 ID:???
classの位置って決まりっていうか推奨みたいなのってあるんですか?
<img class="abc" src="src.jpg" alt="src">
<img src="src.jpg" alt="src" class="abc">
こんな感じで前に来てたり後ろに来てたりサイトによってまちまちなんですが。
299Name_Not_Found:2010/12/23(木) 23:19:58 ID:???
決まりはない
どういう順番にするかは好みの問題だな
自分の場合はid→class→その他→イベントハンドラ、って順番にしてる
300Name_Not_Found:2010/12/23(木) 23:54:43 ID:???
>>299
自分の場合、大体同じだけど 必須タグ (imgの場合src, width, height, alt)を一番先にしているな
301Name_Not_Found:2010/12/24(金) 01:04:42 ID:???
CSSの理解はできても実践でどう使うかは難しい。
なんか、そのへんのいい入門書はないですか?

WEBサイトにおけるCSSの実際の例みたいなやつ
302Name_Not_Found:2010/12/24(金) 01:07:15 ID:???
おまえのブラウザは右クリックから
ソースを見ることも出来ないのか。
303Name_Not_Found:2010/12/24(金) 01:09:21 ID:???
>>301
実戦で難しいってのがわからん
htmlでプレーンな文書を作って、あと全部cssでレイアウトじゃないの
練習のつもりで何かやるんなら架空のwebサイトでも作ってみたら
304Name_Not_Found:2010/12/24(金) 01:22:21 ID:???
あちこちのサイトのソース見るのは良い勉強になるよな
305Name_Not_Found:2010/12/24(金) 01:25:18 ID:???
>>301
自分も初心者だけどカッコいいデザインのサンプル見つけて
そのCSSのパラメーターをいじったりして理解→自分でちょっとしたページ作る
ってのが面白いし理解しやすいと思う
まぁ基礎がしっかり身に付かないかもだけどモチベが保てるから継続して学べる

コリスとかかちびとのCSSサンプルは見てて面白いお(^ω^)
306Name_Not_Found:2010/12/24(金) 03:57:32 ID:???
>>299
どうもありがとう。
307Name_Not_Found:2010/12/25(土) 17:25:17 ID:RI9fhs9a
スタイルシートのセレクタって
divとかpとか無いと駄目なのか?
308Name_Not_Found:2010/12/25(土) 18:08:14 ID:???
あ?
309Name_Not_Found:2010/12/25(土) 18:27:15 ID:???
え?
310Name_Not_Found:2010/12/25(土) 20:37:43 ID:???
ぎ?
311Name_Not_Found:2010/12/25(土) 21:08:06 ID:???
ご?
312Name_Not_Found:2010/12/25(土) 21:14:28 ID:???
ぐ?
313Name_Not_Found:2010/12/25(土) 23:07:12 ID:???
>>307
タイプセレクタは必須じゃないよ
314Name_Not_Found:2010/12/26(日) 15:17:40 ID:???
>>313
サンクス
そうなのか
pだと反映されるんだが
適当なのだと反映されなかったんだ
315Name_Not_Found:2010/12/26(日) 16:37:18 ID:???
>>314
「適当なの」が間違ってるんじゃない?
それだけじゃ何とも答えようがない。
316Name_Not_Found:2010/12/26(日) 16:43:41 ID:???
要は<div id="***"><p class="***">とかでなく
適当に<A id="***"><Z class="***">でもOKか?と聞きたいのだろう
317Name_Not_Found:2010/12/26(日) 17:08:32 ID:???
さすがにそれはないだろ
318Name_Not_Found:2010/12/26(日) 17:38:24 ID:???
それなんてspan?
319Name_Not_Found:2010/12/26(日) 18:29:32 ID:???
XMLなの?
320Name_Not_Found:2010/12/26(日) 18:32:16 ID:???
はじめてやります
いろいろおしえてください。
321Name_Not_Found:2010/12/26(日) 18:33:05 ID:???
>>320
はじめてかいとうします。
しつもんをおしえてください。
322Name_Not_Found:2010/12/26(日) 18:33:13 ID:???
はじめてやります
いろいろおしえてください。
323Name_Not_Found:2010/12/26(日) 18:35:54 ID:???
まずは浣腸をしてキレイにしましょう
324314:2010/12/26(日) 20:39:01 ID:???
>>316の通りだ
fとかkとかでやろうとしてた

pだと段落になりそうだと思ったんだ
325Name_Not_Found:2010/12/26(日) 20:48:40 ID:???
HTML勉強して来い
326Name_Not_Found:2010/12/26(日) 21:15:19 ID:???
>>324
それは CSS の話じゃない。
<z> を定義した DTD を用意してやれ。
それとも、不正な (X)HTML であることを前提にしているのか?
327Name_Not_Found:2010/12/26(日) 21:27:20 ID:???
>>324
文書型は何?
対応する仕様書を読め。
328314:2010/12/26(日) 23:54:27 ID:???
文章型はHTML 4.01 Transitional・・・
と思ったら書き損ねてた

もっと勉強して来る・・・
レスサンクス
329Name_Not_Found:2010/12/27(月) 00:51:45 ID:???
>>328
HTML4.01なら不正文書に対する規定はなく、実装依存。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/appendix/notes.html#h-B.1

何が目的か知らないが、不正文書にするぐらいなら <div class="z"> の方がまだマシ。
でなければ、HTML4.01 のDTDを元に自分でDTDを作る。
330Name_Not_Found:2010/12/27(月) 04:46:15 ID:???
#menu ul > li
{

}
などの > で指定するって大抵のブラウザでサポートされてますか?
331Name_Not_Found:2010/12/27(月) 09:03:46 ID:???
>>330
WinIE6以下以外はサポートされてる
332Name_Not_Found:2010/12/27(月) 09:27:56 ID:???
>>331
ありがとうございます。
安心して使えます
333Name_Not_Found:2010/12/27(月) 13:14:22 ID:???
しかしまだIE6は半数以上というところが多いがな、ははっ
334Name_Not_Found:2010/12/27(月) 13:52:16 ID:???
IEェ…こいつのせいでほんと手間かかる
335Name_Not_Found:2010/12/27(月) 14:01:53 ID:???
IE6使ってる奴ってなんなんだよ・・・情弱にも程があるだろ(´・ω・`)
336Name_Not_Found:2010/12/27(月) 14:35:33 ID:???
どっちが情弱なんだか
337Name_Not_Found:2010/12/27(月) 15:17:23 ID:???
普通は8にアップグレードされるから情弱は使えないんじゃない?
338Name_Not_Found:2010/12/27(月) 15:18:11 ID:???
小さいエって、ブーイングのときに使う感じがするが
由来と読み方がわからない
339Name_Not_Found:2010/12/27(月) 15:21:26 ID:???
サスケェでぐぐれ
340Name_Not_Found:2010/12/27(月) 15:42:54 ID:???
>>337
勝手にはされないよ
あとOSによっては入れられないOSのところも企業では多い
341Name_Not_Found:2010/12/27(月) 16:55:07 ID:???
IE6でしか動かない 業務用ASPやサービスを使ってる会社もまだあるから なかなかね…
342Name_Not_Found:2010/12/27(月) 17:34:41 ID:???
会社のPCだと勝手には入れられなかったりするしね
権限持ってる人が情弱な可能性とか単に数が多くて面倒とかってこともあり得る
俺が前いたところも今年の夏の時点でまだ全台6だった

>>337
いつの間にか自動的にされるわけじゃないからそれは無いと思う
343Name_Not_Found:2010/12/27(月) 23:53:04 ID:???
うちも一応大企業に分類される会社にいるけど、IE6をIE7以上にアップデートすることは禁止されてる
344Name_Not_Found:2010/12/28(火) 00:39:54 ID:???
結局、IE6を使い続けているのはほとんどが企業ユーザーだということ
つまりそいつらを相手にするかどうかでIE6への対応を決めればいい
345Name_Not_Found:2010/12/28(火) 06:03:13 ID:???
ちょっと聞きたいんだけど、CSS3もう実務で使ってる?
346Name_Not_Found:2010/12/28(火) 09:30:49 ID:???
>>345
うn 一部サイトでは使ってる
古いUAだと再現はされないから、情報の閲覧には支障がでないようにするのが大前提だね
347Name_Not_Found:2010/12/29(水) 18:15:15 ID:???
<div class="clr"></divが出来るのですが"clr"とは何でしょう??
348Name_Not_Found:2010/12/29(水) 18:38:49 ID:???
使ってるソフトのスレで聞け
349Name_Not_Found:2010/12/29(水) 18:39:42 ID:???
>>347
なに?クイズがしたいの?
じゃあ「上は大水、下は大火事。これなーんだ?」
350Name_Not_Found:2010/12/29(水) 18:48:24 ID:???
>>374
日本語でおk
351Name_Not_Found:2010/12/29(水) 18:54:19 ID:2o/k5x41
>>347
id、classは任意
352Name_Not_Found:2010/12/29(水) 23:42:04 ID:9Z+1uLrQ
>>300
altは必須だけどwidthとheightは必須じゃないよ。(HTML5ではaltも必須じゃなくなる。)
353Name_Not_Found:2010/12/30(木) 19:35:39 ID:???
現在、主にIE6(後方互換モード),7対策で
・widthとpaddingまたはborderを同時に指定しない(widthの解釈)
・floatを指定した要素に左右marginを指定しない(IEで2倍になる)
・上下marginはできるだけ使わない(バグが多いような気がします)

上記のことを自分なりに決めてCSSを書いているのですが、他に注意するべきCSSのプロパティやそれらの組み合わせってありますか?
もしかしたら無意識のうちにやっているかもしれませんが...
354Name_Not_Found:2010/12/30(木) 20:08:39 ID:???
当然Fxでも確認してるよね ?
355353:2010/12/30(木) 20:16:56 ID:???
>>354
有り難うございます。
はい、最初はFirefoxで確認してその後IEとOperaで確認しています
chromeも追加しようかなと思っていますが...
356Name_Not_Found:2010/12/30(木) 21:31:57 ID:???
IE6は官公庁、大企業、研究所などが多くて
「全く無知」と「解って使っている」の両極端だから
もう無視してもいいかも・・・

>353の3点で充分だと思うよ。
357Name_Not_Found:2010/12/30(木) 21:40:12 ID:???
超基本なので既にクリアしていると思うが
・属性セレクタ([ ])、チャイルドセレクタ(>)、white-space:pre あたりは未対応なので使わない
・bodyに font 設定する場合は、基本 table 要素にも同じ設定をする
とか
358Name_Not_Found:2010/12/30(木) 22:04:31 ID:???
IE6,IE7だとはhasLayout絡みか
互換IE6だとブロック要素のセンター揃えも気をつけねば
359Name_Not_Found:2010/12/30(木) 22:40:39 ID:???
>>353
標準準拠モードなら回避できるバグばかりではないか…。
後方互換モードを会えて選択するメリットはあるのかな。
360Name_Not_Found:2010/12/31(金) 07:38:37 ID:???
単純にxml宣言が推奨されてるからじゃね?
UTF-8だと省略可だけど推奨ってことで俺も書いてるし
361Name_Not_Found:2010/12/31(金) 10:28:28 ID:???
<!DOCTYPE html>でオールオッケーだと思ってるんだけど、なんかまずい事ってある?
362Name_Not_Found:2010/12/31(金) 11:26:26 ID:???
un
363Name_Not_Found:2010/12/31(金) 13:45:29 ID:???
>後方互換モードを会えて選択するメリットはあるのかな。
IE5対策
364Name_Not_Found:2010/12/31(金) 14:58:28 ID:???
>>360
HTTPヘッダでちゃんと文字コードが指定されてたら、どの文字コードでも省略可能ってことになったよ
365Name_Not_Found:2010/12/31(金) 15:04:57 ID:onsTJKN9
>>363
今時IE5なんて無視でしょ。

>>264
まじで?ソース希望。

というか、HTML 4.01でいいじゃん。
366Name_Not_Found:2010/12/31(金) 15:18:40 ID:???
まだ少数ながらIE5ユーザも居るから、Webで不特定多数を相手にするなら
対応できるならしておいたほうがベター
367Name_Not_Found:2010/12/31(金) 16:06:17 ID:???
シェア1%以下だろ
対応するコスト考えたらアホらしい
時間と労力の無駄
368Name_Not_Found:2010/12/31(金) 16:06:24 ID:???
じゃあネスケ4.7にも対応しないといかんな
369Name_Not_Found:2010/12/31(金) 16:29:01 ID:???
さすがに6まででしょ
それ以前への対応なんてほぼ骨折り損でベターですらない
よほど余裕があるなら好きにすればって感じだな
370Name_Not_Found:2010/12/31(金) 16:35:01 ID:???
半年前のブラウザ占有シェア調査では1位がIE8(25%、連続1位)で、2位がIE6(15%、増加へ転向)だったからな。
最低この2つには対応で、後は任意かな
371Name_Not_Found:2010/12/31(金) 16:39:11 ID:???
ベターっていうことなら、
>>370と、あと、FFとかOperaとか有名どころだけ押さえれば、まあ別にいいんじゃね、って思う。
372Name_Not_Found:2010/12/31(金) 16:40:27 ID:???
スマン、占有率の数値を間違えてた。
IE8 26%、IE6 17%
(ちなみにIE7とIE8互換モード は別集計)
373Name_Not_Found:2010/12/31(金) 16:51:29 ID:???
>>372
ちなみに7は?よかったら教えて。
7にした人はたいてい8にしてるから
6よりもパーセンテージが低い、ってことなのかな
374Name_Not_Found:2010/12/31(金) 17:07:29 ID:???
>>373
7は確か11%。

企業ユースは6が多いし、7使ってる人って不人気OSのVISTA使いが多いんでしょうかね
375Name_Not_Found:2010/12/31(金) 17:15:22 ID:???
「やること無くて超暇なら対応」ぐらいでいいだろ
376Name_Not_Found:2010/12/31(金) 19:37:21 ID:???
> HTTPヘッダでちゃんと文字コードが指定されてたら、どの文字コードでも省略可能ってことになったよ
http://logsoku.com/thread/hibari.2ch.net/hp/1276329188/#776
に近いものを感じる。
377Name_Not_Found:2010/12/31(金) 19:41:54 ID:???
XML宣言推奨を打ち消す規定じゃないな。
378Name_Not_Found:2010/12/31(金) 19:46:06 ID:???
w3c自体、xml宣言を入れないことを推奨してるわけじゃないんだよね
w3c自身も「IE6が面倒だから」という理由が見え隠れしているような・・・。
俺は無難にxml宣言してるけどね
IE6が後方互換でもよっぽど凝ったデザインにしない限り大丈夫だ
379Name_Not_Found:2010/12/31(金) 19:53:47 ID:???
セキュリティアップデート終わったブラウザに対応したら逆にダメだろ

>>376
ごめん、>>360の二行目に突っ込んだつもりだった
380Name_Not_Found:2010/12/31(金) 19:58:33 ID:???
HTTPヘッダに文字符号化を指定できるのはXMLに限らないHTTPの規定。
当然、HTMLも省略できる。
そもそも、XML宣言が文字符号化のためだけにあると思っているのがおかしい。
381Name_Not_Found:2010/12/31(金) 20:00:02 ID:???
>>379
彼はHTTPヘッダで指定すれば省略可だけど推奨ってことで書くんじゃないか?
382Name_Not_Found:2010/12/31(金) 20:13:47 ID:???
XHTML1.1 1st edition?ではUTF-8/16以外では省略不可だったと思う。今は2ndが勧告されてるけど
http://www.w3.org/TR/2001/REC-xhtml11-20010531/conformance.html#strict
383Name_Not_Found:2010/12/31(金) 23:19:36 ID:???
某大手メーカーのWebサイトガイドラインではWinIE5.5もいまだ対象だった
384Name_Not_Found:2011/01/01(土) 13:00:55 ID:uySdSDUj
>>383
そういうのは大抵ガイドラインの更新のし忘れ、あるいは怠り。
385Name_Not_Found:2011/01/01(土) 17:07:14 ID:???
大手がIE6を切れば少しは早く撲滅するかな
386Name_Not_Found:2011/01/01(土) 17:14:40 ID:???
>>385
2014年のWindowsXpサポート切れまで待て
387Name_Not_Found:2011/01/01(土) 17:57:10 ID:???
IE6はもういいよ
IE8が問題
388Name_Not_Found:2011/01/01(土) 18:08:05 ID:L+td9HwC
大人しくIE八苦で個別対応
389Name_Not_Found:2011/01/01(土) 18:26:41 ID:???
下手なことしなければIEでもなんとかなってる
px単位で細かく揃えようとするときついね
390Name_Not_Found:2011/01/01(土) 21:30:40 ID:???
そういう問題ではなかろう
391Name_Not_Found:2011/01/01(土) 21:40:01 ID:???
px単位でっていうのがそもそもアレ過ぎて….
392Name_Not_Found:2011/01/01(土) 22:26:36 ID:???
細かい位置指定より、border等がうまく機能しないバグの方が問題じゃないか
393Name_Not_Found:2011/01/01(土) 22:30:35 ID:???
それのせいで位置指定が大変ってことも含んでるんじゃ?
394 :2011/01/04(火) 19:23:53 ID:???
その場合は大抵pxなんて単位を超越してる
395Name_Not_Found:2011/01/04(火) 19:53:50 ID:???
じゃあそんなものをpx単位で揃えようなんてアホということで終了だよね
396Name_Not_Found:2011/01/05(水) 00:38:15 ID:???
px使わない奴ってだっせえテキストサイトしか作ったことないの?
397Name_Not_Found:2011/01/05(水) 01:00:17 ID:???
いきなり何だ
398Name_Not_Found:2011/01/05(水) 06:09:57 ID:???
どっちがいいじゃなくて、それぞれ使いどころありますがな。
399Name_Not_Found:2011/01/05(水) 15:39:34 ID:???
人を馬鹿にするのもいい加減にしたらどうだ!!
400Name_Not_Found:2011/01/05(水) 16:25:20 ID:???
でした
401Name_Not_Found:2011/01/05(水) 20:38:43 ID:???
お正月だ。餅つけ。
402Name_Not_Found:2011/01/06(木) 16:06:37 ID:???
あの頃は♪
403Name_Not_Found:2011/01/06(木) 19:43:38 ID:???
っは!
404Name_Not_Found:2011/01/07(金) 10:55:45 ID:???
昨夜、ふと気付いてしまった

コーマンとコーモンは一字違い!!!
405Name_Not_Found:2011/01/08(土) 01:03:18 ID:???
ま、隣同士だからね
406Name_Not_Found:2011/01/08(土) 05:40:57 ID:???
コーチンを入れて!(挿入的な意味で)
407Name_Not_Found:2011/01/11(火) 10:19:34 ID:HblpUKIT
とあるdivにマウスカーソルが乗ったときに背景色が変わるようにしたいんですが、
どうすればよいでしょうか?
リンクではないのでa:hover以外の方法でありませんか?

神の光臨お待ち申し上げ奉ります。
408Name_Not_Found:2011/01/11(火) 10:35:27 ID:???
>>407
JavaScriptでやったらいいと思います

神とかいっておだてあげてレスを誘発しようとするのは
自分では効果的と思ってるのかも知れないけど
みすぼらしいだけなので、やめたほうがいいと思います
409Name_Not_Found:2011/01/11(火) 12:12:48 ID:???
>>407
div:hover
IE6以下にも対応したければJavaScript併用
410Name_Not_Found:2011/01/11(火) 12:15:10 ID:???
>>407
飛ばないリンク
411Name_Not_Found:2011/01/19(水) 23:44:54 ID: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にも反映されているのにデバッグすると背景色があった
ころのままになっています。甚だ困惑です。原因、対処法の判る方よろしければ
教えて下さい。
412Name_Not_Found:2011/01/19(水) 23:55:35 ID:???
キャッシュ
413Name_Not_Found:2011/01/20(木) 00:06:36 ID:M6ipxN6v
>>412 俺頭悪いわwwww
ありがとうございました即時解決です。
aspxの中身はきちんと更新されてるから
CSSだけキャッシュ優先とか思いもよらなかった。
414Name_Not_Found:2011/01/21(金) 09:02:33 ID:???
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
みたいに量を指定したいんです
415Name_Not_Found:2011/01/21(金) 12:03:27 ID:???
div > div:first-child + div + div + a.test ,
div > div:first-child + div + a.test ,
div > div:first-child + a.test
416Name_Not_Found:2011/01/21(金) 12:19:23 ID:c/reoNen
携帯サイトに用いるCSSはみなさまどうしてますか?
外部ファイルにしたりもできるみたいだけど、実機で確認ができんから実際どのぐらいまでの人にきちんと表示してもらえるかわからん。
まとめサイト的なものも探したけど、2〜3年まえのものばっかりなんだよな。

私はこうしてる、とか最近のこと書いてるページとかあれば、教えてください。

417Name_Not_Found:2011/01/21(金) 12:49:48 ID:???
ドコモとかだと、link要素に加えて、style要素を使えないブラウザもまだ利用されてる

そういうブラウザだとstyle要素のセレクタには、a要素の疑似クラスしか指定できない
それ以外のセレクタを書いてしまうと、style要素の中身が晒されて、ページ内のstyle属性まで機能しなくなる
あとcolorやfontプロパティが指定できるのは基本的にspan要素のみ
418Name_Not_Found:2011/01/21(金) 15:46:49 ID:c/reoNen
>>417 ありがとー

DOCOMOの場合、xhtmlがうんたらかんたらなんだよね。
いっぺんチョーシこいてxhtmlでつくったら
ウェブコンテンツヴューアでエラーでまくりで
上司からやめれと指示されたけど、
あのエラーってあてにしていいもんなの?
419Name_Not_Found:2011/01/21(金) 15:47:32 ID:???
docomoの一般的なiモードブラウザだと、MIMEタイプをapplication/xhtml+xmlにしないとCSS有効にならないので注意

ガラケだと基本的には2〜3年のテクが未だ定石という感じ

最近見た携帯サイトまとめ記事
http://design.kayac.com/topics/2010/09/mobile-template.php
420Name_Not_Found:2011/01/21(金) 18:05:22 ID:???
>>419 おおこりゃいい

ガラケって言葉も今おぼえた。
感謝します。
421Name_Not_Found:2011/01/21(金) 20:36:23 ID:???
そんなんでよく・・・
422Name_Not_Found:2011/01/21(金) 23:34:07 ID:???
DoCoMoのXHTMLは、HTTPヘッダとmeta要素の両方でContent-Type指定しとかないと
機種によってはCSSいかれるよ
423414:2011/01/22(土) 00:18:01 ID:???
>>415
確かにそれでも可能なんですが、動的なサイトで、 + divの量が可変するんです

あるときには
div > div:first-child + div + a.test
でも、また違うときには
div > div:first-child + div + div + div + div + a.test
みたいに+ divが増減するんです

その度に + divの量を変更するのでは手間なので一意的に表現する方法はございませんか?
424Name_Not_Found:2011/01/22(土) 00:21:12 ID:???
CSS3 兄弟
425Name_Not_Found:2011/01/22(土) 00:31:51 ID:???
動的ならクラス名を振れるだろ
426414:2011/01/22(土) 02:02:24 ID:???
>>424
もうちょっとkwskお願いします
ttp://www.htmq.com/css3/index.shtml
このどこを使えば実現できるんでしょうか。セレクタの所だとは思うのですが、いまいちピンときません

>>425
サイトのスタイルをユーザー側でCSSを使い、変更するというものでして、自分はサイト運営者ではないんです
スタイル変更にはfirefoxのstylishというものを使っています
427Name_Not_Found:2011/01/22(土) 02:44:18 ID:???
>>426
div が a.test に先行するのは必要条件なの?
div>a.test:first-child ではダメ?
428427:2011/01/22(土) 02:51:11 ID:???
あるいは、div>div:first-child~a.test かな。
繰り返し回数を任意にするセレクタはないので、完全に期待通りの動作にすることは出来ない。
GreaseMonkey でも使うか、セレクタの方を考え直すしかない。
429Name_Not_Found:2011/01/22(土) 06:50:10 ID:???
<h2>ナビゲーション</h2>
<ul>
<ll>コンテンツ</li>
<li>...</li>
</ul>

よくあるマークアップだと思うのですが、CSSありだと見出しのナビゲーションを消す場合、SEOも考えるとどれが妥当でしょうか?
・display:none;
・背景色と文字色を同じにする
・z-indexでかぶせる
・インデントで画面外に飛ばす

見出し自体を消すとCSSオフのときに違和感があるのでテキスト自体は消したくないです。
悪気があって消すわけではないのですが、そう捉えられる可能性がありますよね?
検索エンジンでスパムになる境界がいまいち不明です
430Name_Not_Found:2011/01/22(土) 09:46:38 ID:???
>>426
またサヨクがニワカで保守気取りか
431Name_Not_Found:2011/01/22(土) 15:48:26 ID:???
>>429
境界がいまいち不明なら消すな。
素人サイトがSEOなど考える必要なし
もっとも効果的なのは内容を充実させることだ !
432Name_Not_Found:2011/01/22(土) 16:05:19 ID:8A+F191Z
::selection { background: rgb(255,255,255); }

で選択文字の背景を白にしたいんだけど、何故か真っ白にならずに背景が透ける。
rgbaで不透明に指定してみたけど効果は無し。 -mozは指定通り真っ白になる。
スタイルを上記だけにしたものだと、真っ白になるのだけど
背景かテキストシャドウを記述すると、透けてしまう。

これどうしてでしょう?
433Name_Not_Found:2011/01/22(土) 16:06:53 ID:???
>>429
そもそも「見出し」を消す理由は?
434Name_Not_Found:2011/01/22(土) 16:09:39 ID:???
>>433
デザイン上の都合じゃね?
フッターの見出しとか自分も消すことあるよ
435414:2011/01/22(土) 16:21:15 ID:???
>>427-428
ご回答ありがとうございます
お教えくださったことを試した結果、div>a.testで出来ました
兄弟の要素( div:first-child + div + div )は省略できたのですね。どうもありがとうございました。
436 :2011/01/22(土) 16:26:50 ID:???
>>435
遅レスだがそういった動的で複雑な条件を指定する場合は
htmlも書かんとなかなか理解しづらいぞ

>>432
#fffじゃだめなのか?
437432:2011/01/22(土) 16:35:05 ID:???
>>436
レスありがとうございます
16進数、試してみたんだけど駄目でしたわ

ユニバーサルセレクタで不透明度100%にして、リセットを試みるも効果なし
デフォルトのライトブルーでも透けてるので、WebKitの仕様かなと思って一旦諦めます
438Name_Not_Found:2011/01/22(土) 19:01:01 ID:???
>>437
::-moz-selection は有効で ::selection は無効ということかな。
Firefox では先行実装扱いになっているからベンダー接頭辞が必要となる。
他のブラウザでもベンダー接頭辞が必要な扱いとなっている可能性があるので、接頭辞を入れて検証してみるといいと思う。
439Name_Not_Found:2011/01/22(土) 19:11:51 ID:???
ベンダー接頭辞は使ってもよいか | Web標準Blog | ミツエーリンクス
http://standards.mitsue.co.jp/archives/001469.html
CSS3 module: Syntax
http://www.w3.org/TR/css3-syntax/#vendor-specific
Vendor-specific Properties
http://reference.sitepoint.com/css/vendorspecific
440432:2011/01/22(土) 19:38:23 ID:???
>>438
紛らわしくなってしまって申し訳ない。

Gecko用に ::-moz-selection で記述したものは、Gecko系ブラウザで望み通りになるのだけど
特に接頭辞の必要のないWebKit用に書いた ::selection では、WebKit系において透けてしまうという事ですわ。
因にWebKitでは、擬似要素selectionに接頭辞を付けると無効になってしまうようで。
441think49 ◆bKk/qcAKuM :2011/01/22(土) 21:05:14 ID:???
>>440
こういうことでしょうか?

http://jsbin.com/efagu3/1 (Fx のみOK / GC, Opera はNG)
http://jsbin.com/efagu3/2 (Fx, GC, Opera でOK)
442Name_Not_Found:2011/01/22(土) 23:32:09 ID:???
>>441
そうです
無理っぽいですな
443think49 ◆bKk/qcAKuM :2011/01/23(日) 14:13:49 ID:???
>>442
::-moz-selection, ::selection { color: black; background-color: white; }

このようにカンマでセレクタをグループ化すると ::-moz-selection を解釈しないブラウザで動作しなくなりますが、カンマを使わなければ期待通りに動作すると思います。
http://d.hatena.ne.jp/think49/20110122/1295702670
444432:2011/01/23(日) 22:03:09 ID:???
>>443
いやー色々とどうも有り難うございます。
仰るように、それぞれのエンジンに対応したコードを書き、それぞれに効いている上で
微妙に選択色を透けさせてしまうWebKitのレンダリングに対する疑問だったんです。>>432

大した問題ではないですし、仕様だと思うので諦めました。
誤解させてしまって申し訳ない。
445Name_Not_Found:2011/01/26(水) 15:42:12 ID:6rqJuliC
散々出ている質問だと思うのですが
ブログにhtmlで記述した記事の個別のページをIE8で開くと、
文字やレイアウトがずれてしまいます。
Firefox3.6では問題なく開くことが出来ます。
いろいろググッたのですが答えにたどり着けなかったので
教えてください。
http://blog.livedoor.jp/risusoku/
446Name_Not_Found:2011/01/26(水) 18:55:42 ID:???
一から作り直した方が早いんじゃない
447Name_Not_Found:2011/01/26(水) 19:23:54 ID:???
ttp://www.google.co.jp/search?hl=ja&source=hp&q=http%3A%2F%2Fblog.livedoor.jp%2Frisusoku%2F&btnG=Google+%E6%A4%9C%E7%B4%A2

まず「色々調べた」とは何を調べたのか聞きたい
そもそも何がどう違うのかも言わずにこれ見て答えろは酷い
448Name_Not_Found:2011/01/26(水) 19:38:36 ID:???
>>445
CSSの記述のどこかをミスってるんだよ
多分、凡ミス
449Name_Not_Found:2011/01/26(水) 22:48:49 ID:6rqJuliC
445です
>>477
「IE CSS ずれる」とかで検索したり質問サイトを見たりです
CSSやHTMLの知識が無いからどこをさわったらどうなるかが
分からなかったので質問が悪かったのはすみません
450Name_Not_Found:2011/01/26(水) 22:54:19 ID:???
まず、CSSの基本的な知識を身につけて、それでも分からなかったら質問して下さい。
451Name_Not_Found:2011/01/26(水) 23:36:45 ID:???
>>449
子供はこんなとこに来ちゃダメだぞ
452Name_Not_Found:2011/01/26(水) 23:42:57 ID:???
>>449
何食わぬ顔でマルチポスト先を削除するところがまた…。
http://okwave.jp/qa/q6475290.html
453Name_Not_Found:2011/01/27(木) 00:07:58 ID:???
ボクもここで質問したかったんだけど、やめたよ。
ここ、怖いおじちゃんがいっぱいいるんだから。
454Name_Not_Found:2011/01/27(木) 00:23:16 ID:???
>>453
まともな回答もあるんだよ、とはいっておきたい。
過度な期待をされても困るけど。
最近、答えようと思える質問がめっきり減ったよ。
455Name_Not_Found:2011/01/27(木) 00:37:54 ID:???
>>452
指摘されて質問内容が悪かったと思ったから消しただけ
456Name_Not_Found:2011/01/27(木) 00:50:02 ID:???
>>455
俺は後から来たので経緯は知らないんだが、誰かにマルチポストを指摘されたのか?
俺は当事者じゃないからしつこくいう権利はないが、「http://okwave.jp/qa/q6475290.htmlhttp://knowledge.livedoor.com/48123 にマルチポストしていました。すみません。」ぐらいの謝罪はあっても良かったと思うな。
黙って削除されたら証拠隠滅と受け取られても仕方ない。
457Name_Not_Found:2011/01/27(木) 00:55:18 ID:???
>>456
しつこい
458Name_Not_Found:2011/01/27(木) 01:09:15 ID:???
もうちょっと穏やかな雰囲気にならないものか。
回答者には同情するが、それでもなあ…。
459Name_Not_Found:2011/01/27(木) 01:20:17 ID:???
ゆとりの相手はしてられん
460Name_Not_Found:2011/01/27(木) 01:20:34 ID:???
>>456
証拠隠滅の意味が分からないのですが何に対してですか?
>>447に「まず「色々調べた」とは何を調べたのか聞きたい
      そもそも何がどう違うのかも言わずにこれ見て答えろは酷い」
って言われて、抽象的で分かりにくい質問だったと思ったから削除したまでです。

他のところで質問していることを聞いてはいけないルールでもあるのですか?
それならば謝罪しますけど。
461Name_Not_Found:2011/01/27(木) 01:27:07 ID:???
追加
質問サイトにした質問に対する回答はまだゼロでした。
462Name_Not_Found:2011/01/27(木) 01:31:58 ID:???
>他のところで質問していることを聞いてはいけないルールでもあるのですか?

そうです。詳しくは「マルチポスト」でぐぐれば分かります
謝罪して金輪際ネットから姿を消してください
463456:2011/01/27(木) 01:36:13 ID:???
>>460
俺は>447ではないが…。
447は「抽象的でわかりにくいから、補足してくれ」といっているのでは?
「補足してくれ」を「質問を削除してくれ」と読み替えるのは無理がありすぎる。

> 他のところで質問していることを聞いてはいけないルールでもあるのですか?
ルールではないが、マナーに反しているといえるかと。
「ルールさえ守れば何をやってもいい」と思っているなら、社会勉強が足りないと思う。
http://www.google.co.jp/search?ie=UTF-8&q=%E3%83%9E%E3%83%AB%E3%83%81%E3%83%9D%E3%82%B9%E3%83%88
464456:2011/01/27(木) 01:45:33 ID:???
一つ忘れた。

> 証拠隠滅の意味が分からないのですが何に対してですか?
「マルチポストをなかったことにする」という意味での証拠隠滅。
後からここを見た人はマルチポストがあったことさえわからない。
465Name_Not_Found:2011/01/27(木) 02:14:28 ID:???
マナー違反してしまったことは謝罪します、すみませんでした。
回答しようとしてくれた方はありがとうございました。
466Name_Not_Found:2011/01/27(木) 02:50:43 ID:???
>>465
もうあのサイトはダメだろ。
2chはおろかネットに疎いようだし
荒らされて終わり。
身の丈にあったサイト作りなよ。
467Name_Not_Found:2011/01/27(木) 04:37:24 ID:???
>>449
>>2ちゃんねるのニュース☆ネタのまとめブログ

が下にずれるということでいいの? 何を聞いているのかはっきりしない
レイアウトや文字が具体的に何なのか言わないし、個別のページというのも存在しないから分からない

IE8で表示が標準モードだと、旧IEのバグは継承されないからずれない
互換モードだと、description の line-height が padding と競合して高さがずれるんだと思う(未検証)
IE7以下を無視して強制的に標準モードするMETAタグを付けるか、CSSでハックするか
line-height を バグを加味して font と padding から逆算した実数にするか、使わないようにするか

空のページの状況から先のことは分からない
468Name_Not_Found:2011/01/27(木) 06:49:16 ID:???
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が指定されていない場合はこのフォントサイズを指定」みたいなことを想定しています。
469Name_Not_Found:2011/01/27(木) 07:24:58 ID:???
p {font-size: 150%}
p[id], p[class] {font-size: 100%}
470Name_Not_Found:2011/01/27(木) 11:55:17 ID:???
しつこく言っておく。
>>456は、非常にひつこい。
471Name_Not_Found:2011/01/27(木) 11:59:45 ID:???
こういう類のやつを「ネット弁慶」と呼ぶ
472Name_Not_Found:2011/01/27(木) 13:23:39 ID:???
>>467
わざわざ調べていただいてありがとうございます。

マルチポストのことを知らなかったので
質問サイトにも質問をしていました、すみませんでした。

怖いおにいさんにまた叩かれちゃうので書き込みは控えます。
473Name_Not_Found:2011/01/27(木) 13:24:58 ID:???
自分のことは棚に上げて他人を怖い物扱い
474Name_Not_Found:2011/01/27(木) 13:36:18 ID:???
爆釣ですね。おめでとう
475Name_Not_Found:2011/01/27(木) 13:55:50 ID:???
いつまで引っ張るんだよ糞虫ども
476Name_Not_Found:2011/01/27(木) 14:23:34 ID:???
>>467
個別記事の2chのコピペ文章が
カラムから外れフロートされていた
477Name_Not_Found:2011/01/27(木) 16:12:49 ID:???
>>476
バグでfloatのmarignが倍になったか、中身のmarginが相殺されず肥大してカラムが崩れたとか
ソースだけじゃ面倒くさいしもう知らね
478Name_Not_Found:2011/01/28(金) 05:17:02 ID:???
>>477
わざわざ調べていただいてありがとうございました。
理由は分からないけど記事のHTMLのタグの付け方が悪かったみたいで、
なんとか解決しました。
ご迷惑をおかけしてすみませんでした。
479Name_Not_Found:2011/01/28(金) 19:28:32 ID:cSZTy+p4
ie6のバグでmargin:auto;がきかないので
このようにしてセンタリングしてますけど

body{
text-align:center;}
div.wrap{
width:800px;
margin-left:auto; margin-right:auto;}



body自体に横幅、margin:auto;を指定してやれば
ie6でも普通に機能するんですね。さっき気付いたw

body{
width:800px;
margin-left:auto; margin-right:auto;}
480Name_Not_Found:2011/01/28(金) 22:00:37 ID:???
>>479
わりと良く勘違いされるが、margin-left:auto; margin-right:auto; が無効なのは後方互換モードの時だけ。
481Name_Not_Found:2011/01/29(土) 23:14:44 ID:???
<div style="background-color:cyan;">
<img src="image.png" style="max-width:100px;max-height:100px;float:left;">
タイトル<br>説明文説明文
</div>
と、書きました
http://sakurasite.homeip.net/imgboard/img-box/img20110129231038.png
chromeだと一番上の画像の通りにレンダリングされますが、二番目、三番目の様に表示するにはどう書いたらよいでしょうか
文章量は画像より高くなったりならなかったりまちまちです
482Name_Not_Found:2011/01/29(土) 23:37:24 ID:???
↓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>でもいい気がするけど。
483Name_Not_Found:2011/01/30(日) 01:19:17 ID:???
どうも
484Name_Not_Found:2011/01/30(日) 03:18:20 ID:???
display:block
485Name_Not_Found:2011/01/31(月) 00:44:54 ID:???
<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 になってしまいます
486Name_Not_Found:2011/01/31(月) 00:47:49 ID:STSQUKFG
a img:hover
{ cursor: pointer; }
487Name_Not_Found:2011/01/31(月) 00:56:06 ID:???
どうもです
488Name_Not_Found:2011/02/01(火) 13:20:39 ID:???
質問です
<div id="〜" class="〜">
と1つのdivに同時に設定しているのを見かけたんですが
何か意味があるんでしょうか?
489Name_Not_Found:2011/02/01(火) 13:29:52 ID:???
idはCSSだけのものじゃないよ
JavaScriptなんかでも使う
490Name_Not_Found:2011/02/01(火) 15:06:14 ID:???
>>489 javascriptでも使うんですね!ありがとうござます
でももしこれがCSSのIDセレクタだったらどういう意味があるんでしょうか?
491Name_Not_Found:2011/02/01(火) 15:23:43 ID:???
>>488,490
id はフラグメント識別子の役割もある。
CSS としてはカスケード処理の関係で複数付けることも良くある。

<div id="Sample" class="hoge foo piyo">

無理して #Sample にまとめるより分けた方が管理しやすいことも多い。
492Name_Not_Found:2011/02/01(火) 16:51:03 ID:???
>>491
ありがとうございます!参考になりました!
493Name_Not_Found:2011/02/01(火) 19:00:20 ID:???
いいえ!どういたしまして!
494Name_Not_Found:2011/02/01(火) 20:03:15 ID:???
>>491
IE6では確かclassは2つまでしか指定できないんでしたよね。
495Name_Not_Found:2011/02/01(火) 20:12:08 ID:???
で?
496Name_Not_Found:2011/02/01(火) 20:14:49 ID:???
ぶ?
497Name_Not_Found:2011/02/01(火) 20:28:54 ID:???
498Name_Not_Found:2011/02/01(火) 20:42:04 ID:???
>>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>
499Name_Not_Found:2011/02/02(水) 16:52:54 ID:???
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要素に使われていると一目で分かると言う以外に何か重要な役割を果たしているのでしょうか?
500Name_Not_Found:2011/02/02(水) 17:03:51 ID:???
>ID名は1箇所にしか指定できない事のことで
そう。だから明示的であるという以外の意味はない。本来はね。
>参考書にはよく 「 div#header{ 」と書かれています
そんなはずはないと思うがどちらにせよ書いた奴の考えまでは知らんな。もしかしたらdivから書かなきゃいけないと勘違いしてるかもしれんし。
501499:2011/02/02(水) 17:47:30 ID:???
#header{ と div#header{ はどちらの書き方も文法的(?)な間違いではなく考え方や好みの違いであり、
どちらかに個々が統一して書いていれば問題はないとの事かな
私の持っている本は div#header、 div#global-nav p#bannerなどの書き方に統一されていたので
#header{ との違いにふと疑問を持った次第です
モヤモヤが解消されそうです ありがとうございます
502Name_Not_Found:2011/02/02(水) 18:05:46 ID:???
要素名をつけない方がごく微妙に早いらしい
503Name_Not_Found:2011/02/02(水) 19:08:16 ID:???
やだあたしdiv付けてる怖い…
504Name_Not_Found:2011/02/02(水) 20:56:23 ID:???
>>503
テーブルで抱いてあげるよ
505Name_Not_Found:2011/02/03(木) 01:25:28 ID:???
>>500
ごめんなさい、あたしタチなの
footerがっちり芋系が好きなんだけどスペックは?
506Name_Not_Found:2011/02/03(木) 06:08:59 ID:???
P16px
507Name_Not_Found:2011/02/04(金) 23:15:30 ID:???
タチって何
508Name_Not_Found:2011/02/04(金) 23:41:01 ID:???
>>507
「質」のことだろう。
509Name_Not_Found:2011/02/05(土) 10:28:50 ID:???
テーブルで表がいくつもあるサイトを作ろうと思っています
サイズが違うので一つ一つcssで設定するつもりです
ただデザインは統一したいのでborderやbackgroundなどデザイン部分まとめてだけ設定することってできますか?
510Name_Not_Found:2011/02/05(土) 11:00:23 ID:y+Zyzrxr
一つ一つ違うものはidで指定して、
共通して使うデザイン部分はclassで指定する
511Name_Not_Found:2011/02/05(土) 11:18:39 ID:???
>>510
<table id=***** class=*****>とするってことでしょうか?
idとclassを一緒につけれるってことをはじめて知りました
ありがとうございます!
512Name_Not_Found:2011/02/05(土) 16:46:22 ID:???
他のスレでも聞いたのですが、相手にされないのでこちらに移動しました
お忙しいところすみません
当社のDQN社長から2月19日までに会社のHPを作れと言われました
ブログしかやったことがない自分には難題すぎます
「実践 Web Standards Design Web標準の基本とCSSレイアウト&Tips」という
本を買って頑張ってみたのですが無理でした・・・

↓レイアウトは決まっているのですがCSSがわかりません
http://nagamochi.info/src/up53810.gif

どなたかCSSを教えてください
宜しくお願い致します
513Name_Not_Found:2011/02/05(土) 18:51:23 ID:???
>>512
近所にホームページ教室がないかタウンページで調べて味噌
514Name_Not_Found:2011/02/05(土) 18:55:49 ID:???
で、いくら払うんだい?
515Name_Not_Found:2011/02/05(土) 19:33:35 ID:???
>>512
初心者には難易度が高すぎる。
基本のレイアウトも作れないレベルなら無理だと思う。
レイアウトができてもその先で必ずつまずく。
516Name_Not_Found:2011/02/05(土) 19:42:01 ID:???
>>512
ブログにしたら?

ならテンプレに似たようなのがあるかも
もしかすると作者に頼めば作ってくれるかも
517Name_Not_Found:2011/02/05(土) 20:28:42 ID:fDrWbt9R
>ブログしかやったことがない自分には難題すぎます

ブログが自由自在に操れるならcssなんて簡単だろ

FC2ブログはhtmlとcssの両方をカスタマイズできるから
それでやってみれば?
518タクト ◆g3WCyGKBb. :2011/02/05(土) 20:29:54 ID:???
生活保護でこんな立派な部屋を手に入れました!
http://suzu2011.blog96.fc2.com/
519Name_Not_Found:2011/02/05(土) 20:35:30 ID:???
>>517
自由自在に操れるとはどこにも書いてないぞ
ブログしかできない人って、htmlすら理解してない人が大半だ
普通のサイト作りに挫折してブログに流れた人も多い品
520Name_Not_Found:2011/02/05(土) 21:32:29 ID:???
521Name_Not_Found:2011/02/06(日) 11:47:46 ID:NA0YtQF3
>>512は偽者です

Webサイト制作初心者用質問スレ part223
http://hibari.2ch.net/test/read.cgi/hp/1296794731/4

上記スレの>>4です
もう少し自分で頑張ってみることになりました
大変お騒がせいたしました
522Name_Not_Found:2011/02/06(日) 13:55:21 ID:???
せっかく作ってくれた>>520はスルーなのね
523Name_Not_Found:2011/02/06(日) 14:48:22 ID:???
>>520が何なのかも分かってないのかも?
524Name_Not_Found:2011/02/06(日) 14:58:51 ID:???
そのようだなw
525Name_Not_Found:2011/02/08(火) 15:34:02 ID:???
IE8ですが、XPと7で、表示が異なります。
原因は何が考えられますか。

D0CTYPE宣言してません。
MakeShopを使ってるんですが、そこの仕様のため。
それぞれ互換表示、非互換表示で比べましたが、
やはりXPと7で異なります。
XPのIE8をベースにしてたので、
7のIE8だと画像がずれてるところがあるんです。

ふたつの表示を合わせるのは難しいでしょうか。
526Name_Not_Found:2011/02/08(火) 15:42:58 ID:???
いやDOCTYPE宣言しろよ
527Name_Not_Found:2011/02/08(火) 15:52:10 ID:???
>>526
本当に、宣言したいです。
MakeShopの仕様で宣言できないから
ブラウザごとの表示ずれを解消するのに
苦労してます。
今回は、同じブラウザでずれが出てるので、
どうしていいのか、行き詰まってます。
528Name_Not_Found:2011/02/08(火) 19:18:36 ID:???
問い合わせた方がいいんじゃない
文法滅茶苦茶でそもそも宣言のしようがないのかもしれないけど
529Name_Not_Found:2011/02/08(火) 19:39:04 ID:???
>>525
標準フォントじゃね?
530525:2011/02/08(火) 20:05:01 ID:???
>>528
<head>内を触れない仕様なんです。
だから、cssやjsを外部読み込みするためのコードは、
body内に記述しているんです。
それでも、動くので、
このへんは、柔軟性があるんですね。

>>529
MSとメイリオの違いは、忘れてました。
書体のツラは、メイリオのほうが横幅がありそうなので、
そのへんは気にして組んでたんですが、
いまずれてるのは、jpg画像が本来より下にずれてるという状況です。
でも、どこかでフォントが影響を及ぼしてないか、
一度チェックしてみます。
ありがとうございます。
531Name_Not_Found:2011/02/10(木) 12:24:21 ID:???
>>530
そのソフトがどうであれ
メモ帳で開けばいいだけだがな
532Name_Not_Found:2011/02/10(木) 14:07:44 ID:???
ソフトじゃなくて糞ホスティングらしいよ
533Name_Not_Found:2011/02/10(木) 14:24:54 ID:n8wGoT44
>>531
MakeShopでぐぐってみれば判るのに
534Name_Not_Found:2011/02/10(木) 15:06:46 ID:???
>>530
CSSはリセットしてあるの?
画像はa要素?
535Name_Not_Found:2011/02/10(木) 16:35:33 ID:ENeYxcbB
┌────────┬──┐
|┏━━━━━━┓|    |↑
|┃         .┃|    ||
|┃         .┃|    | C
|┃         .┃|    ||
|┃         .┃|    ||
|┗━━━━━━┛|    |↓
└────────┴──┘
. ←── A ───→← B →

A: ウィンドウの幅に合うように伸縮
B: ウィンドウの幅によらず固定
C: ウィンドウの高さに合うように伸縮
太線: ウィンドウの幅、高さによって伸縮するoverflow:scrollのボックス

↑みたいなボックスを実現したいのですが
 どうしたらいいか教えてください。
536Name_Not_Found:2011/02/10(木) 18:21:58 ID:???
せめて「こうしてみたんですがうまくいかない」と書いた奴を貼るぐらいはしてほしい
537Name_Not_Found:2011/02/10(木) 19:05:28 ID:n8wGoT44
>>535
まず全体のレクタングルを定義する
次にAレクタングルを定義してから中のスクロール部分を定義
最後にBレクタングルを定義すればOK
簡単だよ
538Name_Not_Found:2011/02/10(木) 19:59:43 ID:???
>>537は頭の悪い回答の例です。
みんなは真似しないようにね!
539Name_Not_Found:2011/02/10(木) 20:30:49 ID:???
>>538 が頭のいい回答をしてくれるようですので、皆沈黙して待つべし。
540Name_Not_Found:2011/02/10(木) 20:57:20 ID:???
>>539はヘタクソな煽りの例です。
みんなは真似しないようにね!
541Name_Not_Found:2011/02/10(木) 21:00:52 ID:???
ケチが付いた質問は >>538 に任せて、次の質問どうぞ
542Name_Not_Found:2011/02/10(木) 21:24:56 ID: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>
 
543Name_Not_Found:2011/02/10(木) 21:28:46 ID:???
では >>538 回答をどうぞ。
544Name_Not_Found:2011/02/10(木) 22:20:20 ID:???
overflow-xとかって先行実装だよ
545Name_Not_Found:2011/02/10(木) 23:25:35 ID:oed2uBP1
>>542
javascript使わないと無理じゃね?
546Name_Not_Found:2011/02/11(金) 00:14:45 ID:???
547Name_Not_Found:2011/02/11(金) 12:42:18 ID:???
少しはテーブルの使い方を勉強しろよ
548Name_Not_Found:2011/02/11(金) 12:56:29 ID:???
>>547
誰に言ってるんだ?
549Name_Not_Found:2011/02/11(金) 15:03:16 ID:???
レスアンカーぐらいつけろよ
550Name_Not_Found:2011/02/11(金) 15:18:33 ID: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に受け継がれないんですがどうしたらよいでしょうか?
551Name_Not_Found:2011/02/11(金) 15:34:32 ID:???
そもそもcontainerに高さを指定していないようだが
背景色もinherit使わんと継承されんよ
552Name_Not_Found:2011/02/11(金) 15:36:33 ID:???
inherit
553Name_Not_Found:2011/02/11(金) 15:38:38 ID:???
すみません。
カラーはできました。

ただmainとsideの高さを揃えるにはどうしたら良いのでしょうか?
554Name_Not_Found:2011/02/11(金) 16:00:59 ID:???
>>553
display: box; か display: table-cell;
IE7以下に対応させたいなら、JavaScript で。
http://css-tricks.com/equal-height-blocks-in-rows/
555Name_Not_Found:2011/02/11(金) 16:08:35 ID:???
556Name_Not_Found:2011/02/11(金) 22:28:26 ID:1csCD0bU
>>550
#container {overflow:hidden;}
#main,#side{margin-bottom:-32768px;padding-bottom:32768px;}
追加すれば高さそろう
557Name_Not_Found:2011/02/11(金) 22:45:12 ID:???
>>554->>556
ありがとうございます
出来ました!
558Name_Not_Found:2011/02/13(日) 00:34:18 ID:???
text-indent:-9999pxが効かず画像置換ができません。
よろしくお願いします

ttp://codepad.org/22VEJ5sO
559Name_Not_Found:2011/02/13(日) 09:28:48 ID:SaFohdPO
削除 #lie li {display:block;}
追加 #lie a {display:block;}
かな??違ったらfloatかも
てか、text-indent:-9999pxとか初めて知った
560Name_Not_Found:2011/02/13(日) 12:16:52 ID:???
タグごとにちゃんとブロックレベルなのかインラインなのか見ておいた方がよくないか?
561Name_Not_Found:2011/02/13(日) 14:40:29 ID:???
> margin-bottom:-32768px;padding-bottom:32768px;
> text-indent:-9999px
何かまともでないHack臭がしますが、将来的にも大丈夫なの?
562Name_Not_Found:2011/02/13(日) 16:07:48 ID:???
小手先こねくり集を見てスゲーって思ってやってみたってとこかな ?
563Name_Not_Found:2011/02/13(日) 17:34:38 ID:???
>>text-indent:-9999px

h1とかSpriteメニューのliを、画像だけにしたい時によく使われる
例えばYahooとかAppleとか
だんだんと減ってきている気がしなくもないけど
564Name_Not_Found:2011/02/13(日) 17:49:02 ID:IjIxUKDf
IE 6とIE 7を無視できるようになったら、画像置換は、before/after疑似要素に生成内容としてdataスキームURIの画像を入れる手法が一般的になると思う。
565Name_Not_Found:2011/02/13(日) 18:59:12 ID:???
>>561
後者はCSSの仕様的に将来的にも恐らく大丈夫
前者はUA依存らしいからそのうちポシャる
566Name_Not_Found:2011/02/13(日) 19:07:09 ID:IjIxUKDf
>>565
> 後者はCSSの仕様的に将来的にも恐らく大丈夫
> 前者はUA依存らしいからそのうちポシャる

根拠を示せますか?
567Name_Not_Found:2011/02/13(日) 19:15:23 ID:???
>>561
> margin-bottom:-32768px;padding-bottom:32768px;
そもそも>553の要件を満たせていない。
ボックスに border を適用したら border-bottom が見えなくなる。

> text-indent:-9999px
どんな形であれマークアップされたテキストを読めなくするのはSEO対策的によろしくないので、今はあまり使われない。
568553:2011/02/13(日) 19:38:19 ID:???
marginの件は間違えて書いてましたw


text-indentを使わない方がいいとなると、みなさま画像置換はどうされていますか?
569Name_Not_Found:2011/02/13(日) 20:16:40 ID:IjIxUKDf
>>567
> > margin-bottom:-32768px;padding-bottom:32768px;
> そもそも>553の要件を満たせていない。
> ボックスに border を適用したら border-bottom が見えなくなる。

確かにその通りです。
「margin-bottom:-32768px;padding-bottom:32768px;」は、正確には背景が描かれる範囲を拡げるテクニックであり、高さを合わせるテクニックではありません。
ということは、背景が描かれる範囲を拡げる目的であれば、使っても差し支え無いと思います。

>>568
現時点では素直にimg要素。
将来は>>564の方法を使うと思います。
570Name_Not_Found:2011/02/13(日) 20:25:23 ID:???
>>567
いやいや適切なマークアップのために使うもんだろう
571567:2011/02/13(日) 21:17:19 ID:???
俺は >565 ではないが、レスをもらったので…。

>>569
> 但し、ブラウザが理解できる値は-32767〜32767ですので、その範囲外の数字は指定しないでください。
> http://scuderia-web.com/tips/xhtml_css/equal_box_heights.php
32767 の値に根拠が欲しい。
少なくとも CSS3 では規定されていない。http://www.w3.org/TR/css3-values/#numbers
実装依存なら 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 の値に根拠がない。確実に見えなくなることが保証されない。)

基本的に実装を信用すべきではないと思う。
572556:2011/02/13(日) 23:16:11 ID:SaFohdPO
>>567
>561
> margin-bottom:-32768px;padding-bottom:32768px;
> そもそも>553の要件を満たせていない。
> ボックスに border を適用したら border-bottom が見えなくなる。
divを被せてborder-bottomとゆー手があってな・・

>>571
>32767 の値に根拠が欲しい。
とりあえず、自分は20000ぐらいまでにしときます。

てか、553の現状がわからないw
573Name_Not_Found:2011/02/13(日) 23:39:16 ID:???
574556:2011/02/13(日) 23:46:05 ID:SaFohdPO
とりあえず現状はIE6でも最新の5ブラウザでも32768で問題ないです。
将来はわかりませんけど。
575567:2011/02/14(月) 00:13:00 ID:???
>>573
ありがとう。IE (バージョン未記入) の実装依存なのか…。

>>572,574
値の問題ではなく、「実装は仕様と比べて不安定だから仕様に準拠すべき」ということを伝えたかった。
全ての実装を確認したとして、ブラウザが更新されて実装が変わる度にコードに修正を加える、なんて面倒くさすぎるんじゃないだろうか。

また、固定値を与える方法は一定の条件を満たさないと期待通りに動作しない。

・32767px 以上の高さのボックスが形成されたときに margin-bottom:-32767px; は破綻する。
・9999px 以上の幅のボックスが形成されたときに text-indent: -9999px; は破綻する。

>554 のように既に CSS に用意されたプロパティがあるのだからそちらを優先して使うべきだと思う。
その上で IE7- だけ処理を分ければいい。JavaScript で対応するか、先述のCSSハックを使うか。(前者の方が安定している)
CSSに限らないが、最も低機能な実装に合わせて不安定なコードを全てのUAに適用するのは無駄に不安定要素を大きくするだけなので、お勧めしない。
576556:2011/02/14(月) 00:34:27 ID:tvSEGdP8
>>575
勉強になりました。ありがとうございますm(_ _)m
577Name_Not_Found:2011/02/14(月) 01:45:36 ID:???
> そちらを優先して使うべきだと思う。その上で IE7- だけ処理を分ければいい。
そこまでするぐらいなら、素直にtableタグを使えば済むのに と思うんだが
578Name_Not_Found:2011/02/14(月) 02:26:39 ID:???
この流れでなぜtableレイアウトを勧めるんだろう。
579Name_Not_Found:2011/02/14(月) 03:38:07 ID:???
どのあたりが素直なのかわからんが
boxは先行実装だしtable-cellはtable-rowの中に入れないとあかんし
580567:2011/02/14(月) 09:28:03 ID:???
>>579
box はまだ安定していないので現実的には table-cell を使うことになるかと。(Recommendation になれば box がより向いている気はするが)

CSS 2.1 table model では table-cell の親要素が table-row ではない場合に対応する要素を補完しなければならないので table-row に関しては問題ないと思う。
http://www.y-adagio.com/public/standards/tr_css2/tables.html#anonymous-boxes
http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
581Name_Not_Found:2011/02/14(月) 15:33:04 ID:???
>>580
tableもrowもcellも省略できるのか。便利だなこれ
582Name_Not_Found:2011/02/14(月) 22:18:55 ID:???
>>569
imgは全然素直じゃない
あれは画像がメインの場合であって、メニューの文字を画像に置き換える類のものではない
583Name_Not_Found:2011/02/15(火) 00:00:43 ID:???
>>582
テキストを画像に置換する実装が素直じゃない、ということかと。
text-indent: -9999px; が素直な実装とは思えない。
584Name_Not_Found:2011/02/15(火) 00:27:48 ID:???
並べてみればわかる。
http://codepad.org/Z9aUFU4D
585Name_Not_Found:2011/02/15(火) 00:51:54 ID:???
素直=楽 って意味で言ったんじゃないん
586Name_Not_Found:2011/02/15(火) 02:22:38 ID:???
みんなimgにしないのは、altが要素の代替ではないと考えるからかね
CSSで飛ばした方がHTMLに無理がないと

あとはz-indexか
587569:2011/02/15(火) 03:05:33 ID:DNB9Oy2K
>>583
「現時点では(昔からの習慣に)素直に(従って)img要素(を使います)。」と補完してください。

img要素が理想的な画像置換じゃないことは私も承知しています。
本来内容となるべきテキストを属性値に追い遣るのは変だと思います。

しかしながら、それ以外には、もっと気持ち悪い方法か、理想的だけど実装が追いついていない方法のどちらかしかないのです。

テキストを飛ばす方法は、>>571の指摘する「2つの問題」がありますし、
さらに画像が読み込まれなかったときにテキストが表れないという欠点もあるので、好きではありません。
588569:2011/02/15(火) 03:16:35 ID:DNB9Oy2K
CSS3では、疑似要素ではない、普通の要素の内容も生成内容で置換できるようになります。
http://www.w3.org/TR/css3-content/#inserting3

foo {
content: url(...), contents;
}

これが理想的な画像置換でしょうが、広く実装されるまで別の方法で我慢するしかありません。

CSS2で、生成内容はbefore/after疑似要素特有のプロパティでした。
じゃあ、before/after疑似要素に画像を生成して代替手段としよう……と言いたいところですが、
before/after疑似要素をサポートしないブラウザがまだ広く使われています――IE 6とIE 7です。

IE 6とIE 7を無視してよくなったら、before/after疑似要素による画像置換を採用し、
CSS3の時代になったら、普通の要素の内容を生成内容で置換する方法に切り替えると思います。
589Name_Not_Found:2011/02/15(火) 10:08:03 ID:YPlNEjKd
糞IE6対策で標準モードの記述をし、
ローカルで問題無くセンタリングで表示したので鯖に転送したら左寄せ…。

なんだよ、ソースの先頭に自動広告が付いて、強制的に後方互換モードじゃん!

久々に初心者やらかしたw
あーあ、また「text-align:center;」のお世話になるのね。
590Name_Not_Found:2011/02/15(火) 12:27:59 ID:???
糞広告が入った時点でそれはもはやHTMLじゃない……
591Name_Not_Found:2011/02/15(火) 13:09:02 ID:???
ヘンテコな無料鯖の広告はHTMLを阻害する
592Name_Not_Found:2011/02/17(木) 03:01:13 ID:8zKACwJ8
letter-spacingで横幅を取りたいのですが
1px以下の単位はないのでしょうか?

0だと窮屈ですが、1pxだと開きすぎな気がしてます
593Name_Not_Found:2011/02/17(木) 04:37:04 ID:???
小数点知らないの?
でもIEだと0.5単位でしか効かなかったかな?
594Name_Not_Found:2011/02/17(木) 13:24:50 ID:???
スクリーンで0.5pxとかできるのかよ
595Name_Not_Found:2011/02/17(木) 17:48:58 ID:???
A:hoverにtext-decoration : underline;を記述しているのですがマウスを当てたときに下線が出てきません
要因として何が考えられるでしょうか?
596Name_Not_Found:2011/02/17(木) 18:01:51 ID:???
マルチ止めれ

180 Name_Not_Found [sage] 2011/02/17(木) 17:50:35 ID:??? Be:
cssでA:hoverにtext-decoration : underline;を記述しているのですがマウスを当てたときに下線が出てきません
要因として何が考えられるでしょうか?
597Name_Not_Found:2011/02/17(木) 18:27:48 ID:???
>>596
一々うるせえぞカス
お前にはまだ2ちゃんは早い回線切ってロムってろ
598Name_Not_Found:2011/02/17(木) 18:32:44 ID:???
だまっとけよおっさん年がバレるぞ^^;
599Name_Not_Found:2011/02/17(木) 18:38:45 ID:???
>>597
ワロタ
600Name_Not_Found:2011/02/17(木) 18:42:54 ID:???
>>597
回線切ってROMwwwwwwwwwテラ矛盾wwwwwwwwwwwwww
601Name_Not_Found:2011/02/17(木) 21:21:37 ID:???
よ〜しパパ 回戦切ってROMちゃうぞ〜〜
602Name_Not_Found:2011/02/17(木) 21:29:16 ID:???
回線切るとかテレホーダイかよ
603Name_Not_Found:2011/02/18(金) 02:56:18 ID:???
ページを表示するときに背景色が遅れて表示されるんですが、CSSに問題があるんでしょうか?
HTMLが問題なのか、ブラウザが問題なのか、サーバーの性能が問題なのか分からないので原因を探ってます。
604Name_Not_Found:2011/02/18(金) 13:49:42 ID:???
テレホタイムに保存して、後で読んだりしてたな
605Name_Not_Found:2011/02/18(金) 14:20:19 ID:YSS34YOL
<body>
<uho!iiotoko>
<ah!!>

</body>
606Name_Not_Found:2011/02/18(金) 21:52:34 ID:???
>>603
ソース
607Name_Not_Found:2011/02/18(金) 22:21:12 ID:???
>>603
cssファイルを一番最後においてないか?
head内においてみ。
608Name_Not_Found:2011/02/19(土) 06:24:43 ID:???
 な ん な ん だ  こ の 低 ラ ベ ル は !
609Name_Not_Found:2011/02/19(土) 10:26:04 ID:???
>>608
お前の寝てる間に、口の中にカメムシ100匹入りますように。
610Name_Not_Found:2011/02/19(土) 11:43:37 ID:???
まだカメムシは食ったことが無い
611Name_Not_Found:2011/02/19(土) 14:29:20 ID:???
パクチーで代用すれば良し
612Name_Not_Found:2011/02/20(日) 12:29:54.12 ID:idSymTrd
既出ならごめんなさい。

下記にbox-shadowを適用させる良い方法教えて下さい。
・IE7以後
・divの枠
・divの枠内背景は透過png(5×5を並べてる)

現状では、カラムが崩れたり、背景全部が黒くなったり、
まったく違う場所に影ができたりと、上手くいきません。
たぶん、私の技術不足が重なっておかしくなってるのだと思います。
そこで、皆様お勧めの方法に絞って、検討したいと思います。
613Name_Not_Found:2011/02/20(日) 13:17:58.95 ID:6sOwfSHS
>>612
filter shadow
614Name_Not_Found:2011/02/20(日) 13:39:24.90 ID:???
>>612
IE7 は box-shadow に対応していなかったはずだが…。
https://developer.mozilla.org/en/css/-moz-box-shadow
615Name_Not_Found:2011/02/20(日) 15:54:01.25 ID:idSymTrd
>>613,614
ありがとうございます。

枠内の背景自体も黒くなってしまいます。
単一色の背景だと大丈夫です。
そこで、よろしければ追加質問させて下さい。
原因はどちらでしょう?
・そもそも透過pngと併用できない。
・私のやり方が間違ってる。
616Name_Not_Found:2011/02/20(日) 22:15:49.70 ID: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>
617Name_Not_Found:2011/02/21(月) 01:29:32.88 ID:c+YD+p//
http://www.nicovideo.jp/watch/sm13661472
初心者はこういうのみて勉強するべき
618Name_Not_Found:2011/02/21(月) 02:08:18.49 ID:???
IEのバージョン毎にバグを把握してコーディングするのが面倒だったら、こういうの使ったらどうかね?
使ってないので使用感は知らないまま勧めてるんだけど

ttp://code.google.com/p/ie7-js/

サンプルは外部リンクになってるけど、ダウンロードしてディレクトリにも置ける
これは何なのかって言うと…続きはGoogleで

ttp://www.google.co.jp/search?hl=ja&lr=lang_ja&safe=off&tbs=lr%3Alang_1ja&q=ie7.js+ie9&btnG=%E6%A4%9C%E7%B4%A2
619Name_Not_Found:2011/02/21(月) 02:12:43.53 ID:???
肝心な事かを書き忘れたけど、バグだけじゃなくて未対応タグとかにも効く
620Name_Not_Found:2011/02/21(月) 03:24:58.34 ID:???
DWMXをずっと使ってたんだけど
プレビュー機能の無能さにいい加減イライラするので
何かいい感じのCSSエディタないかなと思ってるけど無いですか
DWはCS3が欲しいんだけど今探してもないし
更にDWは学生の時に買ったのでその時は安かったけど
流石に卒業した今ではDW高くて手が出せない
MACだとCODAとかがいいって聞くけど
Windowsで探してます
621Name_Not_Found:2011/02/21(月) 07:48:53.18 ID:???
>>620
DWはどこが使いやすかった?
622Name_Not_Found:2011/02/21(月) 09:38:58.38 ID:j8NH73Li
>>616
ありがとうございます。
やっぱり透過無くさなくてはいけない感じですね。
>>618
ありがとうございます。
ちょっと私の技量では上手くいかなかったのですが、
このようなのを使う方向で検討進めたいと思います。
623Name_Not_Found:2011/02/21(月) 11:35:10.69 ID:???
>>622
基本、フォトショップでデザイン組んで
素材作って、それをCSSでコーディングってスタンダードな方法なんだけど

以前はCSSじゃなくてテーブルだったから、DWMXだと
フォトショでスライス切ってDWでソース修正で鬼速だった

けど、MXのプレビュー機能がCSSに追いつかなくなってからはもうグダグダ
プレビュー機能が少しも役に立たないから便利な所が一つも無くなった

様はテーブル時代の時のようにCSSも問題なく
さくさく同時プレビューしてくれよという所です
624Name_Not_Found:2011/02/21(月) 11:37:01.76 ID:???
すみません>>623>>621
625</a>:2011/02/21(月) 12:44:06.08 ID:???
test
626Name_Not_Found:2011/02/21(月) 13:40:24.27 ID:???
MX古すぎだろw
テーブルレイアウトなんて
ださすぎ
627Name_Not_Found:2011/02/21(月) 13:50:38.82 ID:???
HTMLコーディングするだけならMXで十分
日本語UTF-8も正常に動くし
628Name_Not_Found:2011/02/21(月) 14:10:30.54 ID:???
>>620
CS3のプレビューは無能だよ
DWのプレビューがまとに使えるのは、WebKitに乗せ換えたCS4以降
629Name_Not_Found:2011/02/21(月) 14:44:30.20 ID:???
>>626
いまテーブルは使ってないよ
CSSつってんですが

>>628
そうなんだ!
なんかCS3なら大丈夫って言われてた気がしたけど4からだったのか
有難う御座います助かります
にしても、高いよ・・・高いよDW・・・
630Name_Not_Found:2011/02/22(火) 22:03:57.15 ID:???
ie6のコメントバグも結構困り者だったな

<!-- 死ねie6!! -->

    ↓

<!--[if !IE]> 死ねie6!! <![endif]-->

cssの記述に間違いがあると思って何時間費やしたか。。。
631Name_Not_Found:2011/02/24(木) 22:15:41.79 ID:???
>>630
それはバグなのか…。条件付きコメントなのでは?
632Name_Not_Found:2011/02/24(木) 22:33:06.65 ID:???
条件付コメントにするのは、コメントバグの回避法らしいよ
633Name_Not_Found:2011/02/24(木) 23:44:13.01 ID:???
コメントバグwww
何年か前に発生したなぁ。
634Name_Not_Found:2011/02/25(金) 00:24:29.77 ID:???
http://www.nicovideo.jp/watch/sm13674914
こういう動画で勉強してからCSSこい
635Name_Not_Found:2011/02/25(金) 02:06:17.99 ID:???
だからどんなバグなんだ…ってぐぐってみたが、これか

IE6 Duplicate Characters Bug - CSS fixes and workarounds
http://positioniseverything.net/explorer/dup-characters.html
636Name_Not_Found:2011/02/28(月) 14:01:02.24 ID:???
初心者ですがお願いします。
このサイトのフォントを変更したいと思います。
http://kenji1234.blog75.fc2.com/



/* フォントを変更する */
body{
font-family :'IPAMonaPGothic','MS Pゴシック',sans-serif !important;
}

上記の内容を、サイトのcssの何行目に挿入すれば良いですか?
637Name_Not_Found:2011/02/28(月) 14:02:34.40 ID:???
文字コード指定以降ならどこでもいい
638Name_Not_Found:2011/02/28(月) 14:06:59.59 ID:???
>>637
すばやい回答をありがとうございます。
本当にすみませんが、文字コード指定とはどこですか?
ぐぐったのですがよく分かりませんでした。
お願いします。
639Name_Not_Found:2011/02/28(月) 14:11:18.80 ID:???
ぐぐって分からんとは重症だな

んじゃ猫でも分かるように教えてあげよう
「1行目じゃなければどこでもいい」
640Name_Not_Found:2011/02/28(月) 14:16:36.71 ID:???
>>639
分かりやすい説明をありがとうございます。
1行目以外に挿入してみたのですが、なぜかフォントが変更されません。。
何がおかしいのでしょうか?
641Name_Not_Found:2011/02/28(月) 14:26:15.89 ID:???
>>640
6行目を削除しないとダメだよ
642Name_Not_Found:2011/02/28(月) 14:43:14.75 ID:???
>>641
できました!感動です!ありがとうございました!
643Name_Not_Found:2011/02/28(月) 14:55:59.80 ID:???
>>636です、また失礼します。
http://kenji1234.blog75.fc2.com/
このサイトのフォントは変更できました。
次は2ちゃんねる全体のフォントを変更したいのですが、
そんなことって可能ですか?
(フォントをモナーフォントにして、AAを綺麗に見たいのです。)
重ね重ね心苦しいですがお願いします。
644Name_Not_Found:2011/02/28(月) 15:17:26.15 ID:???
ユーザースタイルシートでぐぐれ
645Name_Not_Found:2011/02/28(月) 15:19:44.18 ID:???
>>644
はい、やってみます!
646Name_Not_Found:2011/02/28(月) 15:30:27.86 ID:???
ユーザースタイルシートを変更しました。(macでsafari使用です)
どうやら全てのサイトに適用されるみたいで…。
2ちゃんねるだけをモナーフォントにしたいです。
分かる方いらっしゃったらどうぞお願いします。
647Name_Not_Found:2011/02/28(月) 15:54:54.45 ID:???
ユーザースタイルシート Safari でぐぐれ
上位300件くらい読んでも分からなかったらまた来なさい
648Name_Not_Found:2011/02/28(月) 16:01:58.88 ID:???
>>647
ありがとうございます!やってみます!
649Name_Not_Found:2011/02/28(月) 16:11:55.38 ID:???
・サイト毎にスタイル−シートを利用するには。
http://app.m-cocolog.jp/t/typecast/6082/6981/21054399

・SafariStand/ サイトごとにフォントを変更する
http://wakabamac.blog95.fc2.com/blog-entry-190.html

これらを参考にしたらできました!
本当にありがとうございました。感謝です。m(__)m
650Name_Not_Found:2011/02/28(月) 16:27:25.53 ID:???
うむ、解決法をしっかり報告
模範的な質問者でござる(^^)v
651Name_Not_Found:2011/02/28(月) 18:03:07.94 ID:Z3DA+QVS
稀にみるw
652Name_Not_Found:2011/02/28(月) 20:18:56.06 ID:???
外部CSSでテーブルを制御したいのですが二つ質問です

3列のテーブルで全体の幅を500pxとする時
100px、200px、200pxで固定したい場合は
どうすればいいでしょうか?

あと一行ごとに背景色を#FFFFFFと#CCCCCCで
交互に変えたいのですがこれもCSSで一括で指定できますでしょうか?

よろしくお願いします
653Name_Not_Found:2011/02/28(月) 21:08:47.02 ID:???
1.それぞれのカラムにクラスを付与して横幅を指定する
2.「css nth-child(even)」でググれ
654Name_Not_Found:2011/03/01(火) 13:07:40.80 ID:???
div{display:inline-block;vertical-align:top;}のときに、

☆<div>a<br>b</div>とすると、
┏━━━━┓
┃☆a  ┃
┃ b  ┃
┃ c  ┃
┃    ┃
┃    ┃
となってくれますが、
☆<div>aaaaa<br>bbbbb</div>とすると、
┏━━━━┓
┃☆   ┃
┃aaaa┃
┃a   ┃
┃bbbb┃
┃b   ┃
となってしまいます
これを、
┏━━━━┓
┃☆aaa┃
┃ aa ┃
┃ bbb┃
┃ bb ┃
┃    ┃
とするにはどうしたらいいのでしょうか?
CSS2.1以下で優しく教えてください
655Name_Not_Found:2011/03/01(火) 14:28:13.65 ID:???
>>654
body {font-size:80%;}
656Name_Not_Found:2011/03/01(火) 15:04:57.65 ID:???
なにが
優しく
657Name_Not_Found:2011/03/01(火) 15:09:15.52 ID:???
>>654
それはどうみても inline-block の挙動じゃない…。
658Name_Not_Found:2011/03/01(火) 15:21:06.09 ID:???
659658:2011/03/01(火) 15:22:30.20 ID:???
失礼。CSS2.1 では無理だな。
660Name_Not_Found:2011/03/01(火) 15:44:07.79 ID:???
>>654
HTML5 なら <wbr> が使える。Opera の実装が追いついてなかった気がするが。
661Name_Not_Found:2011/03/01(火) 19:51:14.11 ID:???
質問失礼致します。

table内でpaddingを指定してもie6では表示されないのですが、以下のような場合、「あ」の前にpaddingをとろうとするならどういった記述にすればいいでしょうか?
文字列をclassで指定してmarginをとるべきでしょうか?

<table>
<tr>
<td>あいうえお</td>
</tr>
</table>
662Name_Not_Found:2011/03/01(火) 19:59:16.13 ID:???
>>661
margin, padding はインラインボックスには適用できない。
inline-block にすればいいが、IE6 は inline-block に対応しないので擬似的に再現する。
http://www.yomotsu.net/wp/?p=390
663Name_Not_Found:2011/03/02(水) 04:12:36.81 ID:???
すみません。
youtubeをブログに埋め込んだ時、画面を上にスクロールしたら、
埋め込んだyoutubeだけが最前面に表示されるのが嫌で、背面に直したいのですが。。。
対応できるCSSとかありますでしょうか><
Firefoxでは問題なく背面でスクロールするのですが、IE8では最前面になります><
初心者ですみません。。。
664Name_Not_Found:2011/03/02(水) 04:18:58.86 ID:???
ブログに、PrettyPhotoをプラグイン追加したら、画像広告が出現したのですが、消す方法(CSS)はありますか?
665Name_Not_Found:2011/03/02(水) 08:04:10.97 ID:???
>>664
PrettyPhotoの規約読みなおせ。
おまえのブログ、アクセスないだろw
666Name_Not_Found:2011/03/02(水) 13:28:26.51 ID:???
>>665
アクセス少ない人だけに表示されるとかですか?w

規約の場所分かりません。。。
667Name_Not_Found:2011/03/02(水) 14:02:24.97 ID:???
ハッハワロス
668Name_Not_Found:2011/03/02(水) 14:26:00.82 ID:???
>>666
広告は消しちゃだめなんだよ。
おまえ成績もわるいだろ。
669Name_Not_Found:2011/03/02(水) 19:24:19.47 ID:???
>>662
ありがとうございます。
Googleの<if 〜>でブラウザ別に対策できると聞いて、埋め込んだのですが改善されませんでした。
効果はあるのでしょうか?
670Name_Not_Found:2011/03/02(水) 19:29:19.37 ID:???
>>668
あのぉダメなのは分かってますw
その上での質問となっております^^
671Name_Not_Found:2011/03/02(水) 19:36:02.58 ID:???
そんな簡単なこと一々聞くなよ^^











お前が死ねばそんな悩みなんてなくなるよ^^
672Name_Not_Found:2011/03/02(水) 19:57:29.26 ID:???
ハッハワロス
673Name_Not_Found:2011/03/02(水) 21:01:12.78 ID:???
 ̄ ̄ ̄ ̄ ̄ ̄ ̄○ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
           O 。
                 , ─ヽ
________    /,/\ヾ\   / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
|__|__|__|_   __((´∀`\ )< というお話だったのサ
|_|__|__|__ /ノへゝ/'''  )ヽ  \_________
||__|        | | \´-`) / 丿/
|_|_| 从.从从  | \__ ̄ ̄⊂|丿/
|__|| 从人人从. | /\__/::::::|||
|_|_|///ヽヾ\  /   ::::::::::::ゝ/||
────────(~〜ヽ::::::::::::|/        =完 =
674Name_Not_Found:2011/03/02(水) 23:44:37.53 ID:???
>>670
ママに許可とってから
パソコンさわろうな。
675Name_Not_Found:2011/03/02(水) 23:52:41.89 ID:???
>>670
なっておりますってwww
偉そうだな
676Name_Not_Found:2011/03/03(木) 00:33:43.19 ID:???
>>670
「ダメなのはわかっているけど、これから君のサイトを荒らしたいからURLを教えて」っていったら、教えてくれるのかな?
677Name_Not_Found:2011/03/03(木) 01:02:43.11 ID:???
>>670
ダメなのはわかってるけど、今すぐ会いたいから電話番号教えてくれるよね
そしたら方法おしえるよ^^
678Name_Not_Found:2011/03/03(木) 01:32:32.08 ID:???
CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。

※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。
679Name_Not_Found:2011/03/03(木) 01:41:23.67 ID:???
但し、当然ながら違反行為の回答はNG
680Name_Not_Found:2011/03/03(木) 01:55:50.18 ID:???
知らない人のレスはいりません
681Name_Not_Found:2011/03/03(木) 11:36:36.98 ID:???
アナタはワタシを知りません
682Name_Not_Found:2011/03/03(木) 11:37:36.25 ID:???
えっ ? ひろちゃんだろ ?
683Name_Not_Found:2011/03/03(木) 13:44:35.16 ID:???
>>680
知ってるがお前の態度が気に入らない
684sage:2011/03/03(木) 15:53:46.72 ID:U5RlTzwm
質問させてください
普通のHTMLページにlightbox2を設置したのですが
レンタルサーバーにUPして確認してみるとうまく表示されませんでした。
cssもjsファイルも絶対パスに書き換えたのですが、なぜでしょうか?
685Name_Not_Found:2011/03/03(木) 18:04:05.48 ID:???
>>684
> 普通のHTMLページにlightbox2を設置したのですが
普通とはなんぞ

> レンタルサーバーにUPして確認してみるとうまく表示されませんでした。
どう表示されたの?

> cssもjsファイルも絶対パスに書き換えたのですが、なぜでしょうか?
そのパスは合ってるの?

そしてはげしくスレ違い
686Name_Not_Found:2011/03/03(木) 18:56:26.24 ID:???
>>654
そういうのは、ul>liでやるべきじゃないか?
687sage:2011/03/03(木) 19:15:57.45 ID:U5RlTzwm
>>685
ごめんなさい。自己既決しました。
勉強しながらHP今作ってるんですが、ページ内で使うフォントは
1. "MS ゴシック", "MS Gothic", "Osaka−等幅", Osaka-mono, monospaceと
2. MS P明朝, MS PMincho,ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, serifと
3. MS ゴシック, MS Gothic, Osaka−等幅, Osaka-mono, monospaceの中なら
どれを設定するのが一般的ですか


688Name_Not_Found:2011/03/03(木) 19:16:28.97 ID:???
何も指定しないのが一般的
689Name_Not_Found:2011/03/03(木) 19:28:38.43 ID:???
2,3は書き方が間違ってるから消去法で1番
690Name_Not_Found:2011/03/03(木) 20:23:04.58 ID:???
>>687
一般的なのがいいの?それより自分がよく見るとことおなじにすればいいんじゃね?
691Name_Not_Found:2011/03/03(木) 20:40:05.94 ID:???
3つともダメだな
692Name_Not_Found:2011/03/03(木) 20:50:53.79 ID:???
>>687
とりあえず、等幅かプロポーショナルかぐらいは自分で決めような。
後は、色んなOSや国(?)に合わせて無難なフォント選んでいけ。

ちなみに、yahoo見たらこんなんなってたぞ。
font-family:"MS PGothic","Osaka",Arial,sans-serif;
693Name_Not_Found:2011/03/03(木) 21:33:18.50 ID:???
フォントのptとem、%の使い分けってどうやってますか?
694Name_Not_Found:2011/03/03(木) 21:37:56.35 ID:???
適当
695Name_Not_Found:2011/03/03(木) 21:40:21.81 ID:???
好きなので
696Name_Not_Found:2011/03/03(木) 22:09:54.57 ID:???
>>694-695
そ、それぐらいの認識でよいのですね
ありがとうございます
697Name_Not_Found:2011/03/07(月) 17:15:43.68 ID:???
ttp://www.dospara.co.jp/5top/

の左上のバナーのように、一定時間で別のバナーに変更するバナーを設置したいと思います。
解説されてるサイトやヒントがあればよろしくお願いいたします。
698697:2011/03/07(月) 17:16:25.74 ID:XlTmgfE+
ageわすれ
699697:2011/03/07(月) 18:53:46.83 ID:???
ローテーションバナーで検索したらでてきました。
ありがとうございます。
700Name_Not_Found:2011/03/08(火) 06:50:29.82 ID: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>
701Name_Not_Found:2011/03/08(火) 08:41:02.07 ID:Lpx9d7kR
重ねたいってのはdivブロックの左上端を同じにしたいってことです。
702Name_Not_Found:2011/03/08(火) 12:45:55.40 ID:???
>>701
z-index
703Name_Not_Found:2011/03/08(火) 13:32:52.37 ID:???
#CCCをマイナス補正すれば?
704Name_Not_Found:2011/03/08(火) 14:00:39.10 ID:???
>>696
意識しないで製作する人間はド素人だけだよ。
ヒントは文字ベースのレイアウト
705Name_Not_Found:2011/03/08(火) 14:10:10.67 ID:???
>>693
コンテンツによる。

・画像中心なら px
・文字中心なら em

% は親要素に依存する。親要素の font-size が em や px なら上と同じ原理。
ルート要素から % ならデフォルトスタイルシートに依存する。どんな font-size でもレイアウトできるように組まないとダメ。
706700:2011/03/09(水) 15:18:20.57 ID: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>
707Name_Not_Found:2011/03/09(水) 16:20:42.43 ID:???
>>706
可能です。
708700:2011/03/09(水) 16:54:14.33 ID:zUuYVIvM
どうすればよいですか?
709Name_Not_Found:2011/03/09(水) 18:58:52.75 ID:???
>>706
テストしてないけどこんな感じ。

#bbb { position: relative; height: 300px; }
#xxx, #yyy, #zzz { position: absolute; }
#yyy { right: 0; }
710Name_Not_Found:2011/03/09(水) 20:30:23.66 ID:???
>>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;}
711Name_Not_Found:2011/03/09(水) 20:46:52.53 ID:???
>>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;}
712Name_Not_Found:2011/03/09(水) 20:48:55.58 ID:???
>>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;}
713Name_Not_Found:2011/03/12(土) 16:54:03.78 ID:???
jpg画像を画面中央に配置したページを作りたいのですが
>>4のQ6がリンク切れで見つかりません。どなたか参考になる代替案を教えていただけないでしょうか?
714Name_Not_Found:2011/03/12(土) 17:23:40.77 ID:???
>>713
Q6とは違うと思うけど、単に画像を画面中央に配置できさえすればいいなら、
その画像を背景画像にして

body
{background-image:url("hogehohge");
background-repeat:no-repeat;
background-position:center center;}

とかでいいのでは?
715Name_Not_Found:2011/03/12(土) 17:39:57.85 ID:???
>>714
レスありがとうございます
コピペしてやってみたのですが中央に移動しただけで持ってくることはできたのですが
画面の「中心」に置くことはできませんでした
どのブラウザからも画像が中心に見えるように配置したいのですが……
716Name_Not_Found:2011/03/12(土) 18:17:40.13 ID:???
717Name_Not_Found:2011/03/13(日) 07:09:59.67 ID:???
>>716
お前が答えてやれよ
718Name_Not_Found:2011/03/13(日) 11:55:07.34 ID:???
>>717
719Name_Not_Found:2011/03/13(日) 12:10:01.57 ID:???
>>718
720Name_Not_Found:2011/03/13(日) 14:29:42.15 ID:???
>>719
??
721Name_Not_Found:2011/03/13(日) 15:23:28.41 ID:???
>>716
放置でいいだろ
722Name_Not_Found:2011/03/13(日) 18:14:51.11 ID:???
>>716
html,body{
margin: 0px;
padding: 0px;
height:100%;
background:url(hogehoge) no-repeat center center;
}
723Name_Not_Found:2011/03/14(月) 17:16:47.59 ID:???
p {margin-left:2em;}
img {margin-left:3em;}
で左に5emですが、
p {margin-left:2em;}
img {margin-left:3em;}
p img {margin-left:10em;}
にすると12emになりますか?
724Name_Not_Found:2011/03/14(月) 20:25:45.26 ID:???
>>723
やってみてどうだった?
725Name_Not_Found:2011/03/15(火) 07:41:55.59 ID:???
テーブルの行毎に背景色を変えたいのですが
<tr>などにclassを付けてないで一気に指定する方法ってありますか?
726Name_Not_Found:2011/03/15(火) 07:43:32.40 ID:???
すみません。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なしで指定できないものかと・・
727Name_Not_Found:2011/03/15(火) 09:29:42.94 ID:???
>これをclassなしで指定できないものかと・・

tr:nth-child(even) td{
background: white;
}

th:nth-child(odd) td{
background: red;
}

IEとか除外して良いならこういうのは?
728Name_Not_Found:2011/03/15(火) 09:40:46.74 ID:???
>>727
おおありがとうございます
スゴイこんな事もできるんですね


729Name_Not_Found:2011/03/16(水) 22:15:47.44 ID:???
.test{
position: fixed;
top: 20%;
left 20%;
background-color: #85b9e9;
width: 200px;
height:100px;
}

これにpadding: 20px margin: 20px;
など混ぜると中身のテキストにも反映されますが、ボックスの位置自体もpx分ずれてしまいます
box内部のことだけ指定してやってるつもりなのですが、なぜなんでしょうか?
730Name_Not_Found:2011/03/17(木) 00:23:13.14 ID:???
>>729
まーじんは内部じゃないだろ
731Name_Not_Found:2011/03/17(木) 22:13:31.19 ID:???
>>730
そうでしたorz
しかしpaddingだけ指定してもずれてしまうのですが
ボックスの位置はpaddingの分も考慮して決めないといけないってことでしょうか?
732Name_Not_Found:2011/03/17(木) 22:51:30.42 ID:???
そうですよ〜
733Name_Not_Found:2011/03/18(金) 17:57:04.45 ID:???
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;
}

よろしくおねがいします。
734Name_Not_Found:2011/03/18(金) 22:21:52.64 ID:aARWUhdx
         画像
     この真下にボックス

と言う形でCSSを組みたいのですが、firefoxとかでサイドバーを出すと
ボックス要素が右側にずれてしまいます。topやleftで%を使ってるからでしょうか?
それとも別の原因があるのでしょうか?
画像はbackgroundにしてfixedやabsoluteなど色々試してみたのですがダメでした
どうすれば位置を固定できるか教えていただけないでしょうか?
735Name_Not_Found:2011/03/19(土) 01:09:17.73 ID:???
>>733
HTMLの基礎を学べ

>>734
画像をボックスへ
736Name_Not_Found:2011/03/19(土) 05:54:41.64 ID:???
>>733
ol直下にpは入れられない
737Name_Not_Found:2011/03/19(土) 09:07:40.84 ID:???
>>735
なるほど、その方法がありましたか。
しかし、これだとボックスに入ってないことになるんですかね?

body {
color: #000000;
font-size: 82%;
font-family:'メイリオ',Meiryo,'MS Pゴシック',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;
}
738737:2011/03/19(土) 09:08:47.72 ID:???
backgroundの後の}は消し忘れorx
739 :2011/03/19(土) 09:49:17.71 ID:???
htmlの方を書かんとワカランだろ
740Name_Not_Found:2011/03/19(土) 10:54:29.69 ID:???
>>739
こんな感じです

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Strict //EN”
http://www.w3.org/TR/html4/strict.dtd”>
<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>

こんな感じです
741Name_Not_Found:2011/03/19(土) 11:05:16.17 ID:???
>>740
ulがbody内にないじゃん
lintで間違いを全部なくす方が早い
742Name_Not_Found:2011/03/19(土) 12:33:51.20 ID:???
>>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
743Name_Not_Found:2011/03/19(土) 12:40:11.86 ID:???
画像の下にボックスって言ってなかった?
744Name_Not_Found:2011/03/19(土) 12:42:22.27 ID:???
>>743
そうです、その中にリスト形式で文章を書きたいのですが>>734の状態で……
745Name_Not_Found:2011/03/19(土) 12:51:38.53 ID:???
lintと言うところでググって見たのですが
divの中で<li>タグは使えないと言うだけで、実際表示上は問題なくリスト化できているのですが
ボックスがずれる原因は分かりませんでした……
746Name_Not_Found:2011/03/19(土) 13:00:45.84 ID:???
firefoxで表示すると正常なのに、IEtabを使って切り替えたらボックス位置が初期値に戻って左上に表示されるんですが
これってどうすれば治るんでしょうか
747Name_Not_Found:2011/03/19(土) 13:17:22.26 ID:???
>>745
ul書き忘れてるだろ
748Name_Not_Found:2011/03/19(土) 13:18:12.48 ID:???
>>746
DTDをへんなのに指定してんじゃね?
749Name_Not_Found:2011/03/19(土) 15:11:45.09 ID:???
>>745
レスありがとうございます
ulを別にクラス化(ul.hogehoge)で別定義すれば解決するかもしれないと言うことでしょうか
ちょっとチャレンジしてみます!
750Name_Not_Found:2011/03/19(土) 15:12:30.10 ID:???
>>747さんでしたすみませんorz
751Name_Not_Found:2011/03/19(土) 17:09:50.85 ID:???
>>749
違う
div内に直接liを書けないという警告がでるってことは
<div>
<li>なんとか</li>
という形(<ul>が書かれていない)になってるってこと
勝手に回答を妄想解釈せず素直に読めよ
あととりあえずまずlintで警告でてるとこ全部解消してみろ
そしたら解決するから
おまいの問題のほとんどがHTMLがでたらめなことが原因
ここに貼ってるソースと問題が発生してるソースは違うだろ
752Name_Not_Found:2011/03/19(土) 18:21:00.15 ID:???
>>734だけどやっぱりボックスを指定する状態でサイドバー出すだけでもう既にずれてしまう
もはや意味が分からない
753Name_Not_Found:2011/03/19(土) 19:42:35.20 ID:???
>>752
htmlがめちゃくちゃだからだってば
ほんと飲み込みの悪いやつだな
754Name_Not_Found:2011/03/19(土) 19:44:41.75 ID:???
なんか意味不明な人がきたな
755Name_Not_Found:2011/03/19(土) 19:55:46.53 ID:???
ここは昔から意味不明のスレなんだが
756Name_Not_Found:2011/03/19(土) 19:57:17.16 ID:???
>>755
>>754は誤爆です。
757Name_Not_Found:2011/03/19(土) 20:12:31.00 ID:???
>>753
頭が悪いのはあれですがlintで全部問題解決してもずれるんですけど……
上記条件で>>737で指定した画像ファイルの直下に>>740のリストタグ外してボックス置いてもずれます
htmlがおかしいならどこが変なのか具体的に指摘してくれないと分からないです
とにかく画像の下のボックスがサイドバー出た時点でずれることの解決とhtmlファイルはあまり関係ないと思うんですけど
758Name_Not_Found:2011/03/19(土) 20:40:13.60 ID:???
>>734
> firefoxとかでサイドバーを出すとボックス要素が右側にずれてしまいます。
仕様。ウインドウが右にずれるのだからコンテンツも右にずれる。
759Name_Not_Found:2011/03/19(土) 20:45:48.63 ID:???

サイドバーは右に出るんだから左にずれるのが仕様だろ

つか画像も置いた本物のHTMLソースを提示してくれ
あとずれてるSSと
嘘のソースから原因を判明すんのは無理
760Name_Not_Found:2011/03/19(土) 20:49:51.73 ID:???
Firefoxのサイドバーは左側に出るが、俺の環境が特殊なのか?
761Name_Not_Found:2011/03/19(土) 21:04:07.23 ID:???
スクロールバーとは違うの?
今時FFなんか使わんからわからん
762Name_Not_Found:2011/03/19(土) 21:26:03.21 ID:???
人を馬鹿にするのもいい加減にしたらどうだ。
こうした若者が増えていること自体、本当に日本の未来が心配な気がする。
自分の人生が正しいのかどうかを、荒待てて振り返る必要があなたにはありますよ、
ということだけは断言しておきたい。神様
763Name_Not_Found:2011/03/19(土) 22:26:45.22 ID:???
>>761
Firefoxでなくてもサイドバーは左側に出るのが普通だぞ。Windowsエクスプローラでも左だ。
スクロールバーと混同するぐらいの知識なら回答するなよな。
764Name_Not_Found:2011/03/19(土) 22:40:19.84 ID:???
>>763
そんな必死に怒るほどの話じゃないだろ
なんにせよずれる理由はhtmlの不備で確定してるし
765Name_Not_Found:2011/03/19(土) 22:49:35.49 ID:???
>>764
何故確定してるの?
766Name_Not_Found:2011/03/19(土) 22:54:51.78 ID:???
FF儲がマジギレしたw
767Name_Not_Found:2011/03/19(土) 22:58:38.13 ID:???
>>765
噛み付きたいだけならよそでやってくれ
768Name_Not_Found:2011/03/19(土) 23:20:47.34 ID:???
>>758でFA
769Name_Not_Found:2011/03/19(土) 23:57:05.99 ID:???
お前らくだらない事で喧嘩すんな
770Name_Not_Found:2011/03/20(日) 00:28:36.60 ID:???
こうやって煽りにくるあほはどこにでも沸くんだな
771Name_Not_Found:2011/03/20(日) 03:25:06.30 ID:???
次の方どうぞー↓
772Name_Not_Found:2011/03/20(日) 04:36:31.85 ID:???
ふんにゃかふんにゃか
773Name_Not_Found:2011/03/25(金) 17:50:40.20 ID:???
服を着たままの状態で、女子の肛門の位置を正確に割り出す方法を教えてください。

スレ違いだったら申し訳ありません。
774Name_Not_Found:2011/03/25(金) 18:59:38.08 ID:???
775Name_Not_Found:2011/03/26(土) 07:04:52.92 ID:???
春だなあ・・・
776Name_Not_Found:2011/03/26(土) 13:16:04.80 ID:???
>>774
ありがとうございます!やってみます!
777Name_Not_Found:2011/03/28(月) 05:39:11.67 ID:zuNWupxm
背景の色を指定したいのですが、初めにhtmlファイルのヘッダーの中に

body {background-color: #FFEEFF;}

を入れると普通に色が出るんですが、これをcssファイルにコピーすると出なくなります…
なぜでしょうか…?
778Name_Not_Found:2011/03/28(月) 06:07:46.89 ID:???
別の部分でもダブって違う色指定してるとか
cssへのリンクが間違ってるとか
779Name_Not_Found:2011/03/28(月) 07:04:03.67 ID:zuNWupxm
cssに入力した他のやつはちゃんと出ていて、bodyのとこに入力したやつだけ丸々ダメみたいなんですよね。。。
だからリンクが間違ってるということはないと思うのですが、別の部分で違う色を指定してるというのも探した感じそういったものは見当たりません。。。

昨日から始めた者で専門用語がわからず申し訳ないです…
780Name_Not_Found:2011/03/28(月) 07:24:38.47 ID:zuNWupxm
自己解決しました!
答えてくれた方ありがとうございました!
781Name_Not_Found:2011/03/29(火) 01:41:25.23 ID: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>

と入力して、文字を上下左右真ん中に置きたいのですが、
上下の真ん中に置くことが出来ません。
左右の中央にはなっています。

どうすればできますか?
782Name_Not_Found:2011/03/29(火) 03:23:01.10 ID:???
テンプレの>>4を読め

以降もちゃんとスレテンプレのリンク先を全て読んでから質問するように
初心者が質問したくなるような事例の大半はそれで済む
783Name_Not_Found:2011/03/29(火) 10:23:35.57 ID:???
>>782
それは君がイケメンだからじゃないかな? 俺だったらたぶん無理。
784Name_Not_Found:2011/03/29(火) 10:33:07.06 ID:???
2chはイケメン専用ですよ.。そうでない奴は一生ROMってなさい。
785Name_Not_Found:2011/03/29(火) 13:34:21.99 ID:???
初めからイケメンの人もいないだろうさ
786Name_Not_Found:2011/03/29(火) 17:28:09.62 ID:???
それは整形したイケメン
787Name_Not_Found:2011/04/01(金) 16:59:49.51 ID:???
画像を重ねて表示するのはcss3で楽になったと聞きました
どのプロパティで出来ますでしょうか?
788Name_Not_Found:2011/04/01(金) 20:34:02.97 ID:???
ググるのは嫌ですか ?
789Name_Not_Found:2011/04/02(土) 05:50:27.90 ID:???
座標が同じなら何枚でも勝手に重なるけど?
790Name_Not_Found:2011/04/02(土) 22:04:54.98 ID:???
<span class="abc def">とすると、.abcと.defという二つのクラス名を使用できますが、
これをidにも同じようにすることは可能でしょうか。
791Name_Not_Found:2011/04/02(土) 22:49:32.02 ID:???
idは一意
複数指定はclassの役目。
792Name_Not_Found:2011/04/02(土) 23:44:10.10 ID:???
>>791
ありがとうございました。
793Name_Not_Found:2011/04/04(月) 04:19:47.09 ID:???
リストのタイトルのつけ方で質問

<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>
を考えたんですが、どちらがお勧めですか?それとも、もっと良い書き方ありますか?
794Name_Not_Found:2011/04/04(月) 06:46:21.32 ID:???
タイトルと内容を同列にしてる前者はダメっしょ
CSSを無効にしたときにどう表示されるか考えてみれ
795Name_Not_Found:2011/04/04(月) 11:16:21.62 ID:???
cssだけで1枚の30x30のgif画像を横に5回繰り返す方法ってございませんか?
background:url(30x30.gif) repeat-x 5;
796Name_Not_Found:2011/04/04(月) 14:54:19.03 ID:???
背景色だけ透過して文字色だけは透過しないままにする方法ってないですか?
背景色にopacity:0.2ぐらいにすると文字も極端に薄くなってしまいます
797Name_Not_Found:2011/04/04(月) 16:16:33.14 ID:???
>>796
RGBaにするかアルファPNG
798Name_Not_Found:2011/04/04(月) 16:38:23.07 ID:???
>>797先生、ありがとうございます!!!!!!!!!!!!!!!!!
799796:2011/04/04(月) 16:53:48.70 ID:???
ぼくのは無理層ですよね?
800Name_Not_Found:2011/04/04(月) 18:41:00.42 ID:e/yY687M
ボックスを中央に配置したいのですが
ボックスと親要素に対してposition:relative;を、ボックスにtop:50%;left:50%;で位置的には中央になったのですが
これだと左上が基点になってますので、結果中央から右寄りにボックスがあることになります
これをtext-align:centerと同じような感じでぼっくを中央に寄せるにはどのようにしたらよいのでしょうか?
801Name_Not_Found:2011/04/04(月) 18:47:21.61 ID:YpHaPJey
http://store.uniqlo.com/jp/store/feature/chino/women/
ユニクロのグローバルメニューはある一定以上のスクロールをすると
バーを動かしてもずっと固定され表示され続けています。

この記述の仕方をお教えさい。簡易サンプルがあれば
お教えください。
802Name_Not_Found:2011/04/04(月) 18:54:06.61 ID:???
>>796
その使い方なら、背景色用に透過pngを作ったほうが早い。
803Name_Not_Found:2011/04/04(月) 18:56:02.19 ID:???
>>801
スクロール量を調べて特定の量だけスクロールしてあればfixedでメニューを固定してるんだと思う
804Name_Not_Found:2011/04/04(月) 18:57:23.96 ID:???
>>799
だれ?w
805801:2011/04/04(月) 19:20:31.36 ID:YpHaPJey
さっそくのご回答ありがとうございます
803>
素人なもので、簡単なもので構いませんので、
その記載の仕方をお教えいただけませんか?

-----------------------
スクロール量を調べて特定の量だけスクロールしてあれば
fixedでメニューを固定
-----------------------

よろしくお願いいたします。
806Name_Not_Found:2011/04/04(月) 19:28:31.89 ID:???
これマッチングサイトでも2〜5万円ぐらいで成立してる作業だからちったぁ自分で努力しろ
jqueryで使うならスクロールはtp://stacktrace.jp/jquery/api/css/scrolltop(val).html
スクロール量を見てメニューのcssを変更するならtp://stacktrace.jp/jquery/api/css/css(properties).html
807Name_Not_Found:2011/04/04(月) 22:31:55.55 ID:???
>>793
内容によっては
<dl>
<dt>a</dt>
<dd>b</dd>
<dd>c</dd>
</dl>
これもあり
808Name_Not_Found:2011/04/04(月) 22:38:52.09 ID:???
<ol>
<li class="title">a
<ol>
<li value="1">b</li>
<li>c</li>
</ol>
</li>
</ol>
809Name_Not_Found:2011/04/05(火) 00:29:03.95 ID:???
春だねぇ
810Name_Not_Found:2011/04/06(水) 11:47:55.03 ID:???
教えて下さい。
多々ある画像を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>
このように親要素で指定した上で子要素で位置を指定してやらないと軽くならないのでしょうか。
下の方法でやると、とても大変になりそうで困っています。
知っている方がいましたら教えて頂けないでしょうか。
このスレでの質問と違う内容でしたら申し訳御座いませんがスレの名前でも良いので教えて頂けると助かります。宜しくお願い致します。
811Name_Not_Found:2011/04/06(水) 12:00:26.14 ID:???
ここ読んでメリットとデメリットを知ってから来てくれ
ttp://coliss.com/articles/build-websites/operation/css/transparent-css-sprites.html
812Name_Not_Found:2011/04/06(水) 12:43:55.04 ID:???
早いお返事ありがとう御座います。
デメリットに関しまして、ブラウザのメモリに関する問題点が上げられていますが、英語のサイトで理解が出来ませんでした。。申し訳御座いません。
具体的にどの程度デメリットが体感出来るのかとても興味深く思います。後で翻訳サイト等にかけて読んでみようと思います。
教えて下さったサイトはとても参考になり、親要素関係なく指定出来る事がわかりました。
このサイトの記述による解釈によると1枚の画像をポジション指定により表示するので、はやり私の書いた上の方法では意味のない、むしろ重くなってしまうという解釈で宜しいのでしょうか?
そこらへんが詳しく書かれていないので最終判断に困っております。宜しければ教えて頂ければ幸いです。
813Name_Not_Found:2011/04/07(木) 13:49:25.19 ID:ATZ3VhwY
背景を透過させたサイトを作っているのですが、
背景だけを透過させたいのに、サイト内のすべての画像が透けてしまいます。
背景のみ透過させる方法はないのでしょうか?
814Name_Not_Found:2011/04/07(木) 13:50:13.20 ID:???
>>813

>>796-
815Name_Not_Found:2011/04/08(金) 06:07:05.68 ID:???
>>812
十分理解してるじゃん。
それ以上なにがしたいの?
816Name_Not_Found:2011/04/11(月) 11:30:27.32 ID:5LPARI1S
cssで表の角を丸くする方法で簡単な方法を教えてください。
ネットで見てたらいろいろありますけど、簡単な方法を知りたいです。
できれば、cssのみの方法と、画像(丸)1枚を使用する方法の両方を知りたいです。
817Name_Not_Found:2011/04/11(月) 11:33:21.09 ID:???
818Name_Not_Found:2011/04/11(月) 17:39:09.73 ID:???
>>816
表の角を丸くしてるサイトのソースをパクる
819Name_Not_Found:2011/04/12(火) 06:33:40.97 ID:???
>>816
ネットで見つけた方法の中で、簡単な方法を使う。
820Name_Not_Found:2011/04/12(火) 23:13:54.32 ID:???
CSS3で使えなくなったプロパティや値ってありますか?
基本的にCSS2.1に新しいプロパティが加わったと考えて使っても問題ないですか?
821Name_Not_Found:2011/04/12(火) 23:17:36.30 ID:???
>>820
CSS3 はモジュール化されているからすべてのモジュールを知っている人は少ないと思う。
自分で調べてくれ。http://www.w3.org/Style/CSS/current-work
822Name_Not_Found:2011/04/12(火) 23:31:03.60 ID:???
わかりました
せっかくなのでまとめた情報をサイトに残したほうがいいですか?
823Name_Not_Found:2011/04/12(火) 23:37:52.71 ID:???
>>822
まとめてくれるなら助かる。

CSS2.1 は http://www.w3.org/TR/CSS21/propidx.html に property table が用意されている。
CSS3 は http://www.w3.org/Style/CSS/current-workhttp://www.w3.org/TR/#tr_CSS を参考に。
CSS3 も http://www.w3.org/TR/css3-roadmap/ に一覧があると良かったんだが、Draft 段階の文書が多くある中でまとめるのは大変なんだろうな…。
824Name_Not_Found:2011/04/12(火) 23:42:47.99 ID:???
どうやってまとめるの?
825Name_Not_Found:2011/04/13(水) 00:41:29.88 ID:???
>>824
あなたは>>820なのか?
CSS2.1 のように property table を作って各セルに「対応/非対応」を入れてみては?
826Name_Not_Found:2011/04/13(水) 05:17:07.71 ID:???
CSS3って、もう一般化してるの?
827Name_Not_Found:2011/04/13(水) 06:56:41.58 ID:???
>>826
何を持って一般化と言うか知らんが、
2つ以上のブラウザが実装済みのCSS3プロパティは結構ある。
828Name_Not_Found:2011/04/13(水) 10:42:09.07 ID:???
>>825
俺は824だよ
何でいきなり自演みたいに認定するの?
829Name_Not_Found:2011/04/13(水) 12:43:14.27 ID:???
>>828
自演とは思ってないが、便乗質問ならわかるようにしてほしい。回答する方も気を遣うんだ。
830Name_Not_Found:2011/04/13(水) 18:32:01.24 ID:???
質問の内容と口調的に別人だと思ったけどな。
むしろ822と824の方が近いだろう。
831Name_Not_Found:2011/04/13(水) 19:28:29.85 ID:???
CSS3まとめ用

IE9
Firefox4
Opera11
chrome10
safari5
832Name_Not_Found:2011/04/13(水) 20:26:33.44 ID:???
まとめ方なんて人それぞれだろうけど、モジュール名まで書いてくれると親切だな。

+-----------------+------+----------------------------------------+
| property name  | CSS2 | CSS3                  |
+-----------------+------+----------------------------------------+
| background   | ○ | Backgrounds and Borders Module Level 3 |
+-----------------+------+----------------------------------------+
| background-clip | ○ | Backgrounds and Borders Module Level 3 |
+-----------------+------+----------------------------------------+
833Name_Not_Found:2011/04/13(水) 20:54:49.59 ID:???
>>826
2012年に出すIE10ではCSS3への対応度が向上するらしいよ
834832:2011/04/13(水) 20:59:23.39 ID:???
background-clip は CSS2 にはないね…。すまんかった。
835Name_Not_Found:2011/04/13(水) 21:12:41.36 ID:???
一人の人にやらせようとせずてめえも一緒にやれや
836Name_Not_Found:2011/04/13(水) 21:27:05.51 ID:???
>>824に答えただけで怒られるとは思わなかった
837Name_Not_Found:2011/04/13(水) 21:33:49.49 ID:???
>>835
つ鏡
838Name_Not_Found:2011/04/13(水) 21:39:01.58 ID:???
俺は必要に迫られて去年からやってるけどここの連中に見せたいと思わない
839Name_Not_Found:2011/04/13(水) 21:51:59.06 ID:???
ほぼ煽りしかいないからなあ。
少しでも良くなればとたまに回答しているけど難癖をつけてくる人はいるし、質問者はスルー気味だし、ここの人にお世話になった実感はごく僅かだ。
840Name_Not_Found:2011/04/14(木) 20:02:43.62 ID:PM29wuPy
礼を求めるなら2ちゃんは止めた方がいいよ
質問に対して好き勝手に答えるだけでいいんだよ。
間違ってたら誰かが指摘してくれる。
841Name_Not_Found:2011/04/16(土) 17:04:41.82 ID:???
<span style="background: no-repeat url('img/creditcard.png');">クレジットカード</span>

文字を見えなくしたいのですが背景画像を前に表示するにはどうしたらいいでしょうか?

842Name_Not_Found:2011/04/16(土) 17:24:30.38 ID:???
<span style="display:none;">クレジットカード</span>
843Name_Not_Found:2011/04/16(土) 17:45:50.78 ID:???
>>842
width 指定しても画像は表示されないです。。

844Name_Not_Found:2011/04/16(土) 17:46:19.49 ID:lDo7GZYV
AとBとfloatでわけてBの背景にいろつけたいのですけど
Aの文章が長いせいかBに白い隙間が出来てしまします。

min-hight とかつかってもブラウザによって変わってきます。
対策はあるのでしょうか?
845Name_Not_Found:2011/04/16(土) 17:49:19.26 ID:lDo7GZYV
AとBと色違いで高さをいっしょにしたいってこっとです
846Name_Not_Found:2011/04/16(土) 19:02:11.94 ID:???
>>841
text-indent -9999pxだっけ。mixiとかそこらじゅうで使われてる。
847Name_Not_Found:2011/04/16(土) 19:18:02.61 ID:Xuq06yW1
css3での質問です。
このサイトのフッターを一番下に表示させたいのですが
sectionのheightを100%にするなど、色々試してみたのですが出来ません!
http://mrgrotesque.com/

なにかアドバイスよろしくお願い致します!
848Name_Not_Found:2011/04/16(土) 19:26:33.83 ID:???
>>846
できました。ありがとうございます
849Name_Not_Found:2011/04/16(土) 20:20:51.09 ID:Xuq06yW1
解決しました
850Name_Not_Found:2011/04/16(土) 22:46:43.41 ID:???
全体的に欧文のページで、一部のセルにだけ和文を使いたいのですが、
<td class="ja">和文</td>
td.ja {font-family: "和文フォント";}
としたところ、文字の上下に妙な余白が出来てしまいました。
margin、padding、vertical-align、line-height、position、displayを使って修正を試みましたが、
ブラウザによっては悪化したり、そもそも根本的な解決になっていなくて気持ち悪かったりで、行き詰まりました。

余白の原因をお教えください。
851Name_Not_Found:2011/04/16(土) 23:37:35.95 ID:???
自己解決しました。読んでいただいた方、ごめんなさい。
td.ja {line-heightではなく
* {line-heightとしたら、
全体的に若干のレイアウト崩れを起こしたものの、問題の余白は綺麗に消えました。
852Name_Not_Found:2011/04/16(土) 23:52:46.17 ID:???
最近は質問してから自分で考えるのが流行ってるのか?
853Name_Not_Found:2011/04/17(日) 08:41:50.42 ID:???
↑は解決しました
854Name_Not_Found:2011/04/17(日) 10:10:40.23 ID:???
お前の寝てる間に、口の中にカメムシ100匹入りますように。
855Name_Not_Found:2011/04/17(日) 16:14:24.35 ID:???
このスレって他のとこと較べて程度低いよね。
読むと気分悪いからブックマークから外した。
たまに気になって見に来たら、この有様w
856Name_Not_Found:2011/04/17(日) 17:32:52.47 ID:???
>>855
あなたが回答してくれなくなってからこの有様ですよ。
857Name_Not_Found:2011/04/18(月) 03:03:17.56 ID:???
それコピペ
858Name_Not_Found:2011/04/18(月) 04:38:20.22 ID:???
firefoxのstylishでGoogleトップの検索フォームの形をいじってるんだけど
検索結果のURLが/search?q=〜から#hl=ja&〜に変わったため検索結果のフォームまで変わってしまうんだけど対処法ありますか?
859858:2011/04/18(月) 05:20:46.91 ID:???

自己解決しました!
860858:2011/04/18(月) 05:29:28.77 ID:???
>>859
その発想はなかった
この板はだめだな
861Name_Not_Found:2011/04/18(月) 08:45:46.07 ID:???
ID出せよ
862Name_Not_Found:2011/04/18(月) 15:50:52.00 ID:???
Yahoo!トピックスなどにあるNewの画像を消して文字に置き換えたいです
Userstyles.orgにあるスタイルを参考に
IMG[src="http://i.yimg.jp/images/new2.gif"]{width:0!important;}
IMG[src="http://i.yimg.jp/images/new2.gif"]:after{
content: "New";
}
などと見よう見まねでやってみましたができませんでした
やり方を教えてください
863Name_Not_Found:2011/04/18(月) 15:55:47.30 ID:???
>>862
>>246参照
864Name_Not_Found:2011/04/18(月) 16:02:25.88 ID:???
>>863
ありがとうございます
スレ内検索すべきでした すみません
865858:2011/04/18(月) 23:17:08.49 ID:???
>>858-860
ワロタ
866858:2011/04/19(火) 06:38:29.41 ID:???
よし!俺も
867Name_Not_Found:2011/04/19(火) 07:03:17.51 ID:???
CSSめんどくさい
868Name_Not_Found:2011/04/19(火) 09:08:07.43 ID:???
この明日も見えない大変な時代やからアムウエイや。
アムウエイやってがんばって成功したら幸せな老後が待ってるんやで。
ねずみ講ちゃうで。アムウエイはすごいビジネスなんや!
869Name_Not_Found:2011/04/19(火) 20:28:13.56 ID:???
>>868
も、もしかして哲さん?
870Name_Not_Found:2011/04/19(火) 20:47:13.78 ID:???
IE8、sleipnirでデザインが崩れているという指摘をされて
自分もIE8、sleipnirで確認したのですが、デザインが崩れていませんでした。

PCの環境によってデザインが崩れる場合cssのどの部分に原因があるか
教えて頂けないでしょうか。

IE8、sleipnirでデザインが崩れていると指摘して下さった方はFire foxだと
普通にみれたようです。
871Name_Not_Found:2011/04/19(火) 21:02:02.51 ID:???
フォント設定とか
872Name_Not_Found:2011/04/19(火) 21:10:17.01 ID:???
>>870
デフォルトスタイルシートが違う
873Name_Not_Found:2011/04/20(水) 07:40:39.84 ID:???
IEでクライアント領域の境界線を消すのに <body style="border:0;">
としていたんですが、DOCTYPEを指定すると消えなくなりました。
DOCTYPEを指定しても消す方法ありませんか?
874Name_Not_Found:2011/04/20(水) 23:23:05.14 ID:???
input要素のbuttonで、押す前と押した時の表示を変えたいです(へこませたい)
hoverを使うとマウスが上に来たときに変えることはできますが、
クリックしているときだけ変えることってCSSで可能でしょうか?javascriptとか併用が必要?
875874:2011/04/21(木) 00:45:39.39 ID:???
hoverではなくてactiveで期待通りの動作でした
ちょっと勘違いしてました 自己解決
876Name_Not_Found:2011/04/21(木) 01:29:05.43 ID:???
先行実装だからscript使った方がいい気もするけどね
877Name_Not_Found:2011/04/21(木) 06:11:59.40 ID:MumpncBS
YUIのDataTableのスタイルシートを抽出できないでしょうか。
http://developer.yahoo.com/yui/datatable/

元はといえば、やりたいことはよくある入力フォームでテーブルの左側が見出し(項目名ヘッダ?)になってるやつを、
同じ画面にDataTableがあるので見た目を統一したいのです。

なので、
1.単にCSSだけぱくる
2.YUI DataTableを行列変換(!?)して適用
のどっちも解決方法としてありなのですけど。
878858:2011/04/21(木) 06:12:05.81 ID:???
えっ!?
879Name_Not_Found:2011/04/24(日) 23:07:27.09 ID:???
id 属性と name 属性の違いがイマイチわかりません。
name は一切使わず、 全てのタグで id のみを使うという方針で問題ないのでしょうか?
880Name_Not_Found:2011/04/24(日) 23:08:20.38 ID:???
問題ありませんよ
881Name_Not_Found:2011/04/24(日) 23:14:25.02 ID:???
inputはname属性必須の時があるから
882Name_Not_Found:2011/04/25(月) 01:09:23.10 ID:???
文書内全体で一意か、同じ要素で一意か
883Name_Not_Found:2011/04/25(月) 01:14:13.26 ID:???
>>879
nameは汎用属性ではない。まずどの要素のname属性を指しているか、をはっきりさせる必要がある。HTML4 と HTML5 でも若干違う。
884Name_Not_Found:2011/04/25(月) 14:19:01.25 ID:???
すべての要素の、すべての属性に「font-style: italic;」の値が与えられているものを表すにはどうすればいいんでしょうか。
*[*="font-style: italic;"] や ["font-style: italic;"]
としたんですけどエラーが出ました。

表記法を教えてください。よろしくお願いします
885Name_Not_Found:2011/04/25(月) 15:11:29.33 ID:???
>>884
「すべての属性」に該当するセレクタはないので不可能です。
http://zng.info/specs/css3-selectors.html#attribute-selectors
886Name_Not_Found:2011/04/25(月) 15:32:17.33 ID:???
>>884
規定にある要素、属性を一つ一つ指定していけば原理上は可能だな。泥臭い方法だが。
http://www.whatwg.org/specs/web-apps/current-work/multipage/section-index.html#elements-1
887Name_Not_Found:2011/04/25(月) 20:29:06.20 ID:???
>>886
スタイルが指定されてるかを判定する方法なんてあるの?
888Name_Not_Found:2011/04/25(月) 22:11:16.48 ID:???
>>887
ない。

> すべての要素の、すべての属性に「font-style: italic;」の値が与えられている
これが満たせるだけ。
889Name_Not_Found:2011/04/25(月) 22:15:23.84 ID:???
すべての属性の定義が曖昧すぎる

<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>
890Name_Not_Found:2011/04/25(月) 22:26:35.00 ID:???
じゃあstyleとtitleとaltくらいでいいか
891Name_Not_Found:2011/04/25(月) 22:30:20.43 ID:???
>>890
styleとtitleは汎用属性だが、altは汎用属性ではないのでタイプセレクタを併用しないと実装できないよ
892884:2011/04/26(火) 13:55:20.60 ID:???
みなさんご回答ありがとうございます。
一括で指定するという方法はないようですので、一つ一つ属性を指定していくことにします

ご回答ありがとうございました。
893Name_Not_Found:2011/04/26(火) 14:46:39.18 ID: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>
894Name_Not_Found:2011/04/26(火) 15:55:06.40 ID:???
>>893
divにheightで回避できるが、それじゃ根本的な解決にはなってないんだよな?
895Name_Not_Found:2011/04/26(火) 16:44:29.54 ID:PPfIx3xx
>>894
高さの決めうちは無理な場所でしたけど、height: 100%;で回避できました。
助かりました。ありがとう。
(positionとかfloatとか試したけど結局だめだったな。)

div { width: 5em; overflow: auto; height: 100%; }
896Name_Not_Found:2011/04/26(火) 22:44:02.99 ID:???
IE9を使える環境の方に質問します。
IE9で-ms-filter (又はfilter)って効果が有効になってますか?それとも無視されますか?
897Name_Not_Found:2011/04/26(火) 23:08:52.32 ID:???
>>896
IE9 は opacity が使えるけど、それじゃダメ?
http://msdn.microsoft.com/ja-jp/ie/ff468705.aspx#_CSS3_Colors
898Name_Not_Found:2011/04/26(火) 23:15:14.21 ID:???
MSDNではIE8までしか触れられてないな
http://msdn.microsoft.com/en-us/library/ms530752.aspx
899Name_Not_Found:2011/04/26(火) 23:16:23.87 ID:???
>>897
こちらはIE9使えないので、filterのIE9での対応状況を知りたいのです。
900Name_Not_Found:2011/04/26(火) 23:31:39.40 ID:???
901Name_Not_Found:2011/04/28(木) 14:38:01.14 ID:???
>>896は逃げたか
902Name_Not_Found:2011/04/28(木) 14:59:10.36 ID:???
逃げたとかイミフ
903Name_Not_Found:2011/04/28(木) 19:20:47.25 ID:???
896です。ずっと待ってますが、IE9で実際に試せる環境を持ってる人は居ないんですかね?
904Name_Not_Found:2011/04/28(木) 19:40:53.39 ID:???
わし Winちゃうねん
905Name_Not_Found:2011/04/28(木) 21:31:56.82 ID:???
>>903
ここで人に試してもらうのと>>900のリンク先で試した人のログを見るのは信頼性に大差はないと思うんだけどな。
906Name_Not_Found:2011/04/28(木) 22:01:01.96 ID:???
>>905
900はIE9リリース前の書き込みじゃないの
907Name_Not_Found:2011/04/30(土) 07:25:05.29 ID:???
css のクラスの指定で
<div class="a">a</div>
<div class="b">b</div>
<div class="a b">a and b</div>
とある時に
3つめの要素のみにスタイルシートを当てる事は
javascriptをつかわずに出来ますか?
908Name_Not_Found:2011/04/30(土) 09:49:58.95 ID:???
.a.b { }
909Name_Not_Found:2011/04/30(土) 12:07:05.81 ID:???
>>908
そんなふうにかけたんですね。
ありがとうございます。
910Name_Not_Found:2011/05/01(日) 18:57:54.15 ID:i4M9F+/0
>>612
背景透過PNGと背景影画像のBOXをずらして表示
911Name_Not_Found:2011/05/02(月) 20:37:35.08 ID:???
>>910
そういうダメテク教えるなよ
912Name_Not_Found:2011/05/02(月) 21:10:54.87 ID:???
ウソテックイズ
913Name_Not_Found:2011/05/03(火) 07:56:59.85 ID:???
すみません質問させてください
http://iup.2ch-library.com/i/i0297675-1304376727.jpg
この画像にあるように自分のブログにも、画面の上に戻ったり
コメントをするボタン?みたいなのを付けたいのですが
これはどこのサービスなのでしょうか?
もしスレ違いでしたら該当スレを教えていただけませんでしょうか?
よろしくお願いします
914Name_Not_Found:2011/05/03(火) 12:57:33.63 ID:???
この画像をどこから拾ったのか書いてよ
915Name_Not_Found:2011/05/03(火) 13:32:13.37 ID:???
>>914
レスありがとうございます
2ちゃんブログの俺的ゲーム速報っていうところが使っていて
すごく便利そうだなと思って自分も付けたいと思ったのですが
いくらググッても全然ヒットしなくて質問を書かせてもらいました
なにか情報をお持ちでしたらお願いいたします
916Name_Not_Found:2011/05/03(火) 13:44:56.07 ID:???
>>915
positionプロパティと、HTMLのフラグメント
てか自分でソース見りゃ早いんじゃないの
917Name_Not_Found:2011/05/03(火) 14:01:58.14 ID:???
サービスじゃなくて自分で実装してるんでしょ
ソース見たけど単純なものだよ
918Name_Not_Found:2011/05/03(火) 14:08:13.36 ID:???
>>916
返信ありがとうございます
>>916さんの書いた内容がまったく理解できないほどの
素人なんです
でも一つだけ分かったのは、どこかのサービスを利用してるわけではなく
HTMLというのをいじって自分で作ってるものなんでしょうね
ちょっと初心者にはハードル高そうです
返信ありがとうございました
919Name_Not_Found:2011/05/03(火) 14:10:29.99 ID:???
>>917さんもありがとうございます
やっぱり自分で実装してるものなのですね
勉強になりました
ありがとうございます
920Name_Not_Found:2011/05/03(火) 14:12:13.21 ID:???
>>896について、実際に試せる方よろしくお願いします。
IE9標準モードでも-ms-filter (又はfilter)は使えますか?
921Name_Not_Found:2011/05/04(水) 02:28:21.86 ID:???
>>920
自分で環境用意しなよ
922Name_Not_Found:2011/05/04(水) 03:00:33.92 ID:???
マジでIE9インストールした奴このスレには居ないの?俺はXpだから無理
923Name_Not_Found:2011/05/04(水) 10:08:53.15 ID:???
MacのVMにWin7+IE9入ってるけど、なにすればいい?
filter動くか試せばいいの?
924Name_Not_Found:2011/05/04(水) 12:20:11.14 ID:???
> filter動くか試せばいいの?
その通りです。よろしくお願いします。
Mac上のWin7でもIE8ではfilterは使えたのですよね。

できましたら、HTMLの先頭行にDOCTYPE(<!DOCTYPE html>等)宣言文の有無で
filter表示が変わらないことも確認して戴けたらありがたいです。
925Name_Not_Found:2011/05/04(水) 12:32:18.47 ID:???
どっちも使えたけど
926Name_Not_Found:2011/05/04(水) 13:00:38.42 ID:???
ありがとうございました。

CSS3を使えるブラウザではfilterと似たような効果で代用していましたが、
そうするとIE9では効果が重複してしまうので片方を殺さないといけないですね。
927Name_Not_Found:2011/05/04(水) 23:12:38.61 ID:???
次の患者さんどうぞー↓
928Name_Not_Found:2011/05/06(金) 11:30:45.04 ID:???
  zzz
  <⌒/ヽ-、__
/<_/____/
929Name_Not_Found:2011/05/10(火) 16:22:09.14 ID:???
左から2番目のセルのみ背景を変えたいのですが
td:eq(1){
background:#f00;
}
としても変わりません
eqを使うものだと思ってたのですが方法ございませんか?
930Name_Not_Found:2011/05/10(火) 16:29:07.22 ID:???
eq() は jQuery の独自拡張じゃなかったっけ?
http://api.jquery.com/eq-selector/
931Name_Not_Found:2011/05/10(火) 16:30:25.40 ID:???
932Name_Not_Found:2011/05/10(火) 16:32:53.11 ID:???
929は1000のダメージを受けた
eqじゃないのですね
nth-childでした
ありがとうございます
933Name_Not_Found:2011/05/11(水) 00:27:03.42 ID:???
は?
934Name_Not_Found:2011/05/11(水) 17:15:25.95 ID:???
<li>タグの中のテキストを上下左右中央にするのはどうすればいいですか?
一応<li>にwidth170pxとheight30pxの設定をしてます。
935Name_Not_Found:2011/05/11(水) 17:47:50.66 ID:???
>>934
line-height:30px; text-align:center;
936Name_Not_Found:2011/05/11(水) 18:10:59.96 ID:???
>>935
あほか?そんなんで中央にくるわけないだろwww
知らないくせに黙ってろよwww
937Name_Not_Found:2011/05/11(水) 20:10:29.89 ID:???
>>936
じゃあどうすればいいの?
938Name_Not_Found:2011/05/11(水) 20:11:13.98 ID:???
企業HP程cssを@importで読み込んでるのを見かけるんですが
これはどのようなメリットがあってcssを分けて読み込んでるんでしょうか?
939Name_Not_Found:2011/05/11(水) 20:16:50.57 ID:???
>>937
だからさ、分からないなら黙ってりゃいいんだよ
わざわざ間違ったレスしなくていいから
940Name_Not_Found:2011/05/11(水) 20:29:32.07 ID:???
>>935で合ってるだろ
何がどう間違ってるか説明しような
941Name_Not_Found:2011/05/11(水) 21:06:32.51 ID:???
フォントの設定について教えて下さい。
一般的にフォントは何が一番標準なんですか?あとフォント設定する時はfontとfont-familyの両方設定するんですか?
942Name_Not_Found:2011/05/11(水) 21:29:37.10 ID:???
指定しないのが標準です
943939:2011/05/11(水) 22:44:50.03 ID:???
>>940
もうしわけありません
944Name_Not_Found:2011/05/11(水) 23:11:46.60 ID:???
>>935
これで出来ました!ありがとうございました(^O^)
945Name_Not_Found:2011/05/12(木) 17:25:24.26 ID:YW3+VsL/
>>941
フォントの指定はしてはいけません
それはwindows厨のわがままです。
全ての悪はマイクロソフトです
絶対にフォントの指定はしてはいけません。
946Name_Not_Found:2011/05/12(木) 18:23:41.95 ID:???
ブログなどのページで縦にずらっと長いページの全体をラップしている<div>に高さは指定しなくていいんですよね?
947Name_Not_Found:2011/05/12(木) 18:51:01.29 ID:???
しなくていい
948Name_Not_Found:2011/05/12(木) 21:09:35.51 ID:???
dreamweaverでflashを挿入したらIEで見たときに毎回ActiveXコントロールのダイアログが表示されるんですけど、これを消すことってできないんですか?
949Name_Not_Found:2011/05/12(木) 21:28:02.04 ID:???
css3のプロパティ一覧ってありませんか?
各ブラウザで検証してて最新情報の。
古いのは海外ので知ってるんですけど古すぎるので
950Name_Not_Found:2011/05/12(木) 21:51:04.87 ID:???
>>948
swfobject使え
951Name_Not_Found:2011/05/12(木) 22:24:06.45 ID:???
命令するなっ!
952Name_Not_Found:2011/05/12(木) 22:26:16.51 ID:???
じゃあ使うわないで
好きにしていいのよ
953Name_Not_Found:2011/05/12(木) 22:26:21.12 ID:???
初心者どもは黙って俺の言うとおりしてりゃいいんだよ
954Name_Not_Found:2011/05/12(木) 23:23:40.29 ID:???
>>949
ありますん
955Name_Not_Found:2011/05/13(金) 00:02:28.90 ID:???
あるなら書けよ
956Name_Not_Found:2011/05/13(金) 09:53:27.76 ID:???
無いアルよ
957Name_Not_Found:2011/05/13(金) 17:56:48.63 ID:???
<li>(width:170px height:30px)の中にある文字のリンクのクリック範囲について、そのままにするとクリック範囲は文字だけに適応されますが、<li>のなか全体をクリック範囲にしたいのですがどうすればいいでしょうか?
<a>にdisplay:block;を定義すると聞いたのですがそれをすると他のリンクにも反映されてしまいます。
できれば<li>のなかのリンクにだけ反映したいです。
958Name_Not_Found:2011/05/13(金) 18:29:19.20 ID:???
li a { display:block; width:170px; height:30px; }
959Name_Not_Found:2011/05/13(金) 19:16:15.63 ID:???
>>958
出来ました!天才でした!
960Name_Not_Found:2011/05/15(日) 06:14:57.54 ID:???
IE9はこれ使えん。使ったら、真っ白になる。

<!--[if lte IE 8 ]> ]
961Name_Not_Found:2011/05/15(日) 14:50:01.37 ID:???
使うな
962Name_Not_Found:2011/05/15(日) 14:58:20.06 ID:???
>>960
コメントを閉じてないからじゃないの
963Name_Not_Found:2011/05/15(日) 15:01:28.98 ID:???
こいつすげーアホだな
964Name_Not_Found:2011/05/15(日) 16:19:10.94 ID:???
>>960
笑ったw
965Name_Not_Found:2011/05/15(日) 17:29:46.89 ID:???
釣りにしても酷すぎる
966Name_Not_Found:2011/05/15(日) 22:44:43.89 ID:???
ズコー 思わず二度見した
流石に釣りだよなあ…

むかしセミナーで、条件付きコメントは使わないでってmsの人が言ってたな
業務では使ったコト一度も無いけれど、HTML5とCSSハック絡みで使ってるサイトはたくさんあるね
967Name_Not_Found:2011/05/16(月) 22:11:29.34 ID:???
ほんだらさっさとIE8以下のサポートを切ってほしいところだ
968Name_Not_Found:2011/05/16(月) 22:43:57.99 ID:???
一番危険なIE9は残すのかよw
969Name_Not_Found:2011/05/17(火) 06:25:53.76 ID:???
>>966
あれ作ったのieの中の人だろ
自分で否定してるのか
970Name_Not_Found:2011/05/17(火) 07:29:58.39 ID:???
>>969
まあ自民と民主の関係みたいなもんだろ
971Name_Not_Found:2011/05/24(火) 12:18:00.59 ID:???
テキストの選択が出来なくなりました。直すにはどうしたらいいんでしょうか?
自分で作っておきながらなんですが、すごく鬱陶しいので直したいんですが方法がわからないので直しようがないです。
お願いします。
UbuntuのFirefox3.6です。
972Name_Not_Found:2011/05/24(火) 12:43:57.68 ID:???
コードも張らずに?w
973Name_Not_Found:2011/05/24(火) 12:47:30.44 ID:???
>>972
コードってなんですか?直すのに関係無いと思いますが。
環境は書きましたが?
974Name_Not_Found:2011/05/24(火) 13:05:23.30 ID:ZLF/lP3e
cssの質問じゃなければスレ違い、死ね
cssに関するならコード貼れ、ぼけ

975Name_Not_Found:2011/05/24(火) 13:07:11.64 ID:???
おめぇが書いたCSSやHTMLのせいじゃねぇの ってことじゃね?
他のサイトでもテキスト選択できなくなっているのだとしたら
おめーのPCぶっ壊れてる
976Name_Not_Found:2011/05/24(火) 13:09:10.04 ID:???
釣れたwww
977Name_Not_Found:2011/05/24(火) 13:52:24.90 ID:???
idを晒さない質問者のレスは信用しない方がいいな
このところ騙りが多いし
978Name_Not_Found:2011/05/24(火) 16:18:13.73 ID:???
>>976
そんなに悔しかったのか?www
後だし釣り宣言ほど恥ずかしいものはないんだがwwww
979Name_Not_Found:2011/05/24(火) 16:21:08.24 ID:???
>>971を翻訳してくれ
980Name_Not_Found:2011/05/24(火) 17:13:48.41 ID:???
「いつまでも割れwindowsを使ってるのは気が引けるからUbuntuにしたらテキストの選択が出来なくなったんだけど、どうするの?」

ってこと。
981Name_Not_Found:2011/05/24(火) 17:17:20.35 ID:???
OSの話はスレ違い
982Name_Not_Found:2011/05/25(水) 03:35:46.20 ID:NNaTPDR6
classがaaaのdivの中にあるidがbbbのものは # や . を使ってどう指定できますか?
983Name_Not_Found:2011/05/25(水) 03:43:59.14 ID:???
div.aaa #bbb
984Name_Not_Found:2011/05/25(水) 04:47:43.02 ID:Y7P/3aQ3
キタっ、SEO対策に使っても削除しないブログ
http://www.c-recipe.biz/
985Name_Not_Found:2011/05/25(水) 19:48:13.27 ID:???
986Name_Not_Found:2011/05/25(水) 19:52:40.31 ID:???
キタっ、検索エンジンスパム
http://www.c-recipe.biz/
987Name_Not_Found:2011/05/25(水) 20:06:53.60 ID:???
ある書籍のサンプルで、これでも動作しましたが、下から4行目<h1 class="text">は、
おそらく<h1>の間違いでしょうかね?<h1>タグと<p>タグをスタイル指定するって趣旨のサンプルです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/htm14/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>サンプルページだよ</title>
<style type="text/css">
h1 {
font-family: Arial;
font-size: 16pt;
font-weight: 100;
font-style: italic;
}

p {
font-family: "メイリオ";
font-size: 10pt;
font-weight: 700;
font-style: normal;
}
</style>
</head>
<body>
<h1 class="text">Font Family</h1>
<p>スタイルシートでスタイルを変更した例です。</p>
</body>
</html>
988Name_Not_Found:2011/05/25(水) 23:28:55.56 ID:???
>>987
別にクラス名を使用してないだけで、間違いではないでしょ。
989Name_Not_Found:2011/05/26(木) 00:08:55.55 ID:???
>>988
ありがとうございます。
間違いというか、サンプルとしては<h1>として記述するのが普通ですよね?というのが一番の疑問だったの
ですが、そんなもの書籍を見なきゃわからないですよね。

このサンプルが出る部分まで、この本class=""の""の中は、<style/><style>のなかで記述されてるか、
タグの中で新しく定義?する方法しか解説が無く、いきなり単発ででてきた"text"はなんぞ?と思ったのです。

同書で自分が見落としてる部分があるかも知れないし、この記述が別に普通ならそれが理解できるよう勉強
します。
990Name_Not_Found:2011/05/26(木) 06:33:12.80 ID:???
>>989
確かに勉強用のサンプルとしては、混乱の元かもね。
このサンプルだけでいうと、クラスの有無はスタイルに影響ないってだけ。

ちなみに、pにも同じクラス名をつければ、h1とp共通のスタイルを定義できる。
991Name_Not_Found:2011/05/26(木) 10:08:34.55 ID:???
>>980次スレは・?
992Name_Not_Found:2011/05/26(木) 10:31:14.88 ID:???
おまえが建てろぼけが
993Name_Not_Found:2011/05/26(木) 18:55:23.95 ID:???
ふる
994Name_Not_Found:2011/05/27(金) 18:51:21.67 ID:???
どあ
995Name_Not_Found:2011/05/28(土) 04:16:29.95 ID:???
てぃゅ
996Name_Not_Found:2011/05/28(土) 05:40:02.22 ID:???
次スレきたな
埋め
997Name_Not_Found:2011/05/28(土) 12:18:05.64 ID:???
CSS初心者スレッド=10th=
http://hibari.2ch.net/test/read.cgi/hp/1306489752/l50
998 忍法帖【Lv=1,xxxP】 :2011/05/29(日) 11:11:40.14 ID:???
梅テスト
999 忍法帖【Lv=1,xxxP】 :2011/05/29(日) 13:27:13.45 ID:???
埋め
1000 忍法帖【Lv=1,xxxP】 :2011/05/29(日) 13:29:14.67 ID:???
1000ならオレ億万長者になっちゃうぅううう\(^o^)/
10011001
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。