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

CSS初心者スレッド＝1 ..

2:Name_Not_Found
12/07/28 07:58:11.59
《過去スレ》
CSS初心者スレッド＝10th＝
ｽﾚﾘﾝｸ(hp板)
CSS初心者スレッド＝9th＝
ｽﾚﾘﾝｸ(hp板)
CSS初心者スレッド＝8th＝
ｽﾚﾘﾝｸ(hp板)
CSS初心者スレッド＝7th＝
ｽﾚﾘﾝｸ(hp板)
CSS初心者スレッド＝6th＝
ｽﾚﾘﾝｸ(hp板)
CSS初心者スレッド＝5th＝
ｽﾚﾘﾝｸ(hp板)
CSS初心者スレッド＝４ｔｈ＝
ｽﾚﾘﾝｸ(hp板)
CSS初心者スレッド＝3rd＝
ｽﾚﾘﾝｸ(hp板)
CSS初心者スレッド＝2nd＝
ｽﾚﾘﾝｸ(hp板)
CSS初心者スレッド＝1st＝
ｽﾚﾘﾝｸ(hp板)

≪各種仕様≫
URLﾘﾝｸ(hp.vector.co.jp)
URLﾘﾝｸ(www.y-adagio.com)
URLﾘﾝｸ(www.d-toybox.com)
URLﾘﾝｸ(www.w3.org)

