2ch勢いランキング アーカイブ

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


Name_Not_Found [sage] 2011/05/27(金) 18:49:12.73 ID:???
CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。

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

《関連スレ》
Webサイト制作初心者用質問スレ Part 224
ttp://hibari.2ch.net/test/read.cgi/hp/1301891537


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

《過去スレ》
CSS初心者スレッド=8th=
ttp://hibari.2ch.net/test/read.cgi/hp/1273383771/
CSS初心者スレッド=7th=
ttp://pc11.2ch.net/test/read.cgi/hp/1251527427/
CSS初心者スレッド=6th=
ttp://pc11.2ch.net/test/read.cgi/hp/1234355194/
CSS初心者スレッド=5th=
ttp://pc11.2ch.net/test/read.cgi/hp/1228900036/
CSS初心者スレッド=4th=
ttp://pc11.2ch.net/test/read.cgi/hp/1218200382/
CSS初心者スレッド=3rd=
ttp://pc11.2ch.net/test/read.cgi/hp/1212198165/
CSS初心者スレッド=2nd=
ttp://pc11.2ch.net/test/read.cgi/hp/1207202319/
CSS初心者スレッド=1st=
ttp://pc11.2ch.net/test/read.cgi/hp/1193327030/
Name_Not_Found [] 2011/05/27(金) 19:02:58.22 :u3eRIkd5
あ、立てれた。

ということで、前スレは残り少ないのでこちらで質問させてもらいます。
非常に恥ずかしい質問なんですが、外部CSSを一切読み込ませてない状況で
以下のようにしたとき、
<div style="background:#FFCC33;">
 <div style="margin-bottom:20px;">ABC</div>
</div>
<p>XYZ</p>
外側のdivの背景色(オレンジ色)が「ABC」の下に20px分伸びるのかと思ったらそうならず、
XYZの上に白いスペースが20px分できます。

これってこの挙動で正しかったでしょうか? オレンジ部分が20px伸びるのかと考えていたんですが。
また、外側のDIVにpadding:1px 0px;を指定すると最初思っていたようにオレンジ部分が20px伸びます。
(XYZはオレンジの真下にくっつくように配置されます、当たり前ですが)

なぜpadding:1px 0px;を指定したけっか正常に(?)動くのかもわかりません。

この挙動は正しいのでしょうか?
おかしいとしたら他にCSSは使っていないのですが、どんな原因が考えられるでしょうか?
すみませんが誰かご意見お願いします
Name_Not_Found [sage] 2011/05/27(金) 20:34:12.44 ID:???
すみません、解決しました
マージン相殺って奴だったみたいです、恥ずかしい。はぁー
Name_Not_Found [sage] 2011/05/28(土) 15:00:13.49 ID:???


マージン相殺というのを今日初めて知りましたが、
CSSは何のメリットがあってそういう仕様にしているのでしょうか。
Name_Not_Found [sage] 2011/05/28(土) 23:54:28.57 ID:???
 下記を読むと書いて有るかも・・・

CSS1の仕様書(W3C勧告)
ttp://www.w3.org/pub/WWW/TR/REC-CSS1
CSS2の仕様書(W3C勧告)
ttp://www.w3.org/pub/WWW/TR/REC-CSS2
CSS1仕様書の日本語訳(どら猫本舗)
ttp://www.doraneko.org/webauth/css1/
Positioning(W3Cワーキングドラフト)

 とほほより転載 ttp://www.tohoho-web.com/css/basic.htm
ttp://www.w3.org/pub/WWW/TR/WD-positioning
Name_Not_Found [sage] 2011/05/28(土) 23:55:42.80 ID:???
あっ ごめんにゃ・・・

Positioning(W3Cワーキングドラフト)
ttp://www.w3.org/pub/WWW/TR/WD-positioning
Name_Not_Found [sage] 2011/05/29(日) 00:14:47.31 ID:???

とほほ は内容もとほほだからオススメしない方がいいような。
Name_Not_Found [sage] 2011/05/29(日) 00:32:47.75 ID:???
仕様書はとほほと関係ないでしょ ? >7
Name_Not_Found [sage] 2011/05/31(火) 14:17:46.78 ID:???
10px * 10pxの範囲に
3px * 10pxの画像をrepeat-xした場合
12px表示されてはみ出るんでしょうか?
それとも画像が切れた感じで10px分になるんでしょうか?
Name_Not_Found [sage] 2011/05/31(火) 19:52:53.79 ID:???
やってみたらええやん
Name_Not_Found [sage] 2011/05/31(火) 19:55:43.81 ID:???
実際にやってみれば分かることを聞くな
Name_Not_Found [sage] 2011/05/31(火) 20:45:33.63 ID:???
きっと実行結果を見ても信用できないんだろ
筋金入りの他力本願w
Name_Not_Found [sage] 2011/06/08(水) 16:52:53.33 ID:???
IE対応する場合ってIEのみCSSを分けるべきでしょうか?
Name_Not_Found [] 2011/06/08(水) 22:07:06.97 :f6ICMU0G
リンク付き画像のボーダーを一括で0にしたいのでググったら
a img { border:none} を書けばいいということはわかったのですが
どこに書いたらいいのかわかりません
<head></head>の中に書いたら、文字として出力されてしまいました。
解決策を教えてください。
Name_Not_Found [sage] 2011/06/08(水) 22:31:06.06 ID:???

ホームページ制作入門的な本を読む
Name_Not_Found [sage] 2011/06/09(木) 00:11:38.73 ID:???

分けない方がいい
Name_Not_Found [sage] 2011/06/10(金) 19:18:42.61 ID:???
ttp://10plate.blog44.fc2.com/blog-entry-229.html
img { border-style:none; }を加えたいのですが
「スタイルシート末尾」とはどこになるのでしょうか?
一番下でいいのでしょうか?
Name_Not_Found [sage] 2011/06/10(金) 19:31:18.30 ID:???
<style type="text/css">
<!--
  ・
  ・
  ・
a img { border-style:none; }
-->
</style>

17 [sage] 2011/06/10(金) 19:33:28.59 ID:???

すいません
自己可決しますたすた・・・
Name_Not_Found [sage] 2011/06/10(金) 19:35:17.08 ID:???
回答もらっときながら自己解決って失礼だな
形だけでも礼は言っとくもんだ
17 [sage] 2011/06/10(金) 20:06:41.05 ID:???
はい
ありがとうございました
Name_Not_Found [sage] 2011/06/11(土) 11:32:02.85 ID:???

XHTMLでコメントアウトすんなw
Name_Not_Found [sage] 2011/06/11(土) 14:50:28.04 ID:???
全くだ。XHTMLならCDATAだろうが。
IEも対応するなら外部スタイルシートだろうが。
Name_Not_Found [sage] 2011/06/11(土) 19:35:57.76 ID:???
酷い回答だな
Name_Not_Found [sage] 2011/06/11(土) 23:15:58.36 ID:???
どの辺が酷い?
Name_Not_Found [sage] 2011/06/12(日) 05:04:28.79 ID:???
コメアウ
Name_Not_Found [sage] 2011/06/12(日) 05:21:18.52 ID:???
コメントアウトが適切な表現じゃないってこと?
Name_Not_Found [sage] 2011/06/12(日) 11:05:09.54 ID:???
それぐらいわかると思うが、普通はどう表現するんだ?
Name_Not_Found [sage] 2011/06/12(日) 12:26:28.28 ID:???
もうとっくに答えは出てるだろ
Name_Not_Found [sage] 2011/06/12(日) 12:42:59.23 ID:???
少なくとも以降にはないな
Name_Not_Found [sage] 2011/06/12(日) 14:14:27.52 ID:???
またDoCoMoの話かい?
Name_Not_Found [sage] 2011/06/12(日) 15:19:55.43 ID:???
DoCoMoとか関係ないだろ
XHTMLならコメントにしたら動かん
Name_Not_Found [sage] 2011/06/12(日) 18:13:26.68 ID:???
えっ ?
Name_Not_Found [sage] 2011/06/12(日) 18:53:13.24 ID:???
この流れ何度目だろ
非似XHTMLなら動くから勘違いする人が多いんだよな
明確に文法違反なのに
Name_Not_Found [sage] 2011/06/12(日) 19:04:11.98 ID:???
わからない人は Content-Type application/xhtml+xml でぐぐるといい
Name_Not_Found [sage] 2011/06/12(日) 22:58:08.06 ID:???
ドコモはstyle要素を解釈できないって話
Name_Not_Found [sage] 2011/06/12(日) 23:10:49.71 ID:???
それはコメントの話と関係ない
Name_Not_Found [sage] 2011/06/12(日) 23:11:05.12 ID:???

サーバのヘッダにこれつけないと発生しないからねぇ。
Name_Not_Found [sage] 2011/06/13(月) 00:02:33.39 ID:???
コメントアウトってstyle要素解釈しないブラウザ向けのバッドノウハウじゃないの?

拡張子.xhtmlにしてローカルで開けば、FirefoxとかはXHTMLとして解釈してくれるっぽいよ
MIMEタイプxmlで実際に使うときは拡張子.htmlにしないと、IEでダウンロードされてしまうけど
Name_Not_Found [sage] 2011/06/13(月) 02:36:11.66 ID:???

動くことと仕様を守ることは話が別
text/html で動けばいいなら空要素を閉じなくていいし、終了タグを省略していいし、属性値をクオートでくくらなくていい。HTML と変わらない。
でもはれは XHTML にする意味がないだろ
Name_Not_Found [sage] 2011/06/13(月) 03:00:20.93 ID:???
は、だから気付かない って言ってるだけだと思うが
Name_Not_Found [sage] 2011/06/13(月) 14:15:17.95 ID:???
application/xhtml+xml では style要素の内容は #PCDATA、text/html では CDATA、
つまり、マークアップ区切り文字を認識するのかしないのか、違いがある。
ただ、XHTML+text/html の場合、どう考慮するべきかは難しい。
最終的にはブラウザの実装に合わせるしかないのが現状。

どうでもいいけど、XHTMLにする意味は何?
ドコモ対策のみ?
Name_Not_Found [sage] 2011/06/14(火) 01:30:40.05 ID:???
ドコモ対策ならXHTMLにしない方がいいだろ
Name_Not_Found [sage] 2011/06/14(火) 05:06:09.27 ID:???
iモードブラウザ1.0には、CSS無しで対応しろ、と?
ある意味納得。
38 [sage] 2011/06/14(火) 06:14:49.74 ID:???

の言ってるとおりです。
仕様を守らなくていいとかそういう意味じゃないっす。
40 [sage] 2011/06/14(火) 20:57:09.47 ID:???

見当違いだったのか…、すまなかった
Name_Not_Found [sage] 2011/06/22(水) 20:35:30.25 ID:???
よく「W3C勧告に準拠」などと言われる一方で、CSSMANIA等にアップされてるサイトに対して
Web Develperで「CSSファイルの検証」を試みると、エラーがズラリと列挙されるサイトも
少ないないのですが、あまり重要視されていないということでしょうか?
Name_Not_Found [sage] 2011/06/22(水) 20:45:15.57 ID:???

重視しないサイトもあるとしか
それが多数派かどうかは知らないし、関係ない
Name_Not_Found [sage] 2011/06/23(木) 00:33:50.35 ID:???
多くのブラウザで表示させようとしてハックを使うと、バリデータは通らなくなったりする
Name_Not_Found [sage] 2011/06/23(木) 10:43:13.65 ID:???
横幅を1000pxで作る場合、以下のようなHTMLだったら
#box{width:1000px;}と単純に1000px指定するだけで問題ないですか?
もしboxにborder:1px solid #000000;を書く場合は#box{width:998px;}とborderの太さ分引くべきでしょうか?

<html>
<head>
</head>
<body>
<div id="box">
</div>
</body>
</html>
Name_Not_Found [sage] 2011/06/23(木) 11:47:09.16 ID:???

お前朝鮮人か?
句読点の位置がおかしいぞ。
Name_Not_Found [sage] 2011/06/23(木) 11:47:54.84 ID:???

2ちゃん初心者か?まあ肩の力抜けや
Name_Not_Found [sage] 2011/06/23(木) 13:21:15.52 ID:???

「1番好き」とか「第3者」とか「50歩100歩」よりはまだマシだよw
Name_Not_Found [sage] 2011/06/23(木) 19:45:44.12 ID:???

HTMLの準拠モードによって答えは違う。
Name_Not_Found [sage] 2011/06/23(木) 20:47:35.77 ID:???
54先生どもです
標準モードで作ってます
Name_Not_Found [sage] 2011/06/23(木) 21:53:53.15 ID:???

borderとmarginとpadding分は引く
Name_Not_Found [sage] 2011/06/23(木) 23:51:50.20 ID:???
質問です。
CSSで背景に画像を指定して、その画像が常に中央に来るようにしたい。
例えば横幅1000pxの画像を指定して、ブラウザを100pxに狭めても画像の中央が常に画面の中央に来るようにしたいと思っています。
この説明でわかるかな?説明が下手ですみませんがよろしくお願いします。
Name_Not_Found [sage] 2011/06/24(金) 01:39:22.48 ID:???
background-positionのこと?
Name_Not_Found [sage] 2011/06/24(金) 02:00:36.75 ID:???

敬語なのにバカにされてる感じがする
Name_Not_Found [sage] 2011/06/24(金) 02:06:06.17 ID:???

そう?
Name_Not_Found [sage] 2011/06/24(金) 07:10:09.17 ID:???

慇懃無礼って奴だな。
Name_Not_Found [sage] 2011/06/24(金) 08:21:13.01 ID:???

それと calc か
Name_Not_Found [sage] 2011/06/24(金) 09:54:13.97 ID:???

先生のゆうとおりにやってみます
ありがとうございます
Name_Not_Found [sage] 2011/06/24(金) 16:39:23.84 ID:???
質問
CSSで左側が四角で右側が三角のボックスを作りたい。

┌─
│  >
└─
こんな感じ
どうやったらいいですか?
Name_Not_Found [sage] 2011/06/24(金) 17:43:48.64 ID:???
制作会社に依頼したら出来ます
Nane_Not_Found [sage] 2011/06/24(金) 18:57:27.61 ID:???
文章主体のページで、ボディー内の本文に当る部分を#includeするようなことは
出来ないものでしょうか?
もし、できれば、管理しやすいように思うんですが。
インラインフレームじゃなくて
Name_Not_Found [sage] 2011/06/24(金) 19:24:19.48 ID:???
出来るよ
でもCSS関係ないよね
64 [sage] 2011/06/24(金) 19:26:16.48 ID:???

2chでは難しいってことですか
ありがとうございました
Name_Not_Found [sage] 2011/06/24(金) 19:30:02.36 ID:???
そうですね
質問でなく制作依頼を引き受けてくれる人はいないので難しいですね
Name_Not_Found [sage] 2011/06/24(金) 19:50:27.73 ID:???
俺に作らせてよ
Name_Not_Found [sage] 2011/06/24(金) 20:58:47.52 ID:???

CSSの斜め線はborderの角を使うんだってさ
64 [sage] 2011/06/24(金) 22:50:24.10 ID:???

よろしくお願いします
一応やってみたけどこれが限界でした


/* CSS */
.togatta_kado {
background-color: #999999;
padding: 20px;
-moz-border-radius: 20px 30px 40px 50px / 30px 40px 50px 60px; /* Firefox用 */
-webkit-border-radius: 0px 40px 40px 0px / 0px 40px 40px 0px; /* Safari,Google Chrome用 */
-o-border-radius: 20px 30px 40px 50px / 30px 40px 50px 60px; /* Opera用 */
}

/* HTML */
<div class="togatta_kado">
<p>右だけ尖った角</p>
</div>
Name_Not_Found [sage] 2011/06/25(土) 01:13:36.51 ID:???
border-radiusに接頭辞付けんな
てか三角部分のCSSは?
Name_Not_Found [sage] 2011/06/26(日) 14:17:41.85 ID:???
::selection {
background: #ffb7b7;
}

::-moz-selection {
background: #ffb7b7;
}

このようにして、選択範囲の背景色を変更しようとしています。
が、これだと<input type="text">の入力値の選択範囲には適用されないようです。
<input type="text">にも適用するには、どうしたらいいでしょうか。
Name_Not_Found [sage] 2011/06/26(日) 19:30:14.21 ID:???
使っちゃあかん
74 [sage] 2011/06/26(日) 21:01:55.04 ID:???

input要素の背景色を変更してはいけないということですか?
それとも-moz-selectionだけでなく、selectionもあまり使ってはいけないということなんでしょうか?
Name_Not_Found [sage] 2011/06/26(日) 22:09:44.93 ID:???
草案のセレクタだし、接頭辞ついてるし、の通りブラウザごとに挙動違うし
早いと思う
Name_Not_Found [sage] 2011/06/26(日) 23:39:48.75 ID:???
デザインはオナニーじゃなくて思いやり
Name_Not_Found [sage] 2011/06/27(月) 23:07:53.77 ID:???

ありがとうございます。
ベース色が暗い色のページを閲覧する際、通常の選択色だととても見難く、解決策として見つけたのがの方法でした。proxiomitronでスタイルを書き換えればいいと。初めに書いておくべきでした。すみません。

-moz-selectionをはずしてFirefoxで確認したところ、スタイルシートで云々しなくても背景が黒っぽいと選択範囲の色が反転色に変わってくれるようなので、今のところは::selectionのみを使うことにします。
あとinputの件はやっぱり無理ですかね?
Name_Not_Found [] 2011/06/28(火) 03:12:22.73 :AVodAWsP
floatレイアウトでサイドバーを付けてるページがあります。
下のようなイメージです。上下にヘッダ、フッタ(clear:both;)はありますが重要ではありません。

contents    sidebar(幅固定)
  ↓        ↓
「         「
  float:left;  float:right
        」      」

contentsの中身が文字なら全く問題なくsidebarがサイドバーとして表示されるのですが、
contentsの画面の横幅を超える大きいテーブルだった場合に、サイドバーが右下部分に表示されてしまうようです。
<- 画面幅 ->

  float:left;
        」
   「
   float:right ←サイドバーがここに移動
        」
これではサイドバーでなくフッタ右バーになってしまいます。
・コンテンツが文字列など場合はサイドバーが右端
・テーブルがある場合はサイドバーが画面からはみ出ても構わない
とかするうまい方法はあるでしょうか?
Name_Not_Found [sage] 2011/06/28(火) 03:46:33.77 ID:???

2つ目の問題がよく分からなかったけど…
サイドバーもfloat:leftにする。
一番いいのはテーブルがはみ出ないようにサイズ指定。
Name_Not_Found [sage] 2011/06/28(火) 06:00:01.95 ID:???

それだとサイドバーが下に行っちゃいませんか?

テーブルのサイズを小さくするのは無理です。
と、いうよりブラウザの横幅を小さくされたときにサイドバーが下に飛んでしまうのを何とかしたいというのが発端なので。
Name_Not_Found [sage] 2011/06/28(火) 06:22:43.66 ID:???

もう少し自分で工夫したら?
Name_Not_Found [sage] 2011/06/28(火) 22:19:35.04 ID:???

