2013年01月Web制作12: CSS初心者スレッド＝12th＝ (232) TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▼
【好評発売中】Microsoft Expression【part2】 (909)
ホームページ作ったらどうやって宣伝してる？ (485)
◇ツール関連総合スレッド・Web制作方面◇ (369)
WEB制作の仕事依頼マッO (450)
CSS初心者スレッド＝12th＝ (232)
【SEO】Bing対策 パート１【MSN】 (306)

CSS初心者スレッド＝12th＝


1 ：2012/07/28 ～ 最終レス ：2013/01/16
CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。
※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。
《関連スレ》
Webサイト制作初心者用質問スレ part230
http://toro.2ch.net/test/read.cgi/hp/1339311306/
《前スレ》
CSS初心者スレッド＝11th＝
http://toro.2ch.net/test/read.cgi/hp/1327663847/
CSS初心者スレッド＝12th＝ (dat落ち)
http://toro.2ch.net/test/read.cgi/hp/1341746420/

2 ：
《過去スレ》
CSS初心者スレッド＝10th＝
http://toro.2ch.net/test/read.cgi/hp/1306489752/
CSS初心者スレッド＝9th＝
http://hibari.2ch.net/test/read.cgi/hp/1287470663/
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初心者スレッド＝４ｔｈ＝
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/
≪各種仕様≫
http://hp.vector.co.jp/authors/VA022006/css/
http://www.y-adagio.com/public/standards/tr_css2/toc.html
http://www.d-toybox.com/spec/CSS2.1/appendixC/
http://www.w3.org/Style/CSS/current-work

