CSS初心者スレッド＝10th＝
942 ：Name_Not_Found：2012/01/09(月) 08:14:29.26 ID:???
文章中にインラインフレームで画像や文字を表示させると、必ず下側に余微妙な余白ができてしまいます。
そこで、vertical-alignでtext-bottomを指定したところ今度は下方向に余計落ちてしまいます。middleを指定すると
日本語文字は丁度いい位置にくるんですが、やはり数字やアルファベットは下にいきすぎてしまいます。
他の普通の文章と縦方向（一番下の位置）を揃えるにはどうしたらいいでしょうか？
宜しくお願いいたします。
そこで、vertical-alignでtext-bottomを指定したところ今度は下方向に余計落ちてしまいます。middleを指定すると
日本語文字は丁度いい位置にくるんですが、やはり数字やアルファベットは下にいきすぎてしまいます。
他の普通の文章と縦方向（一番下の位置）を揃えるにはどうしたらいいでしょうか？
宜しくお願いいたします。
943 ：Name_Not_Found：2012/01/09(月) 18:08:59.20 ID:???
どげんかせんといかんな
944 ：Name_Not_Found：2012/01/10(火) 00:40:47.74 ID:???
日本語はプロポーショナルフォント、英語は等幅フォント
にしたいんですけど、どう書けばいいですか？
にしたいんですけど、どう書けばいいですか？
945 ：Name_Not_Found：2012/01/10(火) 02:37:52.44 ID:???
946 ：Name_Not_Found：2012/01/11(水) 01:40:28.35 ID:???
webサイトの一部で、ユーザがCSSを登録できるようにしたいのですが、サイト自体のCSSとバッティングさせたくありません。
そのため、ユーザのCSSの影響を、例えば<div class="user-area">........</div>の中だけにするために、
ユーザCSSのすべてのセレクタの頭に.user-areaをつけようと思っています。( .user-area h1 {......} )
この方法で、何か問題が起こることがあるでしょうか？
そのため、ユーザのCSSの影響を、例えば<div class="user-area">........</div>の中だけにするために、
ユーザCSSのすべてのセレクタの頭に.user-areaをつけようと思っています。( .user-area h1 {......} )
この方法で、何か問題が起こることがあるでしょうか？
947 ：Name_Not_Found：2012/01/11(水) 02:20:00.34 ID:???
大問題
長いからuaにしろ
長いからuaにしろ
どういった問題でしょうか？
すみません、ユーザCSSと書きましたが、一般的な用語とかぶっているのですね。
サイト側のlinkタグで読み込むCSSをユーザに書いてもらう予定で、そのCSSを指して言いました。
サイト側のlinkタグで読み込むCSSをユーザに書いてもらう予定で、そのCSSを指して言いました。
950 ：Name_Not_Found：2012/01/11(水) 18:07:30.79 ID:???
>>948-949
名前の長さは気にしなくていい。
訪問者に独自CSSを適用させるやり方なら個人用のクラスを用意する必要はない。
同じセレクタを後から定義してやるだけでカスケード処理されるはずだが…、
名前の長さは気にしなくていい。
訪問者に独自CSSを適用させるやり方なら個人用のクラスを用意する必要はない。
同じセレクタを後から定義してやるだけでカスケード処理されるはずだが…、
951 ：Name_Not_Found：2012/01/11(水) 19:02:04.87 ID:???
>>950
> webサイトの一部
> webサイトの一部
952 ：Name_Not_Found：2012/01/11(水) 22:52:54.92 ID:???
>>950
カスケードってことは、単一HTMLでどちらかのCSSが優先されてしまうんですよね。
常にサイト側で用意したCSSを使用するのではなく、単一HTMLの中の特定領域だけ、
ユーザが作成したCSSを適用したいです。
カスケードってことは、単一HTMLでどちらかのCSSが優先されてしまうんですよね。
常にサイト側で用意したCSSを使用するのではなく、単一HTMLの中の特定領域だけ、
ユーザが作成したCSSを適用したいです。
953 ：Name_Not_Found：2012/01/12(木) 17:16:16.64 ID:yH0Xyx0a
ボックスを入れ子にして外のボックスでpadding、中のボックスでmarginを指定すると
IE6の場合だけmargin-topが相殺されてしまうのですが（IE7,8、FireFoxとかでは合算）
これはバグですか？ 検索してもドンピシャなのが見つからない・・・
なぜか外のボックスにwidthを指定したときにだけ起こります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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>
IE6の場合だけmargin-topが相殺されてしまうのですが（IE7,8、FireFoxとかでは合算）
これはバグですか？ 検索してもドンピシャなのが見つからない・・・
なぜか外のボックスにwidthを指定したときにだけ起こります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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>
954 ：Name_Not_Found：2012/01/12(木) 17:31:13.11 ID:???
IE6はもう対応する必要ないだろ。
955 ：Name_Not_Found：2012/01/14(土) 02:59:01.67 ID:???
こういうのって、CSS3じゃなくてもできますか？
むかしむかし んたくをして
あるところに いると、かわ
おじいさんと からももがど
おばあさんが んぶらこっこ
すんでいまし とながれてき
た。おばあさ ました。
んがかわでせ
二段組にするんですけど
最後の「せんたくを」の部分を続けたいんです。
<p>むかしむかし〜ながれてきました</p>
このひとつのpだけに対しcssでなんかやって、二段組みたいなことむり？
むかしむかし んたくをして
あるところに いると、かわ
おじいさんと からももがど
おばあさんが んぶらこっこ
すんでいまし とながれてき
た。おばあさ ました。
んがかわでせ
二段組にするんですけど
最後の「せんたくを」の部分を続けたいんです。
<p>むかしむかし〜ながれてきました</p>
このひとつのpだけに対しcssでなんかやって、二段組みたいなことむり？
956 ：Name_Not_Found：2012/01/14(土) 15:05:01.91 ID:???
CSS2.1でもfloat使えばできる。
957 ：Name_Not_Found：2012/01/14(土) 15:17:26.79 ID:???
958 ：Name_Not_Found：2012/01/14(土) 19:25:57.26 ID:???
959 ：Name_Not_Found：2012/01/14(土) 19:40:02.52 ID:???
>>958
FirefoxやChromeだとフォントリンク依存せずにちゃんと機能するみたいだよ
FirefoxやChromeだとフォントリンク依存せずにちゃんと機能するみたいだよ
960 ：Name_Not_Found：2012/01/14(土) 21:47:04.07 ID:???
>>955
CSS詳しくないけどググって見た感じ、独自の禁則処理はjavascriptじゃないと難しいのかもね
CSS詳しくないけどググって見た感じ、独自の禁則処理はjavascriptじゃないと難しいのかもね
961 ：Name_Not_Found：2012/01/14(土) 21:50:32.88 ID:???
禁則処理じゃなくてマルチカラムの話では
962 ：Name_Not_Found：2012/01/17(火) 19:44:06.29 ID:AO7FQlYk
<p class="vertical">
<img src="img.jpg">
</p>
.vertical{
display:table;
width:220px;
height:220px;
text-align:center;
vertical-align:middle;
}
<img src="img.jpg">
</p>
.vertical{
display:table;
width:220px;
height:220px;
text-align:center;
vertical-align:middle;
}
963 ：Name_Not_Found：2012/01/17(火) 19:46:02.33 ID:AO7FQlYk
964 ：Name_Not_Found：2012/01/17(火) 19:59:30.27 ID:???
display:table-cell; にすればなおるかな？
965 ：Name_Not_Found：2012/01/17(火) 20:00:41.60 ID:???
旧IEも保証するなら、小飼弾のブログにちょうどいい記事がある
http://blog.livedoor.jp/dankogai/archives/51011227.html
http://blog.livedoor.jp/dankogai/archives/51011227.html
966 ：Name_Not_Found：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;
}
だいたいこんな感じで思っていたとおりになりました。
ありがとうございました。
<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;
}
だいたいこんな感じで思っていたとおりになりました。
ありがとうございました。
967 ：Name_Not_Found：2012/01/18(水) 21:50:24.77 ID:???
IE6ってbeforeやafterが対応してないんだよね
じゃあclearfixとかいう手法とか
before、afterでなんかやる
みたいな手法はIE6だけ無理？
じゃあclearfixとかいう手法とか
before、afterでなんかやる
みたいな手法はIE6だけ無理？
968 ：Name_Not_Found：2012/01/18(水) 21:52:04.28 ID:???
969 ：Name_Not_Found：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を使用すればいいんでしょうか？
画像から一部分を切り抜く（クリッピングする）方法は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を使用すればいいんでしょうか？
970 ：Name_Not_Found：2012/01/20(金) 20:17:57.87 ID:???
横に10個縦に10個並べれば？tableなんて要らんよ
というか、よかったらそんなことをしたい理由というか意図を教えてくれないか
自分なら一切迷わず「ある画像から切り抜いた一部分をタイルのように隙間なく並べ」た画像作るだろうから興味がある
というか、よかったらそんなことをしたい理由というか意図を教えてくれないか
自分なら一切迷わず「ある画像から切り抜いた一部分をタイルのように隙間なく並べ」た画像作るだろうから興味がある
971 ：Name_Not_Found：2012/01/20(金) 21:58:04.03 ID:???
Photoshopのクリッピングマスクのように
文字にbackground-imageをつけたいんですけど
どうやればいいですかね。
普通にcolorを指定しちゃうとその色になっちゃうし
transparentだとそもそも文字が表示されない
文字にbackground-imageをつけたいんですけど
どうやればいいですかね。
普通にcolorを指定しちゃうとその色になっちゃうし
transparentだとそもそも文字が表示されない
972 ：Name_Not_Found：2012/01/20(金) 23:15:29.51 ID:???
>>971
1行目と2行目がまるで噛み合ってないが大丈夫か
1行目と2行目がまるで噛み合ってないが大丈夫か
973 ：Name_Not_Found：2012/01/20(金) 23:16:03.47 ID:???
ワロタ
974 ：Name_Not_Found：2012/01/20(金) 23:33:40.61 ID:???
確かに日本語がおかしい・・・
http://www.fmod.jp/justnet/smu/smu04/smu04b.html
ここの下のほうにある
Adobe Photoshop
っていう文字にビルの背景の画像がうつってるでしょ
それみたいなことはCSSじゃ無理？
http://www.fmod.jp/justnet/smu/smu04/smu04b.html
ここの下のほうにある
Adobe Photoshop
っていう文字にビルの背景の画像がうつってるでしょ
それみたいなことはCSSじゃ無理？
975 ：Name_Not_Found：2012/01/20(金) 23:37:45.64 ID:???
一言で言えばできる。
ヒント：文字の色を透明にする
ヒント：文字の色を透明にする
976 ：Name_Not_Found：2012/01/24(火) 01:38:24.18 ID:???
id="foo.bar" のように、id属性にピリオドを含んだ要素があって、
それをCSSで指定したいとき、セレクタはどう書けばいいでしょうか。
#foo.bar だと、当然のように「#foo」＋「.bar」だと解釈されてしまいます。
それをCSSで指定したいとき、セレクタはどう書けばいいでしょうか。
#foo.bar だと、当然のように「#foo」＋「.bar」だと解釈されてしまいます。
977 ：Name_Not_Found：2012/01/24(火) 01:50:30.59 ID:???
＞スタイルシートのIDには、アルファベット以外には数字(0〜9)とハイフン(-)、アンダースコア(_)しか使えません。
978 ：Name_Not_Found：2012/01/24(火) 02:00:55.56 ID:???
[id="foo.bar"]
979 ：Name_Not_Found：2012/01/24(火) 03:33:21.73 ID:???
>>977
ですよねー。
HTMLの仕様としては、id属性には「:」や「.」も使えるんですけど、
CSSセレクタのせいで、実質的にはこれらの文字は使えないんです。残念。
>>978
なるほどー、そういう方法もあるのですね。ありがとうございました。
ですよねー。
HTMLの仕様としては、id属性には「:」や「.」も使えるんですけど、
CSSセレクタのせいで、実質的にはこれらの文字は使えないんです。残念。
>>978
なるほどー、そういう方法もあるのですね。ありがとうございました。
980 ：Name_Not_Found：2012/01/24(火) 15:57:35.54 ID:???
＜pre＞タグのように、空白をそのまま表示しつつ、
かつ通常のテキストのように長い行を適宜折り返してくれるという
すてきな機能はCSSにはありますか。
すべての空白文字を＆nbsp;に置き換えることを検討しましたが、そうすると
空白文字での折り返しができないことに気づきました。
かつ通常のテキストのように長い行を適宜折り返してくれるという
すてきな機能はCSSにはありますか。
すべての空白文字を＆nbsp;に置き換えることを検討しましたが、そうすると
空白文字での折り返しができないことに気づきました。
981 ：Name_Not_Found：2012/01/24(火) 16:35:32.00 ID:???
ありますけど使えるかはブラウザしだい
982 ：Name_Not_Found：2012/01/25(水) 09:44:56.23 ID:???
>>981
ぜひ教えて下さい
ぜひ教えて下さい
983 ：Name_Not_Found：2012/01/25(水) 10:52:57.51 ID:iZ3MyXPn
||￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣||
|| ★★２ちゃんねるの仕様★★
|| Λ_Λ
|| 980到達以降、 ＼ (ﾟーﾟ*) ｷﾎﾝ。
|| 前のレスから24時間放置でdat落ち ⊂⊂ |
||＿＿＿ ∧ ∧＿＿∧ ∧＿＿ ∧ ∧＿ |￣￣￣￣|
( ∧ ∧__ ( ∧ ∧__( ∧ ∧ ￣￣￣
〜（＿( ∧ ∧＿ ( ∧ ∧＿ ( ∧ ∧ は〜い、先生。
〜（＿( ,,)〜（＿( ,,)〜（＿( ,,)
〜（＿__ﾉ 〜（＿__ﾉ 〜（＿__ﾉ
984 ：Name_Not_Found：2012/01/25(水) 11:38:34.92 ID:???
985 ：Name_Not_Found：2012/01/25(水) 15:23:01.30 ID:pueSXgkA
質問させてください。
focusをstyle=で直接textareaに書くにはどうしたらいいでしょうか？
focusをstyle=で直接textareaに書くにはどうしたらいいでしょうか？
986 ：Name_Not_Found：2012/01/25(水) 15:27:44.53 ID:???
方法はありません。CSSファイル内で書いて下さい。
987 ：Name_Not_Found：2012/01/25(水) 16:14:35.49 ID:pueSXgkA
>>986
ありがとう
あともう１つ質問です
フォーカス時に、IE9だと変な枠は表示されませんが
cromeだと変な枠が表示されてボーダーの色が変わってしまいます
textareaのフォーカス時の色の指定方法を教えてください
ありがとう
あともう１つ質問です
フォーカス時に、IE9だと変な枠は表示されませんが
cromeだと変な枠が表示されてボーダーの色が変わってしまいます
textareaのフォーカス時の色の指定方法を教えてください
988 ：Name_Not_Found：2012/01/26(木) 11:49:02.48 ID:???
すみません>>980だれかおしえてください
989 ：Name_Not_Found：2012/01/26(木) 12:15:21.01 ID:???
>>980
white-space
white-space
990 ：Name_Not_Found：2012/01/26(木) 12:43:23.87 ID:???
>>989
>white-space
ありがとうございます。これのことでしょうか。
http://www.htmq.com/style/white-space.shtml
このサンプルをみると、white-space: pre のとき、空白と改行は意図した通りですが、
ボックスの大きさに合わせた改行をしてくれないようです。
欲しいのは、>980に書いたように、
>＜pre＞タグのように、空白をそのまま表示しつつ、
>かつ通常のテキストのように長い行を適宜折り返してくれる
という機能なんですが、実現できますか。
>white-space
ありがとうございます。これのことでしょうか。
http://www.htmq.com/style/white-space.shtml
このサンプルをみると、white-space: pre のとき、空白と改行は意図した通りですが、
ボックスの大きさに合わせた改行をしてくれないようです。
欲しいのは、>980に書いたように、
>＜pre＞タグのように、空白をそのまま表示しつつ、
>かつ通常のテキストのように長い行を適宜折り返してくれる
という機能なんですが、実現できますか。
保守しとこ