floatって単語の意味知ってるの?
Name_Not_Found [sage] 2011/06/28(火) 22:25:45.93 ID:???
浮く 浮かせる(´・ω・`)
Name_Not_Found [sage] 2011/06/28(火) 23:46:51.25 ID:???

それを知ってたらどうすればいいかもう分かるよね!(^o^)v
Name_Not_Found [sage] 2011/06/28(火) 23:58:46.41 ID:???
いちごフロートを食べるん ?
Name_Not_Found [] 2011/06/29(水) 00:46:57.37 :f5DOaIra
質問
UTF-8環境でアスキーアートを表示するための
font-family等の設定はどのようにすると良いでしょうか?
Name_Not_Found [sage] 2011/06/29(水) 15:01:03.98 ID:???
フロートって浮動小数点扱う時の型でしょ
Name_Not_Found [sage] 2011/06/29(水) 19:34:34.53 ID:???
ここで質問していいどうか分かりませんが、一応質問させて頂きます。
初心者でホームページ作成してて、
メニューのとこに小さい線がで来て、それを消したいんですが、
どう直しても消えません。
ttp://db.tt/EOITpCQ
スクリーンキャプチャで赤丸のとこ
ttp://db.tt/V9HK4IQ
CSS

#menu a menu a:linkのあたりのCSSが間違ってるでしょうか?
display:inline-block;をblockにすると、メニューの文字が一行ずつズレます。
Name_Not_Found [sage] 2011/06/29(水) 19:42:29.76 ID:???
質問するときにすぐ試せるようにttp://cssdesk.com/みたいにすぐ確認できるようなとこに張ってもらえると俺は助かる
Name_Not_Found [sage] 2011/06/29(水) 19:45:35.18 ID:???

ありがとう。出直して来ます。
あとで教えて下さい!!
Name_Not_Found [sage] 2011/06/29(水) 20:53:20.82 ID:???
ttp://cssdesk.com/ERgqw

出来ました。助けて下さい。
Name_Not_Found [sage] 2011/06/29(水) 21:17:49.73 ID:???
ttp://phpspot.org/blog/archives/2011/06/csscss_prism.html
見出しタイトルの「CSSのアドレスを入力すると使われている色の一覧をプレビューできる「CSS Prism」」
の部分の文字列が何かかっこいいんですが
これはどうやってるのでしょうか?
Name_Not_Found [sage] 2011/06/29(水) 21:39:20.22 ID:???

っ 開発ツール
Name_Not_Found [sage] 2011/06/29(水) 22:57:13.82 ID:???

まだー?
94 [sage] 2011/06/29(水) 23:06:30.11 ID:???
こっち沙希にお願いします
91 [sage] 2011/06/29(水) 23:14:45.26 ID:???

うるせーはげ!

#menu a,#menu a:link,#menu a:visited {
font-size: 18px;
text-decoration: none;
color: #b3b3b3;
background-color: transparent;
width: 100px;
height: auto;
text-align: center;
padding: 2px 5px;
display: inline-block;

}
の部分を見直せ!
Name_Not_Found [sage] 2011/06/29(水) 23:21:25.14 ID:???

見直しても分からないんだよな。
ほぼ本の丸写しなのに、上手く行かなくて涙目。
display: inline-block; ここら辺間違ってると思うが、どうやって直せばいいのかしら

ありがとう
Name_Not_Found [sage] 2011/06/29(水) 23:52:22.08 ID:???
別ディレクトリに開発環境作ってガシガシやる !  って頭は無いのか ?
Name_Not_Found [sage] 2011/06/30(木) 00:47:37.61 ID:???

お前には無理
Name_Not_Found [sage] 2011/06/30(木) 01:51:09.90 ID:???

間違ってると思うなら、
色々自分で試すなり、
ググるなり何でしないのかしら。
一発で正解にたどり着こうとは思わないことだね。
Name_Not_Found [sage] 2011/06/30(木) 03:42:55.82 ID:???
色々試した結果で上手く行かないから、聞いてるんですけど………

CSSは挫折して一年ぶり再挑戦だが、やっぱ無理でした\(^o^)/
iWebで我慢するわ
Name_Not_Found [sage] 2011/06/30(木) 05:29:57.33 ID:???

そうしてください
Name_Not_Found [sage] 2011/06/30(木) 10:33:05.08 ID:???
めでたしめでたし
103 [sage] 2011/06/30(木) 14:53:02.25 ID:???
お前らに聞いたのが間違いだったw
HTMLが間違ってた。クソか
<span></span>消したら治った
Name_Not_Found [sage] 2011/06/30(木) 14:55:23.35 ID:???
負け犬の遠吠えうぜえ
Name_Not_Found [sage] 2011/06/30(木) 18:43:27.98 ID:???
100x100のサイズの透過png、2枚をズレが無く、端が完全に一致するように重ねたいです。
CSSでこれはできるのでしょうか?できるのであれば、教えていただけると助かります。
Name_Not_Found [sage] 2011/06/30(木) 19:49:06.09 ID:???
画像を重ねる方法はまずggったの?
Name_Not_Found [sage] 2011/06/30(木) 19:53:31.71 ID:???
#hoge1 {background:url(hoge1.png); position:absolute; top:0px; left:0px; z-index:1; width:100px; height:100px;}
#hoge2 {background:url(hoge2.png); position:absolute; top:0px; left:0px; z-index:2; width:100px; height:100px;}
Name_Not_Found [sage] 2011/07/02(土) 00:40:13.47 ID:???

またおまえか
Name_Not_Found [] 2011/07/03(日) 22:04:34.21 :2Rq9N8sk
ちょっとお聞きしたいんですが、
mac版とwindows版のsafariやfirefoxはcssの解釈の仕方って違うんでしょうか??
Name_Not_Found [sage] 2011/07/03(日) 22:20:40.30 ID:???

違いますん
Name_Not_Found [sage] 2011/07/03(日) 23:32:01.72 ID:???

やっぱり違うものなんですね
macで色々作ってみた後、winで確認したらie以外動作は一緒だったので
winでの検証は必要ないのかなーと思っちゃいました

ありがとうございました
Name_Not_Found [sage] 2011/07/05(火) 11:25:25.42 ID:???
ツイートするボタン、いいねボタン、Google+1ボタンをliタグで横に並べる場合、
ul,liのスタイルはどんな風に指定するのがいいのでしょうか?
display:inline-blockしましたが、ブラウザによっては縦に並んだり、横に余計な空白ができてしまい困ってます。
Name_Not_Found [] 2011/07/07(木) 23:28:33.24 :IO9NQol+
左にメニューバーA、B、Cがあって、それを押すとメインに画像(Aを押すとAが出る)
という構造にしたいんですが、「擬似フレーム」というのを
使うしかないんでしょうか?

その場合ベースhtmlをコピーして、貼る画像の数だけ増やすと
膨大になりそうなのですがいい方法はありませんか?

それともCSSの#mainでなんとかできますか?

お願いします。
Name_Not_Found [sage] 2011/07/08(金) 02:24:35.76 ID:???
っ ECMAScript or SSI or PHP や Ruby
Name_Not_Found [sage] 2011/07/08(金) 07:47:32.48 ID:???
CSSのプロパティ値に
・コンマ区切り font-family: A, B, C
・スペース区切り background-position: center center
・スラッシュ区切り font: 100%/150% normal
がありますが、使い分けルールや優先順位はありますか
Name_Not_Found [sage] 2011/07/08(金) 08:10:39.42 ID:???

プロパティごとに違うから仕様書を確認すべし
116 [sage] 2011/07/08(金) 17:54:36.74 ID:???

ありがとうございます
Name_Not_Found [sage] 2011/07/08(金) 18:43:06.12 ID:???
ベンダープレフィックスについて各ベンダーごとの実装状況を知りたいのですが、
参考になるサイトはありますでしょうか。

例えば、あるプロパティについて
webkit系はベンダープレフィックスをつけてもつけなくても動作するが、
moz系はつけないとダメなどの情報が知りたいです。

よろしくおながいします
Name_Not_Found [sage] 2011/07/08(金) 21:47:12.49 ID:???
ベンダー接頭辞は実験的・先行実装を示すものだから
デメリットを理解した上で自分で探すものじゃないの
「つけないとダメ」という発想自体が何かおかしい
接頭辞つきのものは原則として「よく分からないなら使っちゃいけない」
Name_Not_Found [sage] 2011/07/08(金) 22:02:13.05 ID:???
いちおうこういうのもあるけど
ttp://peter.sh/experiments/vendor-prefixed-css-property-overview/

前、先行実装の-moz-opacityと正式実装のopacityの挙動が違うってことで
問題になってたような記憶があるようなないような

仕様自体がころころ変わって接頭辞付きの方が古い挙動になってることもあるから
俺も先行実装をむやみに使うのはすすめないぜ
Name_Not_Found [] 2011/07/09(土) 17:24:12.67 :aXaGahbP
なんでブラウザで統一しようとしないんだろうね
実際ブラウザがそれぞれ話し合って、cssについてひとつにまとめるべきでしょ
IEはもちろんだし、firefoxもいつまでもリンク画像に線つけるのやめて欲しい
Name_Not_Found [sage] 2011/07/09(土) 17:35:15.07 ID:???

ブラウザは一種の宗教だから、そこで統一は無理でしょ。
Name_Not_Found [sage] 2011/07/09(土) 19:00:41.76 ID:???
国際標準とか知らんの?
Name_Not_Found [sage] 2011/07/09(土) 19:58:50.22 ID:???
どうせ弱小サイトなんだから気にすんじゃねえよ
Name_Not_Found [sage] 2011/07/09(土) 20:31:41.90 ID:???

あのな、なんでもひとつにまとめちゃうとな、新しい技術の開発が無くなるか遅れるの。
いろんなものがあるから進歩すんのよ。

 多様性は進化の母  な。
Name_Not_Found [sage] 2011/07/09(土) 20:55:20.91 ID:???

いや、一つにまとまってるからCSSがあるんでしょ
ドラフト仕様に過度な期待は禁物、っていうか仕様が変動する可能性あるんだからベンダープレフィックスつけるんで正しいよ
Name_Not_Found [sage] 2011/07/09(土) 22:05:18.99 ID:???

その標準とやらも人によって解釈が違うんだよ。
だから余計に宗教臭い。
Name_Not_Found [sage] 2011/07/10(日) 04:17:24.29 ID:???
IEとNNが拡張競争やった反省からベンダー接頭辞が追加されたんだから
むやみに接頭辞付きのを宣伝して他人を巻き込まないでほしい
あれはバグフィクスとか開発者の意見調整用、アルファ版だろ

NN4とIE6の亡霊に悩まされなかった奴だけで遊んでればいいのに
think49 ◆bKk/qcAKuM [sage] 2011/07/10(日) 09:26:44.58 ID:???
ベンダー接頭辞の意義は CSS3 にあるので一読すると良いかと。
ttp://www.w3.org/TR/css3-syntax/#vendor-specific
一般に独自拡張は回避すべきですが、独自拡張が便利な状況(実験的, W3C Draft, Candidate Recommendation等)があります。
CSS3 の多くは Recommendation になっていないのでベンダー接頭辞はむしろ使うべきです。仕様にない新しい機能を実装し、CSS に推薦する場合も使うべきです。

opacity を規定する CSS Color Module Level 3 は 2011/06/07 に Recommendation になったのでベンダー接頭辞は不要ですが、Recommendation になる前の段階で実装していたならベンダー接頭辞をつけ、Recommendation になった時点でベンダー接頭辞を外すことになります。
「Recommendation になってるんだからベンダー接頭辞は外しなさいよ」って指摘なら理に適っていると思います。
ttp://www.w3.org/TR/css3-color/
Name_Not_Found [sage] 2011/07/10(日) 19:38:38.09 ID:???
2.1勧告されたの知らなかった
Name_Not_Found [sage] 2011/07/10(日) 23:33:52.73 ID:???
せっかくcss3でつくりあげたのに
w3cでは「いいんだけど・・・ふーむ」とか
言われちまいました
Name_Not_Found [sage] 2011/07/11(月) 00:41:06.58 ID:???

何のこと?
Name_Not_Found [sage] 2011/07/11(月) 01:57:54.99 ID:???
ttp://cssglobe.com/lab/easyslider1.7/01.html
このようなスライダーを作ろうとしています
スライダーの本体部分のul要素で" width:4176px; margin-left:2088px; "が設定されていますが
これはどういう意味なんでしょうか?
Name_Not_Found [sage] 2011/07/11(月) 03:00:59.68 ID:???
jQueryですね
昨今wordpressなんかで流行の
Name_Not_Found [sage] 2011/07/11(月) 03:15:54.80 ID:???

勧告済みの2.1ではなくドラフトの3を持ってきた意図はわからないが
利用者がベンダー接頭辞をむやみに使ったページを作っていたら
勧告後も接頭辞付きをサポートし続けないといけなくなるだろが

だからMozillaでも-webkit-をサポートすべきだとか
vendor-prefix considered harmfulとか言われてんだよ
本末転倒な話になりつつあんだよ
Name_Not_Found [sage] 2011/07/11(月) 06:21:48.95 ID:???

ふーむって何だよw
Name_Not_Found [sage] 2011/07/11(月) 11:33:47.16 ID:???

それスクリプト切ってると悲惨な表示になるけど・・・

Linux Fx5 NoScript
Name_Not_Found [sage] 2011/07/11(月) 19:56:04.14 ID:???
jQueryって何て発音してますか?
Name_Not_Found [sage] 2011/07/11(月) 19:57:12.95 ID:???
じぇーくえりー
Name_Not_Found [sage] 2011/07/11(月) 20:32:50.62 ID:???

通じあってない気がするなー
think49 ◆bKk/qcAKuM [sage] 2011/07/11(月) 21:36:48.64 ID:???

私の意見は「ブラウザは何でベンダー接頭辞つけるの?初めから接頭辞なしで実装すればいいじゃない。」に対する意見であって、多分あなたの意見とそれほどには違いません。
121 [sage] 2011/07/11(月) 21:54:03.51 ID:???
すみません。
質問したことをすっかり忘れていました。
教えていただいたサイト、参考にさせていただきます。
ご回答いただいた方ありがとうございました。
Name_Not_Found [sage] 2011/07/11(月) 23:03:16.75 ID:???


>ベンダー接頭辞はむしろ使うべきです

開発者と利用者のどっちが?つー部分で誤解を招きそうだったからだよ
CSS2.1には「Authors should avoid vendor-specific extensions」とあるんだから
Name_Not_Found [sage] 2011/07/11(月) 23:30:06.35 ID:???
わざわざCSS3のリンク入れてるんだからそれぐらいわかるだろ
Name_Not_Found [sage] 2011/07/11(月) 23:42:00.00 ID:???
数年前に少しかじって挫折したものです。
再度真剣にCSSを勉強しようと思うのですが、今からだとCSS3をしたほうがよいんでしょうか?
目標はある程度wpのテーマがいじれるです。
Name_Not_Found [sage] 2011/07/12(火) 23:04:05.48 ID:???
今からならCSS2とCSS3を両方。(現時点ではCSS3は半分以上のユーザが非対応なブラウザを使ってることに注意)
Name_Not_Found [sage] 2011/07/13(水) 00:05:52.32 ID:???

半々ですか…。
それならCSS2をみっちりやってから3にいく感じでやってみます。ありがとうございます
Name_Not_Found [sage] 2011/07/13(水) 07:40:29.71 ID:???
CSS3なんて覚えようとする必要ないよ
CSS2に関してもAptanaやDW使えば、プロパティ選ぶだけだから、判らなければ都度CSSの学習ページ見ればすぐ覚える
Name_Not_Found [] 2011/07/13(水) 16:07:50.08 :MknxO2g8
勧告された仕様のみを利用するという縛りについての質問です

先日、CSS 2.1 と CSS Color Module Level 3 が勧告されました
CSS 2.1 において、値に <color> が含まれているプロパティに対しては
RGBA color values 等を使っても問題ない。ということであっていますでしょうか
Name_Not_Found [sage] 2011/07/13(水) 21:57:35.01 ID:???

合ってません。
CSS3 で <color> を指定しているプロパティと組み合わせてください。
152 [] 2011/07/13(水) 23:46:53.40 :MknxO2g8

ありがとうございます
CSS 2.1 の <color> とは別物として扱うのですね

現在 CSS3 は 一部だけが勧告されている状態ですが
その勧告の color: rgba(0, 0, 0, 0.5) などは現行の CSS 2.1 と一緒に使用しても良いのでしょうか
Name_Not_Found [sage] 2011/07/14(木) 08:23:22.84 ID:???

CSS2 と CSS3 を組み合わせる事は出来ないと思って下さい。
後方互換性はありますが、仕様は別です。
CSS2 で定義されている仕様は CSS3 で再定義されます。
Name_Not_Found [sage] 2011/07/14(木) 18:10:09.22 ID:???
フルCSSという表現がよくわからないのだが・・・
Name_Not_Found [sage] 2011/07/14(木) 21:09:29.56 ID:???

CSSを最大活用するぐらいの意味しかない
Name_Not_Found [sage] 2011/07/14(木) 21:09:29.95 ID:???
div厨のことじゃね?
Name_Not_Found [sage] 2011/07/14(木) 22:07:32.09 ID:???
<div class"2年A組み">春 </div>
Name_Not_Found [sage] 2011/07/14(木) 23:17:35.67 ID:???

整形式違反
Name_Not_Found [sage] 2011/07/16(土) 00:34:41.58 ID:???
解像度変更はありがたいわ
Name_Not_Found [sage] 2011/07/16(土) 23:12:50.77 ID:???
ttp://www.kanzaki.com/book/css/3-1-6.html#s3-1-6-2
主ブロックボックスの中に直接含まれるは「ブロックボックスのみ、もしくはインラインボックスのみ」
とありますが、こういう仕様だと何かいいことあるんでしょうか?
Name_Not_Found [sage] 2011/07/16(土) 23:24:47.45 ID:???

決めなかったらブラウザ毎に動作が異なるでしょ
Name_Not_Found [sage] 2011/07/16(土) 23:30:01.66 ID:???

どこが疑問なのかわからない
こんないい仕様があるよ、とかアイデアがあるの?
Name_Not_Found [] 2011/07/17(日) 21:38:01.02 :QiofV2a+
tableかdivを下側に表示したいんですが、vertical-alignでbottomを指定しても中身しか下に表示されません。
何か方法はないんでしょうかね?
Name_Not_Found [sage] 2011/07/17(日) 22:20:37.36 ID:???
エスパーすると、position使え
Name_Not_Found [sage] 2011/07/17(日) 22:50:33.90 ID:???

質問の内容から容易に想像できるし、そんなのエスパーとは言わんw
Name_Not_Found [sage] 2011/07/17(日) 23:57:42.24 ID:???
positionアブノーマルを
90 [sage] 2011/07/19(火) 19:57:11.55 ID:???
久々また来ました。質問させて頂きます。
まだ一部分しか出来てません。。。

ttp://citywood.web.fc2.com/sites/works/bags01.html

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

会社のwindows7のIE、スレプニルだとCSS全く反映されません。(プロクシあり)
自宅のMacのOSXで、safari、Chrome、Opera、iPadのSafari、iLunaで問題なく反映されます。
(iPadのOperaは反映されません)

iPad用にCSSしか作ってないのがいけないでしょうか?
Name_Not_Found [] 2011/07/19(火) 22:18:16.39 :KrhDgo6r
<div id="oya" style="margin-left:10px">
<div id="ko"></div>
</div>

koに親のmarginを無視させたいんですが何か良い方法ってあるんでしょうか?
Name_Not_Found [sage] 2011/07/19(火) 22:22:07.73 ID:???

<div id="oya" style="margin-left:10px">
<div id="ko" style="margin-left:-10px"></div>
</div>

これでいいか?
Name_Not_Found [] 2011/07/27(水) 18:24:57.41 :K8T/UJoQ
Webデザインの基金訓練を受講してる人 Part2
ttp://yuzuru.2ch.net/test/read.cgi/dame/1308059991



飛び込みはなかったけど、チラシ配りとか。
あとちょっとでも脈ありそうな家に通うとか。住宅営業だった。

WEBの営業となるとHPまだ持ってない企業にアタックして〜
って感じなのかな
俺もぶっちゃけ独立考えてるからいろいろ想像してる。
Name_Not_Found [] 2011/07/28(木) 06:27:44.45 :YHbKR4W+
文字の長さが違う物を同じ幅にしたいのですがどうやればいいのでしょうか?

<div>
<span>ほげ</span><br>
<span>ほげほげほげほげほげほげ</span><br>
<span>This is a pen.</span>
</div>
↓↓↓

ほ               げ
ほげほげほげほげほげほげ
T h i s  i s  a  p e n .

こんな感じになってほしいのですが。
Name_Not_Found [sage] 2011/07/28(木) 07:47:05.16 ID:???

CSSでは無理だと思うな
JSならできそうだけど面倒だな
Name_Not_Found [sage] 2011/07/28(木) 07:59:20.29 ID:???

勉強が足りんぞ


letter-spacing を使いなさい
Name_Not_Found [sage] 2011/07/28(木) 08:02:24.49 ID:???
あっ ・・・

勉強が足りんぞ

  俺は2ch修行が足りんな orz
Name_Not_Found [sage] 2011/07/28(木) 08:15:05.98 ID:???

文字間を均一にすることができる?
174 [sage] 2011/07/28(木) 08:48:12.48 ID:???

出先だから仕様書は読めないんだが、widthやfont-sizeから文字間を計算して固定値を指定することは勿論出来る
だがそんな面倒な作業は現実的でないから出来ないといった
面倒な作業をJSに任せればコーディング以外は楽になる
CSSで簡単な方法があるなら申し訳ない
Name_Not_Found [sage] 2011/07/28(木) 08:57:27.27 ID:???
500px内に収めたい→文字数カウント→500/文字数 pxのletter-spacingを指定
ならわかるけど
letter-spacingは1文字の幅を指定するものだから
単純に20px指定した場合の例だと上から順に40px 240px 280pxになる
つまりletter-spacingは解決策ではない
Name_Not_Found [sage] 2011/07/28(木) 12:24:42.03 ID:???
letter-spacing は1文字の幅じゃなくて、1文字ごとの余白じゃないの?
Name_Not_Found [sage] 2011/07/28(木) 12:50:37.07 ID:???
均等割り付けしたいように見えるけど、CSS3のtext-justify使わないと難しいんじゃないかな
Name_Not_Found [sage] 2011/07/28(木) 13:37:45.66 ID:???

やってみてから言おうな
Name_Not_Found [sage] 2011/07/28(木) 13:52:23.92 ID:???
上から目線もほどほどに
Name_Not_Found [sage] 2011/07/28(木) 13:53:13.77 ID:???

なげーうんこしてねえで↓にしろ
先ずはとらいあんどえらーで勉強すろ

<div>
<p style="letter-spacing:**px;">ほげ</p>
<p style="letter-spacing:**px;">ほげほげほげほげほげほげ</p>
<p style="letter-spacing:**px;">This is a pen.</p>
</div>
Name_Not_Found [sage] 2011/07/28(木) 14:22:51.08 ID:???
text-justify: *-all-lines みたいな値は草案に無いけど
正式に勧告されたとして、強制改行が入ってる文章の均等割り付けって出来るんだろうか
Name_Not_Found [sage] 2011/07/28(木) 18:09:56.94 ID:???
pxじゃなくてemで指定するほうが環境に優しいと思います
Name_Not_Found [sage] 2011/07/28(木) 18:36:12.57 ID:???
つうかは全然均等にならんぞ
Name_Not_Found [sage] 2011/07/28(木) 18:54:48.97 ID:???
**px これ変えたらなったな
Name_Not_Found [sage] 2011/07/28(木) 18:56:06.65 ID:???
ほ               げ
ほげほげほげほげほげほげ
T h i s  i s  a  p e n .

こんなふうになったよ
Name_Not_Found [sage] 2011/07/28(木) 19:16:08.38 ID:???
はブラウザ毎に最適値が変わるけど
Name_Not_Found [sage] 2011/07/28(木) 20:19:34.88 ID:???
HTMLに依存するCSSが使いやすいわけがない
Name_Not_Found [sage] 2011/07/28(木) 21:28:43.85 ID:???

ウィンドウサイズをトライアンドエラーする訓練ですね、わかります
Name_Not_Found [sage] 2011/07/28(木) 21:53:02.25 ID:???

今どきそんな物言いするのは情弱の田舎者だけ
Name_Not_Found [sage] 2011/07/29(金) 01:30:06.07 ID:???
もしかして全部同じ数値じゃなくて個別に文字数数えて指定しろとかいうオチ?
Name_Not_Found [sage] 2011/07/29(金) 04:43:59.72 ID:???
* が何を意味するか知らない奴がいたのか・・・
Name_Not_Found [sage] 2011/07/29(金) 04:55:57.40 ID:???
いや俺プログラマーですし
正規表現だってバリバリ書きますよ
動くコードちょうだいよ
Name_Not_Found [sage] 2011/07/29(金) 05:11:35.27 ID:???
プログラマならなおさら**pxと書かれたものが同じ数値とは思わんはずだが ?
Name_Not_Found [sage] 2011/07/29(金) 05:17:27.25 ID:???
え?なんで?
それだけで違う数値なんてわからねえよww
なんでもいいってことは全部同じでもいいってことだぞ
Name_Not_Found [sage] 2011/07/29(金) 05:25:50.11 ID:???
同じで駄目なら変えてみるってのが人間の常識だよ。
Name_Not_Found [sage] 2011/07/29(金) 05:39:45.73 ID:???
答になってねーww
結局個別に指定する必要があるならJavaScriptでやれが親切な答えだったな
Name_Not_Found [sage] 2011/07/29(金) 06:39:18.07 ID:???

わかってないな
ウィンドウサイズが変われば横幅も変化するだろ
193 [sage] 2011/07/29(金) 09:33:15.31 ID:???

白痴かお前は。
俺が言ってるのは後半の9文字のことだ。
Name_Not_Found [sage] 2011/07/29(金) 12:54:22.76 ID:???
言い方一つで情報弱者ってわかるものなの?
Name_Not_Found [sage] 2011/07/29(金) 12:54:35.63 ID:???
はそれぞれの文字の幅を算出して合計したら、ってこと?
Name_Not_Found [sage] 2011/07/29(金) 12:57:35.00 ID:???
俺ものソースを見たいわ
Name_Not_Found [sage] 2011/07/29(金) 14:02:29.18 ID:???
ここは手取り足取りスレかいな・・・
Name_Not_Found [sage] 2011/07/29(金) 14:20:27.39 ID:???
できたっていってソースを出し惜しみする理由がわからないわ
Name_Not_Found [sage] 2011/07/29(金) 17:58:10.22 ID:???

これはJavaScript使って文字数計算したら完璧か?
Name_Not_Found [sage] 2011/07/29(金) 21:48:37.67 ID:???
ヒントを出したつもりなんだろうが、そのヒントが的外れだからなー
Name_Not_Found [sage] 2011/07/30(土) 01:14:14.31 ID:???
別個に指定するのがめんどくさかったから聞いたんだろうにね
Name_Not_Found [sage] 2011/07/30(土) 08:02:48.26 ID:???
ところで、質問主は逃亡かい ?
Name_Not_Found [sage] 2011/07/30(土) 08:21:18.57 ID:???
こんな流れじゃ逃亡もするわな
Name_Not_Found [sage] 2011/07/31(日) 08:32:24.63 ID:???
聞きたいことくらいちゃんと説明できないのか
Name_Not_Found [sage] 2011/07/31(日) 08:46:27.51 ID:???
見て理解できないならリアル池沼なんじゃないかと思う
Name_Not_Found [sage] 2011/07/31(日) 14:29:27.57 ID:???
(親要素の横幅 − 文字列の横幅) ÷ 文字数
を letter-spacing に指定すればいいんかな
think49 ◆bKk/qcAKuM [sage] 2011/07/31(日) 16:13:58.32 ID:???
string-length (文字数) とすれば、以下のように。

(width - padding-left - padding-right - font-size * string-length) / string-length - 1

CSS のみで定義するなら全ての単位を合わせる必要があります。
JavaScript なら getComputedStyle を使用できるので CSS で指定する単位を気にする必要がありません。
(text-indent も 0 にリセットする必要がありますね。)
ttp://hp.vector.co.jp/authors/VA022006/css/box.html#introduction-box
ttp://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle

ちなみに、自動改行しないことが前提となります。
JavaScript なら window.onresize のタイミングで再計算させることが可能ですが、筋のいい方法とは思いません。
think49 ◆bKk/qcAKuM [sage] 2011/07/31(日) 16:29:55.97 ID:???
失礼。の計算式を訂正します。

(width - padding-left - padding-right - font-size * string-length) / (string-length - 1)

# 蛇足。
CSS Text Level 3 の text-justify プロパティは が求める機能に近いですが、単語単位で均等割付してしまいます。
ttp://jsfiddle.net/UEjkm/1/
全ての文字を半角スペースで間隔を開ければ期待通りに動作しますが…。
ttp://jsfiddle.net/UEjkm/3/
Name_Not_Found [sage] 2011/07/31(日) 16:33:24.95 ID:???
その計算式って固定幅フォントが前提じゃない
think49 ◆bKk/qcAKuM [sage] 2011/07/31(日) 16:55:34.71 ID:???

CSS のみで実装するならその通りです。基準となる部分全てを固定値で指定しなければなりません。font-size を利用する都合上、固定値を使わざるを得ないので…。
JavaScript の場合は getComputedStyle で取得する単位のデファクトスタンダード(確か実装依存)が px なので固定値でなくても良いです。

でも書きましたが、私は筋のいい方法とは思ってません。Webページの利点を相殺してますからね…。
text-justify と JavaScript を組み合わせる方がまだ現実的だと思います。
Name_Not_Found [sage] 2011/07/31(日) 17:07:54.03 ID:???
強制改行無しなら、text-justify: distribute とかで出来るんじゃないかな
ttp://www.w3.org/TR/css3-text/#text-justify

の後者(半角スペース挟み)って、IEの互換表示でしか機能しないんじゃない
think49 ◆bKk/qcAKuM [sage] 2011/07/31(日) 17:07:58.44 ID:???

あ、プロポーショナルフォントのことですね。すみません誤読です。
プロポーショナルフォントの幅計算は無理なので letter-spacing を使用するなら固定幅フォントを使うしかないんじゃないでしょうか。
目測でトライアンドエラーするのはあまりにも…。
220 [sage] 2011/07/31(日) 17:11:00.02 ID:???
あ、削除された値使ってたのか
ごめん何か勘違いしてた
Name_Not_Found [sage] 2011/07/31(日) 17:19:52.36 ID:???
*-all-linesがなくなった?以上、JavaScriptでこんなんするしか無いんじゃないかな
わからんけど

ttp://jsfiddle.net/MwxG6/

・HTML


・CSS
div{
width: auto;
float: left;
}
span{
display: inline-block;
}

・JavaScript
var parent = document.getElementsByTagName('div')[0];
var parentWidth = parseInt(document.defaultView.getComputedStyle(parent, '').width);
var lines = parent.getElementsByTagName('span');
for(var i = 0; i < lines.length; i++){
var stringWidth = parseInt(document.defaultView.getComputedStyle(lines[i], '').width);
var stringLength = lines[i].firstChild.length;
lines[i].style.letterSpacing = (parentWidth - stringWidth) / (stringLength - 1) + 'px';
}
Name_Not_Found [sage] 2011/07/31(日) 17:23:32.34 ID:???
最終行での(強制改行ありの文章での)均等割り付けって
使い道なさそうだから消されたんかな?
think49 ◆bKk/qcAKuM [sage] 2011/07/31(日) 17:24:10.50 ID:???
,222
ああ、いや私も distribute-all-lines が IE の独自拡張と気がついてませんでした。
ttp://msdn.microsoft.com/ja-jp/library/gg721783%28v=expression.40%29.aspx
は IE8 の標準準拠モードで動作確認済みですが、CSS3 的には distribute-all-lines を distribute に置き換えるべきですね。
distribute を実装しているブラウザがないので将来に期待かな。(GC12, Fx4, Op11.50, IE8 でNG)
ttp://msdn.microsoft.com/ja-jp/library/gg721783%28v=expression.40%29.aspx
ttp://jsfiddle.net/UEjkm/4/
ttp://jsfiddle.net/UEjkm/5/
Name_Not_Found [sage] 2011/07/31(日) 17:29:56.26 ID:???

もう限界みたいだな。
これ以上ボロ出さんうちに、そろそろ引っ込んだ方がいい。
Name_Not_Found [sage] 2011/07/31(日) 17:34:54.12 ID:???
限界?
Name_Not_Found [sage] 2011/07/31(日) 17:38:08.00 ID:???

さかのぼってみたけど*-all-linesはもともとないみたい
220 [sage] 2011/07/31(日) 17:38:42.02 ID:???
削除じゃなくて独自拡張か
昔のCSS3草案にはあったと勘違いしてた
重ね重ねごめんなさい
Name_Not_Found [sage] 2011/07/31(日) 17:52:11.89 ID:???
いろいろ勉強になった
失敗を恐れず積極的に書き込んでくれると嬉しいな
忍法帖【Lv=3,xxxP】 [sage] 2011/08/01(月) 18:16:30.29 ID:???
スレの趣旨から出された課題に対して、例え現実的でなくてもなんとかCSSで解決というのは分かる
しかし、ここで出された回答が表現する上で唯一の手段、正解であると思ってしまうのは非常に危険だと思うし、質問者にもよろしくないと思う
何もすべてCSSで片付けなくてもいいと思うから敢えて言う

画像にしろ
Name_Not_Found [sage] 2011/08/01(月) 18:43:36.48 ID:???
     ___
   /|∧_∧|
   ||. (・ω・´| 話は聞いた!
   ||oと.  U|
   || |(__)J|
   ||/彡 ̄ ガチャ
Name_Not_Found [] 2011/08/01(月) 22:05:26.97 :aa6NNPYw
位置指定をしてなくてブラウザに配置を任せてる<divid="a">があって、
その<div id="a">に<div id="b">を全く同じ位置、大きさで重ねたいんだけど
どうしたらいい?

JavaScriptで<div id="a">要素取得してtopとかhightを<div id="b">代入しようとしたけど、値はautoだった。
Name_Not_Found [sage] 2011/08/01(月) 22:24:54.44 ID:???
aにabsolute指定してからtopとか取ればいいんじゃね
Name_Not_Found [sage] 2011/08/02(火) 12:21:04.55 ID:???
ttp://omt.quu.cc/
Name_Not_Found [] 2011/08/02(火) 19:26:57.06 :NeoNa2dH
<div id="a">にabsolute指定すると表示が崩れちゃう
Name_Not_Found [sage] 2011/08/02(火) 19:38:15.10 ID:???
offsetTop使えば
Name_Not_Found [] 2011/08/02(火) 23:35:11.46 :UYYP3zLF
質問

divで作ったボックスの中にformのinputタグを入れて
それを縦方向で中央に揃えたいと思いvertical-align:middleを設定しても効きません。
こういう場合どうやって縦方向中央に揃えるのでしょうか?
233 [sage] 2011/08/02(火) 23:42:20.56 ID:???
<div id="a">の中に<div id="b">を入れて
position: relative; を指定してtop, leftを相対位置で調節したらできた


ボックスの高さをline-heightに設定してみるとかは?

Name_Not_Found [sage] 2011/08/03(水) 01:19:02.57 ID:???

行の高さなのに
238 [sage] 2011/08/03(水) 01:21:56.58 ID:???

できました。ありがとう。
line-heightは必要なかったです。
Name_Not_Found [sage] 2011/08/03(水) 09:28:45.56 ID:???
twitterの背景画像はどうやって設定されてるのでしょうか?
ページを開いてurlでgrepしてひたすらクリックしても関係ない画像ばかり表示されてしまいました
Name_Not_Found [sage] 2011/08/03(水) 09:39:58.56 ID:???

JavaScriptで書き出してるっぽいな
DOMツリーをみればstyle要素の中にあることがわかる
Name_Not_Found [sage] 2011/08/03(水) 12:07:04.73 ID:???
ttp://userstyles.org/style_screenshots/18192_after.png
液晶のバックライトが強く目が疲れやすいのでこのような配色にしているのですが
全てのテキストカラーを薄灰色にしてしまうため、例えば通販サイトの「在庫なし」といった
赤文字に気付かずに進めてしまったといった事があります。

それで黒い文字だけをグレーに変更し、それ以外の色はそのままで表示させるには
どのような記述にしたらいいのでしょうか?

今のcssではこのように一括で置き換えるようになっています。
body,span,div,table,tr,th,td,ul,li,a,h1,h2,h3,h4,h5,h6,dd,dt,dl,p,fieldset,form {
background-color:#000!important;
border-color:#222!important;
-webkit-box-shadow:none!important;
color:#999!important;
}
Name_Not_Found [sage] 2011/08/03(水) 13:20:38.99 ID:???
その前に液晶の輝度落とせばいいんでね ?
Name_Not_Found [sage] 2011/08/03(水) 13:32:42.54 ID:???
あ、すみません。モニタ輝度は最低でradeon catalyst CCCでも明るさを下げており
如意スクリーンという、モニタに半透明の黒いフィルタを掛けて輝度を落とすソフトも時には併用してるという状態なんです・・・
Name_Not_Found [] 2011/08/03(水) 16:26:07.61 :G00vZZBp
@TABLEタグ
<table width="950">
<tr>
<td width="200"></td>
<td align="center"><img src="image.jpg" /></td>
<td width="200">hoge</td>
</tr>
</table>

ACSS
<div style="float:left; width:200px;"></div>
<div style="float:left; width:550px; text-align:center;"><img src="image.jpg" /></div>
<div style="float:left; width:200px;">hoge</div>

@のTABLEタグをAのCSSに置き換えたいと思っています。
しかし最初のdivが空のため?width:200pxが効きません。
どうしたら良いでしょうか?よろしくお願いします。
Name_Not_Found [sage] 2011/08/03(水) 17:08:09.22 ID:???

部屋の照明をもっと明るくしろ
Name_Not_Found [sage] 2011/08/03(水) 17:09:11.70 ID:???

虹彩炎かも?
Name_Not_Found [sage] 2011/08/03(水) 17:23:50.11 ID:???

ユーザCSSでは無理だからユーザJSを使うしかないと思う
Name_Not_Found [sage] 2011/08/03(水) 18:03:28.74 ID:???

margin
Name_Not_Found [sage] 2011/08/03(水) 18:40:35.50 ID:???

text-color:black {color: #222} みたいな指定法でもあるのかと思っていました。
無理でしたか、なるほど。
javascriptについて調べてみますね、どうもありがとうございました。
Name_Not_Found [sage] 2011/08/03(水) 21:12:16.34 ID:???
かれこれ1時間半ほど悩んで解決しないのでお願いします。

HTMLが
<h1><a href="../index.html"><img src="../images/logo.gif" alt="xxx" width="150" height="40" id="logo" /></a></h1>

これで場所指定してて
#header #logo {
position: absolute;
left: 20px;
top: 20px;
}

ロゴなのですが、これをロールオーバーで違う画像を表示させたいです。
#header #logo a:hover とか色々試しても全然ダメで。
どうかよろしくお願いいたします。
Name_Not_Found [sage] 2011/08/03(水) 22:59:52.61 ID:???
IEの禁則処理を禁止する方法はないでしょうか?
line-breakを無効にしたいのですが。
Name_Not_Found [sage] 2011/08/04(木) 09:53:38.79 ID:???

ロゴを画像じゃなく背景にしないとa:hoverで画像は切り替わらないです。
それかjavascriptで画像切り替え。
Name_Not_Found [sage] 2011/08/04(木) 10:18:06.00 ID:???

word-break
Name_Not_Found [sage] 2011/08/04(木) 12:42:52.46 ID:???

なるほど!なんとなくわかりました。
ちょっとやってみます。
ありがとうございました。
Name_Not_Found [] 2011/08/06(土) 01:05:05.24 :jg7MGe1B
a { color:#000000; }
a:hover { color:#ff0000; }

これをタグのstyle=""に直接書くにはどうしたらいいでしょうか?
<a href="a.html" style="ここに直接書きたいです">
Name_Not_Found [sage] 2011/08/06(土) 06:17:32.17 ID:???

ちょちょちょ
どゆこと?

ぐぐってみたけど答え見付からず…

それと逆に質問なんだけど
<a href="###" style="ココに書く理由">ほげほげ</a>
ってのを教えてほしいです
一箇所だけ色を目立たせたい!ってならclassでイイやんと思うんよ
Name_Not_Found [sage] 2011/08/06(土) 06:57:21.94 ID:???
:hoverをstyleタグで使いたいってことか?

aタグに直接style=""で:hoverをしたいしたい - HTML - 教えて!goo
ttp://oshiete.goo.ne.jp/qa/2170402.html

結論から言うと「できない」けどこのリンクに書いてあるように代替案はある
classタグを使ってCSSを参照するか、JavaScriptになるがonmouseoverとonmouseoutで対応する手もある
Name_Not_Found [sage] 2011/08/06(土) 11:15:48.74 ID:???

結論はそれでいいけどclassタグはないよ
class属性ならあるけど
Name_Not_Found [sage] 2011/08/06(土) 13:00:18.05 ID:???
ttp://www.geocities.jp/horisappu2005/tt.html
IEだとちゃんと表示されるのに
Firefox、Chrome、Operaだと崩れてしまう

みんなちゃんと表示させる方法ありませんか?
Name_Not_Found [] 2011/08/06(土) 13:27:15.41 :UkfT4Fl8


ul,li{margin:0;padding:0;}

#link li {
list-style-type:none;
float:left;
}

#link li a {
display:block;
text-decoration:none;
padding:10px;
width:200px;
color:#000;
}

#link li a:hover {
background:#cccccc;
}
Name_Not_Found [sage] 2011/08/06(土) 18:28:50.26 ID:???
ありがとうございます
ホームページビルダーで作るとどうしても
IE以外のブラウザで崩れてしまうんですよね
Name_Not_Found [] 2011/08/06(土) 18:34:26.85 :UkfT4Fl8

ビルダーだからってことは無いと思うぞ。
(X)HTMLとCSS理解してれば、エディタやツールなんて自分に合ったもの使えば良いし、
分かってなけりゃ何使ったって躓くことになる。
Name_Not_Found [sage] 2011/08/06(土) 18:48:32.09 ID:???
あれってビルダーで作ったやつなの?
liが閉じてないしcenter使いまくり
シロートな僕が手打ちしたのより酷くてびっくりしたよ
Name_Not_Found [sage] 2011/08/06(土) 18:52:22.32 ID:???

確認画面でプレビューするとき元の画像が90度回転して表示されてしまいます
元は縦長だった画像が横回転して横長画像として表示されてしまいます
何が原因でしょうか? 何度も質問してすみません
Name_Not_Found [sage] 2011/08/06(土) 18:52:36.72 ID:???

ビルダーのプレビュー画面を見て作るんじゃなくて作った後、各種ブラウザで開いて確認するんだよ
面倒だと思うかもしれないが、皆そうしてる
Name_Not_Found [sage] 2011/08/06(土) 18:53:22.63 ID:???

おいアンカーがループしてるぞ
Name_Not_Found [] 2011/08/06(土) 18:56:10.21 :UkfT4Fl8

自問自答するのかw
Name_Not_Found [sage] 2011/08/06(土) 18:57:01.35 ID:???

ttp://hibari.2ch.net/test/read.cgi/php/1311803617/268n
Name_Not_Found [] 2011/08/06(土) 19:00:45.83 :UkfT4Fl8
釣られちまったわw
267 [sage] 2011/08/06(土) 19:08:37.68 ID:???
白状すると投稿欄にキャッシュが残っていて誤って投稿した
お騒がせして済まない
Name_Not_Found [] 2011/08/07(日) 18:17:21.27 :pI4wFMsj
ttp://39kn.com/2009/04/08/1610/
上記ページのDEMO-B「Horizontal Accordion」の複製を1ページ内に縦に2段並べたいのですが巧くゆきません。
(このページの「DEMO-A」「DEMO-B」の様な状態です。)※複製した下段が動作しません。
また上段・下段でスライド方向を逆にしたいと考えています。
以上2点、HTML及びCSSの書き方をご教示願います。
Name_Not_Found [sage] 2011/08/07(日) 19:11:23.49 ID:???
断る !
そこに訊け !
Name_Not_Found [sage] 2011/08/07(日) 19:14:04.07 ID:???
ビクンビクンリストはウザいだけだから止めといたが吉
Name_Not_Found [sage] 2011/08/11(木) 23:23:39.92 ID:???
CSSファイルを別に用意したページを作る際に
サイト全体でその一カ所しか設置しない部品(画像など)の
位置情報等をわざわざCSS側に記述する事は
なにかメリットはあるんでしょうか?

HTMLソース自体はすっきりするかもしれないですが
後々修正するときに見辛い様な気がしてます。
Name_Not_Found [sage] 2011/08/11(木) 23:50:05.42 ID:???
デザインはCSS側に分離するもんです
使用頻度とか関係ないんです
Name_Not_Found [sage] 2011/08/12(金) 02:44:41.37 ID:???
サイト全体に対して
一箇所しか使わないけど画像って事は
そのページの内容に関わる事なのかな?
だったらHTMLに直接でも良いはず
さんが言う様に
デザインだけならcssに書くべきかもね
Name_Not_Found [sage] 2011/08/12(金) 06:13:41.75 ID:???

絶対にその一箇所だけなら、html内にcssを書くのも有り。
Name_Not_Found [sage] 2011/08/12(金) 12:37:11.96 ID:???
別に効率良く別ファイルにできるだけであって、
がやりやすいようにすればいい
全部のファイルにcssをコピペするのでも間違いではない。
1カ所だけのために別ファイルにcssを書くのも間違いではない。

ただ、手間とか見通しとか考えてやっていくと自然とに形に最終なるとは思うけど。
好きなようにやってれば自然とどれが楽かわかってくる
Name_Not_Found [sage] 2011/08/12(金) 19:42:29.74 ID:???
ルールとしてはHTMLにデザインを含むべきではない
デザインをウリとしてるなら
ドキュメントの一部だから含んでも良いと思う
Name_Not_Found [sage] 2011/08/12(金) 21:04:15.66 ID:???
なんか勘違いしてる人がいるみたいだけどstyle要素の内容もCSSだよ
外部化とスタイル分離を混同してる
Name_Not_Found [sage] 2011/08/12(金) 22:37:13.90 ID:???
夏だからなぁ・・・
Name_Not_Found [sage] 2011/08/12(金) 23:32:58.71 ID:???
style要素の話誰かした?
Name_Not_Found [sage] 2011/08/13(土) 00:09:04.27 ID:???
数千ページの大規模サイトじゃなければ
外部化する必要なんてない
ぶっちゃけどっちでも良い
Name_Not_Found [sage] 2011/08/13(土) 01:49:08.22 ID:???

大規模サイトならむしろ出来る限り統合するだろ
Name_Not_Found [sage] 2011/08/13(土) 03:48:06.53 ID:???

style要素使えばいいだけでしょ。
Name_Not_Found [sage] 2011/08/13(土) 05:23:47.04 ID:???

style要素ならわからないでも無いですが
どうしても画像でオシャレな感じにしたいとなると…
あぁそうか
画像もstyleで指定できるのですね
古い思考なのでimg使いそうになる
Name_Not_Found [sage] 2011/08/13(土) 08:33:04.55 ID:???
CSS:全体
style:個別
Name_Not_Found [sage] 2011/08/13(土) 09:35:53.60 ID:???
Name_Not_Found [sage] 2011/08/13(土) 10:59:22.35 ID:???

   @@@@@  / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
   (´・ω・`@ < 全然解ってないのね〜
   ┳⊂ )  \____________
  [[[[|凵ノ⊃
   ◎U□◎ =3 キコキコキコ
Name_Not_Found [sage] 2011/08/13(土) 11:14:06.63 ID:???
CSS = Cascading Style Sheets
全体とか個別とか関係ないただの名前
Name_Not_Found [sage] 2011/08/13(土) 17:59:42.26 ID:???

前景ならimg要素が適切だよ
Name_Not_Found [sage] 2011/08/13(土) 22:55:41.84 ID:???
外部化しないのは、特殊な場合だけでしょ。
Name_Not_Found [sage] 2011/08/13(土) 23:34:10.40 ID:???

いや、そういうのは、俺ルールであって、
こうでないといけないなんてのは無いだろ
自分がいいと思うなら全部のタグに一つずつ指定してもいい訳で
Name_Not_Found [sage] 2011/08/14(日) 02:14:09.11 ID:???
何が言いたいのか
style属性自体非推奨だけど

style属性使わないといけないってのは、マークアップがおかしいんじゃないの
Name_Not_Found [sage] 2011/08/14(日) 09:40:35.80 ID:???

まぁそういうなら、おまえはそうすればいいさ。
非推奨ってのは、「それは本来の便利さをなくすし見通し悪くなるから使わない方がいいよ」って事であって、
別に使っちゃいけないって禁止されてる訳じゃない

まぁ、そこまでいうなんだから、imgタグやら改行タグも全部閉じてるんだろうけど。
でも、それすらも絶対守らないといけない約束じゃない
ヤプーですら、おまえのいう非推奨使ってるよ

自分が作りやすいように作る。これが一番いい
ソースを見せる訳じゃないんだから。
の言ってる事は間違いじゃないだろうけど俺も間違ってるつもりないし。
Name_Not_Found [sage] 2011/08/14(日) 09:49:23.95 ID:???
おいおい
文法も大切だけどここは初心者スレだ
初心者の僕でも楽しめるスレにして下さい

なにか取っ付きやすくて楽しいヤツお願いします
Name_Not_Found [sage] 2011/08/14(日) 13:29:33.56 ID:???
てぶるでええよう・・・
Name_Not_Found [sage] 2011/08/14(日) 13:37:01.54 ID:???
まぁ、趣味の範囲ならいいんじゃない
Name_Not_Found [sage] 2011/08/14(日) 15:17:02.54 ID:???
HTMLとXHTML混同してね
HTML4.01で閉じたら文法違反だし、XHTMLで閉じなかったらパースエラー出てページ表示されないよ
Name_Not_Found [sage] 2011/08/14(日) 16:14:03.44 ID:???
XHTML1.0とXHTML1.1を混同してね?
1.0は緩いけど、1.1は厳格だよ
Name_Not_Found [sage] 2011/08/14(日) 16:28:07.13 ID:???
緩いのか ?
あれほど足を閉じとけと・・・
Name_Not_Found [sage] 2011/08/14(日) 17:46:46.90 ID:???

お前は何を言っているんだ
Name_Not_Found [sage] 2011/08/14(日) 21:29:29.70 ID:???

お前も何を言っているんだ
Name_Not_Found [sage] 2011/08/15(月) 01:39:18.24 ID:???

html5ならどっちでもいいよ
Name_Not_Found [sage] 2011/08/15(月) 01:59:52.53 ID:???

じゃあ外部ファイル2つ分けたら?
否定するなら代案示せっての
Name_Not_Found [sage] 2011/08/15(月) 07:48:08.33 ID:???
「*margin-top:5px;」ていうのは、何のためのハックですか?
Name_Not_Found [sage] 2011/08/15(月) 08:41:17.73 ID:???
外部ファイル2つ分けたらってどういうこと?
Name_Not_Found [sage] 2011/08/15(月) 10:59:08.97 ID:???

*{margin-top:5px;}
でなくて
*margin-top:5px;
なの?
Name_Not_Found [sage] 2011/08/15(月) 12:52:03.61 ID:???

そうです。たとえばYahooJapanのトップページなんかでも使ってます。
Name_Not_Found [sage] 2011/08/15(月) 13:25:13.24 ID:???

正解は判らないけど
ブラウザ毎の解釈を回避するワイルドカードなんじゃないかな?
-webkit-とか入れる代わり…なのかなと思ってますが
誰か正解頼みます
Name_Not_Found [] 2011/08/15(月) 16:37:37.82 :0Ppirfxl

IE7とそれ以下用のCSSハックです。

セレクタレベルでハックをかけない場合に使います。

body{
color:#000; /* 全てのブラウザに適用 */
*color:#ccc; /* IE7以下 */
}

のように使います。

IE6以下の場合は先頭に_を付けます。
IE8以下の場合は最後に\9を付けます。

body{
color:#000; /* 全てのブラウザに適用 */
*color:#ccc; /* IE7以下 */
_color:#FFF; /* IE6以下 */
color:#f30\9; /* IE8以下 */
}
Name_Not_Found [sage] 2011/08/15(月) 16:46:14.88 ID:???
です。
情報を、どうもありがとうございました。
Name_Not_Found [sage] 2011/08/15(月) 17:35:07.72 ID:???

ieのばかぁー
Name_Not_Found [] 2011/08/15(月) 18:58:02.96 :0Ppirfxl

気持ちは分かるが落ち着けw
Name_Not_Found [sage] 2011/08/24(水) 02:11:34.12 ID:???
table[width="123"]
,table[height="123"]
{        border-color: red;        }

このようなスタイルで、
table[width="123"]
table[height="123"]
これらを一括して指定したくて、 table[*="123"] としたのですがエラーとなってしまいました。

値に「123」を持つtableを一括で指定する方法を教えてください。
Name_Not_Found [sage] 2011/08/24(水) 03:31:54.47 ID:???
HTML5じゃなければ属性名は限られてるから全部指定しとけばいい
Name_Not_Found [sage] 2011/08/24(水) 04:00:58.07 ID:???

ご回答ありがとうございます
おっしゃる方法なら確実なのですが、シンプルに記述したいのです
全称セレクタみたいに”全称プロパティ”なるものがあればよいのですが、見つからなくて。
Name_Not_Found [sage] 2011/08/24(水) 08:26:10.39 ID:???
ecmascriptで
Name_Not_Found [sage] 2011/08/24(水) 12:37:26.04 ID:???

ないものを使おうとするのは矛盾してるような
全称プロパティなるものをサーバサイドで正規のCSSに変換するとか…
Name_Not_Found [sage] 2011/08/24(水) 15:47:58.35 ID:???

プロパティについては全称の指定は出来ないのですか、残念です。

正当な方法では指定出来ず、そのような工夫を施さないといけないのですね
ご回答ありがとうございました。
Name_Not_Found [sage] 2011/08/25(木) 14:45:50.15 ID:???
link擬似要素でスタイルを指定するときに

<a>リ[画像]ン[画像]ク</a>

のように文字と画像が混在する部分をリンクとするとき
画像部分のみlink擬似要素スタイルが適用されないようにするには
どのように書けばいいのでしょうか
Name_Not_Found [sage] 2011/08/25(木) 16:12:30.09 ID:???
継承するスタイルなら、子セレクタで打ち消す
324 [sage] 2011/08/25(木) 17:03:36.12 ID:???
自己解決しました
画像部分だけスタイルを適用させない、というより
a:link span {〜} などとスタイルを定義して
適用したい部分だけspanで囲えばいいですね
ちょっと面倒な感じですが

あと擬似要素じゃなくて擬似クラスでした
普通のクラスみたいに、入れ子指定が可能ですね
Name_Not_Found [sage] 2011/08/25(木) 17:25:19.42 ID:???
で合ってるやん
Name_Not_Found [sage] 2011/08/25(木) 18:32:56.47 ID:???
自己解決(笑)
Name_Not_Found [sage] 2011/08/25(木) 23:32:12.67 ID:???
これはひどいw
Name_Not_Found [sage] 2011/08/26(金) 14:06:38.38 ID:???
2ch復活
Name_Not_Found [sage] 2011/08/26(金) 14:43:44.26 ID:???

全然合ってないよ
「継承するスタイルなら」と勝手な条件付け

まあ初心者(が回答者を気取ってる)スレだから仕方ないが
Name_Not_Found [sage] 2011/08/26(金) 17:51:11.60 ID:???
子セレクタで何か間違ってるか?
Name_Not_Found [sage] 2011/08/26(金) 18:38:08.06 ID:???
上級者の集まるスレはココですか?
Name_Not_Found [sage] 2011/08/27(土) 02:01:46.71 ID:???
違います。
Name_Not_Found [sage] 2011/08/27(土) 06:02:26.81 ID:???
へー
Name_Not_Found [sage] 2011/08/27(土) 16:43:24.07 ID:???
文字列を<span>で囲んで背景色をつけると、line-heightとは関係なく
文字の上下に余白を含んだ一定の高さになります(行ボックスというんでしょうか)
これを高さ1emのboxと並べると、行ボックスのほうが少し下に大きいのですが
なぜですか?これは正しい挙動なんですか?
行ボックスの高さは、決まっているものなんでしょうか?
フォントやブラウザによって変わってしまうものなんでしょうか
調整に困っています
Name_Not_Found [sage] 2011/08/27(土) 17:28:50.07 ID:???
マージンやパディングを設定した上での話なんだろうな?
Name_Not_Found [] 2011/09/01(木) 00:15:46.35 :qYPkGIUN
しつもんです

IMGタグのTITLE属性についてですが
スタイルシートで文字の大きさを変えたり色を変えたり出来ないのでしょうか?

よろしくお願いします
Name_Not_Found [sage] 2011/09/01(木) 01:20:57.72 ID:???
出来ません。
Name_Not_Found [sage] 2011/09/01(木) 09:41:21.24 ID:???
表示される保証なんてない属性なんだから
CSSでいじれるわけないでしょう
いじりたいならお前のブラウザの設定を変えてください
Name_Not_Found [] 2011/09/01(木) 11:05:54.71 :qYPkGIUN
うるせーカス
Name_Not_Found [sage] 2011/09/01(木) 11:36:05.12 ID:???
おやおや、困ったちゃんですね〜
Name_Not_Found [sage] 2011/09/01(木) 12:34:03.35 ID:???

jQueryでツールチップを出してカスタマイズしたらどうかな。参考ページは自分でぐぐってね。
Name_Not_Found [sage] 2011/09/03(土) 06:53:23.36 ID:???
display: inline-block; ってCSS2.1なんですよね?
でもググって1ページ目に来るようなリファレンスサイトなんかに載っていないのは、なんでですか?
あんまり正しくない?(使わないほうがいい?)ものなんでしょうか
Name_Not_Found [sage] 2011/09/03(土) 10:30:49.05 ID:???
バリバリ出てくるバリバリ伝説
Name_Not_Found [sage] 2011/09/03(土) 18:13:50.44 ID:???
すいません教えてください。
背景色の幅って文字数によって可変になりませんか?

html
<p class="a">あいうえお</p> <!--コレをAとする-->
<p class="a">あい</p> <!--コレをBとする-->

css
p.a{
background-color:#aaa;
}
A、Bどちらも一行まるまる色が敷かれると思いますが、
5字分の幅、2文字分の幅に出来る方法ってありますか?
あるのでしたら、そのやり方をお教えください。

5文字に合わせると(widthで決め打ち)、2文字の時スカスカに
なってしまい困っています。

幅が狭い用と広い用のCSSを作るべきですか?
宜しくお願いします。
Name_Not_Found [] 2011/09/03(土) 18:45:51.87 :zuIuaqCy
pをspanにして適宜改行
Name_Not_Found [sage] 2011/09/03(土) 19:00:06.02 ID:???

ブロックレベル要素ですからね
float: left; をかけるとか
Name_Not_Found [sage] 2011/09/03(土) 19:10:54.35 ID:???

即レスありがとうございます。

できるんですね。お二人の指摘の所、
勉強してみます。

ありがとうございました。
Name_Not_Found [sage] 2011/09/05(月) 17:37:44.81 ID:???
テーブルのセルにbackground-imageで表示させた
繰り返しなしの画像を、セルの中心(上下の偏りなく)に
表示させるにはどうすればいいのでしょうか。

こういうイメージです
セル → 口
画像 → ちいさい口

こうなって欲しいイメージ



よろしくお願いします。
Name_Not_Found [sage] 2011/09/05(月) 18:09:05.75 ID:???

座標指定
Name_Not_Found [sage] 2011/09/05(月) 18:10:59.37 ID:???
background-position: 左px 上px;
Name_Not_Found [sage] 2011/09/05(月) 18:19:06.74 ID:???

のレスを参考に色々ググッた結果
background-position:center;
で所望の結果が得られました。

ありがとうございました。
Name_Not_Found [sage] 2011/09/05(月) 18:25:11.26 ID:???
mac safari chrome firefox
background-position:50% 50%;
でど真ん中いけた他は知らん
Name_Not_Found [sage] 2011/09/05(月) 18:26:01.83 ID:???

そんな指定方法が有ったのか
不勉強でした
Name_Not_Found [sage] 2011/09/05(月) 18:38:48.38 ID:???

そういうやり方もあるんですね。検証結果もすごく助かります。
ありがとうございます。


他のオプションが付いているとうまくいかず、centerだけにしたら
中央に来ました。
Name_Not_Found [sage] 2011/09/05(月) 19:39:24.14 ID:???
上pxの方を省略したら50%になる
Name_Not_Found [sage] 2011/09/05(月) 19:42:52.44 ID:???

そりゃ、中央から「background-imageを開始する」ということだぞ
Name_Not_Found [sage] 2011/09/05(月) 19:44:48.59 ID:???

と思ったら、オレが違ってた
Name_Not_Found [sage] 2011/09/06(火) 02:40:57.58 ID:???

そう思って確認とってみたんだ
画像の左上が50%のポイントに当たると思ってブラウザに読み込ませたら
ど真ん中だったのでびっくりした
Name_Not_Found [sage] 2011/09/11(日) 08:22:52.75 ID:???
超初心者の質問ですみません。
よくHTMLに、<!-- header end --> などとオレンジの文字でありますが(HPビルダー13)、
これは、どのような意味を持つのでしょうか。
プレビュー画面では、!マークがついています。
ただの、目印なのでしょうか。
Name_Not_Found [sage] 2011/09/11(日) 08:27:22.89 ID:???
ブラウザのレンダリングには現れない部分
秘密のコメントだよ

まぁ作った人が判る様に目印として残しているんだな
ファイルサイズには影響しますがブラウザの表向き部分には影響しません
Name_Not_Found [sage] 2011/09/11(日) 09:30:38.43 ID:???
ありがとうございます。
Name_Not_Found [sage] 2011/09/11(日) 09:50:27.67 ID:???
CSS関係ねええええ
Name_Not_Found [sage] 2011/09/11(日) 13:02:07.19 ID:???
CSSの指定に関して教えてください。
テーブルの横幅を一定(80%とか1000pxとか)に出来ますか?

口口←こういう感じのテーブルで、左が図、右が解説が入ります。
図の横幅がまちまちで、右のセルは相当細く(7文字程度)なっても構いません。
この2つのセルを足した幅が一定になるようにしたいのです。
例えば合計1000pxなら
 左セル_____右セル
 600__________400
 900__________100
 300__________700
といった感じです。

●html
<table><tr>
<td><img src="図.gif"></td>
<td>解説テキスト</td>
</tr></table>
●css
table{
 width: 1000px;
}
tdの幅は指定していません。
↑としましたが、右セルが、文字数に応じて伸び縮みしているだけで、合計1000px
になるような伸び縮みはしていません。trにwidth: 1000pxしても同様でした。

困り果てています、よろしくお願いします。
Name_Not_Found [sage] 2011/09/11(日) 13:18:44.01 ID:???

table-layout
Name_Not_Found [sage] 2011/09/11(日) 13:35:30.84 ID:???

早速のレスありがとうございます。
しかし
table{
width: 1000px;
table-layout:auto;
}

table{
 width: 80%;
 table-layout:auto;
}

table{
table-layout:auto;
}
いずれも変化なく、文字数に応じて伸び縮みして(例えば)1000px
には足りませんでした。

他の記述が影響してるのか、しかしテーブルに関しては記述してないのですが。
ただいいプロパティ教えて頂きました。

ちょっと試行錯誤してみます。
ありがとうございました。
367 [sage] 2011/09/11(日) 15:03:55.81 ID:???

完全に希望通りになりました。
本当にありがとうございました。
Name_Not_Found [sage] 2011/09/12(月) 13:19:59.34 ID:???
すいません、JavaScriptの質問スレと悩んだのですが、こちらでお願いします。
どなたかご存知でしたら教えて下さい。

背景画像固定をiPhone対応させたくてiScroll4というスクリプトを読み込ませたのですが上手く動作しません。
ttp://cubiq.org/iscroll-4

具体的に説明すると、cssのbody{}要素に定義してある
"background-attachment: fixed"と同様の事をiPhoneのSafariでやりたいです。

ただ、設置したいページのhtml構成が、大きいtableが一つあるだけという構造で、
divでheaderやfooter、メインコンテナ等を定義してあるわけではありません。
単純に背景画像を固定させたい使い方の場合はどのように記述すればいいのでしょうか。
(単純にtableをwrapperで囲うとスクロール自体が出来なくなる)
Name_Not_Found [sage] 2011/09/12(月) 13:50:01.23 ID:???
質問です。
以下のhtmlのalt属性の値が"target_name"の親の親のli要素を選択するにはどうすれば良いでしょうか?
あるコミュニティサイトで特定の人物の書き込みだけを非表示にしたいのです。

> <html>
>   <body>
>     <ul>
>       <li>
>         <div class="profile_image">
>           <img class="profile" src="html://xxx/xxx.jpg" alt="target_name" />
>         </div>
>       </li>
>     </ul>
>   </body>
> </html>
Name_Not_Found [sage] 2011/09/12(月) 20:08:49.91 ID:???

親セレクタないので無理
Name_Not_Found [sage] 2011/09/14(水) 11:54:07.06 ID:???

CSSで無理だとのことなのでjavascriptでやってみましたが、また新たな壁にぶちあたりまして・・・
それは別のスレで聞いてみます。
ありがとうございました。
Name_Not_Found [sage] 2011/09/15(木) 08:04:22.41 ID:???
style sheet ですが、1HPあたり何枚くらい設定してますか。
また、すべて外部style sheetで設定して、インラインスタイルに記述しないほうが良いのでしょうか。
TOPページ以下がかなりの枚数があり、
また、写真、グラフ、動画など、文章など、サイズもまちまちで、レイアウトが煩雑で
box?ごと、いろいろ指定しなければなりません。
そうしますと、idを個々に割り振る数がかなり増えると予想されます。
上記の場合は、tableとの併用や、直接記述を増やしたほうが良いのでしょうか。
Name_Not_Found [sage] 2011/09/15(木) 08:21:22.24 ID:???
統一したけりゃ外部が楽
各頁独自にしたけりゃインラインスタイルじゃねーの

レイアウトが煩雑に感じるのはセンスが無いのもあるだろうけど
統一感がないから余計にそう感じるのでは?
全体を見なおしてみたら?
Name_Not_Found [sage] 2011/09/15(木) 12:13:36.28 ID:???

ありがとうございます。
style sheet ですが、topとtopページ以下は、別に作成してもよいのでしょうか。
完全にレイアウト(ヘッダー部分)が違います。
全体を見直してみます。
Name_Not_Found [sage] 2011/09/16(金) 00:20:20.59 ID:???
好きにしなよ
管理しやすくするための外部ファイルなんだからさ
Name_Not_Found [sage] 2011/09/16(金) 01:46:38.34 ID:???

個人的に同じジャンルのページは同じレイアウト・デザインの方が観る方も管理する方も楽と言うか良いと思うよ
あなたの場合なら写真、グラフ、動画、文章でそれぞれのページ毎の外部ファイル作るとか
Name_Not_Found [sage] 2011/09/17(土) 10:08:21.86 ID:???


ありがとうございます。
自由に設定しても問題ないということがわかりました。
同じジャンルは同じレイアウトで、スタイルシートも共有で設定してみます。
Name_Not_Found [sage] 2011/09/17(土) 11:31:44.63 ID:???
同一レイアウトの方がドコにいるのかを把握しやすくなるので
安心感が出るんだな

上級者は同一ルールを生かしつつレイアウトを変更してくる…
そうすると格好良くなってくる(場合もある)
Name_Not_Found [sage] 2011/09/18(日) 05:28:17.69 ID:???
教えてください。

背景が黒のページで、縦スクロール付きの領域?が必要に
なりました。
調べてそれはできたんですが(overflow:auto;)、その領域?
の背景も黒のままです。
(そこに入れるあるテキストは他のページにリンクさせないと
いけません)
どうすればこの領域を白にできるのでしょうか。

ご教示ください、よろしくお願いします。


検索しているうちにテキストエリアというのを見つけて
やってみました。背景色は白に出来ましたが、リンクが
<a href="a.html">などと普通にテキストとして表示されてし
まいました。
Name_Not_Found [sage] 2011/09/18(日) 05:40:14.29 ID:???

自己解決しました。
cssの記述の最後に ; をつけてませんでした。
スレ汚しすみませんでした。
Name_Not_Found [sage] 2011/09/20(火) 07:52:38.14 ID:???
CSSのみでそのページがアクティブかどうかわかりますか?

わかりにくくてすみません。
ホーム、ページA、ページBがあり、ページ上部に
ホーム|ページA|ページB というナビゲーションがあります。
AのときにはナビのAがロールオーバーさせないようにしたいのです。

色々検索とかしたんですが、難しすぎて分かりません。
手ほどきか、やさしい(基礎から)解説ページを教えて下さい。

よろしくお願いします。
Name_Not_Found [sage] 2011/09/20(火) 08:25:19.68 ID:???

スタイルを上書きすべし
Name_Not_Found [sage] 2011/09/20(火) 13:24:33.50 ID:???

スタイルを上書きですか…。
検索途中に出会ったような気がします。
カスケードとか…。

うーん私にはまだ難しいようなので、泥臭く手を動かします。

落ち着いたらもっと洗練されたその技法を習得したいと
思います。

ありがとうございました。
Name_Not_Found [sage] 2011/09/22(木) 23:57:25.75 ID:???
content : counter で番号を振ったとき

10
ではなくて
 1
10
のように数字の部分で右端揃えにしたいときはどうすればいいですか?
Name_Not_Found [sage] 2011/09/23(金) 01:20:41.57 ID:???

content:counterを使ったことがないから詳しいことはわからないけど、
list-style:decimal;で番号振ったときも番号部分の位置指定が出来ないように、
content:counterでも同様に位置指定が出来ないとおもう。

無理やりあわせたいなら、桁が少ないところだけclass振ったりしてpositionとかtext-indentで調整するしかないんじゃないかなー。
385 [sage] 2011/09/23(金) 07:45:52.75 ID:???

わかりました。ありがとうございます。
Name_Not_Found [sage] 2011/09/24(土) 13:40:25.37 ID:???
グローバルナビを下記のとおり作成しました。
設定しているリンクですが、htmlを修正中(HPを作成中)に、消えてしまい、
ナビの画像も消えてしまいます。都度リンクの貼り直しが必要になります。
何が問題なのでしょうか。

<div id="menu">
<ul>
<li id="menu01"></li>
<li id="menu02"></li>
</ul>
</div>

#menu01 a{
background-image: url(images/bg_menu01.gif);
background-position: 0px 0;
}
Name_Not_Found [sage] 2011/09/24(土) 14:54:16.52 ID:???
リンク無いじゃん
Name_Not_Found [sage] 2011/09/24(土) 16:15:10.86 ID:???

CSSでaタグセレクタにしてるけどソースにaタグないじゃん
Name_Not_Found [sage] 2011/09/24(土) 16:50:10.59 ID:???


すみません。リンクが消えてしまうのです。
元は、
<li id="menu01"><a href="inquery.htm"></a></li>

のように入っているのですが、編集中に、リンクの箇所が消えてしまいます。
Name_Not_Found [sage] 2011/09/24(土) 19:04:37.49 ID:???
小人さん ?
Name_Not_Found [sage] 2011/09/24(土) 19:29:34.50 ID:???
単純に考えて何かのツールの予定外の動作だよね
何を使ってるかぐらい最初から書いたら?
Name_Not_Found [sage] 2011/09/24(土) 23:49:44.33 ID:???
最近は投げっぱなしでキャッチボールが無いんだよなあ・・・
Name_Not_Found [sage] 2011/09/25(日) 01:57:21.19 ID:???
誰か俺のデザインしたサイト作ってー
お小遣い程度の報酬は払うよー。


とか言ったらどうなるの?
Name_Not_Found [sage] 2011/09/25(日) 02:09:29.31 ID:???
お小遣い5万でやってあげるよ。
Name_Not_Found [sage] 2011/09/25(日) 04:35:01.96 ID:???
なら僕は10万だよ
Name_Not_Found [sage] 2011/09/25(日) 08:50:38.88 ID:???
ホームページビルダー13を使用しています。
リンクの箇所が消えて、cssで置いている背景も消えてしまうのです。
※リンクには、背景画像だけでは設定できないのでしょうか。
「お問い合わせ」などと、文字も指定する必要があるのでしょうか。(x-9999でインデントを掛けて)


例)<li id="menu01"><a href="inquery.htm">お問い合わせ</a></li>
Name_Not_Found [sage] 2011/09/25(日) 10:23:37.83 ID:???
CSS関係ないからビルダースレで聞くべき
Name_Not_Found [] 2011/09/25(日) 16:23:14.16 :2ZSiKw9M
漢字のスペース
Name_Not_Found [sage] 2011/09/26(月) 21:21:07.18 ID:???
分かりにくいw
Name_Not_Found [sage] 2011/09/27(火) 12:37:14.51 ID:???
画面いっぱいに表示した画像Aの上に、画像Bを重ねて出したくて
その際、画像Bの左右位置をセンタリングしたいのですが
position:absolute とセンタリングを両立させるやり方がわからず、うまくいきません。
margin 0 auto やtext-align:centerではダメでした。どうすれば良いでしょうか
Name_Not_Found [sage] 2011/09/27(火) 13:09:13.00 ID:???
背景にimg要素使ってんじゃない
Name_Not_Found [sage] 2011/09/27(火) 22:07:48.59 ID:???
ソースを頼む
Name_Not_Found [sage] 2011/09/28(水) 07:13:29.70 ID:???
    ,-ー──‐‐-、
   ,! ||      |
   !‐---------‐
  .|:::i ./´ ̄ ̄.ヽ.i
  |::::i | |\∧/.|..||
  |::::i | |__〔@〕__|.||
  |::::i |.(´・ω・`)||
  |::::i |  キング  ||
  |::::i | カワイソース.||
  |::::i L___________」|
  |::::i : : : : : : : : : |
  `'''‐ー------ー゙
Name_Not_Found [sage] 2011/09/29(木) 17:49:00.38 ID:???
レイアウトが崩れるのを
ずっとIEのバグだと思ってたら
</a>タグの閉じ忘れだった。
こんな事ってあるのね。
Name_Not_Found [sage] 2011/09/29(木) 19:56:54.05 ID:???
何処で改行するかによってもわずかにレイアウトに影響が出た時はビックリしたよ
Name_Not_Found [sage] 2011/09/29(木) 23:34:40.74 ID:???
あるあるw
タグの閉じ忘れはページ書き終わった後に一回文法チェッカにかけるようにすれば良いよ
Name_Not_Found [sage] 2011/09/29(木) 23:41:29.39 ID:???
え、普通エディタの機能で書きながらわかるだろ…
Name_Not_Found [sage] 2011/09/30(金) 00:48:30.71 ID:???
みんなが同じエディタ使ってると思うなよ
Name_Not_Found [sage] 2011/09/30(金) 01:05:53.64 ID:???
バカかお前
Name_Not_Found [sage] 2011/09/30(金) 13:43:27.43 ID:???
改行位置の問題はブラウザのバグ
Name_Not_Found [sage] 2011/09/30(金) 15:28:09.32 ID:???
HTMLでは改行と空白は一緒なんじゃないの
Name_Not_Found [sage] 2011/09/30(金) 15:43:00.72 ID:???
カラー画像をモノクロに表示し、マウスが乗るとカラーになる、
別ファイルCSSでの記述方法はありますか?
Name_Not_Found [sage] 2011/09/30(金) 17:25:47.65 ID:???
ない
Name_Not_Found [sage] 2011/09/30(金) 20:50:25.28 ID:???
IEのJavaScriptでならできるけど、他は知らん。
Name_Not_Found [sage] 2011/09/30(金) 22:46:59.77 ID:???

ちょいとググれば腐るほど出るだろうが
Name_Not_Found [sage] 2011/09/30(金) 23:40:58.15 ID:???
IEの独自プロパティじゃなければ無いよ
Name_Not_Found [sage] 2011/09/30(金) 23:49:19.19 ID:???
カラー写真とモノクロ写真を用意して、背景画像処理にすればおk。
img:hover{ background.... }てな感じで
Name_Not_Found [sage] 2011/10/01(土) 00:00:12.22 ID:???

background-positionが無いとかお前どこの時空の人間だ
Name_Not_Found [sage] 2011/10/01(土) 01:57:20.86 ID:???
はいはい
Name_Not_Found [] 2011/10/10(月) 15:22:36.09 :mg3ahhXk
メニューリンクについて

サイト内ページ数15

各ページリンクの設定をやり直すのだけれど
そのやり方のついて小生は1ページづつこまめに設定させていく方法しか知りません
どなたか一発で15ページに影響させられる設定の仕方を知りませんか?

たとえば1ページだけ編集すれば全部に行き渡るというやり方・・・
教えてください

お願いします
Name_Not_Found [sage] 2011/10/10(月) 17:21:06.54 ID:???

そう言ったものに対応したモノが必要です
Name_Not_Found [] 2011/10/10(月) 18:28:11.20 :cMmCEUi9
エディタでマルチ置換
iframe
インリンク
swap
外部クッション

お好きなのでどうぞ
Name_Not_Found [sage] 2011/10/10(月) 22:05:48.51 ID:???
というかCSS関係ねえ
Name_Not_Found [sage] 2011/10/11(火) 15:12:28.96 ID:???
サイドバーやフッターのナビゲーションかぁ
そう考えると、フレームセットってある意味すげーよな
UAががしっかりセットとして実装できていれば、フレーム全盛の時代だったのかも・・・
SEO的にもサイドバーやフッターは不要だから効率は良いのにな
Name_Not_Found [sage] 2011/10/12(水) 10:53:25.69 ID:???
ハイパーテキストの使い方ってのがまだ未知数だったときに
テーブルレイアウトで出版業界と同じデザイン、て方向に走っちまったからな
HTML5のasideなんてサイドバーに表示すりゃ良かったんだ
Name_Not_Found [sage] 2011/10/12(水) 17:18:26.54 ID:???
ふと疑問に思ったことですが、自分ではうまく調べることができず解決できなかったので質問させて頂きます

・style, meta, linkなどのタグに対してidやclassといった属性を設定することはできるんでしょうか?
・また可能であるブラウザがある場合、それは仕様として正しいのでしょうか?
・あともしよろしければ、その設定したidやclassを用いてDOM操作することについてどう思うかも教えてください(例えばそんな使い方は気持ち悪いなど)
Name_Not_Found [sage] 2011/10/12(水) 17:57:59.95 ID:???

表面に出てこないものにcssを設定してどうしたいんだ?
Name_Not_Found [sage] 2011/10/12(水) 18:02:06.91 ID:???
style無理, meta無理,
link可能 正しい
Name_Not_Found [sage] 2011/10/12(水) 18:16:05.55 ID:???

なぜ質問を読まない
スレチだとは思うけど
428 [sage] 2011/10/12(水) 19:50:52.95 ID:???

早い解答ありがとうございました!
linkタグは正しい仕様として可能なんですね、少し意外でした。


スレ違いかもしれないと思いましたがセレクタについてはCSSスレが詳しいのではないかと考え質問させて頂きました。
もっと適切なスレを探すべきでした、すいませんm(_ _)m
Name_Not_Found [sage] 2011/10/13(木) 00:14:30.61 ID:???

XHTML以降はどれも可
metaを拾ってメタデータを可視化したりRDFaする
linkを拾ってナビゲーションを動的生成する
何も問題ない
Name_Not_Found [sage] 2011/10/13(木) 04:33:03.86 ID:???

ttp://www.w3.org/TR/2010/REC-xhtml-modularization-20100729/dtd_module_defs.html#dtdelement_meta.qname
ここ読む限り駄目なように見えるけど、大丈夫なの
Name_Not_Found [sage] 2011/10/13(木) 08:00:02.35 ID:???

詳しくは書かんが、XHTML 1.0でOKなのに1.1でダメって変だと思わなかったか
1.1ではローカル属性@id、@classなどをグローバル属性@xhtml:id、@xhtml:classに切替可能になってんだ
適合性の解釈に異論があるかもしれんが、気になるならどっかのスレにでも投げてみろ
XHTMLのスキーマはグダグダだから、自分で調整した方がはええぞ
Name_Not_Found [sage] 2011/10/13(木) 17:14:17.98 ID:???
こっちのスレの方が平和だから向こうのニート君2人が飽きるまでアドバイスはこっちにしようかね
Name_Not_Found [sage] 2011/10/13(木) 17:33:49.13 ID:???
帰れ
Name_Not_Found [sage] 2011/10/13(木) 20:35:23.43 ID:???

文字を二行表示ってどうやってかくの?
Name_Not_Found [sage] 2011/10/13(木) 20:36:29.41 ID:???

安価は虫してね間違えた
Name_Not_Found [sage] 2011/10/13(木) 20:39:33.77 ID:???
質問省略しすぎだろ
回答者にエスパーさせんな
Name_Not_Found [sage] 2011/10/13(木) 20:45:09.24 ID:???

text か font かなんかでできないかなぁ
Name_Not_Found [sage] 2011/10/13(木) 23:18:11.46 ID:???
ここまでの自演
Name_Not_Found [sage] 2011/10/14(金) 00:40:06.52 ID:???
二行表示ってなんだ? オレの嫁レベルの質問の仕方だなw 
Name_Not_Found [sage] 2011/10/14(金) 09:02:16.62 ID:???
エスパーすると、
通常の1行の中に、小さい字の注釈のようなものを2行で入れたい、
てことじゃないか。
Name_Not_Found [sage] 2011/10/14(金) 12:24:58.12 ID:???
割注がしたいのか
Name_Not_Found [sage] 2011/10/14(金) 13:16:09.21 ID:???
ルビを振りたいだけかもしれんぞ
Name_Not_Found [sage] 2011/10/14(金) 16:20:27.52 ID:???
<span font-size:200%;>あ</span> だけの事じゃないのか?

1行<br>2行
とかだけの事かも?

分数の表示かもな。
Name_Not_Found [sage] 2011/10/14(金) 17:43:55.83 ID:???
で、質問者本人はもうどこかへトンズラ、と。
Name_Not_Found [sage] 2011/10/14(金) 17:53:36.70 ID:???
いつから質問者がいると錯覚していた
Name_Not_Found [sage] 2011/10/14(金) 18:24:28.88 ID:???
暇つぶしの釣り
438 です [sage] 2011/10/15(土) 11:37:15.93 ID:???

のエスパーで合ってるっス
Name_Not_Found [sage] 2011/10/15(土) 11:45:48.24 ID:???
つまり
俺の嫁
ってこと?
Name_Not_Found [sage] 2011/10/15(土) 11:47:54.82 ID:???

俺はお前の嫁ではない!
Name_Not_Found [sage] 2011/10/15(土) 12:48:37.65 ID:???
てへ
Name_Not_Found [sage] 2011/10/15(土) 16:07:53.35 ID:???
オレの嫁レベルって事だから、
必要な穴は使えるってレベルじゃまいか
Name_Not_Found [sage] 2011/10/15(土) 17:12:08.32 ID:???
*もか ?
Name_Not_Found [] 2011/10/21(金) 18:53:13.84 :B01pCtnC
質問です

cssでmarginの指定で、上だけ0px他を5pxにしたいとき
@margin:0 5 5 5px;
Amargin:0px 5px 5px 5px;
Bmargin-top:0px; margin-right:5px; margin-bottom:5px; margin-left:5px;

いろいろあると思いますが他にも指定方法ありませんでしょうか?
ちなみに1番簡素化された指定方法は@ですよね?
Name_Not_Found [sage] 2011/10/21(金) 19:00:09.29 ID:???

単位省略は値が 0 の時だけだから@はあり得ない
一番省略された形は margin: 0 5px 5px;
Name_Not_Found [] 2011/10/21(金) 19:19:02.09 :B01pCtnC

なるほど。そういう指定もあったんですね
最初の「0 5px」が上下で後の「5px」が左右のことですよね。勉強になりました。
Name_Not_Found [sage] 2011/10/21(金) 20:13:34.63 ID:???

いやいや、それは違うw
ちゃんとリファレンスを読もうね
ttp://hp.vector.co.jp/authors/VA022006/css/box.html#margin
Name_Not_Found [sage] 2011/10/21(金) 23:24:39.37 ID:???
.aaaaa { background: url(URL1) }
.aaaaa { background: url(URL2) }
.aaaaa { background: url(URL3) }
↑と数種類ある画像をランダムに読み込ませたい場合はどこにどのような文字を記入すればいいでしょうか?
Name_Not_Found [sage] 2011/10/21(金) 23:58:42.47 ID:???
スレチ
Name_Not_Found [sage] 2011/10/21(金) 23:59:40.91 ID:???

誘導よろ
Name_Not_Found [] 2011/10/22(土) 11:55:22.67 :4V51Rw3e
2カラムのサイトのレイアウトの方法で
左カラムにfloat:left、右カラムをfloat:rightとするのはわかるのですが
左カラムのwidthを100%とマイナス値の右margin、右カラムに右マージンという設定の仕方を見かけるのですが
この右カラムを左カラムの外からmarginでめり込ませてる?方法には何かメリットはあるのでしょうか?
Name_Not_Found [sage] 2011/10/22(土) 12:39:26.77 ID:???

ネガティブマージンのこと?
ttp://coliss.com/articles/build-websites/operation/css/css-using-negative-margins.html
Name_Not_Found [sage] 2011/10/22(土) 13:07:56.76 ID:???

これの事だと思います、ありがとうございます
つまりメリットというか左カラムを相対幅・右カラムを固定幅のレイアウトにしたい場合の作法って事ですかね
Name_Not_Found [sage] 2011/10/22(土) 13:52:30.94 ID:???

ちょっと違うと思うけど…
ネガティブマージンは後続の要素を引っ張れるのが特徴
あなたの挙げた例は左カラムを100%にして右カラムを引っ張ってるだけ
しかも、正確には左カラムの横幅にはなってない
Name_Not_Found [] 2011/10/23(日) 19:22:41.77 :72sISXfe
質問です

ttp://uploader.sakura.ne.jp/src/up63811.gif

↑これをCSS(DIV)で作ったらどうなりますか?
なるべくシンプルに作りたいのですがうまくできず困っています
(右と左の余白が全然合わなかったりとか・・・)
どうぞよろしくお願いします
Name_Not_Found [sage] 2011/10/23(日) 19:59:01.53 ID:???
まずおまいのコーディングを見せてもらおうか
Name_Not_Found [] 2011/10/23(日) 20:01:19.70 :72sISXfe

はい。でも滅茶苦茶ですw

<div style="width:120px; height:50px; padding:5px; background-color:#e69138; border-style:solid; border-color:#ffe599; border-width:4px; font-size:12px;">
<div style="float:left; width:30px; height:50px; background-color:#e69138; color:#ffe599;">url<br />abc</div>
<div style="float:right; width:70px; height:50px; background-color:#ffd966; color:#e69138;">A url<br />abc</div>
</div>
Name_Not_Found [sage] 2011/10/23(日) 20:39:46.08 ID:???
この大きさのロゴ(?)をCSSでやるのが間違い。
画像で作るよろし。
461 [sage] 2011/10/23(日) 22:01:42.32 ID:???

誘導先でも答え貰えないし、この質問はCSSですので誰か教えてください><
Name_Not_Found [sage] 2011/10/23(日) 22:08:34.05 ID:???

javascript
Name_Not_Found [sage] 2011/10/23(日) 22:11:17.97 ID:???

ランダムに読み込ませることになるとjavascriptになるのか。。。さんくす
468 [sage] 2011/10/23(日) 22:18:33.81 ID:???
すぐに答えてもらえると思ったのに
答えてもらえないどころかコーディングまで晒せと言われ
挙句CSSでできることを画像でやれってアホみたいなレスしか返ってこないとは・・・
Name_Not_Found [sage] 2011/10/23(日) 22:44:09.39 ID:???

だけどさ、この大きさでこの微妙な配置てさ、
見る人の環境(フォントサイズ、フォント種類、ブラウザ間の違いなど)で、
かなり印象かわるぜ。

pngで作るのが一番だと思うよ。
ちなみに、オレはじゃないぜよ。
Name_Not_Found [sage] 2011/10/23(日) 22:47:58.12 ID:???
Name_Not_Found [sage] 2011/10/26(水) 09:11:09.22 ID:???
classみたいなものでbodyの色はあれでaの色はあれでpの色はあれでと
複数の要素を一まとめにする方法はありますか?
それ一つを呼び出したらすべてokという形にしたいのですが…
現在はページ数の多くないサイトに複数のcssファイルがあるので一つに
してしまいたいと思っています
Name_Not_Found [sage] 2011/10/26(水) 10:28:43.92 ID:???
@importを使って1つのCSSにまとめればいいよ
Name_Not_Found [sage] 2011/10/26(水) 11:00:15.94 ID:???
pxで指定しないでemや%で指定しろと聞いた事があるのですが
例えばフォントの大きさを指定する場合
基準となる大きさをpxで指定してから、部分的にemや%で相対指定して利用する
という認識であってますか?
Name_Not_Found [sage] 2011/10/26(水) 11:15:39.68 ID:???
いいえ
「何も指定しない状態」を基準にしてください
Name_Not_Found [sage] 2011/10/26(水) 11:32:23.19 ID:???
大きい文字で見たいのにサイズ指定されたら見れないの?
Name_Not_Found [sage] 2011/10/26(水) 11:40:26.11 ID:???
最近のブラウザはズーム機能ついてるから見えないときはズームしろと言え。
emや%、リキッドだのでレイアウト崩れる方がかえって読みにくくなる。
画像や枠の大きさ無視して文字サイズだけ変えるなどという悪しき習慣がクソ。
Name_Not_Found [sage] 2011/10/26(水) 11:41:09.19 ID:???

ありがとうございます
試してみます
Name_Not_Found [sage] 2011/10/26(水) 12:07:31.65 ID:???
@importは通信回数増えるのが難点
人来ないサイトならいいけど
Name_Not_Found [sage] 2011/10/26(水) 12:37:34.50 ID:???
pxって一応相対単位段だけど何で絶対単位だと認識されているのですか?
Name_Not_Found [sage] 2011/10/26(水) 15:05:24.47 ID:???
だれが認識しているのですか?
1pxの大きさは環境ごとに固定だから絶対単位みたいな扱いされてもおかしくないとは思うが
Name_Not_Found [sage] 2011/10/26(水) 17:12:03.12 ID:???
OKweb webカテの常連回答者(ORUKA....)で毎回仕様書引用するオヤジがいるけど
自分ではフォントにpxは使うなとか回答してるくせに
HTML5や子供セレクタのサンプルを使いまくるのはどういう見解なの?
Name_Not_Found [sage] 2011/10/26(水) 17:25:01.18 ID:???
子供セレクタってCSS2の?
Name_Not_Found [sage] 2011/10/26(水) 18:52:51.41 ID:???
子供セレクタにCSSのバージョン関係あんのか?
Name_Not_Found [sage] 2011/10/26(水) 19:24:22.71 ID:???
子供セレクタ使うなって言いたいんとちゃうの
Name_Not_Found [sage] 2011/10/26(水) 22:25:22.14 ID:???

今時のブラウザは、fontでpxには左右されないのにpx使うなっていう人がいる
それはIE6以下(IE7の例も)を考慮するからであっての事なので、それはそれで良い。
それなら、HTML5や子供セレクタを出すのはおかしいとの事でしょ
Name_Not_Found [sage] 2011/10/26(水) 23:51:50.94 ID:???
float:leftした要素にwidthを指定していないのですが、文字のサイズに合わせて広がりません
解決策はございませんか?
Name_Not_Found [sage] 2011/10/27(木) 01:08:21.79 ID:???
widthを文字ベースでemで設定
Name_Not_Found [sage] 2011/10/27(木) 03:56:55.08 ID:???
ORUKAはな…初心者初級者レベルにそんなガッチガチの説明してどうするんだっていうww
子孫セレクタはともかく兄弟セレクタなんか混乱させるだけだろ
Name_Not_Found [sage] 2011/10/27(木) 10:51:56.54 ID:???
素人は「仕様書に書いてあるから」と言えば正解だと思うらしいぞ

HTML4の質問なのにやたらとHTML5での説明してるけど
あれって知識を覚えたての頃にやりがちな事だよなw

素人相手に‘知ったかオヤジ’はみっともない
Name_Not_Found [sage] 2011/10/27(木) 12:45:32.81 ID:???
liにpadding:10 10;をしても効きません
padding:10px 10px;と指定すると効きます
確か単位を省略した場合はpxとして扱われたはずなんですが何故ですか?
Name_Not_Found [sage] 2011/10/27(木) 15:08:57.62 ID:???

(X)HTML の属性値と違って、CSS では「0」を指定する場合を除き、必ず単位を伴って指定する必要があります
Name_Not_Found [sage] 2011/10/27(木) 15:09:51.50 ID:???
何故? それは「おれ様ルール」だからだろw
Name_Not_Found [sage] 2011/10/27(木) 15:10:27.55 ID:???
cssの良い書き方みたいなのありますか?
Name_Not_Found [sage] 2011/10/27(木) 15:32:03.99 ID:???
正座をして書く
Name_Not_Found [sage] 2011/10/27(木) 15:35:46.38 ID:???
そして書き終えたらあつい緑茶を飲む
Name_Not_Found [sage] 2011/10/27(木) 17:00:49.79 ID:???
緑茶の飲み過ぎは体に悪い
Name_Not_Found [sage] 2011/10/27(木) 18:26:39.75 ID:???
そこから蹲踞でゆっくり立ち上がり
に〜〜〜〜〜ん〜〜〜〜〜げ〜〜〜〜〜〜〜〜ん〜〜〜〜〜〜
ご〜〜〜〜じゅ〜〜〜〜〜ね〜〜〜〜〜〜ん〜〜〜〜〜〜〜
Name_Not_Found [sage] 2011/10/27(木) 19:27:15.29 ID:???
下記のHTML(標準モード)構造でfloatで2カラムにさせたいのですが
ブラウザを小さくするとdiv#aの部分がしたにいってしまいます
ggって1ページに出てくる崩れない2カラムのHPをみたとおりにしたのですが
崩れなくするにはどこを修正したらよいでしょうか?
ただし、#boxと#aのwidthの値は変えられません


#box{float:left;width:300px;}
#a{width:100%;}
#box2{float:left;margin-left:300px;}

<div id="box">
<div id="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
<div id="box2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
Name_Not_Found [sage] 2011/10/27(木) 19:34:44.37 ID:???
body全体の幅を予め指定してしまえば良いんじゃ?
Name_Not_Found [sage] 2011/10/27(木) 19:45:44.97 ID:???
<ul>
<li>そして<a href="ttp://yahoo.com" target="_blank">ここ</a></li>
</ul>
通常のリンクの色は変えずに、リスト<li>の中にあるa要素の色だけを変更するにはどうすればいいでしょうか?
Name_Not_Found [sage] 2011/10/27(木) 19:48:25.86 ID:???

li a {
Name_Not_Found [sage] 2011/10/27(木) 20:15:49.77 ID:???

position
505 [sage] 2011/10/27(木) 22:37:44.48 ID:???
ブラウザのサイズによって#box2を自動的に変更したいのでbody全体の幅を指定はしたくないのです
positionだと解決できますか?
ただpostionだとtopとleftを設定するので文字のサイズとか↑で書いた上の部分にヘッダを書きたいのですが
ヘッダの文章とフォントサイズの大きさによって崩れたりしませんかね?
Name_Not_Found [sage] 2011/10/27(木) 23:47:25.07 ID:???
セレクタについての質問です.

たとえば,

<div class="AAA">
<div class="BBB">b</div>
</div>
<div class="AAA">
<div class="CCC"></div>
</div>

というような構造のHTMLがあったとして,
class="BBB"を子にもつdiv(class="AAA")に対してのみCSSにてスタイルを割り当てることは可能ですか?
Name_Not_Found [sage] 2011/10/27(木) 23:50:31.94 ID:???

質問が曖昧すぎて答えられない
どういう大きさにしたいの?
Name_Not_Found [sage] 2011/10/27(木) 23:57:14.37 ID:???

AAAのスタイルを空にしてBBBとCCCで区別した方が楽じゃね。
あるいはAAAの親要素からの:first-childか:nth-childで選択するとか。
Name_Not_Found [sage] 2011/10/28(金) 00:04:41.82 ID:???

実際にはもっと入り組んだ構造になってるからクラスで管理したいというのが実情です。。。
Name_Not_Found [sage] 2011/10/28(金) 00:20:14.22 ID:???
子孫まで条件に入れてたら面倒でたまんないっての
505 [sage] 2011/10/28(金) 00:35:20.55 ID:???
[ヘッダー]
[#box(子要素に#a)][#box2]
[フッター]

このようなレイアウトで
ヘッダーとフッターと#aはwidth100%にしてます
#boxのみ300pxにします
右側の#box2の部分はブラウザのサイズによって幅いっぱいまで自動的に調節されるようにしたいのです
Name_Not_Found [sage] 2011/10/28(金) 02:25:47.62 ID:???

CSS4セレクタの 「?」 のことか?
どっちにしろ今は無理だけど
Name_Not_Found [sage] 2011/10/28(金) 10:15:39.82 ID:???

Oh CSS4で使えるようになるのね
他の方法で解決するしかないかー
ありがとう
Name_Not_Found [sage] 2011/10/28(金) 16:35:02.88 ID:???
ブログのエントリー内で、画像は左右目一杯に表示(900px)して
文章だけは左右例えば500pxとか写真より左右を狭くすることはできませんか?
現在は下記のようになっています。
.entrytextのマージンをいじると.entrytext imgにもそのマージンが反映されてしまいます。


.entrytext, .formtext {
font-size: 100%;
margin: 0px;
padding: 0;
width: 100%;
}

.entrytext ul li {
margin: 0 0 5px 20px;
padding: 0;
list-style: square;
}

.entrytext img {
margin: 0px;
padding: 0px;
border: 2px black solid;
}

.formtext img {
margin: 0px;
padding: 0px;
border: 2px black solid;
}
Name_Not_Found [sage] 2011/10/28(金) 16:38:22.68 ID:???
CSS3がでたとおもったらもうCSS4の話がでてるのか
Name_Not_Found [sage] 2011/10/28(金) 17:49:34.55 ID:???
overflow:autoをつけるとmargin-leftがおかしくなるのってバグですよね?
Name_Not_Found [sage] 2011/10/28(金) 19:42:18.84 ID:???
なんのバグだよ? ブラウザ(バージョン)、ソースやURLなどを出してくれ
Name_Not_Found [sage] 2011/10/28(金) 22:47:37.09 ID:???

日本語でおk
Name_Not_Found [sage] 2011/10/28(金) 23:06:33.60 ID:???
<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body,#all,#top,#bottom{width:100%;}
#left,#right{float:left;}
#left{width:900px;background:#f00;}
#right{margin-right:-900px;background:#0f0;}
#bottom{clear:both;}
</style>
</head>
<body>
<div id="all">
<div id="top">ヘッダー</div>
<div id="left">あああああああああああああああああ</div>
<div id="right">えええええええええええええええええ</div>
<div id="bottom">フッター</div>
</div>
</body>
</html>

margin-left:900pxってするとずれます
margin-right:-900pxてやるとずれないのですが、ブラウザのサイズを極限まで小さくすると#leftの下に#rightがもぐってしまいます
#rightは可変にしたいのでwidthで固定しません
どこを修正したらよいでしょうか?
Name_Not_Found [e] 2011/10/29(土) 10:26:34.46 ID:???
iphoneのブラウザでは以下のようにするとspanTagいれた後に空白ができてきます
これを解決する方法はないでしょうか

おいしい<span style="background-color:rgb(0,153,153)">ラーメン</span>です
Name_Not_Found [sage] 2011/10/29(土) 16:19:56.36 ID:???

どうしたいのか伝わってこない
left900pxもどこにやったのか分からない
無駄に伝わりにくい

もう少しがんばりましょう
Name_Not_Found [sage] 2011/10/29(土) 16:22:51.33 ID:???

iphoneもってないから確認できないけど
ブラウザのcssじゃないのか?

空白ってよりマージンとかパディングだと思う。
そのスパンタグにどんなcssがかかっているのか調査されたし
自分で作ったcssじゃなくて、ブラウザ独自のcssも含めてって意味でね
Name_Not_Found [sage] 2011/10/29(土) 16:48:05.63 ID:???

それお前がコードを読めないだけだろうが
Name_Not_Found [sage] 2011/10/29(土) 17:04:56.70 ID:???

本人か?
まじで伝わりにくいんだが
仕方ないからがんばってよんでやるよ・・・
Name_Not_Found [sage] 2011/10/29(土) 17:14:26.00 ID:???
悪い悪いてっきりが同じ質問かと思ってた


カラム落ちする原因はallの横幅がウィンドウ枠100%になっているから。
右カラムのサイズも自動になっているのはよくないと思う。

clear;bothはallに使うか
左カラム、右カラムを囲ったdivに使ったほうがいいんじゃね

ネガティブマージンもおすすめできない

マージンレフトとfloatレフトを同時に使うと
IEではサイズが二倍になったりするからハックすればいい

あとcss使うならちゃんと分けろ
ついでにソース読みにくい
Name_Not_Found [sage] 2011/10/29(土) 17:20:21.73 ID:???
あと、marginの意味ちゃんと分かってる?
positionと勘違いしてない?
左カラムの右枠と右カラムの左余白900pxとったらそりゃとんでもないことになるよね

margin-right-900pxは右カラムの右枠から左に900pxずらしてるようなものだけど
なんでそんなことしてんの?

右カラムは左カラムにくっつけたいの?
それともall枠の右側にくっつけたいの?

スタイルシートもごっちゃごちゃ書いてあって管理しにくいだろ常考
ボックスごとにわけろ
Name_Not_Found [sage] 2011/10/29(土) 17:26:29.19 ID:???
 そういうのはposition使えよ


>clear;bothはallに使うか左カラム、右カラムを囲ったdivに使ったほうがいいんじゃね
524の方がベター

>マージンレフトとfloatレフトを同時に使うとIEではサイズが二倍になったりする
ウソ教えんなよ。6だけだろ
Name_Not_Found [sage] 2011/10/29(土) 17:46:18.40 ID:???

あぁ、6ぬけてたわ。別にウソではない

clearは確かに左右カラムがid指定だし、
一個しかでてこないならbottomでよさげだな
Name_Not_Found [sage] 2011/10/29(土) 22:06:12.72 ID:???

エントリ枠とエントリ本文とエントリ画像の3つに
それぞれ別々のクラス名をつければいいってことじゃね?
HTMLの<%topentry_body>をDIVで挟んで、新しいCLASS名をつけてみたら?
本文のフォントサイズやなんかは新しいクラス名のほうに移して
エントリ枠の設定は.entrytext, .formtext {
に残しておけばいいんじゃないかな。

へそ曲がりなテンプレートだと
新しいクラス指定を素直に受け入れないこともあるから
こればっかりは様子を見ながら試してみる以外にない。
Name_Not_Found [sage] 2011/10/30(日) 13:11:53.38 ID:???
ttp://code.google.com/intl/ja/apis/maps/documentation/javascript/tutorial.htmlのサンプルを利用してます
マップ画像を角丸にしたいのですがFirefoxとIEとOPERAは適用されるのにchromeだけ反映されません
chromeでも角丸にする方法はございますか?
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
#map_canvas {
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
}
</style>
<script type="text/javascript" src="ttp://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Name_Not_Found [sage] 2011/10/30(日) 14:12:59.85 ID:???
ブラウザの横幅が特定のpx以下になったら横スクロールバーを表示させる方法はございますか?
Name_Not_Found [sage] 2011/10/30(日) 14:20:12.18 ID:???

body {min-width: 特定のpx; }
とか?
Name_Not_Found [sage] 2011/10/30(日) 14:24:06.70 ID:???
知っているがおまえの態度が気に入らない
Name_Not_Found [sage] 2011/10/30(日) 14:25:49.75 ID:???
日本語で
Name_Not_Found [sage] 2011/10/30(日) 14:40:56.46 ID:???

ttp://www.vickcy.com/web-frontend/webkitde-overflow-hidden-bug
ttp://www.torounit.com/blog/2011/04/30/698/
ttp://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html

バグかどうかは知らん
関係ないけど、-webkit-border-radiusと-moz-border-radiusはいらん
Name_Not_Found [sage] 2011/10/30(日) 14:49:24.67 ID:???
いやいやsafariとfirefox用にいるでしょ
Name_Not_Found [sage] 2011/10/30(日) 14:55:53.92 ID:???
Firefox3.6は対応してないのか
Safariはベンダープレフィックスいらんよ
Name_Not_Found [sage] 2011/10/30(日) 18:25:47.53 ID:???
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{width:100%;height:100%;}
#warp{width:100%;height:100%;}
#header{width:100%;height:50px;background:#0f0;}
#body{width:100%;height:100%;background:#f00;}
</style>
</head>
<body>
<div id="warp">
<div id="header">ヘッダ</div>
<div id="body">ボディー</div>
</div>
</body>
</html>

<div id="body">ボディー</div>の部分の高さをブラウザにフィットしたいのですが<div id="header">ヘッダ</div>の部分の高さ分だけ下にはみ出てしまいスクロールバーが出てしまいます
ブラウザサイズに合わせて<div id="body">ボディー</div>も表示領域にフィットさせたいのですがどのように修正するとよいでしょうか?
543 [sage] 2011/10/30(日) 18:30:18.29 ID:???
書き直します
フッタを入れました

<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{width:100%;height:100%;}
#warp{width:100%;height:100%;}
#header{width:100%;height:50px;background:#0f0;}
#body{width:100%;height:100%;background:#f00;}
#footer{width: 100%;height:50px;background:#999;}
</style>
</head>
<body>
<div id="warp">
<div id="header">ヘッダ</div>
<div id="body">ボディー</div>
<div id="footer">フッタ</div>
</div>
</body>
</html>
543 [sage] 2011/10/30(日) 18:31:19.03 ID:???
連投失礼します
ブラウザの大きさを変えたときに#bodyの部分が伸び縮みするようにしたいのです
Name_Not_Found [sage] 2011/10/30(日) 19:04:00.59 ID:???
すみません質問させてください。
<div class="xxx">〜</div>で区切った内部にテキストが入るのですが
これが改行のない文章でも指定した横幅で改行されるようにするには
どうしたらいいでしょうか?
今のままでは指定した横幅を超えていくらでもテキストが飛び出てしまいます。
word-break: keep-all;とか試してみましたが改行されないままでした。

どうぞお知恵をお貸しください。おねがいします。
Name_Not_Found [sage] 2011/10/30(日) 19:16:13.13 ID:???

はみ出すのって半角英数とかでしょ
javascript 半角英数 改行させる
でggってみ
Name_Not_Found [sage] 2011/10/30(日) 19:30:03.75 ID:???

word-wrap
Name_Not_Found [sage] 2011/10/30(日) 19:55:47.92 ID:???

display: table 系使うと楽だよ
Name_Not_Found [sage] 2011/10/30(日) 20:00:37.06 ID:???
改行と折り返しの区別くらいつけろよ
Name_Not_Found [sage] 2011/10/30(日) 20:54:46.31 ID:???
word-wrapはクロスブラウザで統一した結果にならない
Name_Not_Found [sage] 2011/10/30(日) 20:57:07.38 ID:???
まあテキストモジュールが勧告候補になるまで待ってなって
Name_Not_Found [sage] 2011/10/30(日) 21:00:39.67 ID:???

どのように使うのですか?
Name_Not_Found [sage] 2011/10/30(日) 21:03:59.85 ID:???
> display: table 系
IE8未満は未対応ですね
Name_Not_Found [sage] 2011/10/30(日) 21:48:53.78 ID:???
でっていう
Name_Not_Found [sage] 2011/10/30(日) 22:07:02.81 ID:???
IE6-7は特殊なレガシーシステムを使うための専ブラみたいなもんだから
一般のサイトが対応する必要はないと思う
Name_Not_Found [sage] 2011/10/30(日) 22:21:47.54 ID:???
全ユーザの約1割は未だにIE6使用者だけどね。
Name_Not_Found [sage] 2011/10/30(日) 22:29:38.92 ID:???
xpのサポ切れたらIE9以降のみ対応すればよくなるから
Name_Not_Found [sage] 2011/10/30(日) 22:36:55.35 ID:???
> xpのサポ切れ
3年後だね
Name_Not_Found [sage] 2011/10/31(月) 05:08:22.88 ID:???
XPユーザーは、サポ切れなんて気にしない♪
パソコンが逝くまで使い続ける
気にするなら、とっくにIE7,8にしてる!
お前らが気合入れて作っても、崩れサイトとして認識するよw
Name_Not_Found [sage] 2011/10/31(月) 07:55:16.32 ID:???

2000の時も同じ事を聞いた
Name_Not_Found [sage] 2011/10/31(月) 10:42:11.77 ID:???
「このサイトはIE8以上で閲覧してください」ページにリダイレクトしようぜ。
Name_Not_Found [sage] 2011/10/31(月) 12:17:25.05 ID:???

蔵はそれを「機会損失」と考えるから、無理。
Name_Not_Found [sage] 2011/10/31(月) 13:15:03.99 ID:???
リダイレクトとか()
Name_Not_Found [] 2011/10/31(月) 17:15:55.14 :TOGkjIGW
拡散希望!ttp://www.youtube.com/watch?v=H0wElSatScI 【頑張れ日本】11.4 TPP絶対阻止!国会大包囲!国民行動
Name_Not_Found [sage] 2011/10/31(月) 18:28:36.74 ID:???
すみませんが、質問させて頂きます。
Tableタグを

<table class="nanasi"><tr><td></td></tr></table>

とかにして

CSSの方で

table.nanasi {
width: 480px;
border: 3px #555555 solid;
border-collapse: collapse;
border-spacing: 0;
}

みたいにしているんですが、ほとんどは480pxで適応してくれるんですが、
たまに横幅が300pxぐらいで狭かったり、480以上ではみ出したりして
指定しているのにその通りにならなかったりするんですが、これって
なにが問題なんでしょうか?教えて頂けると幸いです。
Name_Not_Found [sage] 2011/11/01(火) 00:49:57.54 ID:???

その崩れている時のソースをjsfiddleでよろ
あと、どのブラウザのバージョンな
Name_Not_Found [sage] 2011/11/01(火) 01:37:36.29 ID:???


クローム、サファリ、IEはだめでした。
しかしフォックスでは普通に表示されます。

jsfiddleについては初耳で知りませんでしたが、今ぐぐったら色々と
こちらを使うようになれば知識面での上達が出来そうなこと、
そして身ばれを防ぐ為にソースの一部を隠したいけれど、どこを
隠せば良いかの知識がないので出直してきたいと思います。

jsfiddleを教えて頂きありがとうございました。一歩前進です。
Name_Not_Found [sage] 2011/11/01(火) 01:48:32.94 ID:???

IEはバージョンごとで結構崩れるから
6なのか7なのか8なのか9なのかって事だよ

ソースがつかめてないならまずはそこからだと思う
firefoxならbugs
IEならdeveloper tool
chromeなら要素の検証
Dreamweaverを体験版でもいいから
そこのテーブルタグをクリックすればどのcssが効いてるか
見る事ができるから、それ使ったりもしたほうがいいよ
Name_Not_Found [sage] 2011/11/01(火) 03:41:44.02 ID:???

別にその程度のソースはここでOK
ただ、架空のソースをだすのではなく、
そのダメだった時のソースを出せばいいんだよ。

このソースは何故意図通りにならないの?ってな感じでOK
Name_Not_Found [sage] 2011/11/01(火) 05:32:26.02 ID:???

固定レイアウトアルゴリズムにしてないからだと思うよ
Name_Not_Found [sage] 2011/11/01(火) 18:52:57.27 ID:???

ここに貼ると必要な部分だけ抽出したつもりで実は書いてない部分に原因がありました、って人が必ず出てくる
ちゃんと切り分けて貼れれば問題ないが、そういう人はjsfiddleも使いこなせる
Name_Not_Found [sage] 2011/11/01(火) 19:00:30.44 ID:???
>>560==>>570
Name_Not_Found [] 2011/11/03(木) 01:10:02.47 :6YfO7ens
Google Chrome で、<pre>タグの中身が等幅フォントで表示されず、困ってます。
font-family:monospaceを指定してもだめ。
FirefoxやSafariでは問題ないのに、Chromeでのみ発生します(Chrome15で確認)。
どなたかアドバイスお願いします。
Name_Not_Found [sage] 2011/11/03(木) 01:41:48.99 ID:???

プロファイル作り直せば
Name_Not_Found [] 2011/11/03(木) 01:50:52.62 :6YfO7ens

プロファイルとは?CSSの用語ですか?
Name_Not_Found [sage] 2011/11/03(木) 03:48:35.37 ID:???
その前に、自分だけの話なのか検証しないといけないよ
Name_Not_Found [sage] 2011/11/03(木) 08:16:31.36 ID:???

Chrome初期化しろってことだ
Name_Not_Found [sage] 2011/11/03(木) 08:25:26.16 ID:???

クリーンインストールしたChromeと同じ状態にすること
Name_Not_Found [sage] 2011/11/03(木) 21:40:11.93 ID:???
ボタンをブラウザいっぱいに広げたいのですがDOCTYPEを書くと広がりません
書かないと広がります
DOCTYPEを買い手もいっぱいに広げる方法をアドバイスおねがいします

<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;border:0;}
html,body{width:100%;height:100%;}
#contents{height:100%;min-height:100%;}
body>#contents{height:auto;}
button{width:100%;height:100%;}
</style>
</head>
<body>
<div id="box">
<button>a</button>
</div>
</body>
</html>
580 [sage] 2011/11/03(木) 22:05:27.83 ID:???
質問取り下げます
失礼しました
Name_Not_Found [sage] 2011/11/04(金) 20:10:12.18 ID:???
特定のタグが含まれるタグをCSSで指定するためにはどうすれば良いでしょうか?

例えば、
<a href="hoge.html"><img src="hoge.jpg" /></a>
<a href="fuga.html">foobar</a>

とある時、

imgタグが含まれているaタグ{
//スタイルの記述
}
としたいです
Name_Not_Found [sage] 2011/11/04(金) 20:15:54.91 ID:???

Name_Not_Found [sage] 2011/11/04(金) 20:18:27.77 ID:???

現状ではできないのですね
ありがとうございました
Name_Not_Found [sage] 2011/11/05(土) 09:47:24.55 ID:???

できるよ
Name_Not_Found [sage] 2011/11/05(土) 10:44:39.32 ID:???
できるなら方法も書きましょう
できる・できないだけ書くのはレスの無駄で単なる幼稚な行為か荒らしだと認定されますよ
Name_Not_Found [sage] 2011/11/05(土) 11:39:28.39 ID:???

オライリーのCSS完全ガイドに書いてあったような気がする。
585 [sage] 2011/11/05(土) 12:05:24.26 ID:???
普通に指定すればいいだけなんだから初歩の問題じゃね?
みたいなのが荒らしだろ
はスルーしていいと思う


の言い方だと
imgタグが含まれているaタグを装飾したいってことでいいのかな
一応imgのほうを装飾したい場合も書いといた

ttp://jsfiddle.net/NxKnM/
Name_Not_Found [sage] 2011/11/05(土) 12:15:28.44 ID:???

質問をよく読め
Name_Not_Found [sage] 2011/11/05(土) 12:27:58.80 ID:???

素直に「どうぞ教えて下さい」と言えばいいものを…
つまらん自治するから荒らし認定されたな。
Name_Not_Found [sage] 2011/11/05(土) 12:39:51.93 ID:???

お前がry
Name_Not_Found [sage] 2011/11/05(土) 12:43:32.38 ID:???
の日本語が変だが
子から親の指定をしたいってなら無理だな
Name_Not_Found [sage] 2011/11/05(土) 12:47:34.34 ID:???

class指定しないでやりたいってことだろう
あなたの解釈がおかしい
Name_Not_Found [sage] 2011/11/05(土) 12:52:53.63 ID:???

素人は無理して回答しなくていいから黙ってろ
Name_Not_Found [sage] 2011/11/05(土) 12:58:32.93 ID:???
あんた無粋だねえ
Name_Not_Found [sage] 2011/11/05(土) 13:14:06.64 ID:???
これは質問者が悪いな
質問者====
必死すぎだろw
593 [sage] 2011/11/05(土) 13:31:32.92 ID:???

593で初めて書き込んだが、質問の意図はわかる
俺からすればが酷いぞ
「img要素を子要素とするa要素に相当するセレクタはありますか?」に対して「該当要素にclassを付けてください」で質問者は納得すると思うのか?
Name_Not_Found [sage] 2011/11/05(土) 13:33:41.46 ID:???

「img要素を子要素とするa要素に相当するセレクタはありますか?」って最初からかいとけよw
Name_Not_Found [sage] 2011/11/05(土) 13:57:52.83 ID:???
バカな回答する奴に限って自分に反論する者は全て1人に認定したくなるものだな
Name_Not_Found [sage] 2011/11/05(土) 13:57:59.49 ID:???

> imgタグが含まれているaタグ{
これでわかるだろ
「imgタグが含まれているaタグ」にクラスセレクタが入ると思ってるのか?
Name_Not_Found [sage] 2011/11/05(土) 14:15:43.67 ID:???
知識以前に読解力の問題だな
Name_Not_Found [sage] 2011/11/05(土) 14:16:36.11 ID:???
=====
Name_Not_Found [sage] 2011/11/05(土) 14:40:36.80 ID:???
この質問は普通にわかるわ
Name_Not_Found [sage] 2011/11/05(土) 14:44:10.48 ID:???
うるせえエビフライぶつけるぞ
 ,.、,、,..,、、.,、,、、..,_,,_  /i
;'`;、、:、. .:、:, :,.: ::`゛:.::'':,'.´ -‐i
'、;: ...: ,:. :.、... :.、.:: _;... .;;.‐'゛ ̄  ̄
   ヽ(´・ω・)ノ
     |  /
     UU
Name_Not_Found [sage] 2011/11/05(土) 14:45:34.68 ID:???
まともに受け答えしない時点で荒らし
Name_Not_Found [sage] 2011/11/05(土) 16:27:16.36 ID:???

おまえも
Name_Not_Found [sage] 2011/11/05(土) 20:04:53.64 ID:???
ん?クラスつければって話で世界平和が訪れたんじゃないの?
Name_Not_Found [sage] 2011/11/05(土) 20:13:44.80 ID:???
他人のページのスタイル変更が目的なのでダメです
Name_Not_Found [sage] 2011/11/05(土) 20:55:59.17 ID:???
鯖が違うじゃねぇか
Name_Not_Found [sage] 2011/11/05(土) 21:02:59.45 ID:???
多分、ユーザCSSを適用しようとしているのだろう
初めから用途まで書いた方が誤解がなくて良かったと思うが
Name_Not_Found [sage] 2011/11/05(土) 22:09:58.78 ID:???
国語力がない奴が掘り返して騒いでいるだけです
Name_Not_Found [sage] 2011/11/06(日) 11:30:42.88 ID:???

javascriptで子要素をチェックしてもいいなら出来る
css単品だとできない
Name_Not_Found [sage] 2011/11/06(日) 11:35:34.18 ID:???

スレ間違えてね?
Name_Not_Found [sage] 2011/11/06(日) 11:51:15.78 ID:???
CSSで出来ない代わりに別の方法がある事を書いたまでだから間違えてはないけど
Name_Not_Found [sega] 2011/11/07(月) 01:55:55.37 ID:???
半角英数だけを自動的に等幅にしたいのですが
どうしたらよいでしょうか
Name_Not_Found [sage] 2011/11/07(月) 02:03:57.02 ID:???
CGIで吸い上げて吐きだすしかないんじゃないか?
Name_Not_Found [sage] 2011/11/07(月) 02:15:55.08 ID:???
カーニング?
キャッチコピー的な特定の部分とかならclassつけてletter-spacingとか、画像で済ますとか
それじゃダメなの?
Name_Not_Found [sage] 2011/11/07(月) 03:08:21.65 ID:???
それは日本語でいうところの手動という作業ではないのかい?
Name_Not_Found [sage] 2011/11/07(月) 03:18:52.69 ID:???
langつけろ
Name_Not_Found [sage] 2011/11/07(月) 10:27:43.66 ID:???
font-familyで等幅英字フォント指定すれば
Name_Not_Found [sage] 2011/11/07(月) 10:47:00.67 ID:???

少なくともWindowsでは標準で等幅英字なんて名前のフォントは無いと思うけど
何のことを言っているんだ?
Name_Not_Found [sage] 2011/11/07(月) 11:43:34.95 ID:???
WEB Font使えばいいんじゃね。
半角英数が等幅で、それ以外がプロポーショナルなフォントがあればいい。
Name_Not_Found [sage] 2011/11/07(月) 11:44:23.63 ID:???
>あればいい
無いんじゃないの
Name_Not_Found [sage] 2011/11/07(月) 12:22:06.98 ID:???
日本語フォントを指定しなければいいんじゃないの
Name_Not_Found [sage] 2011/11/07(月) 12:38:20.60 ID:???

無いなら作ればいいよ。
フリーの半角英数とIPAのフォントを合成するとかして。
改変可能なライセンスのものを選ぶ必要があるけど。


指定しなければブラウザ依存になるよ。
Name_Not_Found [sage] 2011/11/07(月) 13:00:28.42 ID:???
cssだけで出来ないことはJavascriptsでやれよ
Name_Not_Found [sage] 2011/11/07(月) 14:26:46.94 ID:???
複数形ワロタ

Name_Not_Found [sage] 2011/11/07(月) 17:34:45.66 ID:???

英字フォントの後に日本語フォントを指定すればいいでしょ
Name_Not_Found [sage] 2011/11/07(月) 17:42:55.15 ID:???

それは、英字フォント(日本語は実装依存)だけが適用されるのでは。
Name_Not_Found [sage] 2011/11/07(月) 18:14:44.29 ID:???
CSSの仕様上はで良いけど、Windowsだとフォントリンクのせいでまともに機能しないかもね
Name_Not_Found [sage] 2011/11/07(月) 18:37:48.80 ID:???
<x class="a"></x>
<x class="b"></x>
<x id="c"></x>
<x></x>
とある時、1行目のxタグ以外のタグにスタイルを適用するためにはどうすれば良いでしょうか?
HTMLの記述自体を変更するのはナシでお願いします
Name_Not_Found [sage] 2011/11/07(月) 18:47:41.56 ID:???
x:not(.a)
Name_Not_Found [sage] 2011/11/07(月) 19:02:57.74 ID:???

うまくいきました、ありがとうございます
Name_Not_Found [sage] 2011/11/07(月) 19:21:24.23 ID:???
&
Name_Not_Found [sage] 2011/11/07(月) 19:35:37.75 ID:???
すいませんさんの逆の質問で
一番最後の要素にだけ適用しない方法ってありませんか?
Name_Not_Found [sage] 2011/11/07(月) 19:39:47.73 ID:???

.a, .b, #c { }
Name_Not_Found [sage] 2011/11/07(月) 22:10:33.22 ID:???
クロスブラウザ用の場合は、その旨教えてやれよ
Name_Not_Found [sage] 2011/11/07(月) 22:17:42.50 ID:???

質問者と回答者どっちに言ってるんだ?
> クロスブラウザ用の場合は
回答者に言ってるならクロスブラウザ用じゃないから該当しないよね。
Name_Not_Found [sage] 2011/11/08(火) 11:53:01.91 ID:???
試してないけど、x:not([class][id]) かね。
がクロスブラウザ用ってことかと。


文句いってる奴は無視していいと思うよ。
自分から何もせずに人に注文付けるだけの自己中な人だから。
自分で回答すればいいだろって話。
Name_Not_Found [sage] 2011/11/08(火) 16:42:36.95 ID:???
のセレクタ = のセレクタ
みたいにが勘違いしてるだけたぶん
639 [sage] 2011/11/08(火) 20:09:00.60 ID:???
自分も勘違いしてた
x[id], x[class] だな
Name_Not_Found [sage] 2011/11/08(火) 21:54:32.56 ID:???

何かした後に、次回の為に「ついでに●●もしとけよ」とか言うのが自己中なのか?
それを自己中と言う方が自己中だろ
Name_Not_Found [sage] 2011/11/08(火) 23:01:01.28 ID:???
チューチュー
Name_Not_Found [sage] 2011/11/08(火) 23:13:01.15 ID:???
忠告は、自己中では無く親切心なんだけどね
思春期に親に言われるとムカついたけどね
Name_Not_Found [sage] 2011/11/08(火) 23:14:07.11 ID:???
反抗期だった
Name_Not_Found [] 2011/11/09(水) 03:49:02.81 :Z4TjQrd0

style内にコメント
あまり勧められない
Name_Not_Found [] 2011/11/09(水) 07:46:27.17 :Usuht5KD
Name_Not_Found [sage] 2011/11/09(水) 14:00:05.80 ID:???
で指摘済みだし4か月も経って今更何だいって話だし割とどうでもいい
どうせ構文がXHTMLだってHTMLとしてパースしてる(させてる)んだから
Name_Not_Found [sage] 2011/11/09(水) 14:10:46.06 ID:???
FC2はアホやなぁ
Name_Not_Found [] 2011/11/09(水) 15:49:25.98 :f+9Yf7Jv
CSSセレクタについて質問させてください

<div class="ArticleSet cFix">
のようにclass属性が2つある場合の指定方法が分かりません
div[class="ArticleSet cFix"]ではDOMでは認識されませんでした
他にも、ダブルクォーテーションを取り除いたりしたのですがダメでした

どのように指定すればいいのか教えていただけませんでしょうか?

650 [] 2011/11/09(水) 15:54:54.07 :f+9Yf7Jv
すみません、少しだけ質問を変えます
<div class="ArticleSet cFix"><p>ほうれん草</p></div>
の「ほうれん草」トいう文字を取り出したいと思っています
この場合はどのように指定すればいいのでしょうか?
Name_Not_Found [sage] 2011/11/09(水) 16:09:26.11 ID:???
文字列を取り出すとかDOMとか、それCSSは何の関係があるの?
650 [] 2011/11/09(水) 16:13:03.58 :f+9Yf7Jv

スレ違いという意味でしょうか?
もしそうだとすると、CSSセレクタの指定方法は外部CSSの指定と同じですのでCSSという概念の範囲だと思いまして
違ったらごめんなさい
Name_Not_Found [sage] 2011/11/09(水) 16:20:09.30 ID:???
CSSそのものだからスレ違いではないよね
652 [sage] 2011/11/09(水) 16:34:20.47 ID:???
逆に聞くけど、jQueryの要素選択とかそういう話に繋がるんじゃないの?

<!DOCTYPE html>
<title>test</title>
<style> .hoge.fuga { color: #f00; } </style>
<p class="hoge fuga">hoge fuga</p>
<p class="hoge">hoge</p>
<p class="fuga">fuga</p>

セレクタではクラスセレクタを連結して書く 記憶が曖昧だがIEは古いと対応してないかもしれん
ただし上記の場合hogeとfuga以外にさらにclassを持っている場合も引っかかる

それをDOMだの文字列抽出だのに持ち込んで使えるのかは別な話
Name_Not_Found [sage] 2011/11/09(水) 16:37:57.96 ID:???
jQueryとはまた程度の低いものを引っ張り出してきたね
CSSセレクタってはちゃんと書いてるじゃん
Name_Not_Found [sage] 2011/11/09(水) 16:40:26.66 ID:???
<a title="あああああああ">aaa</a>

リンクの上にカーソルを持ってくるとtitleの文字が出てきますが
このtitleの部分にbackground:#000000;をつけたいのですが
セレクタはどのように書くのでしょうか?
Name_Not_Found [sage] 2011/11/09(水) 16:48:48.94 ID:???

だからそれがDOMで認識されないだの質問が変わって文字列抽出だの、
そういう話になるから違う話なんじゃないのって話でしょ?程度低いのはどっちか考えろ
Name_Not_Found [sage] 2011/11/09(水) 16:54:43.19 ID:???

何言ってんだお前は?
こいつはただcssの指定の仕方を聞いてるだけだろ!
CSSセレクタがCSSと別物なんて言えるのか?
例えそれが抽出の話だろうが、CSSはCSSであり、指定の方法がまた別の人間が
純粋なスタイルシートで使用する場合に指定方法が分からなければ参考になるだろ
これは「完全に」CSSの書き方以外のなにものでもないだろうが

お前こそCSSって何か一から学習してこい
W3Cでも見てCSSの概念を読んでこい
Name_Not_Found [sage] 2011/11/09(水) 17:10:27.70 ID:???
じゃぁ何だ、HTMLファイルに
<div class="ArticleSet cFix"><p>ほうれん草</p></div>
というものがあって、
ある人間が上記のほうれん草という文字にだけ何かCSSの属性を適用したいと考えたとき、他に
<div class="ArticleSet"><p>ほうれん草</p></div>
とか似たようなものがあって適用できないときこれがCSSのセレクタの問題ではないというのか?
そりゃclass等の指定の仕方が悪いんだろうが、それでもどうしても規程か何かで変えられない
仕方がないって時と何が違うんだ?
jQueryとはそもそも全く関係がないだろ
「CSSのセレクタ」とjQueryは話が違う
これはCSSのスレで、何も逸脱していないだろ
抽出がどうだろうが、CSSのセレクタの指定には何も変わらない
お前の言ってるjQueryの方がスレ違いだ

くだらんからもう俺はここら辺で止めるけどよ
Name_Not_Found [sage] 2011/11/09(水) 17:17:36.85 ID:???
だからセレクタのモジュール名にCSSって名前が含まれなくなったんだけどね
Name_Not_Found [sage] 2011/11/09(水) 17:29:48.18 ID:???
おい長文止めろ俺の質問が流れるだろう
Name_Not_Found [sage] 2011/11/09(水) 17:38:22.98 ID:???

title 属性はツールチップを表示するためのものじゃない
ユーザースタイルの話なら、ブラウザによって違うけど例えば Firefox は tooltip#aHTMLTooltip
Name_Not_Found [sage] 2011/11/09(水) 19:26:33.82 ID:???

<div class="ArticleSet cFix"><p>ほうれん草</p></div>
でp見えなくしたいなら
.ArticleSet p{
display:none;
}

.cFix p{
display:none;
}
(消えなきゃ両方一緒に)
ではだめなの?p取る訳じゃないんだけど
Name_Not_Found [sage] 2011/11/09(水) 19:35:50.45 ID:???

Name_Not_Found [] 2011/11/15(火) 04:10:05.79 :rxjqt9HN
ttp://www44.atwiki.jp/mhp3ta/pages/16.html

上のサイトの様なテーブルで編集したいのですが、どうしてもうまくいきません
どの様にプラグインを組めばいいですか?編集例を教えてくださるとありがたいです
Name_Not_Found [sage] 2011/11/15(火) 10:26:50.81 ID:???
プラグインはいらない。
CSSでできる。
Name_Not_Found [] 2011/11/17(木) 12:53:59.83 :adxkXDsK
FC2の公式テンプレートを色々と弄くりながら勉強してるんですが、
テンプレートの中に次のような記述がありました。

/* side */
.sidehead{
}

省略

.sidehead{
height: 53px;
}

一度、sideheadクラスを空で定義して、
sideの一連の定義が終わったあとに再度、sideheadクラスを
定義し直しています。
このような記述の仕方に何か特別な意味があるのでしょうか?
Name_Not_Found [sage] 2011/11/17(木) 13:31:44.93 ID:???
一連の定義はデフォルトで後から
カスタマイズしやすいようにってことでしょ
Name_Not_Found [sage] 2011/11/17(木) 14:53:10.34 ID:???
ttp://www.cssez.com/

ここってサービス終了したんですか?
Name_Not_Found [sage] 2011/11/17(木) 15:01:18.06 ID:???

うわ、ドメイン失効wはずかしw
Name_Not_Found [sage] 2011/11/17(木) 20:45:52.52 ID:???
width:600のdivの中にwidth:160の子div3つを横に等間隔中央揃えで配置したいのですが、何か手はないでしょうか

639 [sage] 2011/11/17(木) 21:10:01.89 ID:???

計算すれば何px開ければいいか、出てくる
Name_Not_Found [sage] 2011/11/17(木) 21:44:30.24 ID:???

これじゃだめなの?

.box {
margin:10em auto;
width:600px;
padding:5px;
background:black;
color:white;
}

.sub_box {
border:1px black solid;
background:white;
margin:5px;
color:gray;
text-align:center;
}
Name_Not_Found [sage] 2011/11/17(木) 21:44:50.35 ID:???
ごめん。わかりやすく。と思ったけどゴッチャになった
Name_Not_Found [sage] 2011/11/17(木) 21:57:27.08 ID:???
更にごめん。いろいろ根本的に間違ってた。

・inline-block使うものと
・table-cell使った奴おいとく

.box {
width:600px;
}

#sub_box {
display: inline-block;
width:194px;
}


<style type="text/css">
.box {
width:600px;
}

#sub_box {
display: table-cell;
width:200px;
}

後者だとbox内でどれだけwidth大きくしてもはみ出ないしイイんじゃないかなと思ってる
Name_Not_Found [sage] 2011/11/17(木) 22:10:41.78 ID:???
これみながらmarginでやってみ
600-480=120

<--------- width:600px ------------>
<---->■<--><-->■<--><-->■<---->
Name_Not_Found [sage] 2011/11/17(木) 22:11:23.56 ID:???
<---->は30px
<-->は15px
Name_Not_Found [sage] 2011/11/18(金) 01:38:59.80 ID:???
背景を細めのストライプに設定するため以下の書き方をした場合

1:
 background-size: 50px 50px;
 linear-gradient(top left -45deg, #2b2b2b, #2b2b2b 5%, #333333 6%,
 #333333 10%, (略) #2b2b2b 91%, #2b2b2b 95%, #333333 96%, #333333 100%);
2:
 background-size: 10px 10px;
 linear-gradient(top left -45deg, #2b2b2b, #2b2b2b 25%, #333333 26%,
 #333333 50%, #2b2b2b 51%, #2b2b2b 75%, #333333 76%, #333333 100%);
 
sarari5.1.1とChorome15.0.874.120では体感的に差を感じないのですが、FF8だと
2で固まりかけます。
これはFireFoxになにか固有の問題があるのか、描画の速さで気付かないだけで
前二者も多少は遅くなっている(2の方が明らかに処理が重い)のか、個人的な
環境のせいか……何が問題と考えれば良いのでしょうか。
Name_Not_Found [] 2011/11/18(金) 05:45:59.45 :649w/tNX
<div>
<p>あああ</p>
</div>

divに背景色つけてpにマージンつけた場合、マージン部分は色がつかない
ものですか?
Name_Not_Found [sage] 2011/11/18(金) 07:36:48.88 ID:???

その条件だけならマージンどころか Pは、無色透明無味無臭だ
色が付くのは、divであって、Pは透明だからdivの色が見えているだけ・・・
Name_Not_Found [] 2011/11/18(金) 08:34:20.84 :rOYVSJBz

説明不足でした。
pにもdivの背景色をつける予定だったのですが、pにmargin-top:10pxを設定すると白い空白ができてしまったもので。
条件はheaderに横並びのメニューバーを設定して次に<div id="main">で
<p>でパンクズリストを上マージン設定したら空白ができてしまうのです。
パディングなら大丈夫なので質問しました。
Name_Not_Found [sage] 2011/11/18(金) 13:14:03.46 ID:???
マージンは外側の余白だから背景色とか関係ないよ
Name_Not_Found [sage] 2011/11/18(金) 13:56:41.68 ID:???

□□□
□□■
□□□

表の中の一部のセル(■)の左右の線を消したいんですが、
わりと新しいIEですらborder-right-style:hiddenとかが機能しないのはなんででしょうか
Name_Not_Found [sage] 2011/11/18(金) 14:11:03.92 ID:???

border-styleプロパティの値にhiddenなんてないからじゃね
線消したいならnoneにしてみたら
Name_Not_Found [sage] 2011/11/18(金) 14:11:15.40 ID:???
IEで結合ボーダーモデルを適用したときの挙動はなんかおかしい
Name_Not_Found [sage] 2011/11/18(金) 14:12:49.89 ID:???

何を言ってるんだ
Name_Not_Found [sage] 2011/11/18(金) 14:13:41.60 ID:???
ごめんは間違いhiddenはあったわ
Name_Not_Found [sage] 2011/11/18(金) 14:31:01.85 ID:???
なにこれhidden以外も効かない
Name_Not_Found [sage] 2011/11/18(金) 15:08:23.59 ID:???
hiddenじゃなくて背景色と同じ色を指定すれば
684 [sage] 2011/11/18(金) 15:15:07.52 ID:???
それもできませんでしたw
Name_Not_Found [sage] 2011/11/18(金) 15:31:49.81 ID:???

対象のセルの一つ左の枠線が残っているからだろう
ttp://jsfiddle.net/gQfyJ/
Name_Not_Found [sage] 2011/11/18(金) 17:12:37.95 ID:???

うおー感謝です
各種ブラウザ旧IEまで全部見事に表示されました
Name_Not_Found [sage] 2011/11/19(土) 22:55:38.67 ID:???
ttp://dev.w3.org/html5/spec/Overview.html#phrasing-content
を開いて画面上部の要素がたくさん並んでいるところにカンマで要素が区切られてますが
これマウスで選択してもコピーできません
これはどのようにCSSでつけたのでしょうか?
Name_Not_Found [sage] 2011/11/19(土) 23:47:17.19 ID:???

after疑似要素
Name_Not_Found [sage] 2011/11/20(日) 05:21:24.61 ID:???
.
Name_Not_Found [] 2011/11/21(月) 03:16:03.20 :noGqrfaf
固定幅のボックスに対して文字列の幅を合わせて文字間隔を調整するようなのってできますか?
よくワードとかイラレとか印刷のソフトだとあると思うんですが、例えば

th { text-align:center; }

| 登録番号 |
| 形  式 | <= これは間に全角スペースを2つ入れた
| 担当 者 | <= 同じ方法ではこれは合わない

またこの書き方ではそもそも「登録番号」をボックス幅に合わせていません。
文字数に合わせてletter-spacingを設定したクラスなんかを用意するのも考えましたが
何かthへの指定1発で指定できる方法があれば・・・
Name_Not_Found [sage] 2011/11/21(月) 09:05:52.13 ID:???
無理
IE独自ならあったんだけどね・・・
Name_Not_Found [sage] 2011/11/21(月) 10:16:15.24 ID:???
javascriptで良ければ
639 [sage] 2011/11/21(月) 10:25:00.66 ID:???

等幅フォントを指定すればよい
Name_Not_Found [sage] 2011/11/21(月) 10:27:46.31 ID:???
お前等幅フォントが何かわかってないだろ
639 [sage] 2011/11/21(月) 11:38:16.48 ID:???
ここ煽りが多いな
Name_Not_Found [sage] 2011/11/21(月) 12:24:46.73 ID:???

分かってないだけ
間違った事覚えて言ってるのが明らかなのに、
それを指摘しないほうがおかしいだろ?

素直に認めて新しく覚えようって気持ちを持とうよ
Name_Not_Found [sage] 2011/11/21(月) 16:45:20.98 ID:???

どんだけ639を馬鹿にしたいんだ? 粘着過ぎるだろ
697 [] 2011/11/21(月) 21:03:37.84 :noGqrfaf

ありがとうございます。
無難に見えるようなんとか工夫してみようと思います
Name_Not_Found [sage] 2011/11/21(月) 21:06:50.52 ID:???
10秒考えちまった
639語って貶めたい荒らしってことなら
見当違い喋ってるのも納得
Name_Not_Found [sage] 2011/11/21(月) 21:33:41.09 ID:???
30秒考えちまった
騙って か
Name_Not_Found [sage] 2011/11/22(火) 08:13:39.21 ID:???
は、
>何かthへの指定1発で指定できる方法があれば・・・
一発と言ってるだろがバカかお前ら
Name_Not_Found [sage] 2011/11/22(火) 08:20:38.97 ID:???
バカって言う方が(ry
Name_Not_Found [sage] 2011/11/22(火) 10:19:59.55 ID:???

そのくらい文脈から意味読み取れよ
Name_Not_Found [] 2011/11/22(火) 13:26:26.66 :iS0pVPSU
<ヘッダー>
<コンテンツ>(左本文、右サイドバー)
<フッター>
という構成で(本文)に質問集を作りました。
最初に質問を並べてページ内リンクで後半に答えを並べました。
リンクは普通に機能するのですが、ブラウザの(戻る)で戻ると
<コンテンツ>部分の上部20pxくらいが隠れて表示されなくなってしまいます。
(右サイドバーの上の方も削られてしまう。ヘッダは普通に表示される。)
ie8では起こらずie9、firefoxの今のやつで起こります。何が原因でしょう?
Name_Not_Found [sage] 2011/11/22(火) 14:24:49.92 ID:???
それは「戻る」とか無関係におかしなCSSなんだろw
Name_Not_Found [sage] 2011/11/22(火) 14:58:46.10 ID:???

原因は分かった!
お前のソース!どや!


真面目な話原因が起きてるソースを見せなさい
見せられない部分は隠してな
Name_Not_Found [sage] 2011/11/22(火) 16:39:45.43 ID:???
<div id="txt">サンプル</div>
このタグのテキストを中央垂直に表示させたいのですがなりません

width:500px;
height:500px;
text-align:center;
vertical-align: center;
Name_Not_Found [sage] 2011/11/22(火) 17:03:11.41 ID:???

いろいろ調べましたところ、(戻る)は関係なく、ページ内リンクをクリックした瞬間
20PXくらい下にずれることがわかりました。
<div id="contents">(全体)
<div id="header">

<div id="container">
<div id="main"><div id="menu">(floatで左右に分けてる)
<!--- container終わり--->

<div id="footer">
<!--- contents終わり -->

こんな感じの構成で、さらにいろいろ調べたところ、clearfixが怪しいみたいです。
<div id="container" class="clearfix">
と#containerにclearfixをかけているのですが、これをはずすと問題ないみたいです。
なぜかよくわかりません。
Name_Not_Found [sage] 2011/11/22(火) 17:03:59.60 ID:???
clearfixは
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

* html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}
です。適当にどこかにあったのをコピペしたものです。
Name_Not_Found [sage] 2011/11/22(火) 17:17:16.05 ID:???

つ line-height:500px;

vertical-alignは<div>とかブロックレベル要素には使えないよ。
Name_Not_Found [sage] 2011/11/22(火) 17:21:22.83 ID:???

ttp://jsfiddle.net/NUnP7/

おわかり頂けるだろうか。
vertical-align;center;ではなくmiddleだという事に。
そして、この垂直方向の設定は、ボックス全体ではなく
1行の垂直方向の設定であるという事に。
なので、これは1行の高さを100%にしてmiddleにもってきている。

ただ、この方法はあくまで
サンプルというテキストをとりあえず中央に持ってきたいという要望への回答
他の方法での使い方を考慮していない
718 [sage] 2011/11/22(火) 17:22:12.38 ID:???
おれの回答がスロウリィ!?
718 [sage] 2011/11/22(火) 17:23:50.35 ID:???

そのソースだけを見るとdiv閉じてないように見えるんだけど
エスパーしろって事でいいよね?
718 [sage] 2011/11/22(火) 17:39:39.77 ID:???

ttp://jsfiddle.net/64SGS/
ここまで再現したんだけど、これだけで問題が起きるとも思えないんだ
続きを書いてくれない?
おれエスパーじゃなかったみたいだわ
これ以上お前のソースコードがどうなってるのか、予測することができない
Name_Not_Found [sage] 2011/11/22(火) 18:21:32.21 ID:???

なんとなく解決しました。
最初(ページ内リンク ずれ)とかで検索しててもちっともわからなかった
のですが、(ページ内リンク clearfix ずれ)で検索したらそれらしき答え
がわかりました。

最終的な原因としては、「アンカーを配置している要素の親要素に”overflow:hidden”
が指定されているとその親要素が上にずれる」とのことのようです。

自分のclearfixにはoverflow:hiddenはなかったのですが、div id="container"に
overflow:hiddenが別に指定してありました。これはずしたらみごとに直りました。

overflow:hiddenかclearfixをはずさないといけないみたいです。
このページには両方必要ないのではずすことにしました。
お騒がせしました。

丸一日悩みましたがこれでばあちゃんの法事にいけます!
721 [sage] 2011/11/22(火) 18:27:22.45 ID:???

だから最初からちゃんとソースかけつってんだろwwwwwwwwwwwwwwww
ふっざけんなよおまえwwwwwwwwwwwwwwwwwwww
ちゃんと法事いってこいよなwwwwwwくそうw
Name_Not_Found [sage] 2011/11/22(火) 19:17:12.94 ID:???
ここにソースアップするために余計な部分削ってたらわかりました。
このスレのおかげです。

(-人-)ナムナム
忍法帖【Lv=35,xxxPT】 [sage] 2011/11/25(金) 04:48:40.18 ID:???
ワロチ
Name_Not_Found [sage] 2011/11/25(金) 19:34:18.74 ID:???
input type="submit" class="submitbtn"
というボタンに、
.submitbtn {
 min-width: 200px;
}
としたら、Firefox8では効くのに、Chrome15では効きません。
なぜでしょうか。

Name_Not_Found [] 2011/11/26(土) 00:36:34.16 :R5yfQHON
ttp://jsfiddle.net/FeDNE/

<textarea id="example"></textarea>

body > *:not(#example){
display: none;
}

Google Chrome のみ、テキストボックスで貼り付けが出来なくなります
これは Google Chrome の既知のバグなのでしょうか
回避するにはどうすればいいでしょうか
Name_Not_Found [sage] 2011/11/29(火) 06:38:37.09 ID:???
できるよ
Name_Not_Found [sage] 2011/11/29(火) 18:27:16.32 ID:???
日本語でおk
Name_Not_Found [sage] 2011/11/30(水) 21:35:53.39 ID:???
センタリングしたテーブル内のセルにもセンタリング指定してしてるんだけど
win IE6で見た時だけ若干5px?ほど左に寄ってる。
これを直す方法ないですか?
Name_Not_Found [sage] 2011/12/01(木) 02:04:07.88 ID:???
ハックしろ
ソースみせろ
Name_Not_Found [sage] 2011/12/02(金) 12:38:31.25 ID:???
オススメの仕様書ありませんか?
Name_Not_Found [sage] 2011/12/02(金) 12:53:38.02 ID:???
w3c
Name_Not_Found [sage] 2011/12/02(金) 15:15:43.59 ID:???
おれがルール
Name_Not_Found [sage] 2011/12/03(土) 00:11:19.17 ID:???
<p id="aaa">AAA</p>
<p id="bbb">BBB</p>
というHTMLがあって、通常ならAAAが先に表示されると思いますが、そうではなく、
BBBのほうをさきに(上に)表示させるようなことはできますか。
できればheightを指定せずに任意の高さでも利用できる方法がいいです。
HTML構造が固定されたブログで、CSSだけで順番を入れ替える必要があります。
Name_Not_Found [sage] 2011/12/03(土) 02:38:06.48 ID:???
できます
639 [sage] 2011/12/03(土) 14:24:05.54 ID:???

仕様書って一つしかないでしょ
お勧めってどういう事?お勧めの和訳?
Name_Not_Found [sage] 2011/12/03(土) 14:25:16.99 ID:???
×仕様書
○リファレンス
こういうことかな?
Name_Not_Found [] 2011/12/03(土) 17:26:51.20 :SCpm5mGJ

どうやるの?
Name_Not_Found [sage] 2011/12/03(土) 18:40:25.74 ID:???

BBBが上に表示されるようにCSSを書く
Name_Not_Found [sage] 2011/12/03(土) 18:59:06.28 ID:???

うーん、左右の入れ替えならともかく、多分cssでは無理じゃないかなぁ・・・
AAAの高さが任意なので、BBBに対してpositionはまず使えないと思います。
なのでcssでは無理じゃないかな、と。

そうなるとjQueryを使って動的に入れ替えるのがベストかと思います。
テンプレートの<head>部分にjsファイルの呼び出しをいれれば、
全ページ適用されて問題なさそうと思うのですが、いけそうでしょうか?
jsファイルのアップロードができないなら、直接書き込んでしまっても構いません

いけそうなら方法を提示します。
Name_Not_Found [sage] 2011/12/03(土) 19:00:08.49 ID:???
ちなみにcss3ならできるんだけど、使われてないブラウザもあるしね・・・
Name_Not_Found [] 2011/12/03(土) 19:22:15.82 :XhN/Y5BY

面倒だろ。

<p id="aaa">BBB </p>
<p id="bbb">AAA</p>

でいいじゃん。
Name_Not_Found [sage] 2011/12/03(土) 19:29:16.17 ID:???


こういう馬鹿って、わざわざ自分の馬鹿を他人に知らしめて喜んでるの?
Name_Not_Found [sage] 2011/12/03(土) 20:53:27.58 ID:???

ついでに
もつけ加えておくべきだと思うよw
Name_Not_Found [sage] 2011/12/03(土) 20:54:18.09 ID:???
まちがえた.


だった
742は自分でした^q^アウアウ
Name_Not_Found [sage] 2011/12/04(日) 01:28:56.97 ID:???
┌─┐ ←div1
┌─┐ ←div2
┌─┐ ←div3
│  │
│  │
└─┘

html+css(バージョン問わず)だけでこのようにdivを縦に重ねて配置することは可能でしょうか?
z-indexは別途javascriptで調整するので問題ないです。
position:absoluteで出来るのはわかっているんですが、自動配置で可能なら教えていただきたいです。
747 [sage] 2011/12/04(日) 02:33:22.95 ID:???
自己解決しました。
:first-child以外のmargin-topをマイナスにすればいけるのね。
Name_Not_Found [sage] 2011/12/04(日) 10:09:28.55 ID:???

マイナスにするのを
ネガティブマージンと呼ぶのですが
他ブラウザで大きく崩れる事があるのでブラウザチェック忘れずに☆(ゝω・)vキャピ
747 [sage] 2011/12/04(日) 16:44:55.96 ID:???

わざわざありがとう!
まだ実験的なプロジェクトなので必要になった時は気をつけたいと思います。
Name_Not_Found [sage] 2011/12/04(日) 23:04:58.16 ID:???
<a>
 <b/>
 <b/>
 <b/>
 <b/>
</a>
上記の内、上から3番目のbタグのみにCSSを適用するにはどうすればいいでしょうか?
Name_Not_Found [sage] 2011/12/05(月) 00:08:36.62 ID:???
セレクタ指定すれば良いんじゃない?
Name_Not_Found [sage] 2011/12/05(月) 00:17:16.78 ID:???
b:nth-child(3)
think49 ◆bKk/qcAKuM [sage] 2011/12/05(月) 03:30:00.60 ID:???

今更ですが、再現条件は全称セレクタを使用する場合(全称セレクタを省略するパターンを含む)に限定されるようです。
ttp://cssdesk.com/DsbeQ
ttp://cssdesk.com/CRhQ2
タイプセレクタで必要な文だけ指定すれば回避可能と思われます。
(ついでにバグ報告すると、次期バージョンで修正されるかもしれません)
727 [] 2011/12/05(月) 17:58:34.02 :CJq/YNuj

ありがとうございます
ページ全体を書き換えるユーザースクリプトを使っているので
出来れば全称セレクタで済ませたいと考えています

いちおう、今のところ以下のような指定で応急処置しております
あとこの場合の全称セレクタは省略出来るんですね。参考になりました

ttp://jsfiddle.net/FeDNE/1/
body > *:not(#example){
position: absolute; left: -9999px;
}
Name_Not_Found [sage] 2011/12/06(火) 11:10:22.19 ID:???

ユーザーCSSを適用したいのでそれなしで出来ませんかね?
Name_Not_Found [sage] 2011/12/06(火) 11:37:51.07 ID:???

Name_Not_Found [sage] 2011/12/06(火) 16:16:28.46 ID:???
<table><tr><td>愛</td><td>牛</td></tr><tr><td>絵本</td><td>音</td></tr></table>

上記のように2列のテーブルを作りたいのですが、CSSで作れたりしますか?

かな順で単語を並べたいので上記テーブルに椅子とかを入れたい場合苦労します。

Name_Not_Found [sage] 2011/12/06(火) 17:32:54.26 ID:???
それはテーブルじゃなくてリスト
ol要素を使いなさい
Name_Not_Found [sage] 2011/12/06(火) 18:29:10.65 ID:???
なんでol限定なんだ
Name_Not_Found [sage] 2011/12/06(火) 18:35:01.85 ID:???
何でマークアップにバラエティを求めるん?
Name_Not_Found [sage] 2011/12/06(火) 22:20:21.67 ID:???
divの要素の中に別のhtmlを表示する方法って無いですか?
サイトのリンク(共通ファイル)を表示しようと思うのですが、iframeはもう推奨されないと聞いたので
Name_Not_Found [sage] 2011/12/06(火) 22:25:20.85 ID:???
JavaScript
Name_Not_Found [sage] 2011/12/06(火) 22:31:27.46 ID:???

iframeは一度非推奨になって廃止されたけど復活したよ
iframe使えないHTMLのバージョンならobject使えばいい
Name_Not_Found [sage] 2011/12/07(水) 17:04:30.49 ID:???
tableのtdにボーダーを設定しているのですが、IEだと普通に表示されるのに
Firefoxだと一部のボーダーが表示されません。
ローカルではちゃんと表示されてたのにサーバーにアップしてみて見ると
表示が崩れています。
なんでしょう?
Name_Not_Found [sage] 2011/12/07(水) 18:01:53.57 ID:???

ttp://jsfiddle.net/
切り貼りしてみるといい
Name_Not_Found [] 2011/12/08(木) 14:17:48.92 :Pf4bvZsJ
<div id="long-content">
  <div id="bg"></div>

</div>
751 [sage] 2011/12/08(木) 14:33:10.24 ID:???


ありがとうございます
Name_Not_Found [] 2011/12/08(木) 14:33:21.22 :Pf4bvZsJ
<div id="long-content">
  <div id="bg"></div>
  <!-- #bgの背景を#long-contentの上に被せ、縦にループさせたい -->
  長いコンテンツ
      :
      :
      :
</div>
上記のように#bgの背景に画像を指定して、縦に(y方向に)ループさせて
コンテンツ(#long-content)の上をかぶせる形にしたいのですが、
どうしたらいいでしょうか。

・コンテンツの長さは不明=heightで指定できない
・生javascriptやjqueryを使用して、#long-contentの
 offsetHeightなどを取得して#bgのheightに指定してみましたが、正確なheightが得られなかったり、
 ブラウザ間でまったく違う長さになってしまいます。

上記のような問題があり、2日ぐらい悩んでいまだ完全に解決できていません。

現在は、
#bg { height:999999px; }
#long-content { overflow:hidden; }
のようにかなり#bgを縦長にして、余った部分はhiddenさせる、
というようにしています。
これで見た目的には問題なくなったのですが、
ページ内リンク(xxx.html#test1)をクリックすると、
その#test1部分に移動するのですが
それより上の要素が完全に消えてしまいます。
ただ、height:999999pxの指定を解除すると、正常に動作するのでこれのせいなのは確かだと思いますが・・・

どう解決すればいいでしょう?
Name_Not_Found [sage] 2011/12/10(土) 12:34:10.19 ID:???

ありがとう。復活したのか。
object使ったけど、よくわからん。
object内で表示しているリンクを踏んだ時、自分の枠以外のページを書き換え(フレームで言う、子のフレームのリンクで親フレームのhtmlを飛ばす感じ)るやり方が分からない
Name_Not_Found [sage] 2011/12/10(土) 13:13:47.31 ID:???

iframeと一緒にtarget属性も復活したよ

HTML5 DOMのWindow.parent.location.assignとか使うって手段もあるだろうけど
そうするくらいなら、移行型なりHTML5なり使った方が
Name_Not_Found [sage] 2011/12/10(土) 15:40:56.51 ID:???
<dt><dd>
で、dtを左に、ddを右に配置したいんだけどCSSどうかけばいいかな

<dt><山田太郎</dt>
<dd>こんにちは<br>山田太郎です<br>20才です</dd>

これが

山田太郎 こんにちは
       山田太郎です
       20才です

こんな感じになるようにしたいんです
Name_Not_Found [sage] 2011/12/10(土) 15:58:54.96 ID:???
dt, dd{
display: table-cell;
}
Name_Not_Found [sage] 2011/12/10(土) 19:12:34.33 ID:???
dl {line-height: 1.6em;}
dt {width: 10em;}
dd {margin-left :10em; margin-top :-1.6em;}
Name_Not_Found [sage] 2011/12/10(土) 20:16:48.81 ID:???
<a href="ttp://d.hatena.ne.jp/xxx/20111125"><span class="date">November 25(Fri),2011</span></a>
に対して、
.date{font-style: italic; color:black;}でfont-styleは変わるのに色が変わらないときってどうすればいいでしょうか?
Name_Not_Found [sage] 2011/12/10(土) 21:23:04.75 ID:???
color:black !important;でどう?
Name_Not_Found [sage] 2011/12/10(土) 23:12:18.96 ID:???

ありがとう。解決しました。
Name_Not_Found [sage] 2011/12/11(日) 15:56:28.05 ID:???
 それ、フォントサイズに対応しないね
Name_Not_Found [sage] 2011/12/12(月) 19:52:24.43 ID:???
教えてください、こういう多段のblockquoteってどうやって定義したらいいんでしょうか?

ttp://ggsoku.com/2011/10/multitouch-patent/

ttp://beebee2see.appspot.com/i/azuYybetBQw.jpg
Name_Not_Found [sage] 2011/12/12(月) 19:59:53.44 ID:???
子孫結合子
子結合子
Name_Not_Found [sage] 2011/12/13(火) 22:03:00.90 ID:???
display:table-cellを使って
こういう表示にしたい

<div style="display:table-row">
<dt>1ばんめ</dt>
<dd>テキスト</dd>
</div>

<div style="display:table-row">
<dt>2ばんめ</dt>
<dd>テキスト</dd>
</div>

これを
1番目  2番目
テキスト テキスト

こんな風に改良したい。
普通にdisplay:table-rowを使っちゃうと
1番目 テキスト
2番目 テキスト

みたいになるんだが、どうやればいい?
Name_Not_Found [sage] 2011/12/14(水) 10:25:02.43 ID:???
なんでdivの直下にdtが来てるんだよ
Name_Not_Found [sage] 2011/12/14(水) 17:11:59.95 ID:???

まず基本を覚えろよ
Name_Not_Found [] 2011/12/14(水) 20:44:21.84 :JmiRP2lb
<div style="display:table-cell">
<dt style="display:table-row">1ばんめ</dt>
<dd>テキスト</dd>
</div>

<div style="display:table-cell">
<dt style="display:table-row">2ばんめ</dt>
<dd>テキスト</dd>
</div>
Name_Not_Found [sage] 2011/12/14(水) 22:00:28.64 ID:???

Name_Not_Found [sage] 2011/12/15(木) 18:30:58.34 ID:???
<x>
  <y class="abc"/>
  <y class="def"/>
  <y class="ghi"/>
</x>
とあるとき、classがabc以外のyタグにスタイルを適用したい場合、どのように書けばいいでしょうか?
Name_Not_Found [sage] 2011/12/15(木) 18:48:20.85 ID:???
786 [sage] 2011/12/15(木) 19:10:34.87 ID:???

これ質問したの自分でした
大ボケかましてたようです、ありがとうございます
Name_Not_Found [] 2011/12/15(木) 19:23:30.29 :ElmWUkHm

<dl style="display:table-cell">
<dt style="display:table-row">1ばんめ</dt>
<dd>テキスト</dd>
</dl>

<dl style="display:table-cell">
<dt style="display:table-row">2ばんめ</dt>
<dd>テキスト</dd>
</dl>

あほだ
Name_Not_Found [sage] 2011/12/15(木) 20:02:21.23 ID:???
dl要素分けるのはおかしいわな
Name_Not_Found [sage] 2011/12/15(木) 20:09:43.57 ID:???
そいう時にこそ、<table>使用
Name_Not_Found [sage] 2011/12/15(木) 22:15:39.25 ID:???
CSS3が普及するまではtable使うのが無難だろうな
Name_Not_Found [sage] 2011/12/15(木) 22:54:03.33 ID:???
CSS3が普及しても、
インターネットエクスプローラ(笑)を使うバカが減らないとどうしようもないね。
いまだに何年も前のIE7、IE6だけのことを考慮しなきゃならないこともあるしな。

あと6年後
text-shadowを使いたい!box-shadowを使いたい!animationを使いたい!
last-childを使いたい!



それIE8に対応してねーじゃん。使うなボケ
Name_Not_Found [sage] 2011/12/15(木) 22:57:06.10 ID:???
ウィンドウズに最初から入ってるインターネッツ以外はインターネッツじゃないから!
Name_Not_Found [sage] 2011/12/15(木) 23:14:19.68 ID:???
普及したってのはバカが減ったって意味だよ
Name_Not_Found [sage] 2011/12/15(木) 23:18:55.74 ID:???

XPのサポートあと2年ちょっとだよ
Name_Not_Found [sage] 2011/12/16(金) 01:43:57.01 ID:???
<div>
あああああ
</div>

このdivを、中に入ってる文字にあわせてwidthを変えるにはどうすればいいかな
文字サイズを変更したり、中の文字が動的に変わる場合に、divのborderが左右に伸びるようにしたいんだけど。
Name_Not_Found [sage] 2011/12/16(金) 04:27:46.67 ID:???
width: auto;
float: left;
Name_Not_Found [] 2011/12/16(金) 14:46:36.19 :S5tLjTAA
まあ使うほうからしたらIE6でべつに不自由ないからなあ
HP見る人にしてみればデザインなんてどうでもいいもん
Name_Not_Found [] 2011/12/16(金) 16:54:26.13 :5vXYz3Ew
a{
display:block;
width:100%;
}

というcssですが
aタグが端から端まで広がってくれません。

中に含まれるのはimgタグとspanタグで

span{
display:block;
margin-left:110px;
}

marginはレイアウト都合。

span{
display:block;
width:100%;
padding-left:110px;
}

にすると広がりますが、右に空白のスクロール部分ができてしまいます。

どうすればaタグが広がってくれるでしょうか。
800 [] 2011/12/16(金) 16:57:47.64 :5vXYz3Ew
ですがPC上のsafariやChromeでは思い通りに見えているのですが
Androidのブラウザでは上記のような動きになってしまいます。
Name_Not_Found [] 2011/12/16(金) 20:08:26.54 :DzzVp637
広がってるだろ

borderでも追加して確認してみ?
Name_Not_Found [sage] 2011/12/17(土) 00:51:10.77 ID:???
CSS3良いなぁ。
box-shadowで影をつけたり、animationで動かしたり。
もはやHTMLは文章の構造を示すというより、backgroundのあるdivで作った矩形をたくさん配置してグラデーションやアニメーション
をたくさん作るためのものだな。
DIVが大量の予感!
Name_Not_Found [sage] 2011/12/17(土) 01:06:59.60 ID:???
逆だボケ
Name_Not_Found [sage] 2011/12/17(土) 01:34:26.95 ID:???
そろそろW3Cはbackground-colorを指定したらcolorも指定すべき
みたいなのやめろよw

装飾のためだけに色を塗って、文字を書く予定がない領域なんていくらでもあるだろうに。
Name_Not_Found [sage] 2011/12/18(日) 06:46:12.52 ID:???

それはない
Name_Not_Found [sage] 2011/12/20(火) 15:32:57.63 ID:???

装飾のためだけに色を塗って、文字を書く予定がない領域なんて
オレは無い
Name_Not_Found [sage] 2011/12/20(火) 17:11:58.28 ID:???

それは前景だろ、背景じゃない
Name_Not_Found [sage] 2011/12/20(火) 23:09:04.72 ID:???

お前にはなくても俺はある
<div></div>

div{
Name_Not_Found [sage] 2011/12/20(火) 23:11:28.53 ID:???
途中でかきこんでしまった

div{
height 100px;
width: 100px
background-image: url(picture.jpg);
}

俺はこうする。
構造と描写はわける!
とかいうならCSSのほうにpositionとかいれたらHTMLにdiv書かなくても色や背景ぬらせろやw
Name_Not_Found [sage] 2011/12/21(水) 00:41:59.40 ID:???
img要素の間違いでは
Name_Not_Found [sage] 2011/12/21(水) 00:43:52.49 ID:???

backgroundはdiv以外でも使えるよ
Name_Not_Found [sage] 2011/12/21(水) 01:20:09.65 ID:???

だからそれは前景だろ
img要素を使うべきだ
Name_Not_Found [sage] 2011/12/23(金) 03:32:59.07 ID:???
子要素はposition:relativeとz-indexやっても前面に出ちゃうだけど
子要素後ろに隠す方法はどうやるの?

<body>
<div id="ue">
<div id="sita">
</div>
</div>
</body>


div{
position: relative;
width: 100px;height: 100px;
}
#ue{
z-index: 1;
background-color: red;
}
#sita{
z-index: -1;
background-color: blue;
}

これで、sitaがz-indexが-1だから下になって、赤く表示させたいんだけど。
Name_Not_Found [sage] 2011/12/23(金) 09:42:29.02 ID:???
div{
width: 100px;height: 100px;
}
#ue{
z-index: 1;
background-color: red;
}
#sita{
position: absolute;
z-index: -1;
background-color: blue;
}
Name_Not_Found [sage] 2011/12/27(火) 11:38:21.69 ID:???
高さ100の左ペインを作りたいんだけど、

html,body {
height: 100%;
}

div#wrapper {
height: 100%;
}

div#left-pane {
float: left;
height: 100%
}

にしても高さ100%にならないんだけど、どうすればいいでしょうか?

IE8,Chrome16
Name_Not_Found [sage] 2011/12/27(火) 15:40:35.41 ID:???
bodyとかに余白あるからはみ出るんじゃない
Name_Not_Found [sage] 2011/12/27(火) 21:28:11.86 ID:???
なんでblock要素はvertical-alignがきかないのよ
二行以上のときはいちいちpaddingをピクセル単位で細かく調整しろと?しかも
ブラウザの文字サイズを大とか小にすると行数変わると中央じゃなくなってダサいし。

display:tableやったらposition:relativeと子要素のabsolute聞かなくなってマジウンコすぎるし
なんなんだよ。複数の行があって、中央ぞろえにして、しかも文字サイズの大とか小とかでもレイアウトが崩れないようにするには
全部jpgにしてimgタグつかえってことか?
Name_Not_Found [sage] 2011/12/28(水) 00:29:23.20 ID:???
と、DPT屋の貴重なご意見でした
Name_Not_Found [sage] 2011/12/28(水) 01:27:59.59 ID:???
上下中央できないサンプルソース出せ
Name_Not_Found [sage] 2011/12/28(水) 01:32:54.93 ID:???
確かにverticalは使い勝手悪い気がするわ。
Name_Not_Found [sage] 2011/12/28(水) 01:38:06.55 ID:???
boxでも使っとけば
Name_Not_Found [sage] 2011/12/28(水) 01:45:28.56 ID:???
ユーザーCSSで、特定のURLを表示させなくするには
a[href*="特定のURL"]
{ display: none !important; }
みたいにすればいいけど、
特定のURLを含むリスト全体を表示させなくする機能ってある?
具体的には、
<li>a.net</li>
<li>b.com</li>
<li>a.net</li>
<li>c.jp</li>
となってて、b.comを含む<li>だけを非表示にしたい。
Name_Not_Found [sage] 2011/12/28(水) 01:59:17.79 ID:???
っ ユーザースクリプト
Name_Not_Found [sage] 2011/12/28(水) 02:02:52.81 ID:???
垂直中央デモとしてこんなのあるけどどれもメリット・デメリットあるのね
ttp://douglasheriot.com/tutorials/css_vertical_centre/demo4.html
Name_Not_Found [sage] 2011/12/28(水) 02:08:26.28 ID:???

擬似要素というのがあってだな・・・
ttp://zero.css-happylife.com/selectors/nth-child.shtml
Name_Not_Found [sage] 2011/12/28(水) 02:12:12.47 ID:???
インターネットエクスプローラーだと働かない→どうでもいい
HTMLにDIVが増える→どうでもいい

1行じゃないとき(2行以上のとき)、レイアウトがbadになる→非常に問題
Name_Not_Found [sage] 2011/12/28(水) 02:14:52.54 ID:???
まぁIE無視でいいならwrapperの子要素にtable-cell、vertical-alignでいいよね
Name_Not_Found [sage] 2011/12/28(水) 02:26:21.94 ID:???

 な ん な ん だ  こ の 低 ラ ベ ル は !
Name_Not_Found [sage] 2011/12/28(水) 02:28:31.78 ID:???
boxでええんとちゃう?
Name_Not_Found [sage] 2011/12/28(水) 02:39:52.23 ID:???

position:absoluteにするとtable-cellが無効になるから論外
Name_Not_Found [sage] 2011/12/28(水) 02:39:59.45 ID:???
boxってそんなに使い勝手いいの?
Name_Not_Found [sage] 2011/12/28(水) 02:53:24.25 ID:???
そりゃあもう
Name_Not_Found [sage] 2011/12/28(水) 02:57:16.11 ID:???
ググッてみたら案の定便利杉ワロタ
Name_Not_Found [sage] 2011/12/28(水) 03:18:58.64 ID:???
float使わないでも横配置にできるってやつだっけ
Name_Not_Found [sage] 2011/12/28(水) 03:20:15.96 ID:???
そうらしい。
clearfixもいらないとか。
Name_Not_Found [sage] 2011/12/28(水) 12:32:54.15 ID:???

ありがとう
でもそれだと順番が変わったときに機能しなくなるよね・・・
具体的にやりたいことは、pixivで特定のユーザーの絵を非表示にしようと思ってるんだけど
検索結果で、絵1枚ごとに
<li>

タイトル
投稿者
</li>
という要素でできてるんだけど、
絵と投稿者はユーザーIDが使われてるからa[href*でいけるんだけど
タイトルは絵のIDしか使われてないから
新しい絵が投稿されたらタイトルだけ表示されちゃうんだよね
だからユーザーIDを含むリストごと非表示にしたいんだけど
やっぱの言うとおり?ユーザースクリプト使うしかないんかな
Name_Not_Found [sage] 2011/12/28(水) 12:59:39.79 ID:???

初めからそう言えばいいじゃん
隣接セレクタ使え
Name_Not_Found [sage] 2011/12/28(水) 13:48:28.83 ID:???

ありがとうかなり近いわ

<p>
 <img src="URL">
</p>
<h1>
タイトル
</h1>

こうなってる場合って隣接セレクタにはならんけど
どうすりゃいいのかな?
p+h1 にしちゃうと全部非表示になっちゃうから
特定のURLを含むpというふうに指定したい

一番いいのは
子孫セレクタの逆で、親要素に対して影響するセレクタがあればいいんだけど・・・
Name_Not_Found [sage] 2011/12/28(水) 13:55:13.16 ID:???
それはどこのページだよ
a要素ごと消すんじゃないんか?

先祖セレクタもどきはCSS4だよ
Name_Not_Found [sage] 2011/12/28(水) 14:01:06.71 ID:???

pixivのタグ検索のページ
<li class="image">
  <a href="/member_illust.php?mode=medium&illust_id=イラストのID">
    <p>
      <img src="ttp://img*.pixiv.net/img/ユーザーID/イラストのID_s.jpg">
    </p>
    <h1>
    タイトル
    </h1>
  </a>
  <p class="user">
    <a href="/member.php?id=ユーザーID">soba</a>
  </p>
  <ul class="count-list">
    <li>
      <a href="/bookmark_detail.php?illust_id=イラストのID" class="bookmark-count ui-tooltip" data-tooltip="*件のブックマーク">
        <span class="count-icon"> </span>*
      </a>
    </li>
  </ul>
</li>

こうなってるんだけど、
目標はユーザーIDを含む<li>要素全体を非表示にすること
Name_Not_Found [sage] 2011/12/28(水) 14:05:29.87 ID:???
簡略化すると
<li>
  <a>
    <p>ユーザーID</p>・・・1
    <h1></h1>・・・2
  </a>
  <p>ユーザーID</p>・・・3
  <ul></ul>・・・4
</li>

1と3はユーザーIDを指定すれば消せるけど
2と4はイラストIDを指定しないと消せないから新しいイラストが投稿されればまた表示されてしまう
だから隣接セレクタを使って1+2、3+4にするか
先祖セレクタでユーザーIDを含む<li>を非表示
にしたい
Name_Not_Found [sage] 2011/12/28(水) 14:13:42.05 ID:???
a[href*=000000] , a[href*=000000] ~ *

li ごと消すのは現状ユーザースタイルでは無理
Name_Not_Found [sage] 2011/12/28(水) 14:21:11.78 ID:???

?selecterはまだ対応してないみたいだな・・・
やっぱり隣接セレクタを使って
<p>
  <img src="ttp://img*.pixiv.net/img/ユーザーID/イラストのID_s.jpg">
</p>
<h1>
タイトル
</h1>
で、
【img[src*="/ユーザーID/"]を含む<p>】の隣にある<h1>を非表示にする
という記述をしたいけどこれは現状でも出来る?
Name_Not_Found [sage] 2011/12/28(水) 14:27:44.23 ID:???

だからそれは隣接してないだろう。親セレクタないと無理だろ

imgは表示させときたいんか?
a[href*=ユーザーID] > h1
Name_Not_Found [sage] 2011/12/28(水) 14:29:21.05 ID:???
こうしときゃ見た目は期待通りになるだろ

li.image{
width: auto !important;
}

li.image p, li.image h1{
width: 164px !important;
}
Name_Not_Found [sage] 2011/12/28(水) 14:29:29.03 ID:???

pとh1は隣接してるからなんとかならんかと思ったけど無理か
Name_Not_Found [sage] 2011/12/28(水) 14:40:00.03 ID:???

横幅を164に固定
Name_Not_Found [sage] 2011/12/28(水) 14:40:53.90 ID:???

間違ってenter押してしまった

横幅を164に固定するってことだよね?
見た目変わらんのやけど
Name_Not_Found [sage] 2011/12/28(水) 14:44:33.46 ID:???

ユーザースタイルに書いたコードとブラウザとバージョンは?
Name_Not_Found [sage] 2011/12/28(水) 14:46:59.14 ID:???

Chromeの最新版にをコピペしただけ
Name_Not_Found [sage] 2011/12/28(水) 14:47:36.13 ID:???
chrome stylistっつう任意のCSSを適用できる拡張機能があるから
それを使ってる
Name_Not_Found [sage] 2011/12/28(水) 14:51:16.07 ID:???
pxを狭くしたらスクロールバーが出てきたから適用されてるわ

でも俺は特定のユーザーの絵を完全に非表示にしたいんやけど

164pxにしても非表示にはならなくないか?
Name_Not_Found [sage] 2011/12/28(水) 15:06:48.44 ID:???
今のCSSじゃ無理っぽいからjavascriptで頑張ってみるわ
お前らありがとう
Name_Not_Found [sage] 2011/12/28(水) 15:10:33.35 ID:???

ごめんは引用符必要だった
a[href*="000000"] , a[href*="000000"] ~ *
Name_Not_Found [sage] 2011/12/28(水) 15:58:07.11 ID:???
inline要素にしてtext-indent -9999px
Name_Not_Found [] 2011/12/28(水) 20:56:37.33 :u/wyQkbt
<div>
<span id="a">a</span>
<span id="b">b</span>
<span id="c">c</span>
</div>
これをfloatやpositionを使わずに以下のようにしたいのですができますか?方法を教えてください
┌──────
│┌─┐┌─┐
││a. ││b. │
││  │└─┘
││  │┌─┐
││  ││c. │
│└─┘└─┘
Name_Not_Found [sage] 2011/12/28(水) 21:06:42.63 ID:???
floatやposition使えば
Name_Not_Found [sage] 2011/12/28(水) 21:19:16.13 ID:???
なんで拒むのかがわからん
Name_Not_Found [sage] 2011/12/28(水) 21:26:36.00 ID:???
display : blockとmargin-topやmargin-leftで無理やりいれればいい
Name_Not_Found [sage] 2011/12/28(水) 21:35:14.80 ID:???

そういう書き方するとなんかあったときのメンテナンスめんどいよな
857 [sage] 2011/12/28(水) 21:44:20.53 ID:???
レスどうもありがとうございます
floatやpositionのほかに簡単な方法があるのかなと思って・・・
Name_Not_Found [sage] 2011/12/28(水) 21:48:50.08 ID:???
あとは<table>くらいじゃね?
Name_Not_Found [sage] 2011/12/28(水) 22:02:05.86 ID:???
これってどういうことなんだ・・・?
ttp://cssrefresh.frebsite.nl/
Name_Not_Found [sage] 2011/12/28(水) 22:05:02.64 ID:???
box-orient: vertical 指定して
box-lines: multiple 設定したらできるかもな
まだ box-lines に対応してるブラウザない思うけど
Name_Not_Found [sage] 2011/12/28(水) 22:12:43.17 ID:???
box系はIEには入れて欲しいな
Name_Not_Found [sage] 2011/12/29(木) 01:41:14.12 ID:???
IEおわっとる
クロスブラウザなんてウンコ

これからはサファリ、ファイアフォックス、クロム、オペラ
この4つでまともに見られればいいんじゃね
Name_Not_Found [sage] 2011/12/29(木) 02:21:41.53 ID:???
それでいいよね。
今作ってるストリーミングサイトがIEでみたら見事に崩れるもんだからIEに対応させるのがめちゃくそメンドイ。

MSはもうブラウザ開発やめちまえ
Name_Not_Found [sage] 2011/12/29(木) 03:31:44.16 ID:???
(´-`).。oO(腕が無いと大変なのだろう…) 
Name_Not_Found [sage] 2011/12/29(木) 05:22:57.80 ID:???
IEは論外だが、Operaのバグ放置も大概酷い
Name_Not_Found [sage] 2011/12/29(木) 18:01:27.16 ID:???
ある要素のwidthを100%にして、常に画面横幅いっぱいに表示したいのですが
横/縦の比率を常に一定にしたいです
その場合縦はどう指定すればいいのでしょうか?
%で指定すると、コンテンツの量によって縦幅変わってしまいますし、pxだと固定になってしまいます
Name_Not_Found [sage] 2011/12/29(木) 18:13:28.76 ID:???
operaは最初から相手にしてない
ログ見ても0.5〜1%だし
Name_Not_Found [sage] 2011/12/29(木) 18:34:34.34 ID:???
携帯電話やゲーム機ではOperaが活躍している!というのも今は昔・・・
Name_Not_Found [sage] 2011/12/29(木) 18:45:08.35 ID:???

そういう計算(?)を利用したレイアウトはCSSじゃ無理
CSSレイアウトは800pxとか80%とか固定値しかできない
width=height/2
みたいなことは無理
javascript使おう
Name_Not_Found [sage] 2011/12/30(金) 01:38:45.14 ID:???
とあるサイトのソースなんですが、
下記のソースのスポンサードリンクの入った .topBox を消したい場合、
.topBox:nth-child(2) { display:none!important; } でいいんでしょうか?

<div id="contentTop">
<p>
<p/>
<div class="topBox">
<p/>
<div class="topBox">
<p style="font-size: 10px; margin-bottom: 4px; ">スポンサードリンク</p>
<p class="box">
</div>
<div class="topBox">
<div class="topBox">
<div class="topBox" style="margin-bottom: 10px; ">
</div>
Name_Not_Found [sage] 2011/12/30(金) 01:40:09.65 ID:???
ごめんなさい。自己解決しました。5でOKでした。
Name_Not_Found [sage] 2011/12/30(金) 15:39:34.80 ID:???
ある要素内のテキストを、縦にセンタリングしたいのですが
tableタグのvalignみたいな属性は、cssではどうやるのでしょうか?
なぜかぐぐってもわからなかったので質問させてください
Name_Not_Found [sage] 2011/12/30(金) 15:40:28.57 ID:???
display:table-cell
vertical-align:middle
でできる
Name_Not_Found [sage] 2011/12/30(金) 17:18:17.66 ID:???
できなかったけど、ありがとう
もうちょい調べてみます
Name_Not_Found [] 2011/12/30(金) 19:36:17.86 :HTWVIpG8
質問です
googleのトップページのように常に一番下にメニューを配置したいのですがどうしたらいいでしょうか?
スレチならごめんなさい。たぶんCSSだと思ったので質問させていただきました。
Name_Not_Found [sage] 2011/12/30(金) 19:59:00.88 ID:???
CSS 段組
でggrks
880 [] 2011/12/30(金) 20:10:36.92 :HTWVIpG8

ありがとうございます!
さっそくggってみます。
880 [sage] 2011/12/30(金) 20:38:57.38 ID:???
段組って横ばかりで縦がないですね・・・orz
Name_Not_Found [sage] 2011/12/31(土) 05:34:08.73 ID:???
ないわけないだろ
Name_Not_Found [sage] 2012/01/02(月) 19:42:51.82 ID:???
body全体を中央寄せにするために<div align="center">を使おうとしたけれど、
それは非推奨であり、スタイルシートを使わなければならないということなので
ご教授願います

body {
text-align:-moz-center;
text-align:-webkit-center;
text-align:-o-center;
text-align:center;
}

これを使えば一応できるのですが
TABLEなどが中央寄せできません
Name_Not_Found [sage] 2012/01/02(月) 20:16:55.23 ID:???
ブロック要素のセンタリングはもはや基礎だぞ
出直せ
Name_Not_Found [sage] 2012/01/02(月) 20:20:25.44 ID:???
test
Name_Not_Found [sage] 2012/01/02(月) 20:37:54.02 ID:???

マージンを自動にせよ
Name_Not_Found [sage] 2012/01/02(月) 20:43:13.84 ID:???
全体を#wrapper とか #wrapで内包してmargin: 0 auto;
が一般的かと
Name_Not_Found [sage] 2012/01/02(月) 22:56:43.39 ID:???

それ、もしくは子にwidthも指定せんと
Name_Not_Found [sage] 2012/01/03(火) 00:25:20.52 ID:???
bodyにwidth指定
Name_Not_Found [sage] 2012/01/03(火) 04:45:35.49 ID:???

IEのアレって内部じゃJavaScript扱いなんだっけか
Name_Not_Found [sage] 2012/01/03(火) 18:13:54.07 ID:???

IEのアレって何を指してるのよ
Name_Not_Found [sage] 2012/01/04(水) 01:12:59.45 ID:???
FireFoxとChrome(共に最新)で同じ表示にしたいのですが、どう作り直しても余計なマージンが入る部分が有り、ソースが現在貼れない環境のため出来たらオススメのCSSリセットを教えていただけませんか。

Name_Not_Found [sage] 2012/01/04(水) 01:31:09.43 ID:???

好きなの選びなさい
ttp://www.cssreset.com/
Name_Not_Found [sage] 2012/01/04(水) 01:32:24.97 ID:???
とりあえず個人的におすすめするのはYahoo! CSS Reset (YUI 3)かな。
Name_Not_Found [sage] 2012/01/04(水) 15:16:17.56 ID:???

CSS内で演算するやつ
Name_Not_Found [sage] 2012/01/04(水) 15:18:07.42 ID:???
文脈セレクタとか隣接セレクタのことか?
Name_Not_Found [sage] 2012/01/04(水) 15:52:38.14 ID:???

それじゃわからん、正式名称で書いてくれ
Name_Not_Found [sage] 2012/01/04(水) 16:03:02.73 ID:???
CSS Expressionsのことじゃね
ttp://msdn.microsoft.com/ja-jp/ie/dd253083
Name_Not_Found [sage] 2012/01/04(水) 18:22:37.43 ID:???
どう見てもJScript
Name_Not_Found [sage] 2012/01/05(木) 22:18:15.17 ID:???
フォントサイズの指定について質問です
ベースとなるサイズを12pxにして後は個別に相対指定するという指定の仕方は間違ってますか?

*{
font-size:12px;
}

h1 {
font-size:200%;
}
Name_Not_Found [sage] 2012/01/05(木) 22:21:50.10 ID:???
「指定方法としては」間違いではないが、間接的に全部固定サイズにしてるんだから駄目なのに変わりはない
Name_Not_Found [sage] 2012/01/05(木) 22:56:26.38 ID:???
ttp://yui.yahooapis.com/2.9.0/build/reset-fonts-grids/reset-fonts-grids.css
ttp://developer.yahoo.com/yui/fonts/#using
を見るとreset.cssでベースサイズを設定して、個々に相対指定できるようにしたいのですが
ベースサイズをピクセルで指定しないとしてどうやって相対指定でブラウザまで同じサイズで見せられるか分かりません
Name_Not_Found [sage] 2012/01/06(金) 00:18:38.37 ID:???
ブラウザまで同じサイズにしたいならピクセルにしろ
そうしたら全部固定サイズになるけどな。

相対指定したいならブラウザ間の文字の大きさの違いはあきらめろ
ブラウザ間の文字の大きさを同じにしたいなら相対指定はあきらめろ
Name_Not_Found [sage] 2012/01/06(金) 10:20:54.86 ID:???
ということはyahoo yuiを使ってもフォントサイズはブラウザ間で統一できないということですか?
Name_Not_Found [sage] 2012/01/06(金) 10:24:02.02 ID:???
最小フォントの設定ができるブラウザも多いので
ユーザーが設定していたらそれより小さく設定したフォントは大きくなるし
フォントサイズガチガチって古いやりかたのような
Name_Not_Found [sage] 2012/01/06(金) 11:35:56.51 ID:???

サイズ固定するなって言われてるのをの時点で読み取れよ
Name_Not_Found [sage] 2012/01/06(金) 11:39:45.39 ID:???

サイズをpxで固定しない場合はどのようにブラウザ間のフォントサイズを統一させるのですか?
Name_Not_Found [sage] 2012/01/06(金) 11:57:47.37 ID:???
YUIはよく読むとbodyでpx固定してるよ
まさにのやり方そのもの
Name_Not_Found [sage] 2012/01/06(金) 12:03:38.54 ID:???
13px/1.231の部分すね
やっぱ固定して問題ないですね
Name_Not_Found [sage] 2012/01/06(金) 12:07:14.87 ID:???
問題ないなんて誰も言ってない
フォントサイズを統一したいならその方法しかないというだけ
Name_Not_Found [sage] 2012/01/06(金) 13:08:17.60 ID:???
閲覧してる人の都合なんか知らない、俺が考えたサイズで見ろ→固定サイズ
閲覧してる人が見やすい大きさで見ろ→相対指定

「俺が考えたサイズで見ろ」が問題ないと思うならピクセル使えばいい
Name_Not_Found [sage] 2012/01/06(金) 13:13:34.82 ID:???
いまどきブラウザで文字サイズも即座に調整できるから「俺が考えたサイズで見ろ」というのも変な考え方
Name_Not_Found [sage] 2012/01/06(金) 13:20:52.00 ID:???
Font-size: 14px
みたいなことやるとIEで(IE9でも)調整できない。
Firefoxだと標準サイズを変更しても14pxなことは変わらない。
「WebページのCSSを優先する」のyテックをはずせば色もサイズも製作者サイドのCSS無視できるけどね。

文字サイズっつーか、画面全体を拡大/縮小ならできる。
Name_Not_Found [sage] 2012/01/06(金) 14:32:15.80 ID:???
無駄にfont-family指定してるサイトは何なの
Name_Not_Found [sage] 2012/01/06(金) 15:32:05.18 ID:???
サイズ固定とブラウザ間の統一は違う概念だろアホか
フォントサイズ固定したがる奴なんてもう絶滅したかと思ってたけどまだ湧くんだな
というか一般的に固定されていないというのがなぜなのか考えたこともないのかね
Name_Not_Found [sage] 2012/01/06(金) 16:00:34.43 ID:???
フォントサイズを統一させないとボックスが壊れるじゃん
Name_Not_Found [sage] 2012/01/06(金) 16:55:08.15 ID:???
壊れるような組み方するからだろ
Name_Not_Found [sage] 2012/01/06(金) 17:55:41.28 ID:???
壊れるって具体的にどういうふうに?
Name_Not_Found [sage] 2012/01/06(金) 20:50:27.38 ID:???
フォントサイズによってレイアウトが崩れるってそれブロック要素に固定サイズ指定してないからじゃないの
Name_Not_Found [sage] 2012/01/06(金) 22:15:03.24 ID:???
固定サイズを指定してないんじゃなくて固定サイズを指定してるから壊れる、
というか文字がはみでるw

height="30px" lineHeight="30px"
これにfontSizeを大きくして二行になったりしたら下にはみ出るwww
Name_Not_Found [sage] 2012/01/06(金) 23:25:35.27 ID:???
絶対に1行じゃなきゃまずいなら画像にするなり
overflowではみ出た部分を表示しないなど方法はあるだろう
Name_Not_Found [sage] 2012/01/06(金) 23:34:14.27 ID:???
「画像にすれば崩れない」は敗北宣言

画像にすりゃいいなんていったら
font-sizeもline-heightもいらねーww
全部画像にしちゃえばいいんだからw

とはいえ、過半数の文字を画像でやってるとこなんていくらでもあるけどね。
どんなブラウザで見ても崩れないね、やったね!
Name_Not_Found [sage] 2012/01/08(日) 08:00:27.96 ID:???
擬似クラスのtargetで隠しメニューを出した後、その中のリンクをクリックしたら閉じるように、
または別のtargetがついてる要素をクリックしたら今でてるものを消して表示されるようにしたいんですが
これってCSSだけで実装可能ですか?
Name_Not_Found [sage] 2012/01/08(日) 08:07:58.90 ID:???
なんかそんなサンプルあったね
Name_Not_Found [sage] 2012/01/08(日) 08:11:10.74 ID:???
そのサンプルは一応見たんですけど(あってるかわかりませんが)
クリックしてメニューを一度出した後他の所クリックしても閉じる動作をしないもので。
Name_Not_Found [sage] 2012/01/08(日) 10:08:27.27 ID:???
ユーザーcssをいじってるんですが、
<ul class="A">
<ul class="B">
という表示順を逆にするような記述はありませんか?
Name_Not_Found [sage] 2012/01/08(日) 10:19:58.32 ID:???
box-ordinal-groupを使う。
Name_Not_Found [sage] 2012/01/08(日) 10:38:31.98 ID:???
ul.A { box-ordinal-group:2; }
ul.B { box-ordinal-group:1; }

このように記述をしてみましたが、表示順が変わりません。
やり方を間違えているのでしょうか?
Name_Not_Found [sage] 2012/01/08(日) 11:21:45.32 ID:???

ttp://monodez.com/create/css3-box.html
Name_Not_Found [sage] 2012/01/08(日) 15:17:10.69 ID:???

そのサイトの書き方はあまり良くない

ttp://www.htmq.com/css3/box-ordinal-group.shtml
Name_Not_Found [sage] 2012/01/08(日) 16:19:04.08 ID:???

こちらのサイトを見て作ったのですが、
ulだと指定できないということでしょうか?
Name_Not_Found [sage] 2012/01/08(日) 16:30:51.28 ID:???

ステマ乙
Name_Not_Found [sage] 2012/01/08(日) 17:49:17.16 ID:???

面白くない
Name_Not_Found [sage] 2012/01/08(日) 18:02:40.48 ID:???

古いIE使ってるんじゃね
Name_Not_Found [sage] 2012/01/08(日) 18:05:36.87 ID:???

Chrome使ってます
対応してなさそうですね、ありがとうございます
Name_Not_Found [sage] 2012/01/08(日) 18:14:10.90 ID:???

再現出来るソース
ttp://jsfiddle.net/
Name_Not_Found [sage] 2012/01/08(日) 18:18:44.26 ID:???
Web制作者が、一部のブラウザでしか対応してないCSS使って、どーすんのよ
Name_Not_Found [sage] 2012/01/08(日) 18:21:10.17 ID:???
×一部のブラウザでしか対応してない
○一部のブラウザでは対応してない

てかユーザーCSSって書いてあるんだが
Name_Not_Found [sage] 2012/01/08(日) 18:38:26.66 ID:???
対応してないブラウザが悪い
Name_Not_Found [sage] 2012/01/09(月) 08:14:29.26 ID:???
文章中にインラインフレームで画像や文字を表示させると、必ず下側に余微妙な余白ができてしまいます。
そこで、vertical-alignでtext-bottomを指定したところ今度は下方向に余計落ちてしまいます。middleを指定すると
日本語文字は丁度いい位置にくるんですが、やはり数字やアルファベットは下にいきすぎてしまいます。

他の普通の文章と縦方向(一番下の位置)を揃えるにはどうしたらいいでしょうか?
宜しくお願いいたします。
Name_Not_Found [sage] 2012/01/09(月) 18:08:59.20 ID:???
どげんかせんといかんな
Name_Not_Found [sega] 2012/01/10(火) 00:40:47.74 ID:???
日本語はプロポーショナルフォント、英語は等幅フォント
にしたいんですけど、どう書けばいいですか?
Name_Not_Found [sage] 2012/01/10(火) 02:37:52.44 ID:???

Name_Not_Found [sage] 2012/01/11(水) 01:40:28.35 ID:???
webサイトの一部で、ユーザがCSSを登録できるようにしたいのですが、サイト自体のCSSとバッティングさせたくありません。
そのため、ユーザのCSSの影響を、例えば<div class="user-area">........</div>の中だけにするために、
ユーザCSSのすべてのセレクタの頭に.user-areaをつけようと思っています。( .user-area h1 {......} )

この方法で、何か問題が起こることがあるでしょうか?
Name_Not_Found [sage] 2012/01/11(水) 02:20:00.34 ID:???
大問題
長いからuaにしろ
946 [sage] 2012/01/11(水) 03:26:09.37 ID:???
どういった問題でしょうか?
946 [sage] 2012/01/11(水) 03:37:04.95 ID:???
すみません、ユーザCSSと書きましたが、一般的な用語とかぶっているのですね。
サイト側のlinkタグで読み込むCSSをユーザに書いてもらう予定で、そのCSSを指して言いました。
Name_Not_Found [sage] 2012/01/11(水) 18:07:30.79 ID:???

名前の長さは気にしなくていい。

訪問者に独自CSSを適用させるやり方なら個人用のクラスを用意する必要はない。
同じセレクタを後から定義してやるだけでカスケード処理されるはずだが…、
Name_Not_Found [sage] 2012/01/11(水) 19:02:04.87 ID:???

> webサイトの一部
Name_Not_Found [sage] 2012/01/11(水) 22:52:54.92 ID:???

カスケードってことは、単一HTMLでどちらかのCSSが優先されてしまうんですよね。
常にサイト側で用意したCSSを使用するのではなく、単一HTMLの中の特定領域だけ、
ユーザが作成したCSSを適用したいです。
Name_Not_Found [] 2012/01/12(木) 17:16:16.64 :yH0Xyx0a
ボックスを入れ子にして外のボックスでpadding、中のボックスでmarginを指定すると
IE6の場合だけmargin-topが相殺されてしまうのですが(IE7,8、FireFoxとかでは合算)
これはバグですか? 検索してもドンピシャなのが見つからない・・・
なぜか外のボックスにwidthを指定したときにだけ起こります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ttp://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<style>
#aaa {
width:300px;
margin: 0px;
padding:50px;
border:1px solid #000000;
}

#bbb {
width:100px;
margin:50px;
padding: 0px;
border:1px solid #000000;
}
</style>
</head>
<body>
<div id="aaa">
<div id="bbb">hoge</div>
</div>
</body>
</html>
Name_Not_Found [sage] 2012/01/12(木) 17:31:13.11 ID:???
IE6はもう対応する必要ないだろ。
Name_Not_Found [sage] 2012/01/14(土) 02:59:01.67 ID:???
こういうのって、CSS3じゃなくてもできますか?


むかしむかし   んたくをして  
あるところに   いると、かわ
おじいさんと   からももがど
おばあさんが  んぶらこっこ
すんでいまし  とながれてき
た。おばあさ   ました。
んがかわでせ

二段組にするんですけど
最後の「せんたくを」の部分を続けたいんです。

<p>むかしむかし〜ながれてきました</p>
このひとつのpだけに対しcssでなんかやって、二段組みたいなことむり?
Name_Not_Found [sage] 2012/01/14(土) 15:05:01.91 ID:???
CSS2.1でもfloat使えばできる。
Name_Not_Found [sage] 2012/01/14(土) 15:17:26.79 ID:???
floatだと955で言ってる結果とは違う結果になるから正確にはコレ使う
ベンダープレフィックス必須だけどね
ttp://www.htmq.com/css3/column-count.shtml
Name_Not_Found [sage] 2012/01/14(土) 19:25:57.26 ID:???

結論は「できない」ってことですか?
しかたないなぁ・・・
Name_Not_Found [sage] 2012/01/14(土) 19:40:02.52 ID:???

FirefoxやChromeだとフォントリンク依存せずにちゃんと機能するみたいだよ
Name_Not_Found [sage] 2012/01/14(土) 21:47:04.07 ID:???

CSS詳しくないけどググって見た感じ、独自の禁則処理はjavascriptじゃないと難しいのかもね
Name_Not_Found [sage] 2012/01/14(土) 21:50:32.88 ID:???
禁則処理じゃなくてマルチカラムの話では
Name_Not_Found [] 2012/01/17(火) 19:44:06.29 :AO7FQlYk
<p class="vertical">
<img src="img.jpg">
</p>

.vertical{
display:table;
width:220px;
height:220px;
text-align:center;
vertical-align:middle;
}
Name_Not_Found [] 2012/01/17(火) 19:46:02.33 :AO7FQlYk
すみません途中でした。

画像を縦横共にセンタリングしたくてのようにしたんですが
縦方向がうまくいきません。
どうすればよいでしょうか。
Name_Not_Found [sage] 2012/01/17(火) 19:59:30.27 ID:???
display:table-cell; にすればなおるかな?
Name_Not_Found [sage] 2012/01/17(火) 20:00:41.60 ID:???
旧IEも保証するなら、小飼弾のブログにちょうどいい記事がある
ttp://blog.livedoor.jp/dankogai/archives/51011227.html
Name_Not_Found [sage] 2012/01/18(水) 18:52:30.50 ID:???
<div class="vertical_soto">
<p class="vertical_naka">
<img src="img.jpg">
</p>
</div>

.vertical_soto{
position:absolute;
display: table;
width:220px;
height:220px;
}

.vertical_naka{
display: table-cell;
vertical-align: middle;
text-align:center;
width:220px;
height:220px;
}

だいたいこんな感じで思っていたとおりになりました。
ありがとうございました。
Name_Not_Found [sage] 2012/01/18(水) 21:50:24.77 ID:???
IE6ってbeforeやafterが対応してないんだよね
じゃあclearfixとかいう手法とか
before、afterでなんかやる
みたいな手法はIE6だけ無理?
Name_Not_Found [sage] 2012/01/18(水) 21:52:04.28 ID:???

ここの3番目
ttp://www.koikikukan.com/archives/2007/02/14-003005.php
Name_Not_Found [sage] 2012/01/20(金) 17:29:05.53 ID:???
ある画像から切り抜いた一部分をタイルのように隙間なく並べたいのですが、方法がよくわかりません。

画像から一部分を切り抜く(クリッピングする)方法はcssのclipを使えばとりあえずはできたのですが、
それをタイルのように隙間なく縦横10個x10個ならべようとすると切り抜いた画像部分が重なったり、
縦にばかり並ぶようになってしまいます。

<html>
<head>
<style type="text/css">
img.sample1 {
position: absolute;
clip:rect(12px,211px,297px,11px);
}
</style>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>show</title>
<body>
<img src="image1.jpg" class=sample1><br>
<img src="image1.jpg" class=sample1><br>
<img src="image1.jpg" class=sample1><br>
</body>
</html>

この方法だと改行分だけずれた画像が縦に並んでいきます。
縦にも横にも隙間なく10x10だけ並べたいのですが、tableを使用すればいいんでしょうか?
Name_Not_Found [sage] 2012/01/20(金) 20:17:57.87 ID:???
横に10個縦に10個並べれば?tableなんて要らんよ
というか、よかったらそんなことをしたい理由というか意図を教えてくれないか
自分なら一切迷わず「ある画像から切り抜いた一部分をタイルのように隙間なく並べ」た画像作るだろうから興味がある
Name_Not_Found [sage] 2012/01/20(金) 21:58:04.03 ID:???
Photoshopのクリッピングマスクのように
文字にbackground-imageをつけたいんですけど
どうやればいいですかね。

普通にcolorを指定しちゃうとその色になっちゃうし
transparentだとそもそも文字が表示されない
Name_Not_Found [sage] 2012/01/20(金) 23:15:29.51 ID:???

1行目と2行目がまるで噛み合ってないが大丈夫か
Name_Not_Found [sage] 2012/01/20(金) 23:16:03.47 ID:???
ワロタ
Name_Not_Found [sage] 2012/01/20(金) 23:33:40.61 ID:???
確かに日本語がおかしい・・・
ttp://www.fmod.jp/justnet/smu/smu04/smu04b.html
ここの下のほうにある
Adobe Photoshop
っていう文字にビルの背景の画像がうつってるでしょ
それみたいなことはCSSじゃ無理?
Name_Not_Found [sage] 2012/01/20(金) 23:37:45.64 ID:???
一言で言えばできる。
ヒント:文字の色を透明にする
Name_Not_Found [sage] 2012/01/24(火) 01:38:24.18 ID:???
id="foo.bar" のように、id属性にピリオドを含んだ要素があって、
それをCSSで指定したいとき、セレクタはどう書けばいいでしょうか。
#foo.bar だと、当然のように「#foo」+「.bar」だと解釈されてしまいます。
Name_Not_Found [sage] 2012/01/24(火) 01:50:30.59 ID:???
>スタイルシートのIDには、アルファベット以外には数字(0〜9)とハイフン(-)、アンダースコア(_)しか使えません。
Name_Not_Found [sage] 2012/01/24(火) 02:00:55.56 ID:???
[id="foo.bar"]
Name_Not_Found [sage] 2012/01/24(火) 03:33:21.73 ID:???

ですよねー。
HTMLの仕様としては、id属性には「:」や「.」も使えるんですけど、
CSSセレクタのせいで、実質的にはこれらの文字は使えないんです。残念。


なるほどー、そういう方法もあるのですね。ありがとうございました。
Name_Not_Found [sage] 2012/01/24(火) 15:57:35.54 ID:???
<pre>タグのように、空白をそのまま表示しつつ、
かつ通常のテキストのように長い行を適宜折り返してくれるという
すてきな機能はCSSにはありますか。
すべての空白文字を&nbsp;に置き換えることを検討しましたが、そうすると
空白文字での折り返しができないことに気づきました。
Name_Not_Found [sage] 2012/01/24(火) 16:35:32.00 ID:???
ありますけど使えるかはブラウザしだい
Name_Not_Found [sage] 2012/01/25(水) 09:44:56.23 ID:???

ぜひ教えて下さい
Name_Not_Found [] 2012/01/25(水) 10:52:57.51 :iZ3MyXPn

 || ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄||
 || ★★2ちゃんねるの仕様★★
 ||                               Λ_Λ
 ||   980到達以降、                 \ (゚ー゚*) キホン。
 ||  前のレスから24時間放置でdat落ち       ⊂⊂ |
 ||___ ∧ ∧__∧ ∧__ ∧ ∧_      | ̄ ̄ ̄ ̄|
      (  ∧ ∧__ (   ∧ ∧__(   ∧ ∧     ̄ ̄ ̄
    〜(_(  ∧ ∧_ (  ∧ ∧_ (  ∧ ∧  は〜い、先生。
      〜(_(   ,,)〜(_(   ,,)〜(_(   ,,)
        〜(___ノ  〜(___ノ   〜(___ノ
Name_Not_Found [sage] 2012/01/25(水) 11:38:34.92 ID:???

おバカな仕様だよな。
50到達前ぐらいにした方が、余程クソスレが減るのに。
Name_Not_Found [] 2012/01/25(水) 15:23:01.30 :pueSXgkA
質問させてください。
focusをstyle=で直接textareaに書くにはどうしたらいいでしょうか?
Name_Not_Found [sage] 2012/01/25(水) 15:27:44.53 ID:???
方法はありません。CSSファイル内で書いて下さい。
Name_Not_Found [] 2012/01/25(水) 16:14:35.49 :pueSXgkA

ありがとう
あともう1つ質問です

フォーカス時に、IE9だと変な枠は表示されませんが
cromeだと変な枠が表示されてボーダーの色が変わってしまいます
textareaのフォーカス時の色の指定方法を教えてください
Name_Not_Found [sage] 2012/01/26(木) 11:49:02.48 ID:???
すみませんだれかおしえてください
Name_Not_Found [sage] 2012/01/26(木) 12:15:21.01 ID:???

white-space
Name_Not_Found [sage] 2012/01/26(木) 12:43:23.87 ID:???

>white-space
ありがとうございます。これのことでしょうか。
ttp://www.htmq.com/style/white-space.shtml
このサンプルをみると、white-space: pre のとき、空白と改行は意図した通りですが、
ボックスの大きさに合わせた改行をしてくれないようです。
欲しいのは、>980に書いたように、

><pre>タグのように、空白をそのまま表示しつつ、
>かつ通常のテキストのように長い行を適宜折り返してくれる

という機能なんですが、実現できますか。


Name_Not_Found [sage] 2012/01/27(金) 12:11:00.22 ID:???
保守しとこ
Name_Not_Found [sage] 2012/01/27(金) 17:44:04.49 ID:???

> <pre>タグのように、空白をそのまま表示しつつ、
> かつ通常のテキストのように長い行を適宜折り返してくれるという
pre要素でこの挙動が再現できないのだが…。
ttp://jsfiddle.net/A6AVZ/
Name_Not_Found [sage] 2012/01/27(金) 18:45:24.21 ID:???
<pre>タグのように、空白をそのまま表示しつつ、


かつ
通常のテキストのように長い行を適宜折り返してくれるという
Name_Not_Found [sage] 2012/01/27(金) 19:19:18.33 ID:???
折り返したら「整形済み」にならんだろ ?
Name_Not_Found [sage] 2012/01/27(金) 19:28:34.27 ID:???
  -─フ  -─┐   -─フ  -─┐  ヽ  / _  ───┐.  |
__∠_   /  __∠_   /    / ̄| /      /  |
  /    /⌒ヽ   /    /⌒ヽ     /l      /    |
  (         |   (         | /  / l    /\     |    /
  \__     _ノ    \__     _ノ   /  \ /   \  |_/

  __|__    __    l     __|__     l    ヽヽ
  |     |   ̄ ̄  /  -┼─       |        |  _  l
   |   |       /       | ─-    ├─┐    ̄| ̄ ヽ |
    |   |       |     |        /    |    |   │
 ─┴ー┴─     ヽ_    |  ヽ__   /  ヽ/     |   ヽl

  l         l          |     ┌─┬─┐  ─--
  |    ヽ    |    ヽ     |  _.  ├─┼─┤    __
 |      l   |      l    / ̄   └─┴─┘   ̄  ヽ
 |     |   |     |  (         , l  ヽ        |
  し       し       ヽ__  /  ヽ___,ヽ     _ノ
Name_Not_Found [sage] 2012/01/27(金) 19:57:29.80 ID:???

参考URL付けてるんだから工夫してくれ
ttp://jsfiddle.net/A6AVZ/1/
Name_Not_Found [sage] 2012/01/27(金) 20:07:00.32 ID:???
次スレは無し?
Name_Not_Found [sage] 2012/01/27(金) 20:32:18.20 ID:???
next

ttp://toro.2ch.net/test/read.cgi/hp/1327663847/
Name_Not_Found [sage] 2012/01/27(金) 20:38:28.36 ID:???

Thank you.
Name_Not_Found [sage] 2012/01/27(金) 20:39:26.08 ID:???
next thread
ttp://toro.2ch.net/test/read.cgi/hp/1327663847/
1001 [] Over 1000 Thread
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。

勢い5万以上のスレをメールでお知らせするサービス、実施中!!
憧れボディをGETしたい!その夢、ボニックで!

2ch勢いランキング アーカイブ Web制作板ランキング

凡例:

レス番

100 (赤) → 2つ以上レスが付いている
100 (紫) → 1つ以上レスが付いている

名前

名無しさん (青) → sage のレス
名無しさん (緑) → age のレス

ID

ID:xxxxxxx (赤) → 発言が3つ以上のID
ID:xxxxxxx (青) → 発言が2つ以上のID

このページは2ch勢いランキングが作成したアーカイブです。削除についてはこちら