3 ：
　　　＿＿＿
　 　(＼ ∞ ﾉ　　
　　　ヽ)＿ﾉ　
└∩───∩┘
　 ヽ(`･ω･´)ﾉ < １乙　貴男にこれをあげよう・・・

4 ：
CSSは時期尚早

5 ：
　　 /^^ヽ
　　（｡・-・）　ﾔｯﾎ
　　 ﾟし-J
　　（｡・-・）.｡ｏＯ( お～い )
　　 ﾟし-J

6 ：
このスレの過疎ぶりを見ると抗いようのないCSS廃止への流れが実感できるね

7 ：
ネタにしては面白くもなんともないが

8 ：
html {
height:100%;
}
body {
height:100%;
}
footer {
height:100%;
background: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title></title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<article>
<p>aaaaa<br>aaaaa<br>aaaaa</p>
</article>
<footer></footer>
</body>
</html>
footerの部分が猛烈に縦長になってスクロールバーが出てしまいます。
画面にきっちり収まるようにするにはどうすればよいのでしょうか？

9 ：
30分やって1キルしか取れないnoodですがよろしくお願いします

10 ：
最近はheaderとかfooterとかarticleとかいうタグがあるのあか？

11 ：
>>10
HTMLにはバージョンがあって、その3つは最新版のHTML5で導入された

12 ：
>>8
footer{
height:100%; ←これいらん
}


13 ：
>>12
いや付ける癖を付けといた方がいいよ

14 ：
>>13
つけない方がいい

15 ：
background-repeat: repeat-y;
で背景繰り返し表示させる時に、
height: auto;
だと表示されないのは、そういう仕様でしょうか？
height: 300px;
とか、具体的に数字を指定すると繰り返しで表示されるのですが。

16 ：
どうせheightの中身がないとかそういうオチだろ
autoの意味を調べてくれば仕様だとわかるよ

17 ：
しっつもーん
文字の上に透過画像をdivで置いても下のリンクとか押せるようにできないですかね？
透過画像は全画面を覆ってます。

18 ：
①common.css
②general.css
③system.css
それぞれの違いを教えてください


19 ：
<!--mainArea START-->
と
<!--mainArea END-->
に
挟まれている内容をcssで編集するとき
<style type="text/css">
と
</style>
の間にどのように記述したらいいでしょうか・・・？


20 ：
ゾンビエスケープの動画みて
CSS買ってみるか悩んでるんだけど
まだ人いる？

21 ：
買ってこい !

22 ：
>>18
ファイル名が違う
>>19
CSSは内容を編集する仕組みではないし、
そのような要素選択はできない

23 ：
>>19
知らんがな

24 ：
ＣＳ：Ｓ内でチャットができないんだけど直し方だれかわからない？

25 ：
iPhoneシミュレータで確認していると左右のpaddingで右側だけ10px足りないのですが、
何がいけないのでしょうか。以下ソースです（適宜省略します）。
#contents {padding:0 20px;}
input {width:100%;}
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<article id="contents">
<input type="text">
</article>
上記だとフォームの左側は20pxのマージンがありますが、右側は10pxしか空いていません。
#contents {padding:0 30px 0 20px;}
こうすると左右20pxの空きになります。

26 ：
>>25
何を根拠に30pxを20pxの空きと判断したんだ？
あとmarginとpaddingは全くの別物

27 ：
質問です。これができないのはどうしてでしょうか。
a:visited img{
opacity:0.5;
}

28 ：
>>27
ブラウザがIEとかいうオチじゃないの？

29 ：
>>28
ありがとうございます。現行 Firefox 14.0.1 です。
セレクタが a:visited だけとか、a img だけ、img だけなら問題なく表示されます。
-moz-opacityプロパティも試しましたがダメでした。
IE(filter),Chrome,Safariもダメでした。
が、Operaならできました！
てことはブラウザの実装の問題でしょうか。
そこまで高度な指定でもないと思ったんですけど…。
a:visited img{border:5px solid green;} だと各ブラウザで効くので、opacityに問題があるっぽい。
a img{opacity:0.5 !important;} だと各ブラウザで効くので、visited疑似クラスに問題があるっぽい。

30 ：
>>29
a:visited img{border:5px solid green;}も効かないわけだがｗ
visited擬似クラスはアンカー要素のみが対象だから効かないのが仕様のはず

31 ：
>>30
緑ボーダー効きませんか？わたしの環境では各ブラウザで効いています。
a img{border:1px solid blue;}
a:visited img{border:5px solid green;}
としてみたところ、既訪リンクが「1pxだけどgreen」という謎状態で表示されました。
「:visitedはリンクの色を変える用途にしか使わないだろ」って前提なんですかね。
だとすれば、:visitedにおいて、opacityだけじゃなくいま試してみたvertical-alignなども効かない理由がわかる気がします。
Operaで効いてしまっているのは、むしろおかしなことだって理解でいいのかな。

32 ：
>>31
とりあえずFxについては
ttps://dev.mozilla.jp/2010/04/plugging-the-css-history-leak/
>訪問済みリンクは、文字、背景、アウトライン、ボーダー、SVG の線と塗りといった、配色のみ変えられるようにします。
これじゃねーかな
その他ブラウザは知らん

33 ：
>>32
理解できました！ありがとうございました。
既訪リンクをわかりやすくするためのユーザースタイルに使いたかっただけなので、
（色を変えられるテキストに比べて、画像だと区別しにくかったのでopacityを使おうと思いました）
セキュリティ対策のせいで適わないのはちょっと歯がゆい気がしますが、仕方ないですね。

34 ：
CSS,HTMLともに全くの知識皆無です。
PHPで動作するアップローダーを探して
入れてみました。
（http://www.k-php.com/script/uploda/）
そこでこのアップローダーに枠を作って（広げて）
説明文を入れたいのですがどうすればいいのでしょう。

35 ：
>>34
自分で試してわからなかったのならともかく
ゼロから作れってのはスレチ

36 ：
>>34
パッと見で回答するけど
<table align="center" width="60%" cellpadding="4" cellspacing="1" bgcolor="#D0D0D0">
のwidthのパーセンテージ増やしてみろ
>>35と同じく遺憾の意

37 ：
width:1280pxにしてると下にスクロールバー？がでるのはどうしてですか？

38 ：
横1280pxのモニタで最大化してるときってこと？
ブラウザウィンドウには枠があるじゃない

39 ：
加えて、widthはコンテンツ領域の幅であって、その外側にある、
padding・border・marginの幅を含まないので、これらの設定次第で、
ウィンドウが考慮しなければならない幅は1280pxを超える可能性もある
先走って書くが、誰もがウィンドウサイズを最大にして見てるわけじゃない
1600*900以上のモニタも普及しているが、幅は閲覧者に任せてやって
max-widthだってもう普通に使えるのよ

40 ：
1280pxだろうがなんだろうが描画域が収まらなかったらスクロールバーが出るよ。
っていう返答じゃだめなの？

41 ：
それはだめなの？ってわざわざ聞くようなことなの？

42 ：
聞くというより1280pxでスクロールバーが出るとかって質問の仕方が意味不明だから、
出されてない情報想定して答える必要があるのかってことじゃん。

43 ：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ドクタイプを上記にしています。
text-shadowがCSSで反映されないのですが、ドクタイプに原因はありますか？

44 ：
意味がわからない

45 ：
htmlのverとcssのverは別。
どういう環境で反映されないのかを伝える術を知らないのであれば
ポテンシャル的にこの先学ぶだけ無駄だから辞めときな。
質問をする前に「どうすれば回答者に意図が伝わるか、環境を伝えれるか」っていう
基本的プロセスぶっ飛ばすヤツは要らない。

46 ：
CSSって何なんですか？
wiki見てもわからなかった

47 ：
>>46
文字の色変えたり、枠で囲ったりするやつ

48 ：
HTMLの見た目を定義するもの
もう少し具体的に聞いた方がよい答えもらえるよ

49 ：
というかwiki（pedia？）見ただけで完結しちゃいかんわ

50 ：
http://cdn.uploda.cc/img/img50508564411dd.png
画像（上）は、<p>タグにボーダースタイルで下線をつけたものです。
画像（下）のように、全ての文字の下＋文字が無くても、その段落の終わりにまで下線をひくことは、CSSで可能ですか？
※<span>にして下線をかけると、文字の下にしか下線がつかなかったので、イメージと少し違いました。
<p>でも<span>でも特にこだわらないので、何か方法があったら教えて下さい。

51 ：
text-decorationが挙動じゃないならfont-sizeから幅計算して背景でrepoeatすればいいんじゃん。

52 ：
マルチは帰れ

53 ：
創価R
創価R
創価R
創価R　
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R

54 ：
<article>
　<h1>昆虫</h1>
　<section>
　　<h1>カブトムシ</h1>
　　<section>
　　　<h1>特徴</h1>
　　　<p>～説明～</p>
　　</section>
　　<section>
　　　<h1>食べ物</h1>
　　　<p>～説明～</p>
　　</section>
　</section>
　<section>
　　<h1>クワガタ</h1>
　　<section>
　　　<h1>特徴</h1>
　　　<p>～説明～</p>
　　</section>
　　<section>
　　　<h1>食べ物</h1>
　　　<p>～説明～</p>
　　</section>
　</section>
</article>
アウトライン一段目　昆虫
アウトライン二段目　カブトムシ、クワガタ
アウトライン三段目　特徴、食べ物
「昆虫」を赤文字、「カブトムシ、クワガタ」を青文字、「特徴、食べ物」を緑文字にするCSSの書き方を教えて下さい
idやclassを使わずセレクタで指定する方法を希望です
それと、見出しにそれぞれにスタイルを指定する時は見出しの一つ一つにclassを書くほうがいいのか、またはsectionを使っての見出しでh1だけのセクション分けはせずh1、h2、h3をった方がいいのかもあわせて答えてくれると嬉しいです

55 ：
>>54
<font color="red">昆虫</font>
<font color="blue">カブトムシ、クワガタ</font>
<font color="green">特徴、食べ物</font>
俺はお前みたいにarticleやらsection分けしない
h1を大量に使うのも意味不明

56 ：
>>54
セクションの見出しはhtml5仕様書では
・h1だけ使う
・セクションの入れ子に合わせて見出しランクのを使う
の2つが推奨されているのでどっちを使ってもいいようです
ttp://www.mdn.co.jp/di/articles/2432/?page=8
＞セクショニング要素を使って明示的にセクションの範囲をマークアップすると、もはやh1 ～h6 要素の数字に
＞意味はないということだ。アウトラインは、あくまでもセクショニング要素の入れ子の深さで決まる。
見出しのランクによってスタイルを変えたいならばh1だけで書かれたhtml5よりh1～h6で明示的に書いたほうがCSSを書きやすいと思います
それともh1だけで書かなければならない理由などあるのでしょうか？

57 ：
>>54
article > h1
article > section > h1
と子セレクタで深さを示すことができる
h1要素のみでとするかどうかは制作者次第
>>55
ネタにしては全然面白くない

58 ：
floatを使ったボックスレイアウトで質問なんですが
http://cdn.uploda.cc/img/img505eef6f3964b.jpg
上記の画像のようにヘッダ部分にサイトタイトルとgoogleのサイト内検索を配置するような場合
文字とスクリプトを横に並べる方法について教えてください。
positionで位置を調整していたんですが、ブラウザによって位置がけっこう変わってしまいます。
ヘッダのボックスを左右に分割することも考えたんですが、できれば1つのままで対処したいと思っています。

59 ：
こんなヨレヨレレイアウトは無理ですう

60 ：
そんなこと言わずにおしえておくれよう

61 ：
で、ソースどうなってて何によってブラウザでの位置がずれる原因になってんの

62 ：
すみません、解決しました！
positionは実は悪くなくて、検索フォームで設定する文字数の幅の扱いがブラウザ毎に違うみたいで
それで表示が違って見えていました。（positionを疑ってごめんよ～
フォームのテキストボックスを文字数ではなくてpxで指定することで解決しました。
ありがとうございました。

63 ：
form関係は基本ブラウザ依存だからsafariやchromeでへんなことなってなければいいね。
ただのtextでfileとかつかってなさそうだから問題なさそうだけど。

64 ：
IE9でテーブルの行数が増えるとcssに記載したwidthの指定が無視される…
10行ぐらいだと問題なく反映されるんだけど、
40行ぐらいになるとして反映されずにレイアウトが崩れる
厳密には同一のテーブルが4つあるから160行ぐらいあるとはいえ、なぜ行数が増えると反映されない。
Firefoxやchrom、IE8では起きないんだけど、こういう現象が起こる原因って何かあるでしょうか？

65 ：
書き間違いじゃないの、としか

66 ：
>65
プログラムで動的に行数が増えているだけなので、書き間違えってのはちょっとありえないんです。

67 ：
だったら益々CSSの問題じゃなくてJSの問題じゃないのｗ

68 ：
>67
diffとって行数以外違いがないのも確認してます…

69 ：
>>666
書き間違えじゃないのってのはCSSのことだがそっちも確認しろよ
というか行数以外違いがないのが駄目なんでは

70 ：
>69
行数以外違いがないのがだめっていうのはどういう状態なんでしょうか？
現状は下記のようなものがあり(列数はもう少し多いですが)、以下繰り返しの行数が増えるとthのclassの指定が反映されなくなる感じなんですが…
やってることとしては言ってしまえば、Excelの分割なので実際には同じものが4つ出力されている感じです。
hoge.css
=====
.wi80 {
width: 80px;
}
.wi180 {
width: 180px;
}
=====
表示ページの問題個所
=====
<table>
　<tr>
　 　<th class="wi80">項目1</th><th class="wi180">項目2</th><th class="wi180">項目3</th><th class="wi180">項目4</th>
</tr>
--以下行数分繰り返し
　 <tr>
　 　<td><input></td>
　 　<td><select><option value="0">0</option><option value="1">1</option></select></td>
　 　<td>値3</td>
　 　<td>値4</td>
　</tr>
--
</table>
=====

71 ：
1行目で固めるならtable-layout: fixedにするとか
というか最初からソース書かんかい

72 ：
>>70
内容によって押し広げてる状態だったらwidthは最小値の設定しかしないまで正常

73 ：
>>70
最小値の設定しかシナイので、だった
しかしwidth指定するならcolにしれ

74 ：
>71
すいません、冗長かなと思ったので…
fixedとかテーブル関連のcssをいろいろと調べてやってみます。
>72
それならわかるんですが、逆に縮むんです。
180確保したいのに、50ぐらいしか確保されないために
レイアウトがぐったぐたになってしまうといった感じです

75 ：
http://webdev-nekodama.xii.jp/css/hack.php?h=white-space
一瞬これかなと思った

76 ：
>>74
ベタHTMLでならないんならJSの問題
というかならないと思う

77 ：
>76
問題が起こっているときにはjs動いてないです。
現状はとりあえず、サーバで表示データ作成し、動きとかレイアウトとかだけを見てるところです。
ページを開いた状態で、ある一定以上の行数があれば崩れて、そうでなければ崩れないって状態なので。
それでIE9のみ表示がおかしくなってるから？？？ってなってたんです。

78 ：
いやJSで生成してるんだろｗ

79 ：
>78
だからしてませんって。
実装予定としては、繰り返し部分をajaxで更新したり、スクロール同期をとったりとかする予定ですが、
現状jsがそもそも画面内に存在してません。

80 ：
プログラムで動的に行数が増えているって言ってるのは一体
それじゃなくてベタで同じソース作れよってことだろう

81 ：
>80
動的と言ったらすべてjsになるのがwebなんでしょうか？サーバ側の実装で行数を増やすのも動的だと思いますが。
サーバ側で生成した文字列（テーブル）をそのまんまhtmlに4回出力しているだけです。

82 ：
最近はそうね
だからどっちにしろベタに作れって

83 ：
>82
あなたの言うべたが理解できません。
1.SQLで該当するデータを抽出
2.テーブルのth部分を生成
3.その件数分テーブルのtr要素を作成
4.それを4回出力
5.出力結果をhtmlとして送信
これいじょうどうやったらべたに実装できるんですか？申し訳ありませんが、教えていただけますか？

84 ：
CSSの問題じゃなくなってるし
スレチ

85 ：
IE9特有のCSSバグかと言われると微妙。
データベースから読み込んだデータ（特に40個目あたり）がうまくエスケープできてないとか、そういう可能性を疑っちゃう。

86 ：
なんにせよこのままだとエスパー能力がないと無理そうだから
実際のサイトを提示して欲しいところだな

87 ：
質問です
divに背景色をつけて横線として使ってます
widthを指定して表示できるようになりましたが
本文の右端で切れてしまいます
↓こういうふうにしたいんですが
あいうえおかきくけこ
---------------------------------- 続きはここ
↓こうなってしまいます
あいうえおかきくけこ
--------------------------
続きはここ
divで作った横線は「こ」の右端で切れて
「続きはここ」が改行されてしまいます
本文があるセルにwidthを指定すれば
強引に右端まで表示できるようになりますが
divは1つの要素として解釈されないのでしょうか

88 ：
セルってのはテーブルのtd要素のことをいうんだが。
何がしたいのかいまいちわからん、ソースを提示して欲しい

89 ：
<table>
<td>
あいうえおかきくけこ
<div class="aaa"></div><a href="URL">続きはここ</a>
</td>
</table>
.aaa {
width: 500px;
height: 3px;
float: left;
}
tableとtdにwidth="600"などと入れれば
divで作った横線がきちんと表示されますが
こういったことをせずに
右側が切れることなく表示させたいんです

90 ：
>>89
そもそもhtmlがおかしいので正しいのにしてくださいとしか

91 ：
>>89
<table>
<tr>
<td>
あいうえおかきくけこ
<div style="border-left: 500px black solid; text-align: right;"><a href="URL">続きはここ</a></div>
</td>
</tr>
</table>

92 ：
なぜかFireFoxとIEでは挙動が違うのですが
何となくわかってきました
ヒントありがとうございました！

93 ：
質問なのですが、cssで子要素に特定の条件があった場合親要素にも適用させるという記述はできるのでしょうか？
例
<li><a>hoge1</a></li>
<li><a id="hogeID">hoge2</a></li>
上記の場合で2行目の<li>にも#hogeIDと同様のcssを適用させたい。
仕様上<li>には個別にclassやidを追記できない。

94 ：
>>93
無理

95 ：
しばらーく待てば使えるようになるかもしれない
?li > #hogeID

96 ：
>>94 >>95
そうですが特定の親で子に適用できるからその逆もできると思っていましたが出来ないんですね。
ありがとうございました。

97 ：
外部スクリプトからinnerHTMLか何かで書き込まれる内容に、styleが含まれます。
「padding:0; margin:0;」とされるため、周辺とずれて違和感があります。
これを無効化する、もしくはデフォルトに指定する方法はありませんか。
固定値で試してみたんですが、IE9だと、margin:0 0 0 1.5em;、
IE6だと、margin:0 0 0 2em;で揃うので、たぶん他のブラウザもバラバラな
気がするんですよね。

98 ：
外部スクリプトの指定の方法による

99 ：
input type="number"
の中身を中央揃えするにはどうすればよいでしょうか？

100 ：
ブラウザ依存だからなんともだけどtext-alignきかないのであればpaddingで調整できないっけ？

101 ：
>>100
むお…いじってたらtext-align効くようになりました。何だったんだろう。
しかし
|　６　 |　９　 |　３　 |　２　 |
|　２◆|　０◆|　０◆|　０◆|
のように、単なる<td></td>と、<td><input type="number"></td>を混在させて、そのうえで数字の位置を揃えたいのです。
(わかりづらいですが、◆がスピンボタン)
スピンボタンのサイズはブラウザによって違う(ないのもあるし)　と考えると、どうしたらいいのか…。
いっそ自作して上下にボタンを置いたほうがいいのかなぁ。

102 ：
>>98
できる場合はどうやるの？
固定値での再設定はできた。

103 ：
>>101
ブラウザ統一したいならlabelとかつかって自作するのが手っ取り早い。

104 ：
transform-origin:0%;
transform: scaleX(0.5);
で、テーブルのセル内要素の幅を半分にしたのですが、
親要素(セル)の幅が縮まってくれません。
どうしたらよいでしょうか…？

105 ：
７８９
４５６
１２３
これをコピペしたら「１２３４５６７８９」になるようにしたいのですが、
position:を使う以外に何か方法はないでしょうか？

106 ：
その前にpositionじゃダメな理由を聞かせてもらおうか

107 ：
範囲選択div.floatRight*じゃだめなの

108 ：
>>106
position:は、スマートフォンからだとよろしくないと聞いたので…
あと、文字サイズを変更した場合にちょっと。
>>107
ええと…？？
::selection {float:right;}
みたいな感じでしょうか？(これだとうまくいきませんが…)

109 ：
CSS3のセレクタで、親要素を選択するものってないんでしょうか？
例えば「input:checkedの親であるdiv」など…

110 ：
>>109
CSS 4で導入される予定
?div > input:checked

111 ：
自作style.cssの冒頭で
@import url("normalize.css");して、
以降またstyle.cssに
body{font-family: ***;…と通常通り記述していくやり方は誤りですか？
自作部分をnormalize.cssに書き加えていくべきなんでしょうか

112 ：
書き方自体は別に間違ってはいないよ

113 ：
>>112
間違ってないけど玄人から見るとちょっとなあって感じでしょうか
自分用なので問題なく解釈してくれるならこのままいくことにします
レスありがとうございました

114 ：
正解はないけどそのやり方も一般的だと思うよ
ノーマライズとかリセットはどんなサイト作る時も不変のもので、style.cssはサイトごと
フォントファミリーはサイトごとに変えたいからstyle.cssに
・・・と位置づければおかしくない

115 ：
すみません
<tr><td>Yes</td></tr>
<tr><td>No</td></tr>
がランダムに続く表があるのですが、YesとNoの色分けを行う場合
class指定以外に良い方法はありますか?

116 ：
>>115
特定の文字列に対する指定はcssでは無理
一つ一つclass指定するのが面倒なら
java scriptとかでやったらいいんじゃないかな

117 ：
:contains擬似クラスが該当しそうだが、セレクタ規定から外された
JavaScript（×java script）に頼るしかないかな

118 ：
jQueryを使うのが手っ取り早そうだな
$('td:contains("Yes")').css('color', 'blue');
$('td:contains("No")').css('color', 'red');

119 ：
>>116
ありがとうこざいました!

120 ：
すみませんスクロールしてませんでした > <
>>116-118皆さんありがとうこざいました

121 ：
>>116
学生さんなのかな？
デジタル写真に法的な証拠能力は無いわけだが

122 ：
？？

123 ：
いったいどうした

124 ：
薬物取引の暗号だから相手するな

125 ：
floatを使いdivを左右に分けて、
それをさらにdivでくくってborderをつけています。
floatで右に分けたdivの高さがが内容によって変わってくるので、
borderをつけたくくりのdivもその高さに合わせて変えたいなと思うのですが
なぜか高さがすごく狭くなってしまいます。
height:autoにしたりしても変わらず、
height:○○○pxとか指定してあげないとだめみたいです。
これを内容に応じて高さを変えるにはどうすればいいでしょうか？
つたない説明で申し訳ありませんが、
どうぞよろしくおねがいします。

126 ：
ちょっと状況がよくわかんないのでアレだけど
とりあえずclearfixでググって見て
解決しないようならもう一度質問してみて

127 ：
>>125
ボックスＡの中にボックスＢとボックスＣを横並びで配置
ＢとＣの高さは内容に応じて可変だけど
高くなったボックスに低い方のボックスの縦幅を合わせて同じにしたい
って事かな

128 ：
答えの前になっちゃうけど、もしそうならfloatを使わない方法で
Ａには　position:relative;
Ｂには　position:absolute; height:100%; width:n;
Ｃには　position:absolute; top:0; height:100%; left:n;
でＢの横幅がn(pxでも%でも)ならＣにleft:n;と書いて同じだけ横にずらす
内容に応じてＢとＣの高さは変わるしどちらか高い方に合わせて低い方の高さも同じになる
これでどうかな？
あまり自信ないけど…

129 ：
レス遅れて申し訳ありません
clearfixでググって見つかった方法にて解決しました
floatを使った時にclearfixをしないと
親要素が子要素？を囲んでくれないみたいでした。
ご教示有難うございました！

130 ：
質問すみません。擬似フレームのことでどなたかご教授ください。
現在ヘッダ、左メニュー、コンテンツ、右メニュー、フッタと
上段1段、中段3段、下段1段の5カラムのページを作っています。
このカラムで中段のコンテンツのみスクロールできる擬似フレームサイトを作りたいのです。
とりあえず作り方としてはfixedを使って作ろうと思っているのですがなかなか上手くいきません。
overflow:auto;だと出来はするんですが、これはどちらかというと擬似インラインフレームですし
何より縦の自由度が微妙だと思うので使いたくないです。
どなたか良い作り方を教えて下さい。よろしくお願いします。

131 ：
誰か>>125を超訳して

132 ：
CSSを1から教えて下さい

133 ：
>>132
とりあえず有料の講習会行くといいよ。
6万くらい出せば一通り教えてくれる。

134 ：
たけえ

135 ：
>>134
自習すれば本代だけで済むけど、時間かかるよ。

136 ：
教えてもらえば早いってことか？

137 ：
弁護士に相談するなら30分5000円。
CSSのプロに相談するならやっぱりそれくらい必要だろう。
6万の講習会や3000円のテキスト＋自習時間と比較してもお得だ。

138 ：
>>131
clearfixで解決してるんだから要はそういう問題だったんだろ

139 ：
講習会詳しく

140 ：
>>136
ID, クラス、タグの再定義や、メニューの作り方の常套的な方法とか、個々のソフト、例えばDreamweaver の使い方とか、いちからマニュアル見ててもよくわからんこともあるから。
そういうのを短期間で詰め込んでくれるのはありがたい。帰ってからいろいろ試行錯誤すると理解が深まる。
.jQueryとかajaxとかはまた別途ってことになるだろうけど。

141 ：
>>139
検索して、最寄りで自分の習いたいアイテムを網羅してるか確認すればいいと思う。

142 ：
>>138
ごめんみすった>>130だった。

143 ：
ttp://www.moejinja.com/view.php?cid=2&tid=191
このサイトは中国の日本向け通販サイトですが
フォントが中国っぽくなっています。
CSSを見る限り、フォントが中国っぽくなる要素が
無いように思えるのですが、どうして中国っぽい
フォントが適用されているのでしょうか。

144 ：
>>143
CSSを見る限り普通にfont-familyがsimsunになってます

145 ：
>>144
あれー 見逃してたのか
あるいがとうございました

146 ：
日本語がんばれ

147 ：
一つのdiv要素に、サイズを抑えながら背景画像を適用させることってできますか？
口頭じゃ難しいんですけど…
開いた巻物みたいな画像の中に、スクロールさせる文章を配置したいんです諸事情によりHTMLの方の改変はできません…

148 ：
日本語がおかしいですねすいません
「ああああああああああああああああああああ」という文章を「あああ…」と、CSSで文章のサイズ(フォントの大きさじゃなくて、ボックスの大きさ)を小さくして、スクロールバーをつけます
ここまではいいんですが、この文章に、ボックスのサイズ以上の画像を背景画像としておきたいんですが、可能でしょうか

149 ：
>>148
そのボックスの親要素に背景画像を配置

150 ：
>>149 その親がbodyですorz

151 ：
そのbodyに背景画像

152 ：
>>151
bodyにはもう別の背景画像がありまs…

153 ：
画像くっつけりゃいいだろ

154 ：
あ、くっつけかたとか聞くなよ、スレチだからな

155 ：
>>152
関係するとこは簡単な構造なんだし
ある程度出来るできないの判断つくみたいだから
できれば関連するとこコピぺしてくんないかな？
意図的じゃないと思うけど情報後出し後出しみたいなっちゃって疲れるわw
本題だけどJavaScriptで巻物画像用のdivをappendしちゃうのはどう？
動的に別のdivを追加するということね
javasciptでも特にjqueryが使えるなら
$(包みたいdiv).wrap("<div class=makimono"></div>")
てな感じで一発なんだが

156 ：
てかhtmlでdiv1個追加すりゃいいだけじゃね

157 ：
>>156
>>147

158 ：
行間について質問なのですが
幅によって改行されたときのline-heightのスペースが大きくなって
ガタガタのレイアウトになります
どうすればいいでしょうか？

159 ：
>>158
html側が悪いんじゃね?

160 ：
>>158
ちょっと状況が良くわからない。「幅」「改行」「ガタガタ」の3つの単語から連想するにこんな感じの状況？
あいうえおかきくけこさしす
せそ
あいうえおかきくけこさしす
せそ
あいうえおかきくけこさしす
せそ

161 ：
>>155
ぶっちゃけると、学校課題でゼンガーデンを作っているのでCSSしか弄れません。HTML改変不可ではなく、CSSのみしか変更できないことを前述しておくべきでした、すいません…

162 ：
学校課題を2chで解決しようとは・・・
アホは学校いかずに働け。

163 ：
ヽ(･ω･)/ｽﾞｺｰ
ま、だとしてもなんかやり方はありそうだけどな
学校課題か、がんばれよ

164 ：
>>163
先生と相談したり、自分でCSSの教科書を買って調べたりしましたが、頭打ちになってしまいましたので、こちらで質問させていただきました
アドバイスをくださった方々、ありがとうございました。bodyには背景画像を別に使用するので難しいですが、装飾用の空きdivが複数個あるので、それになんとか適用させて見たいと思います

165 ：
>>160
そんな感じのです。
せそとあいうの行間を統一したいのです

166 ：
>>165
ひょっとして
<p>あいうえおかきくけこさしすせそ</p>
<p>あいうえおかきくけこさしすせそ</p>
<p>あいうえおかきくけこさしすせそ</p>
みたいになってる？<p>じゃなくて<li>とか<div>とかでも同じだが
であれば<p>内はline-heightの値で行間が決まり、
<p>と<p>の間はmarginやpaddingで行間（とはいわないが）が決まる
marginとpaddingを共にゼロにすればオケ
てかソース貼れよと

167 ：
div>p.s120
.s120{line-height:120%;}
こんなかんじです
ありがとうございました
divにマージンとか0にして試してみます

168 ：
>>167
div>p.s120
ならdivのマージンとか0にしてもしょうがない
div*4>p.s120
とか
p.s120*4
なら>>166で解決できる可能性がある

169 ：
ライブドラブログでブログロールをヘッダーと記事下に一つずつ設置しているのですが
ヘッダーのほうだけスクロールバーが出るように設定しているのに、記事下のほうにもスクロールバーが出てしまいます
CSSの overflow-y: scrollは消したはずなのになぜなのでしょうか？

170 ：
失敗してるんだろとしか言えん

171 ：
その通りでした
自分のうっかりミスだったみたいです

172 ：
中寄せについて教えてください
margin｛0 auto;｝では縦が中央によりません
positon{top:50%;left:50%;}でもうまくいきません
よろしくお願いします。

173 ：
>>172
なんじゃーそのCSSはｗ
基礎からやり直しｗ
やり直した？ならhtmlもおせーてくんないとわかんないよ

174 ：
むずかしいですね
こんかなんじでしょうか
<div>
<div class="center"><img src></div>
</div>
.center {margin;0 auto:}
.center {position:abusolute;
top:50%;
left:;50%; }
こんなかんじですね

175 ：
「こんなかんじ」じゃダメ
「完璧に正確」じゃないとダメ
１文字でも間違ってたら動かない世界なんだから
こういう場所に貼るソースは手入力ではなくコピペすること

176 ：
>>174
よしよし。それではソースをこう変えなさい。これで左右中央はできる
<div class="center"><img src></div>
.center { text-align: center; }
次に上下中央だが・・・これはやめとけ
「css 縦 中央」などでググるとすぐわかるがケースバイケースでやり方も千差万別、初心者にとってはいわば運転免許なしに首都高走るようなものだ
というか国際A級ライセンス持ってるドライバーでも上下中央そろえは避けて通りたい道なんだ
なので他の方法、たとえば上に余白を良い感じにちょっと空けるだけでよくね？とか、そういったデザイン上の別のアプローチを探ってみたらどうだ？
《おまけ》
margin: 0 auto;
これはボックス要素をセンター寄せしたいときに使うけど、対象はあくまで「そのボックス要素」だ
つまりdiv.centerであってimgをセンター寄せできるわけじゃない
position: absolute; top: 50%; left: 50%;
中央ということで50%にしたんだろうが、起点は左上だからこれではだめだ
ここからネガティブマージン使って中央に寄せる方法があるが首都高を（ｒｙ
《お説教》
marginのうしろの「;」は「:」、autoのうしろの「:」は「;」だ！
absoluteがabusoluteになっておる！
leftの右の「:;」はなんだ！いったい
「こんなかんじですね」じゃねー！！どんなかんじだ！

177 ：
優しすぎて泣いた

178 ：
margin-left: auto;
margin-right: auto;
じゃあいけんの？

179 ：
まいったな・・・

180 ：
>>179
気にすんなってお前はよくやった

181 ：
2chMate 0.8.3.17 dev/LGE/L-01D/4.0.4

182 ：
>>178
それのだめな理由も176に書いてあるよ

183 ：
div.centerに幅が指定してあればautoでイイけどそうじゃないからね

184 ：
>>176
ありがとうございました
勉強になりました

185 ：
<div id="center"><img src></div>
#center { text-align: center; }
じゃあいけんの？

186 ：
>>185
それも176に書いてあるがな(´･ω･｀)

187 ：
centerっていうidはやめてくれ　真似するのが出る

188 ：
>>185
idはページ内に一回しか現れてはいけないことになってる。

189 ：
お休み ?

190 ：
よくあるような記事の最後のアマソン広告の間などにある
「1001管理人より」といったようなRSSはどのようにすれば表示できるのでしょうか
よかったら教えてください

191 ：
ここはCSSについてのスレです
RSSのスレじゃありません

192 ：
すみません
聞きたかったのはRSSじゃなくてブログロールのことでした
どのようにCSSをいじれば記事下のアマゾン広告の間にブログロールを表示できるのでしょうか

193 ：
jsちゃうんかな

194 ：
そういうHTML構造とCSSにすればとしか言えない
もう少し周りがわかるように情報提供できない？

195 ：
Windows8にしたのですが、IE10だと背景画像のリピートがされません。
その他のブラウザでは表示できるのですが、
なにかIE10に不具合があるのでしょうか？（互換表示も同じです）
コード自体は以下の通り、シンプルな記述です。
body{
background-image: url(body.gif);
}

196 ：
background-repeat: repeat; 入れても無理なら問題だな

197 ：
>>194
言葉足らずで申し訳ありません
http://blog.livedoor.jp/togotan/archives/52927169.html
このブログのように記事内のアマゾン広告と本文の間にブログロールを挿入したいのです
試しにHTMLの<$ArticleBodyMore$>の入れてみましたが、思うようにいきませんでした

198 ：
CSS関係ないな。PHPってか、livedoorブログのプラグインの話になってくる。

199 ：
>>196
やっぱり変わりません。
もしかして私のPCだけおかしいのですかね？
ググってもそういう情報がありませんでした。

200 ：
原因がわかりました。
IE10のインターネットオプションの
「アクセラレータによるグラフィック」の
「GPUレンダリングでなく、ソフトウェアレンダリングを使用する」
にチェックを入れたら、背景画像が正しく表示されました。
ブラウザの設定が原因のようですが、
デフォルトではチェック入ってないのに気づきませんでした・・・。

201 ：
結論：IEは糞、IEは使用禁止

202 ：
ま　た　I　E　か　！

203 ：
すみません
上のほうで出ていてcssではないのは承知しているのですが
このように記事本文のアマゾン広告の上にRSSを設置するにはどうすればいいのでしょうか
よかったら教えてください
http://inazumanews2.com/archives/21803040.html

204 ：
なんで無関係だと分かっているのに聞くのだろう
そもそも知ってても誰も答えないよ、スレ違いだから

205 ：
2ちゃんマップかアンテナ速報のどちらかに登録しようと思う
PV3500程度のブログだったらどっちがおすすめ？

206 ：
すみません
誤爆しちゃいました

207 ：
text-overflowを設定すると、IE8、9ではtitle属性を勝手に設定してしなうみたいなんだけど、どうにかして
こいつをこっちで指定したtitle属性にできないでしょうか？
jQueryを使って、title属性を上書きしたのですが、IEだとかってに
「あいう..」みたいに上書きされちゃいます。
（firefoxだと、ちゃんと「にちゃんねる」が表示される）
<div id="hoge" style="text-overflowの記述は省略します。" title="にちゃんねる">あいうえお</div>

208 ：
あ、違う、IEだと<div>の中身のtextが「...」に書き治っちゃうんだ・・・firefoxは元の値なのに・・・・
書き換えないけど表示は「....」にするとかできないっすかね？

209 ：
角丸作りたいのですが
ie7から対応して欲しいといわれて困っています
クロスブラウザで安定している方法ってありますか？
htcふぁいるのやつは使いこなせませんでした

210 ：
>>209
8重BOXにするというアホな方法とか

211 ：
>>209
素直に画像作れば？

212 ：
上下画像で中divにボーダー入れているんですがieだけスペースが空いてしまったりしてしまいます。
詰めるといいみたいなのですがソースがちょと汚れてしまうので

213 ：
何を言っているのかわからない

214 ：
>>212
IEのアホを乗りこなすには泥臭いテクニックしかない
仕事なら尚更自分の理想より安定稼働を選ぶべき

215 ：
CSSに関してなのでこちらでも質問させていただきます。
ページの上部にナビゲーションバーを固定したいのですが使用ブラウザがIEでTransitionalで宣言しないといけない
理由があって、その場合position:fixedのプロパティ値を使用出来ません。
CSSを使用してfixed以外にナビゲーションバーを固定する良い方法はありますか？

216 ：
マルチはいけませんなあ

217 ：
>>216
http://toro.2ch.net/test/read.cgi/hp/1357950586/67
http://toro.2ch.net/test/read.cgi/hp/1357950586/66さんですか？
質問に書いてる通りTransitionalにしないといけない理由があり、その環境では効かないので。

218 ：
マルチはどの板でも叩かれるってことも知らんのか

219 ：
趣旨が合った2つのスレで聞いて何がいけないのでしょうが？煽るならID出してください。

220 ：
アホ発見

221 ：
失礼ですが何故2つのスレで自演してまで煽るのですか？喧嘩がしたいのですか？

222 ：
ただのヒマつぶしだよ

223 ：
勝手に自演にすんなし

224 ：
>>221
これ100回読んでこい
掲示板でマルチポストはなぜいけないの？
http://www.ml-info.com/weekly/archives/2009/091024o.html

225 ：
マルチして開き直る馬鹿

226 ：
paddingを指定しても画面全面にgooglemapが描画されてしまいます
CSSの問題かgooglemapの問題か判別する為に
CSSの書き方に問題がないか見てもらえますか
<div style="width:100%; height:100%; position:relative;">
　　<div style="position:absolute; top:0px; left:0px; width:100%; height:100%; padding:50px 250px 0px 0px;"></div>
　　googlemap
　　</div>
　　<div style="position:absolute; top:0px; left:0px; width:100%; height:50px;">
　　ヘッダー
　　</div>
　　<div style="position:absolute; top:50px; right:0px; width:250px;">
　　サイドバー
　　</div>
</div>

227 ：
googlemapの前の</div>は間違いです。無視してください

228 ：
>>226
そりゃ width:100%; height:100%; って指定してるんだから当然だろ
ボックスモデルについて勉強した方がいい

229 ：
ありがとうございます
内容領域の中にpaddingが含まれると思ってました
そうなると意図したレイアウトは不可能なのですね

230 ：
フォントファミリーで質問があります
ゴシックファミリーと明朝体じゃサイズが違うような気がします
高さとか変えていくんですか？

231 ：
それはフォントの個別の差であってCSSは関係ない

232 ：2013/01/16
>>229
box-sizing: border-box;
TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲
DQNが使いそうなタグ。 (240)
ＷｉｎのＩＥ６はそろそろ見捨てていいですか？ (922)
ページランクが付くまでマターリするスレ13 (701)
【ゆとり】画像掲示板が狙われています【教育】２ (651)
HP作成ソフトについて語って (310)
おまいらどういう流れでWEBデザイナーになった？ (814)
--log9.info------------------
【HKT48】渕上舞応援スレ☆1【2期生】 (355)
放課後プリンセス３ (355)
【でらベッピン】美少女軍団dela-3【打倒ＯＳ☆Ｕ】 (253)
【愛知県】LOVEINA30応援ｽﾚ2【稲沢市】 (552)
【SKE48】磯原杏華☆14スレ【セクシー担当】 (724)
【NMB48】川上礼奈　応援スレ☆1【れなぴょん】 (905)
OS☆U応援スレッド (434)
【SKE48】江籠裕奈 Part1【ゆうちゃん】 (703)
【SKE48】須田亜香里応援スレ@ロコドル板7 (211)
【SKE48】山田澪花応援スレ【れいちゃん】 (320)
【SKE48】小林絵未梨応援スレ【えみりん】 (850)
【NMB48】オフィシャルグッズ関連スレ★21 (230)
【SKE48】二村春香応援スレ☆2【はるたむ】 (954)
【小説】まりや「『選抜総選挙()ゲーム』……？」 (288)
中国・四国地方住みのSKE48ヲタ☆２ (259)
【NMB48】沖田彩華応援スレ☆8【あ～ぽん】 (385)
--log55.com------------------
日野五気筒レンジャー
レンジャープロに排気音バルブキットを付けたい！
■旦那が・・・かも!?…でも俺様は神！(FD830談)■
【ダンプ】沖縄のトラックを語るスレ【米軍車両】
【FV】ふそうF・Tシリーズについて語ろう【FP】
◆◆◆叩けば埃が…でも俺様は神！(FD830談)◆◆◆
◆無断転載禁止！…でも神だからOK！(FD830談)◆
●●●●隆斗●隆斗●隆斗●隆斗●●●●