3:Name_Not_Found
12/07/28 14:51:25.41
　　　＿＿＿
　　(＼ ∞ ﾉ　　
　　　ヽ)＿ﾉ　
└∩──∩┘
　ヽ(`･ω･´)ﾉ < １乙　貴男にこれをあげよう・・・

4:Name_Not_Found
12/07/31 20:15:00.76
CSSは時期尚早

5:Name_Not_Found
12/08/03 20:52:13.69
　　 /^^ヽ
　　（｡・-・）　ﾔｯﾎ
　　ﾟし-J
　　（｡・-・）.｡ｏＯ( お～い )
　　ﾟし-J

6:Name_Not_Found
12/08/04 08:57:22.48 A9QYtn1I
このスレの過疎ぶりを見ると抗いようのないCSS廃止への流れが実感できるね

7:Name_Not_Found
12/08/04 13:11:35.57
ネタにしては面白くもなんともないが

8:Name_Not_Found
12/08/07 00:57:56.85
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:Name_Not_Found
12/08/07 09:04:59.66 ti3A3O8/
30分やって1キルしか取れないnoodですがよろしくお願いします

10:Name_Not_Found
12/08/08 00:07:25.14
最近はheaderとかfooterとかarticleとかいうタグがあるのあか？

11:Name_Not_Found
12/08/09 06:21:30.20
>>10
HTMLにはバージョンがあって、その3つは最新版のHTML5で導入された

12:Name_Not_Found
12/08/09 21:49:08.75
>>8
footer{
height:100%; ←これいらん
}

13:Name_Not_Found
12/08/11 17:37:16.92
>>12
いや付ける癖を付けといた方がいいよ

14:Name_Not_Found
12/08/12 17:12:37.94
>>13
つけない方がいい

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

16:Name_Not_Found
12/08/13 13:24:18.39
どうせheightの中身がないとかそういうオチだろ
autoの意味を調べてくれば仕様だとわかるよ

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

18:質問
12/08/16 22:40:58.29 vWXTqk1D
①common.css
②general.css
③system.css

それぞれの違いを教えてください

19:質問
12/08/16 22:41:41.95 vWXTqk1D

と

に

挟まれている内容をcssで編集するとき

<style type="text/css">
と
</style>
の間にどのように記述したらいいでしょうか・・・？

20:Name_Not_Found
12/08/17 00:51:21.81
ゾンビエスケープの動画みて
CSS買ってみるか悩んでるんだけど
まだ人いる？

21:Name_Not_Found
12/08/17 04:16:41.92
買ってこい !

22:Name_Not_Found
12/08/17 08:25:35.10
>>18
ファイル名が違う

>>19
CSSは内容を編集する仕組みではないし、
そのような要素選択はできない

23:Name_Not_Found
12/08/18 03:06:17.86
>>19
知らんがな

24:Name_Not_Found
12/08/20 16:08:35.34
ＣＳ：Ｓ内でチャットができないんだけど直し方だれかわからない？

25:Name_Not_Found
12/08/23 03:22:13.89 ugnfZGiu
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:Name_Not_Found
12/08/24 19:22:57.82
>>25
何を根拠に30pxを20pxの空きと判断したんだ？
あとmarginとpaddingは全くの別物

27:Name_Not_Found
12/08/25 00:50:48.59 T39PscHN
質問です。これができないのはどうしてでしょうか。

a:visited img{
opacity:0.5;
}

28:Name_Not_Found
12/08/25 12:11:14.01
>>27
ブラウザがIEとかいうオチじゃないの？

29:Name_Not_Found
12/08/25 13:06:15.25 T39PscHN
>>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:Name_Not_Found
12/08/25 13:25:21.26
>>29
a:visited img{border:5px solid green;}も効かないわけだがｗ
visited擬似クラスはアンカー要素のみが対象だから効かないのが仕様のはず

31:Name_Not_Found
12/08/25 13:52:14.78 T39PscHN
>>30
緑ボーダー効きませんか？わたしの環境では各ブラウザで効いています。

a img{border:1px solid blue;}
a:visited img{border:5px solid green;}
としてみたところ、既訪リンクが「1pxだけどgreen」という謎状態で表示されました。
「:visitedはリンクの色を変える用途にしか使わないだろ」って前提なんですかね。

だとすれば、:visitedにおいて、opacityだけじゃなくいま試してみたvertical-alignなども効かない理由がわかる気がします。
Operaで効いてしまっているのは、むしろおかしなことだって理解でいいのかな。

32:Name_Not_Found
12/08/25 15:29:50.55
>>31
とりあえずFxについては
URLﾘﾝｸ(dev.mozilla.jp)
>訪問済みリンクは、文字、背景、アウトライン、ボーダー、SVG の線と塗りといった、配色のみ変えられるようにします。
これじゃねーかな
その他ブラウザは知らん

33:Name_Not_Found
12/08/25 18:43:03.02 T39PscHN
>>32
理解できました！ありがとうございました。

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

34:Name_Not_Found
12/08/26 06:12:01.73
CSS,HTMLともに全くの知識皆無です。

PHPで動作するアップローダーを探して
入れてみました。
（URLﾘﾝｸ(www.k-php.com)）

そこでこのアップローダーに枠を作って（広げて）
説明文を入れたいのですがどうすればいいのでしょう。

35:Name_Not_Found
12/08/26 06:57:33.09
>>34
自分で試してわからなかったのならともかく
ゼロから作れってのはスレチ

36:Name_Not_Found
12/08/26 07:13:06.96
>>34
パッと見で回答するけど

<table align="center" width="60%" cellpadding="4" cellspacing="1" bgcolor="#D0D0D0">

のwidthのパーセンテージ増やしてみろ

>>35と同じく遺憾の意

37:Name_Not_Found
12/08/29 00:41:55.36
width:1280pxにしてると下にスクロールバー？がでるのはどうしてですか？

38:Name_Not_Found
12/08/29 01:07:52.24
横1280pxのモニタで最大化してるときってこと？
ブラウザウィンドウには枠があるじゃない

39:Name_Not_Found
12/08/29 08:32:40.57
加えて、widthはコンテンツ領域の幅であって、その外側にある、
padding・border・marginの幅を含まないので、これらの設定次第で、
ウィンドウが考慮しなければならない幅は1280pxを超える可能性もある

先走って書くが、誰もがウィンドウサイズを最大にして見てるわけじゃない
1600*900以上のモニタも普及しているが、幅は閲覧者に任せてやって
max-widthだってもう普通に使えるのよ

40:Name_Not_Found
12/08/29 23:58:30.54
1280pxだろうがなんだろうが描画域が収まらなかったらスクロールバーが出るよ。
っていう返答じゃだめなの？

41:Name_Not_Found
12/08/30 09:24:02.40
それはだめなの？ってわざわざ聞くようなことなの？

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

43:質問
12/09/01 10:11:15.69 MpoF6/w+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

ドクタイプを上記にしています。

text-shadowがCSSで反映されないのですが、ドクタイプに原因はありますか？

44:Name_Not_Found
12/09/01 10:43:40.01
意味がわからない

45:Name_Not_Found
12/09/01 22:59:34.58
htmlのverとcssのverは別。
どういう環境で反映されないのかを伝える術を知らないのであれば
ポテンシャル的にこの先学ぶだけ無駄だから辞めときな。

質問をする前に「どうすれば回答者に意図が伝わるか、環境を伝えれるか」っていう
基本的プロセスぶっ飛ばすヤツは要らない。

46:Name_Not_Found
12/09/04 16:05:30.49
CSSって何なんですか？
wiki見てもわからなかった

47:Name_Not_Found
12/09/04 16:42:06.73
>>46
文字の色変えたり、枠で囲ったりするやつ

48:Name_Not_Found
12/09/04 18:01:45.56
HTMLの見た目を定義するもの
もう少し具体的に聞いた方がよい答えもらえるよ

49:Name_Not_Found
12/09/05 07:59:09.12
というかwiki（pedia？）見ただけで完結しちゃいかんわ

50:Name_Not_Found
12/09/12 21:52:15.83 gDfWs/qu
URLﾘﾝｸ(cdn.uploda.cc)
画像（上）は、<p>タグにボーダースタイルで下線をつけたものです。
画像（下）のように、全ての文字の下＋文字が無くても、その段落の終わりにまで下線をひくことは、CSSで可能ですか？

※<span>にして下線をかけると、文字の下にしか下線がつかなかったので、イメージと少し違いました。

<p>でも<span>でも特にこだわらないので、何か方法があったら教えて下さい。

51:Name_Not_Found
12/09/13 00:31:12.79
text-decorationが挙動じゃないならfont-sizeから幅計算して背景でrepoeatすればいいんじゃん。

52:Name_Not_Found
12/09/13 13:03:37.13
マルチは帰れ

53:Name_Not_Found
12/09/15 22:26:37.85
創価死ね
創価死ね
創価死ね
創価死ね　
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね

54:Name_Not_Found
12/09/18 15:09:29.16
<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:Name_Not_Found
12/09/18 18:35:55.70
>>54
<font color="red">昆虫</font>
<font color="blue">カブトムシ、クワガタ</font>
<font color="green">特徴、食べ物</font>

俺はお前みたいにarticleやらsection分けしない
h1を大量に使うのも意味不明

56:Name_Not_Found
12/09/19 01:18:19.28
>>54
セクションの見出しはhtml5仕様書では
・h1だけ使う
・セクションの入れ子に合わせて見出しランクのを使う
の2つが推奨されているのでどっちを使ってもいいようです

URLﾘﾝｸ(www.mdn.co.jp)
＞セクショニング要素を使って明示的にセクションの範囲をマークアップすると、もはやh1 ～h6 要素の数字に
＞意味はないということだ。アウトラインは、あくまでもセクショニング要素の入れ子の深さで決まる。

見出しのランクによってスタイルを変えたいならばh1だけで書かれたhtml5よりh1～h6で明示的に書いたほうがCSSを書きやすいと思います
それともh1だけで書かなければならない理由などあるのでしょうか？

57:Name_Not_Found
12/09/19 08:03:02.12
>>54
article > h1
article > section > h1

と子セレクタで深さを示すことができる
h1要素のみでとするかどうかは制作者次第

>>55
ネタにしては全然面白くない

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

59:Name_Not_Found
12/09/23 21:03:50.37
こんなヨレヨレレイアウトは無理ですう

60:Name_Not_Found
12/09/23 21:56:25.36
そんなこと言わずにおしえておくれよう

61:Name_Not_Found
12/09/23 22:11:13.88
で、ソースどうなってて何によってブラウザでの位置がずれる原因になってんの

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

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

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

65:Name_Not_Found
12/09/24 11:56:58.07
書き間違いじゃないの、としか

66:Name_Not_Found
12/09/24 12:07:01.90 y1wEYNtf
>65
プログラムで動的に行数が増えているだけなので、書き間違えってのはちょっとありえないんです。

67:Name_Not_Found
12/09/24 12:25:16.23
だったら益々CSSの問題じゃなくてJSの問題じゃないのｗ

68:Name_Not_Found
12/09/24 13:12:50.86 y1wEYNtf
>67
diffとって行数以外違いがないのも確認してます…

69:Name_Not_Found
12/09/24 13:14:38.94
>>666
書き間違えじゃないのってのはCSSのことだがそっちも確認しろよ
というか行数以外違いがないのが駄目なんでは

70:Name_Not_Found
12/09/24 14:20:57.37 y1wEYNtf
>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:Name_Not_Found
12/09/24 14:51:00.83
1行目で固めるならtable-layout: fixedにするとか
というか最初からソース書かんかい

72:Name_Not_Found
12/09/24 14:56:07.04
>>70
内容によって押し広げてる状態だったらwidthは最小値の設定しかしないまで正常

73:Name_Not_Found
12/09/24 14:57:03.28
>>70
最小値の設定しかシナイので、だった
しかしwidth指定するならcolにしれ

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

75:Name_Not_Found
12/09/24 15:13:52.12
URLﾘﾝｸ(webdev-nekodama.xii.jp)
一瞬これかなと思った

76:Name_Not_Found
12/09/24 15:17:37.64
>>74
ベタHTMLでならないんならJSの問題
というかならないと思う

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

78:Name_Not_Found
12/09/24 15:26:38.75
いやJSで生成してるんだろｗ

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

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

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

82:Name_Not_Found
12/09/24 16:06:49.84
最近はそうね
だからどっちにしろベタに作れって

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

84:Name_Not_Found
12/09/24 16:22:38.24
CSSの問題じゃなくなってるし
スレチ

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

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

87:Name_Not_Found
12/09/24 17:42:38.23
質問です
divに背景色をつけて横線として使ってます
widthを指定して表示できるようになりましたが
本文の右端で切れてしまいます

↓こういうふうにしたいんですが

あいうえおかきくけこ
---------------------------------- 続きはここ

↓こうなってしまいます

あいうえおかきくけこ
--------------------------
続きはここ

divで作った横線は「こ」の右端で切れて
「続きはここ」が改行されてしまいます

本文があるセルにwidthを指定すれば
強引に右端まで表示できるようになりますが
divは1つの要素として解釈されないのでしょうか

88:Name_Not_Found
12/09/24 20:00:16.62
セルってのはテーブルのtd要素のことをいうんだが。
何がしたいのかいまいちわからん、ソースを提示して欲しい

89:Name_Not_Found
12/09/24 20:43:15.52
<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:Name_Not_Found
12/09/24 21:02:29.68
>>89
そもそもhtmlがおかしいので正しいのにしてくださいとしか

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

92:Name_Not_Found
12/09/24 21:43:16.06
なぜかFireFoxとIEでは挙動が違うのですが
何となくわかってきました
ヒントありがとうございました！

93:Name_Not_Found
12/10/01 23:33:55.39
質問なのですが、cssで子要素に特定の条件があった場合親要素にも適用させるという記述はできるのでしょうか？

例
<li><a>hoge1</a></li>
<li><a id="hogeID">hoge2</a></li>
上記の場合で2行目の<li>にも#hogeIDと同様のcssを適用させたい。
仕様上<li>には個別にclassやidを追記できない。

94:Name_Not_Found
12/10/01 23:36:14.82
>>93
無理

95:Name_Not_Found
12/10/02 08:26:16.70
しばらーく待てば使えるようになるかもしれない

?li > #hogeID

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

97:Name_Not_Found
12/10/08 00:14:15.01
外部スクリプトからinnerHTMLか何かで書き込まれる内容に、styleが含まれます。
「padding:0; margin:0;」とされるため、周辺とずれて違和感があります。
これを無効化する、もしくはデフォルトに指定する方法はありませんか。

固定値で試してみたんですが、IE9だと、margin:0 0 0 1.5em;、
IE6だと、margin:0 0 0 2em;で揃うので、たぶん他のブラウザもバラバラな
気がするんですよね。

98:Name_Not_Found
12/10/08 00:17:50.52
外部スクリプトの指定の方法による

99:Name_Not_Found
12/10/08 03:20:48.41
input type="number"
の中身を中央揃えするにはどうすればよいでしょうか？

100:Name_Not_Found
12/10/08 03:26:00.45
ブラウザ依存だからなんともだけどtext-alignきかないのであればpaddingで調整できないっけ？

101:Name_Not_Found
12/10/08 04:26:00.57
>>100
むお…いじってたらtext-align効くようになりました。何だったんだろう。
しかし

|　６　 |　９　 |　３　 |　２　 |
|　２◆|　０◆|　０◆|　０◆|

のように、単なる<td></td>と、<td><input type="number"></td>を混在させて、そのうえで数字の位置を揃えたいのです。
(わかりづらいですが、◆がスピンボタン)

スピンボタンのサイズはブラウザによって違う(ないのもあるし)　と考えると、どうしたらいいのか…。
いっそ自作して上下にボタンを置いたほうがいいのかなぁ。

102:Name_Not_Found
12/10/08 16:32:34.98
>>98
できる場合はどうやるの？
固定値での再設定はできた。

103:Name_Not_Found
12/10/08 17:25:21.69
>>101
ブラウザ統一したいならlabelとかつかって自作するのが手っ取り早い。

104:Name_Not_Found
12/10/10 07:16:50.85
transform-origin:0%;
transform: scaleX(0.5);

で、テーブルのセル内要素の幅を半分にしたのですが、
親要素(セル)の幅が縮まってくれません。
どうしたらよいでしょうか…？

105:Name_Not_Found
12/10/12 01:45:30.59
７８９
４５６
１２３

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

106:Name_Not_Found
12/10/12 01:59:51.88
その前にpositionじゃダメな理由を聞かせてもらおうか

107:Name_Not_Found
12/10/12 02:29:28.88
範囲選択div.floatRight*じゃだめなの

108:Name_Not_Found
12/10/12 04:24:24.44
>>106
position:は、スマートフォンからだとよろしくないと聞いたので…
あと、文字サイズを変更した場合にちょっと。

>>107
ええと…？？
::selection {float:right;}
みたいな感じでしょうか？(これだとうまくいきませんが…)

109:Name_Not_Found
12/10/16 18:27:16.16
CSS3のセレクタで、親要素を選択するものってないんでしょうか？

例えば「input:checkedの親であるdiv」など…

110:Name_Not_Found
12/10/16 19:59:08.77
>>109
CSS 4で導入される予定
?div > input:checked

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

112:Name_Not_Found
12/10/30 10:17:11.51
書き方自体は別に間違ってはいないよ

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

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

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

116:Name_Not_Found
12/10/31 09:36:57.23
>>115
特定の文字列に対する指定はcssでは無理
一つ一つclass指定するのが面倒なら
java scriptとかでやったらいいんじゃないかな

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

118:Name_Not_Found
12/10/31 15:51:49.87
jQueryを使うのが手っ取り早そうだな
$('td:contains("Yes")').css('color', 'blue');
$('td:contains("No")').css('color', 'red');

119:Name_Not_Found
12/10/31 21:19:07.94
>>116
ありがとうこざいました!

120:Name_Not_Found
12/10/31 21:20:06.49
すみませんスクロールしてませんでした > <
>>116-118皆さんありがとうこざいました

121:Name_Not_Found
12/11/07 16:21:48.48
>>116
学生さんなのかな？
デジタル写真に法的な証拠能力は無いわけだが

122:Name_Not_Found
12/11/07 16:53:54.97
？？

123:Name_Not_Found
12/11/07 16:53:54.80
いったいどうした

124:Name_Not_Found
12/11/07 16:59:48.66
薬物取引の暗号だから相手するな

125:Name_Not_Found
12/11/08 12:48:59.17
floatを使いdivを左右に分けて、
それをさらにdivでくくってborderをつけています。

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

つたない説明で申し訳ありませんが、
どうぞよろしくおねがいします。

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

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

って事かな

128:Name_Not_Found
12/11/08 14:44:15.72
答えの前になっちゃうけど、もしそうならfloatを使わない方法で

Ａには　position:relative;
Ｂには　position:absolute; height:100%; width:n;
Ｃには　position:absolute; top:0; height:100%; left:n;

でＢの横幅がn(pxでも%でも)ならＣにleft:n;と書いて同じだけ横にずらす

内容に応じてＢとＣの高さは変わるしどちらか高い方に合わせて低い方の高さも同じになる
これでどうかな？
あまり自信ないけど…

129:125
12/11/09 13:03:01.68
レス遅れて申し訳ありません
clearfixでググって見つかった方法にて解決しました

floatを使った時にclearfixをしないと
親要素が子要素？を囲んでくれないみたいでした。
ご教示有難うございました！

130:Name_Not_Found
12/11/11 13:00:17.28
質問すみません。擬似フレームのことでどなたかご教授ください。

現在ヘッダ、左メニュー、コンテンツ、右メニュー、フッタと
上段1段、中段3段、下段1段の5カラムのページを作っています。
このカラムで中段のコンテンツのみスクロールできる擬似フレームサイトを作りたいのです。

とりあえず作り方としてはfixedを使って作ろうと思っているのですがなかなか上手くいきません。
overflow:auto;だと出来はするんですが、これはどちらかというと擬似インラインフレームですし
何より縦の自由度が微妙だと思うので使いたくないです。

どなたか良い作り方を教えて下さい。よろしくお願いします。

131:Name_Not_Found
12/11/11 13:53:45.90
誰か>>125を超訳して

132:Name_Not_Found
12/11/11 14:25:01.18
CSSを1から教えて下さい

133:Name_Not_Found
12/11/11 14:36:15.39 dJ/1eOq1
>>132
とりあえず有料の講習会行くといいよ。
6万くらい出せば一通り教えてくれる。

134:Name_Not_Found
12/11/11 14:39:24.88
たけえ

135:Name_Not_Found
12/11/11 14:55:24.27 dJ/1eOq1
>>134
自習すれば本代だけで済むけど、時間かかるよ。

136:Name_Not_Found
12/11/11 15:11:46.29
教えてもらえば早いってことか？

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

138:Name_Not_Found
12/11/11 16:25:40.12
>>131
clearfixで解決してるんだから要はそういう問題だったんだろ

139:Name_Not_Found
12/11/11 16:29:57.29
講習会詳しく

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

141:Name_Not_Found
12/11/11 17:46:09.61 U3AG01ra
>>139
検索して、最寄りで自分の習いたいアイテムを網羅してるか確認すればいいと思う。

142:Name_Not_Found
12/11/11 21:23:09.14
>>138
ごめんみすった>>130だった。

143:Name_Not_Found
12/11/19 10:18:27.19
URLﾘﾝｸ(www.moejinja.com)
このサイトは中国の日本向け通販サイトですが
フォントが中国っぽくなっています。

CSSを見る限り、フォントが中国っぽくなる要素が
無いように思えるのですが、どうして中国っぽい
フォントが適用されているのでしょうか。

144:Name_Not_Found
12/11/19 10:22:33.79
>>143
CSSを見る限り普通にfont-familyがsimsunになってます

145:143
12/11/19 10:30:31.04
>>144
あれー見逃してたのか
あるいがとうございました

146:Name_Not_Found
12/11/19 15:17:19.17
日本語がんばれ

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

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

149:Name_Not_Found
12/11/26 20:47:23.93
>>148
そのボックスの親要素に背景画像を配置

150:Name_Not_Found
12/11/27 08:59:55.95
>>149 その親がbodyですorz

151:Name_Not_Found
12/11/27 09:02:37.89
そのbodyに背景画像

152:Name_Not_Found
12/11/27 09:43:09.32
>>151
bodyにはもう別の背景画像がありまs…

153:Name_Not_Found
12/11/27 09:45:32.18
画像くっつけりゃいいだろ

154:Name_Not_Found
12/11/27 09:49:13.86
あ、くっつけかたとか聞くなよ、スレチだからな

155:Name_Not_Found
12/11/27 11:44:03.19
>>152
関係するとこは簡単な構造なんだし
ある程度出来るできないの判断つくみたいだから
できれば関連するとこコピぺしてくんないかな？
意図的じゃないと思うけど情報後出し後出しみたいなっちゃって疲れるわw

本題だけどJavaScriptで巻物画像用のdivをappendしちゃうのはどう？
動的に別のdivを追加するということね

javasciptでも特にjqueryが使えるなら
$(包みたいdiv).wrap("<div class=makimono"></div>")
てな感じで一発なんだが

156:Name_Not_Found
12/11/27 13:26:13.75
てかhtmlでdiv1個追加すりゃいいだけじゃね

157:Name_Not_Found
12/11/27 13:30:57.66
>>156
>>147

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

159:Name_Not_Found
12/11/28 06:51:48.72
>>158
html側が悪いんじゃね?

160:Name_Not_Found
12/11/28 10:01:13.55
>>158
ちょっと状況が良くわからない。「幅」「改行」「ガタガタ」の3つの単語から連想するにこんな感じの状況？

あいうえおかきくけこさしす
せそ
あいうえおかきくけこさしす
せそ
あいうえおかきくけこさしす
せそ

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

162:Name_Not_Found
12/11/28 11:20:31.13
学校課題を2chで解決しようとは・・・
アホは学校いかずに働け。

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

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

165:Name_Not_Found
12/11/28 15:47:57.88
>>160
そんな感じのです。

せそとあいうの行間を統一したいのです

166:Name_Not_Found
12/11/28 16:42:34.27
>>165
ひょっとして
<p>あいうえおかきくけこさしすせそ</p>
<p>あいうえおかきくけこさしすせそ</p>
<p>あいうえおかきくけこさしすせそ</p>
みたいになってる？<p>じゃなくて<li>とか<div>とかでも同じだが

であれば<p>内はline-heightの値で行間が決まり、
<p>と<p>の間はmarginやpaddingで行間（とはいわないが）が決まる
marginとpaddingを共にゼロにすればオケ

てかソース貼れよと

167:Name_Not_Found
12/11/28 16:57:22.74
div>p.s120

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

168:Name_Not_Found
12/11/28 17:02:33.00
>>167
div>p.s120
ならdivのマージンとか0にしてもしょうがない
div*4>p.s120
とか
p.s120*4
なら>>166で解決できる可能性がある

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

170:Name_Not_Found
12/11/29 13:40:00.16
失敗してるんだろとしか言えん

171:Name_Not_Found
12/11/29 14:41:45.87
その通りでした
自分のうっかりミスだったみたいです

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

173:Name_Not_Found
12/12/01 00:21:19.65
>>172
なんじゃーそのCSSはｗ
基礎からやり直しｗ
やり直した？ならhtmlもおせーてくんないとわかんないよ

174:Name_Not_Found
12/12/01 01:13:21.20 B9JWW/YO
むずかしいですね
こんかなんじでしょうか
<div>
<div class="center"><img src></div>
</div>

.center {margin;0 auto:}
.center {position:abusolute;
top:50%;
left:;50%; }
こんなかんじですね

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

176:Name_Not_Found
12/12/01 02:04:33.42
>>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:Name_Not_Found
12/12/01 02:26:25.89
優しすぎて泣いた

178:Name_Not_Found
12/12/01 07:18:39.59
margin-left: auto;
margin-right: auto;
じゃあいけんの？

179:Name_Not_Found
12/12/01 10:11:18.03
まいったな・・・

180:Name_Not_Found
12/12/01 11:26:36.54
>>179
気にすんなってお前はよくやった

181:Name_Not_Found
12/12/01 11:39:09.47
2chMate 0.8.3.17 dev/LGE/L-01D/4.0.4

182:Name_Not_Found
12/12/01 12:27:50.24
>>178
それのだめな理由も176に書いてあるよ

183:Name_Not_Found
12/12/01 12:33:33.77
div.centerに幅が指定してあればautoでイイけどそうじゃないからね

184:Name_Not_Found
12/12/01 15:57:10.13
>>176
ありがとうございました
勉強になりました

185:Name_Not_Found
12/12/02 07:37:30.53
<div id="center"><img src></div>

#center { text-align: center; }

じゃあいけんの？

186:Name_Not_Found
12/12/02 12:03:59.30
>>185
それも176に書いてあるがな(´･ω･｀)

187:Name_Not_Found
12/12/02 22:59:02.31
centerっていうidはやめてくれ　真似するのが出る

188:Name_Not_Found
12/12/03 00:22:16.24 erBmYrs9
>>185
idはページ内に一回しか現れてはいけないことになってる。

189:Name_Not_Found
12/12/23 15:05:34.05
お休み ?

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

191:Name_Not_Found
12/12/24 21:21:37.40
ここはCSSについてのスレです
RSSのスレじゃありません

192:Name_Not_Found
12/12/24 21:33:05.74
すみません
聞きたかったのはRSSじゃなくてブログロールのことでした

どのようにCSSをいじれば記事下のアマゾン広告の間にブログロールを表示できるのでしょうか

193:Name_Not_Found
12/12/25 00:26:17.04 oM527gVi
jsちゃうんかな

194:Name_Not_Found
12/12/25 08:02:47.93
そういうHTML構造とCSSにすればとしか言えない
もう少し周りがわかるように情報提供できない？

195:Name_Not_Found
12/12/25 13:21:09.41 Ifc7SBX9
Windows8にしたのですが、IE10だと背景画像のリピートがされません。
その他のブラウザでは表示できるのですが、
なにかIE10に不具合があるのでしょうか？（互換表示も同じです）
コード自体は以下の通り、シンプルな記述です。

body{
background-image: url(body.gif);
}

196:Name_Not_Found
12/12/25 13:59:20.04
background-repeat: repeat; 入れても無理なら問題だな

197:Name_Not_Found
12/12/25 15:08:56.04
>>194
言葉足らずで申し訳ありません

URLﾘﾝｸ(blog.livedoor.jp)

このブログのように記事内のアマゾン広告と本文の間にブログロールを挿入したいのです
試しにHTMLの<$ArticleBodyMore$>の入れてみましたが、思うようにいきませんでした

198:Name_Not_Found
12/12/25 15:48:05.61
CSS関係ないな。PHPってか、livedoorブログのプラグインの話になってくる。

199:195
12/12/25 15:55:45.50 Ifc7SBX9
>>196
やっぱり変わりません。
もしかして私のPCだけおかしいのですかね？
ググってもそういう情報がありませんでした。

200:195
12/12/25 16:12:27.08
原因がわかりました。

IE10のインターネットオプションの
「アクセラレータによるグラフィック」の
「GPUレンダリングでなく、ソフトウェアレンダリングを使用する」
にチェックを入れたら、背景画像が正しく表示されました。

ブラウザの設定が原因のようですが、
デフォルトではチェック入ってないのに気づきませんでした・・・。

201:Name_Not_Found
12/12/25 21:40:49.12
結論：IEは糞、IEは使用禁止

202:Name_Not_Found
12/12/25 22:10:17.30
ま　た　I　E　か　！

203:Name_Not_Found
13/01/01 14:29:11.73
すみません
上のほうで出ていてcssではないのは承知しているのですが
このように記事本文のアマゾン広告の上にRSSを設置するにはどうすればいいのでしょうか
よかったら教えてください

URLﾘﾝｸ(inazumanews2.com)

204:Name_Not_Found
13/01/01 21:42:26.66
なんで無関係だと分かっているのに聞くのだろう
そもそも知ってても誰も答えないよ、スレ違いだから

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

206:Name_Not_Found
13/01/04 09:52:02.11
すみません
誤爆しちゃいました

207:Name_Not_Found
13/01/11 23:02:42.63
text-overflowを設定すると、IE8、9ではtitle属性を勝手に設定してしなうみたいなんだけど、どうにかして
こいつをこっちで指定したtitle属性にできないでしょうか？

jQueryを使って、title属性を上書きしたのですが、IEだとかってに
「あいう..」みたいに上書きされちゃいます。
（firefoxだと、ちゃんと「にちゃんねる」が表示される）

<div id="hoge" style="text-overflowの記述は省略します。" title="にちゃんねる">あいうえお</div>

次ページ