12/02/24 08:23:56.69 bphrcSRC
max-heightについてなんですが、
横幅が50%固定の際、
高さを横幅に対して3/4で表示したいです。
うまい方法ないでしょうか・
225:Name_Not_Found
12/02/24 23:14:45.93
>>223
お前は正しいけど間違ってる
226:Name_Not_Found
12/02/24 23:16:19.29
>>224
37.5%
227:Name_Not_Found
12/02/24 23:48:43.46 bphrcSRC
>>226
横の%指定は効くみたいなんですけど、
縦の%指定は効いてくれません
本当にそれでできるんですか？
228:Name_Not_Found
12/02/25 00:10:23.93
>>226
アホは黙ってなよ
229:Name_Not_Found
12/02/25 01:08:03.87
Javascript使う
CSSはJavascriptを併用しないと縦横の比率を保ったままサイズ変更みたいなほんのちょっとだけでも計算が必要になると
とたんにややこしくなる。あまりにも表現力が貧弱すぎる。
230:Name_Not_Found
12/02/25 01:22:09.04
>>225
おまえが正しいのかわからないな
231:Name_Not_Found
12/02/25 01:47:45.03
>>229
そういうことでしたか。
正直、これぐらいはできてほしいものですが・・・。
納得しました。どうもです。
232:Name_Not_Found
12/02/28 10:49:18.50 1+TMryPg
質問です。
この状態から、内側の青いボックスを外側の赤いボックスのどまん中に
配置したいのですが、どうすればいいでしょうか。
外側のボックスに padding: 50px; と指定すると、なぜか外側のボックスが大きくなってしまいます。
position: absolute; はナシでお願いします。
<style>
#outer {
width: 200px;
height: 200px;
background-color: red;
}
#inner {
margin: 0;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div id="outer">
<div id="inner"></div>
</div>
233:232
12/02/28 10:54:21.41 1+TMryPg
margin: 0; はゴミです。
いろいろ試していたときの残骸です。
よろしくお願いします。
234:Name_Not_Found
12/02/28 11:19:09.31
innerにmargin: auto;
235:Name_Not_Found
12/02/28 11:29:57.30
margin: auto; では横位置しかセンタリングできないか
position: absolute; が嫌なら relative; は？
236:232
12/02/28 11:33:16.80 1+TMryPg
>>235
position: relative;
top: 50px;
left: 50px;
ですね！
これは綺麗な書き方ですね。
ありがとうございました！！！
本当に助かりました。
237:Name_Not_Found
12/02/28 13:00:46.45
>>236
marginで設定しても同じなのでは…
238:232
12/02/28 13:35:11.02 1+TMryPg
>>237
#inner で margin: auto; や margin: 50px; とやると、
#inner が #outer の上辺に張り付いてしまうのです。
うまい方法がありましたら是非教えてください。
239:Name_Not_Found
12/02/28 14:18:20.49
>>238
innerに display:inline-block;margin-top:50px;*display:inline;*zoom:1;、outerにtext-align:center; でどうだろうか？
240:232
12/02/28 14:37:29.37 1+TMryPg
うまく動きましたが、高等過ぎて難しいのでだめです^^;
でも勉強になりました。
プロパティに*なんて付けられるんですね。
zoomも知りませんでした。
241:Name_Not_Found
12/02/28 15:14:04.56
プロパティに*はIE対策だったと思うが
242:Name_Not_Found
12/02/28 15:43:35.75
>>239
冗談もほどほどに
243:Name_Not_Found
12/02/28 23:38:11.67
>>232,238
「難しいのでダメです」ってどういう理屈だよ！って感じだけど。
URLﾘﾝｸ(jsfiddle.net)
244:232
12/02/29 01:29:57.59 5fbJwRRa
>>243
あ、なるほど。
これがpositionに頼らない王道のやり方ですね。
marginとpaddingを両方にしっかり指定するんですね。
どうもありがとうございました。
245:Name_Not_Found
12/02/29 10:15:43.46
見た目だけなら青いボックスに赤いボーダーを50pxのwidthでつければいいだけだな。
二つのブロックにすることに何らかの意味があるならこれじゃダメだけど
246:Name_Not_Found
12/02/29 19:40:10.61
横長と縦長が混じった画像群があります
この画像を1列に2枚ずつ、
長方形型の枠に極力空白を作らないよう、横幅いっぱいになるように表示したいと思います
横横だけなら50/50くらいのdivで区切れば問題ないのですが、
困るのが縦長と横長の組み合わせです
min-width:25%
max-width:60%
これで縦は左端に寄り、横は大きく表示され、
そこそこイメージ通りに表示されたものの、
ブラウザの横幅を変えると並ばなくなってしまったり、
今度は横横の組み合わせが横に並ばなくなってしまいます
なんとかこれを実現する方法はないでしょうか？
247:Name_Not_Found
12/02/29 21:16:34.37
その枠をinlineにするんじゃ駄目なのけ
248:Name_Not_Found
12/02/29 22:24:58.73
<ul>
<li></li>
<li></li>
(繰り返し)
<li></li>
</ul>
っていうリストがあった時に、
上から3つずつ順に右寄せ(float:right)するようなCSSって書けますか？
4番目の要素が1番目の要素の真下に来て、その左に5番目がっていうようにしたいです。
リストの内容は変化するので、どの順番で入っても入った順に並べたいです。
宜しくお願い致します。
249:Name_Not_Found
12/02/29 22:34:58.15
classやidつけちゃ駄目なら無理
250:Name_Not_Found
12/02/29 22:52:39.16
jQueryで簡単に実装できる
251:Name_Not_Found
12/02/29 23:03:17.79
>>248
:nth-child
252:Name_Not_Found
12/03/01 00:09:10.04 qA4Xm/gX
>>251の勝ちだな
253:252
12/03/01 00:09:56.08
test
254:Name_Not_Found
12/03/01 01:49:20.06
>>252
自演乙
255:Name_Not_Found
12/03/01 07:33:24.23
>>251
便利だよね。
IE6-8対策はどうしてる？
256:Name_Not_Found
12/03/01 19:18:22.24
レガシーブラウザ用のライブラリでも入れとけば
257:Name_Not_Found
12/03/01 22:43:21.48
>>256
IE9.js も selectivizr も、古いPCで表示してみるともっさり重かったんだよ。おすすめの方法知ってる人いたら教えてください。
258:Name_Not_Found
12/03/02 00:56:47.56
:first-childと+でも使えば
259:Name_Not_Found
12/03/02 08:19:53.48
>>255
JavaScriptでコード書けばいい
260:Name_Not_Found
12/03/02 13:55:42.57
古いIEなんぞ相手にしないが正解
261:248
12/03/03 20:12:40.53
ありがとうございます。
jsは無しでもできるんですね。
まだできてませんが頑張ってみます。
262:Name_Not_Found
12/03/07 16:59:20.49
わざわざ画像つかわなくてもCSSでいいようなものをいちいち画像にするメリットって何？
文字だけ書いた画像とか。
263:262
12/03/07 17:01:46.80
自己解決
264:Name_Not_Found
12/03/07 17:34:01.03 qwDE84iH
以下のように、<p>タグなかで<span>タグをcenterにもっていきたいのですがうまくいきません
<p>タグのなかで要素をcenterに持っていくにはどうすればいいでしょうか
<p><span style="text-align:center"> test <span></p>
265:Name_Not_Found
12/03/07 17:38:41.60
pで
266:Name_Not_Found
12/03/08 09:37:12.87
質問です
operaやsafariでのcssの挙動を確認したいのですがインストールしたくありません
様々なブラウザでのcssの挙動を確認できるシミュレーターとかありませんか?
267:Name_Not_Found
12/03/08 09:47:19.78
答えたくありません
268:Name_Not_Found
12/03/08 13:12:51.80
じゃあ答えんなカス
269:Name_Not_Found
12/03/08 14:31:35.94
あるわけねーじゃん。バカじゃねーの。
270:Name_Not_Found
12/03/08 14:48:23.69
Operaなら俺がSS撮ってやる
999,999,999,999,999\/1ページで
もしくは氏ね
271:Name_Not_Found
12/03/08 14:57:08.91
もしあったとしても、シュミレーターなんぞ入れるよりブラウザ入れるほうが
よっぽど要領も少ないし、日頃セキュリティ対策が必須のソフトなのだから被害も少ないと思うぞ。
272:Name_Not_Found
12/03/08 14:58:14.43
完璧なシミュレータなんぞ無いしね。
273:Name_Not_Found
12/03/08 16:16:15.84
質問です。ホームページを作ってるとかそういうのじゃないんですけど…
ブログのRSSを購読していて、ある文字列を含む記事を{display:none!important}で非表示にする場合はどのように記述すれば良いのでしょうか？
274:Name_Not_Found
12/03/08 16:22:03.72
CSSに文字列検索や条件分岐の仕組みはありません
JavaScriptとかでやってください
275:Name_Not_Found
12/03/08 16:24:03.34
かろうじて出来るといえば出来る。
nth-childとかで。
276:Name_Not_Found
12/03/08 16:26:50.67
>>274 そうなんですか…
>>275 くわしく教えてください
277:Name_Not_Found
12/03/08 16:30:19.84
今言った奴は擬似クラスっていうんだけどね。
偶数にあるものを変化させたりできるんだ。
例えば、とあるページに div.font12 が複数使われていてその内の何番目の記事を消したい。と
した場合。
.font:nth-child(2) { display: none!important; } これで上から二番目の記事を消すことができる。
他にも色々種類があるからココとか見てみてね。
URLﾘﾝｸ(zero.css-happylife.com)
278:Name_Not_Found
12/03/08 16:36:26.31
>>277
.item:nth-child(2) { display: none!important; } でできたのですが…
非表示にしたい記事が載っているサイトのタイトル等で、CSSを適応させるサイトを制限することはできませんか？
279:Name_Not_Found
12/03/08 16:37:43.45
CSS3って勧告まだだろ
280:Name_Not_Found
12/03/08 16:37:51.71
言ってる意味が半分わからないけどとりあえずCSSではこのレベルしかできないよ。とだけ言っておくね。
あとはJavaScriptに頼るしか無い
281:Name_Not_Found
12/03/08 16:38:30.57
>>279だから？
282:Name_Not_Found
12/03/08 16:39:17.24
CSS3セレクタは勧告されてるよ
283:Name_Not_Found
12/03/08 16:40:14.54
>>280
そうですか… ありがとうございましたm(_ _)m
284:Name_Not_Found
12/03/08 17:18:19.88
contentだかcontainみたいな疑似クラス無かったっけ
うろ覚えだが勧告前？に削除されたような記憶も
285:Name_Not_Found
12/03/08 17:20:32.27
それたぶんCSS4のほうじゃないか？
286:Name_Not_Found
12/03/08 17:28:31.59
URLﾘﾝｸ(suika.fam.cx)
:contains()疑似クラスは削除されたらしい
287:Name_Not_Found
12/03/08 17:32:28.19
これもだな。URLﾘﾝｸ(zng.info)
便利そうなのに廃案なったのか。
288:Name_Not_Found
12/03/09 01:43:46.92
>>282
そうだったのかすまん
289:Name_Not_Found
12/03/09 16:03:44.18
まあ理解できるまではHTMLもCSSもプログラミング言語かと勘違いする奴は多いよね
290:Name_Not_Found
12/03/11 08:29:54.96
コリスさんとこで紹介してたけど
URLﾘﾝｸ(cssizer.com)
291:Name_Not_Found
12/03/11 08:49:23.92
スクロールが効かない
292:Name_Not_Found
12/03/11 08:50:44.89
ほんとだ。
スクロール効かねぇ・・。
没
293:Name_Not_Found
12/03/12 00:23:23.13
てす
URLﾘﾝｸ(iup.2ch-library.com)
294:Name_Not_Found
12/03/12 00:25:21.88
失礼しました質問です
URLﾘﾝｸ(iup.2ch-library.com)
URLﾘﾝｸ(iup.2ch-library.com)
この２つをフレームで間なくつなげたいのですがなぜか幅が合いません
自分でみても分からないのですが何が間違ってるのか分かる方いましたらお願いします
295:Name_Not_Found
12/03/12 02:09:49.66
その前にその10年前みたいなHTMLをやめろよ
大文字小文字もダブルクォートもバラバラで気持ち悪いし
それが一番間違ってる
本題だけど、言ってる意味が全然分からないけどとりあえずマージンとパディングについて何も知らないのが原因じゃね
296:Name_Not_Found
12/03/12 02:41:55.75
まったくもって質問の意味がわからん。図での解説がないとエスパー質問だぞこれ
297:Name_Not_Found
12/03/12 02:59:25.55
失礼しました
タグは色んなＨＰからさがしてコピペしてるだけだったので直します
この下の表と上の表を同じ幅にしてフレームで表示したいのですがやり方が良く分かりません
>>295
マージンもパディングも知りませんでした
質問しといて申し訳ないんですが、そもそも最初から勉強しなおしてきた方がよさそうですね…
URLﾘﾝｸ(iup.2ch-library.com)
298:Name_Not_Found
12/03/12 03:02:15.70
はっきり言うけどコピペしてたら自分のためにならんぞ。
299:Name_Not_Found
12/03/12 06:33:03.72
別にいいだろ
300:Name_Not_Found
12/03/12 18:07:54.66
最初のうちは別にいいと思う
コピペしながらでもタグの意味を覚える気さえあれば
301:Name_Not_Found
12/03/12 19:07:25.24
意味も解らずJavaScriptコピったりしてたなー
302:Name_Not_Found
12/03/12 19:14:52.43
文化とは、コピペ＋α
303:Name_Not_Found
12/03/16 15:47:17.86
他板で質問したら、この板に誘導されました：
cssの編集に使うツールはどれが良いのでしょうか？
304:Name_Not_Found
12/03/16 16:30:26.04
オススメはIntypeかEmEditor+ZenCoding
EmEditorは有料だからその期間の間でしか使えない。
Intypeはまだ開発途上だけど結構優秀なエディタ。
いろんなプログラミング書くのにも使えるし予めスニペットが入ってる。（HTML5/CSS3は自分で入れるしかない）
あとはWebMatrixっていうMSが出してるWeb開発ツールかな。他にもまだあるけど今言った奴が自分の中ではダントツで使いやすかった。
305:Name_Not_Found
12/03/17 01:51:56.25
画像の中の特定の色を消すことってCSSで出来ますか。
306:Name_Not_Found
12/03/17 01:52:33.27
できません。
307:Name_Not_Found
12/03/17 01:55:16.86
>>306
はや。有難う、出来る方法は他にありますか。
308:Name_Not_Found
12/03/17 05:40:20.79
>>307
変えたい箇所全てにクラスを設定するしかないわ。
309:Name_Not_Found
12/03/17 06:18:36.55
>>305,307
CSSは魔法じゃないからね、そういうのはPhotoShop等画像加工ソフトの役目だね。
310:Name_Not_Found
12/03/17 08:52:35.69
>>307
>>308にそのクラスを書いて貰えば ?
311:Name_Not_Found
12/03/17 18:45:06.66
そのうちCSSだけでも出来るようになるけどな
312:Name_Not_Found
12/03/17 18:53:30.39
それMozillaの幹部が提案した案じゃなかったっけ？
313:Name_Not_Found
12/03/17 19:29:51.23
どうしてもCSSでやりたいなら、特定の色で塗ったBOXの中に、特定の色部分を透明にした画像を置けば良し
314:Name_Not_Found
12/03/18 16:34:29.66 QR3pKxtP
ブラウザの幅にあわせて
spanタグ単位で改行させたい場合どのようにすればいいでしょうか
<span >word1 word2</span> <span >word3</span> <span >word4 word5</span>
315:Name_Not_Found
12/03/18 16:47:42.69
>>303
F12
316:Name_Not_Found
12/03/18 16:56:45.74
>>314
span {
white-space:nowrap;
}
317:Name_Not_Found
12/03/18 17:01:29.84
ｗｗｗ
318:Name_Not_Found
12/03/18 17:38:58.18 QR3pKxtP
>>316 ありがとうございました
319:Name_Not_Found
12/03/18 21:25:47.81
初歩的な質問ですがお願いします。
ブログにて設定を変えるため、cssをいじっています。
現状は3カラムで、順番がコンテンツ、左メニュー、右メニューとなっています。
中を見ると、float:leftで上記の順番に並べられているようでした。
これを左メニュー、コンテンツ、右メニューに並べ替えたいのですが、
こ入れ替えるための方法は
・htmlでソースの順番を入れ替える
・float:rightを利用
以外に方法がありますでしょうか。
htmlがブログ設定画面内だとコンテンツごとに点在しており見つけづらかったので・・。
320:Name_Not_Found
12/03/18 22:38:42.56
box-ordinal-group
321:Name_Not_Found
12/03/18 22:59:39.03
>>320
実用としてはまだだろ
322:Name_Not_Found
12/03/19 01:08:07.96
あぶそりゅーと☆
323:Name_Not_Found
12/03/19 10:02:22.27
魔法少女 まーじん☆ゼロか
324:Name_Not_Found
12/03/19 18:01:01.30
電子戦隊 クロスブラウザー
325:Name_Not_Found
12/03/19 18:54:53.10
>>319
左メニューにfloat:left; 右メニューにfloat:right; で
なんであかんの？
326:Name_Not_Found
12/03/19 19:01:38.75
あ、ごめん、勘違い。
順番そのままで コンテンツと左メニューをdivで括って、右メニューをfloat:right;、
divの中でコンテンツをfloat:right; かな。
327:Name_Not_Found
12/03/19 20:29:53.66
Font/Zero
328:Name_Not_Found
12/03/19 20:54:36.29
>>327
#DIV/0!
329:Name_Not_Found
12/03/19 21:20:12.21
ボックスについて教えてください。
ボックスの中にボックスを作りたいのですが、やり方が間違っているようでうまくいきません。
CSS
div.out{
border:1px solid #333;
width:300px;
height:300px;
}
div.in{
border:1px solid #333;
width:150px;
height:150px;
position:relative;
right:10px;
}
HTML
<div class="out">
<div class="in">
</div>
</div>
ボックスoutの中の右にinを持ってきたいのですが、ブラウザで表示してみると
ボックスoutから、左に10pxはみ出して表示されます。
どうしたらいいでしょうか？
330:Name_Not_Found
12/03/19 22:49:53.62
position:relativeの使い方についてちゃんと調べて来な
あと、実際のソースは違うのかもしれんが、挙動のテストで中身のないボックスを作るのはやめとけ
331:Name_Not_Found
12/03/20 16:21:03.34
right:10px;
ってなに？
332:Name_Not_Found
12/03/20 16:24:56.23
えっ
333:Name_Not_Found
12/03/20 20:34:06.91
FORMの中に別のFORMが入っちゃうようなデザインのとき
どうしたらいいですかね
FORMの中のFORMはただのボタンなので、BUTTONにして
ACTIONはJavaScriptにやらせた方がいいですかね
334:Name_Not_Found
12/03/20 20:34:39.73
うおおここCSSスレだ間違えた
違うところで聞いてきます
335:Name_Not_Found
12/03/20 21:10:43.62 KJ5Ib4Ny
>>329 簡単な方法は、padding-leftで10px押せw
でもなんか違う！ 要は、div.inの150pxは別に変えなくても
そのまま300pxのままでできる方法があったような・・・
336:Name_Not_Found
12/03/20 21:38:17.06 KJ5Ib4Ny
>>329 div.outの中に margin 0 padding 50px
div.inの中に mardin 0 padding 0
そして、div.inは、width:300px; height:300px;
position:relativeはいらない。
それでやってみろ！ もしダメなら、
border:1px solid #333 もそれぞれ消してやってみた・・・！
337:Name_Not_Found
12/03/20 22:28:18.46
古いIEは確かmarginかpaddingにバグがあったはずだよ。
IEのバージョンは？
338:Name_Not_Found
12/03/20 22:31:10.40
とりあえずこういうのもある。
URLﾘﾝｸ(smkn.xsrv.jp)
339:Name_Not_Found
12/03/21 11:03:22.70
ありがとうございます、解決しました。
340:Name_Not_Found
12/03/23 02:29:14.30
□ -
- □
□ -
うまくかけなくてすみません、
↑のような見た目で実際は-の場所に□が来て、
左と右で丁度画像の縦半分ずつずれるよな配置できればいいと思うのだけど、
なにか良いやり方あるでしょうか？
341:Name_Not_Found
12/03/23 02:31:42.96
□□
□□ これの右側を縦半個分ずらしたようなイメージです。
□
342:Name_Not_Found
12/03/23 04:12:00.23
>>340
□ -
- □
□ -
＞↑のような見た目で実際は-の場所に□が来て、
□□
□□
□□
＞左と右で丁度画像の縦半分ずつずれるよな配置
□ □
□ □
□ □
？？？
>>341
□□
□□
□
＞これの右側を縦半個分ずらしたようなイメージです。
□ □
□ □
□
こう？
343:Name_Not_Found
12/03/23 04:16:02.31
┌┐
└┘
┌┐
└┘
┌┐
└┘
┌┐
└┘
こうか？
344:Name_Not_Found
12/03/23 04:55:36.10
質問者の文がどうみてもエスパーにしか見えん。
日本語で頼むよ。
もしくはそのアイデアが乗ってるサイトかAAじゃなく画像で質問してくれ。
345:Name_Not_Found
12/03/23 05:42:13.30
┏┓
┗┛┏┓
┏┓┗┛
┗┛┏┓
┏┓┗┛
┗┛
おれは普通にこういうことだと理解した。
346:Name_Not_Found
12/03/23 07:59:24.08
┌─┐
│ │┌─┐
└─┘│ │
┌─┐└─┘
│ │┌─┐
└─┘│ │
┌─┐└─┘
│ │
└─┘
こうでしょ
347:Name_Not_Found
12/03/23 08:02:11.91
│ │
│ │┌─┐
└─┘│ │
┌─┐│ │
│ │└─┘
│ │┌─┐
└─┘│ │
┌─┐│ │
│ │└─┘
│ │
└─┘
違った、こうだった
348:Name_Not_Found
12/03/23 08:13:20.44
もしこれだとしたら、たんにズラス分のスペースを空ければいいだけ、absoluteでもOK
349:Name_Not_Found
12/03/23 08:17:00.97
まぁボックスを好きなところに配置したいならabsolute安定だよな
350:Name_Not_Found
12/03/23 08:45:51.97
┌┐
│├┐
├┤│
│├┤
├┤│
│├┘
└┘
本当に正確なのはこうだろ
351:Name_Not_Found
12/03/23 09:45:13.01
質問者しっかりしろ
352:Name_Not_Found
12/03/23 13:39:21.59
ﾜﾛﾀ
353:Name_Not_Found
12/03/23 13:56:20.15
tableかpositionだよなぁ・・・
354:Name_Not_Found
12/03/23 13:57:45.38
>>342>>352
す、すみません
書き方が悪かったせいで混乱させてしまったようです
自分が望んでいたのは>>345-347 >>350のようなのがまさにそうでした
アドバイスしてもらったやり方で今日中に試してみたいと思います
ありがとうございます
355:Name_Not_Found
12/03/23 18:58:41.23
縦割りして一番上だけマージンで調整したほうが楽じゃないか？
356:Name_Not_Found
12/03/23 19:38:47.18
nth-child nth-of-type があるから古いブラウザに対応させる以外の目的ではTableは要らないだろ
>>355
右上にコンテンツの有無、どういうコンテンツかで全然変わるね。
357:Name_Not_Found
12/03/23 19:42:31.32
対応してるブラウザまだないけどboxでも一応
358:Name_Not_Found
12/03/23 19:44:58.49
右だけマージンでいいんじゃないの
359:Name_Not_Found
12/03/23 20:01:53.10
一列になってるのをジグザグにしたいんじゃないの
360:Name_Not_Found
12/03/23 23:40:36.30
ＩＥ８ってhover使えないの？
div:hover {
border:1px solid #e0e;
}
firefoxだとちゃんとなってるけどＩＥだと全く反映されない。
361:341
12/03/23 23:51:13.42 jGmYUoMv
>>355-359
えーと、左右に分割しまして、
左はそのまま、右の頭に空気入れました。
微調整することで希望通りのデザインにはなるのですが、
ウィンドウのサイズを変えると、どんどんずれていってしまいます。
空白の縦幅も相対値にすることってできるんでしょうか？
362:Name_Not_Found
12/03/23 23:51:46.75
>>360
再現するソース
URLﾘﾝｸ(jsfiddle.net)
363:361
12/03/24 00:29:47.13
縦幅半分の透過gif用意して頭に置きました
こんなんでもいいんでしょうか。。
364:Name_Not_Found
12/03/24 00:46:10.35
それは邪道だろ
365:Name_Not_Found
12/03/24 01:31:53.49
<link rel="stylesheet" type="text/css"> <style type="text/css">
<!--
div.auto{border:0px solid #e0e; overflow:visible;width:450;}
div.a {border:1px solid #e0e; width:200px;height:200px;float:left;}
div.b {border:1px solid #e0e; width:200px;height:200px;
float:left;margin-top:100px; /* 縦幅はここを調整*/position:relative;}
div.clear{clear:left; }
-->
</style>
<body>
<div class="auto">
<div class="a">
</div>
<div class="b">
</div>
<div class="clear"></div>
<div class="a">
</div>
<div class="b">
</div>
<div class="clear"></div>
<div class="a">
</div>
<div class="b">
</div>
<div class="clear"></div>
</div>
・・・繰り返し。
</body>
色々やってたら凄く変なソースになった。
やり方とかあってるのかは知るわけない。
366:Name_Not_Found
12/03/24 12:32:42.86
やっぱり「縦幅」って一般的言い回しなのか
老いを感じるわ
>>360
URLﾘﾝｸ(www.google.com)
367:Name_Not_Found
12/03/24 12:35:12.41
いや一般的ではないｗ
368:Name_Not_Found
12/03/24 12:36:21.84
可変する文章の最後にバックグランドイメージで画像を表示させたい場合どうすればいいでしょうか？
369:Name_Not_Found
12/03/24 12:56:59.44
background-position
370:Name_Not_Found
12/03/24 13:02:13.03
backgroud-positionで具体的にどのような値を指定すればいいのでしょうか？
371:Name_Not_Found
12/03/24 13:17:30.58
ぐぐれよ
372:Name_Not_Found
12/03/24 15:37:06.37
>>365
親切にどうもありがたう
373:Name_Not_Found
12/03/24 17:20:29.17
>>368
どうしても「背景画像」じゃなきゃいけない理由がないならafter疑似要素でできるよ
after疑似要素については>>371
374:Name_Not_Found
12/03/24 23:59:50.04
>>371
教えてくれよ
375:Name_Not_Found
12/03/25 10:03:59.09
>>374
知らないからググれって言ってるんだよ
376:Name_Not_Found
12/03/25 15:02:04.00
>>375
もう来ねえよ
377:Name_Not_Found
12/03/25 19:21:13.97
ふんとに ?
378:Name_Not_Found
12/03/25 21:48:05.90
もう来ねえって言ってんだろ
379:Name_Not_Found
12/03/25 22:15:22.96
もう来ねえと言って又来る法則
380:Name_Not_Found
12/03/25 23:13:02.01
知ってるけど教えないんだよ。
擬似要素 afterでぐぐればすぐでてくるのに･･
最近のやつって検索能力すら持ち合わせてないのか
381:Name_Not_Found
12/03/25 23:14:35.98
持ってたらこねーよ
382:Name_Not_Found
12/03/26 05:28:13.47
>>380
教える能力もないくせに偉そうなことをw
383:Name_Not_Found
12/03/26 06:14:55.42
>>382
いい加減寝ろよバカ
384:Name_Not_Found
12/03/26 14:49:38.26
ふんとに ?
385:Name_Not_Found
12/03/26 15:04:05.24
>>382
人から教わらないと学ばないダメ人間か
386:Name_Not_Found
12/03/26 16:59:33.56
おいおい今はafterについてじゃなくて>>369だろ？
自動で文章の最後にだったらbackground-positionじゃ無理
通常ならafterでOKだろけど
バックグラウンドで表示したい理由でもあるんじゃない？
例えば最後ちょっと重ねたいとか。。。
387:Name_Not_Found
12/03/26 17:04:10.06
ブログの文章の最後に絵文字入れられるってのを再現したいだけなのかな
388:Name_Not_Found
12/03/27 19:24:37.49
隣接セレクタ E > F はEの直下であるFについて指定してますけど
『Fであるような要素』を子に持つEを指定したいときはどうすればいいんですか
<div class="E">
<div type="F"></div>
</div>
<div class="E">
<div type="G"></div>
</div>
こんなかんじの
389:Name_Not_Found
12/03/27 19:46:02.46
たぶんないと思う。
子要素を基準に親要素をどうこうしなければいけない時点で文書構造を見直した方がいいのでは。
390:Name_Not_Found
12/03/27 19:58:04.05
ユーザースタイルでいじりたいから文書構造はいじれないんです
大人しくPHP突っ込んでくるか……
391:Name_Not_Found
12/03/27 20:06:01.45
>>388
CSS3までは不可能です。
CSS4で案は出ています。
ユーザJSを使ってみては？
392:Name_Not_Found
12/03/27 20:24:27.81
>>391
ありがとうございます
CSS4を頼りにググッたらでてきました
URLﾘﾝｸ(demo.idered.pl)
393:Name_Not_Found
12/03/27 20:43:16.28
こんなのあるのか、興味深い。CSS3セレクタもまだ覚えきれてないけど。
394:Name_Not_Found
12/03/28 15:42:57.81
これセレクタの語尾に!つけたら否定して次のセレクタを探しに行くってやつなのかな？
395:Name_Not_Found
12/03/28 17:03:10.80
$Element とか ?Element って Element! に修正されたのか
URLﾘﾝｸ(dev.w3.org)
396:Name_Not_Found
12/03/28 18:11:47.98
ん？[class$=Element]のことでなくて？
397:Name_Not_Found
12/03/28 18:13:08.84
あ、ごめん。完全に別物なのね
398:Name_Not_Found
12/03/29 18:04:15.25
PIEで背景画像を2種類配置したいんですけど
どうにもIEに反映されてくれません
CSSに
body{
background-image:url(A), url(B);
background-repeat:repeat-x, repeat;
background-attachment:fixed;
-pie-background:
url("A") repeat-x top left,
url("B") repeat;
behavior: url("/PIE.htc");
}
こんな感じで記述してるんですが間違いですか？
まったくわからなくて頭がスポンジになりそうです…
399:Name_Not_Found
12/03/29 19:17:19.85
PIE.jsは、複数背景は対応してない。以上。
400:Name_Not_Found
12/03/29 19:27:26.71
url("A") repeat
url("B") repeat
url("C") repeat
かわいい
401:398
12/03/29 19:56:57.63
>>399
そうなんですか？
調べて見るとCSS3の話題で各所に出てくるのですが
それとはまた違うのでしょうか？
402:Name_Not_Found
12/03/29 20:05:45.99
>>401
対応してるのが限られてる。ドキュメント読んでみそ
403:398
12/03/29 20:20:03.63
>>402
すみません…
ちょっとドキュメントがよくわからないんですが
URLﾘﾝｸ(www.nandani.sakura.ne.jp)
こういった記事が間違っているということでしょうか…
初心者で申し訳ないです…
404:Name_Not_Found
12/03/30 08:10:31.19
全角スペース混じってるからでないの
405:Name_Not_Found
12/03/30 08:35:43.63
それとドキュメントと言われたら原則として公式
406:398
12/03/30 17:25:03.25
全角スペースを半角にして念のためPIE.jsでも試してみましたが
効果がありませんでした…
ドキュメント＝公式なのですね
ありがとうございます
407:398
12/03/30 17:28:04.33
あ、それとposition:relative;も追加してみましたがやはり変化なしでした
パスは間違っていないと思うのですが…
何かと相殺？していたりするのでしょうか
408:398
12/03/30 18:17:41.85
連投すみません
結局PIEを使わずに背景を複数配置できる方法を見つけたので
そちらを使うことにしました…
早くIEがCSS3に対応してくれることを願います…
ありがとうございました
409:Name_Not_Found
12/03/30 18:20:44.37
それ以前に使う側の問題がな・・・
410:Name_Not_Found
12/03/30 18:26:58.78
ただ単純に画像の階層間違えてるだけじゃないの？
411:Name_Not_Found
12/03/30 18:56:42.32
公式見たけど、PIEで複数背景対してるぞ。
412:Name_Not_Found
12/03/31 15:54:44.93
tableのtd,thのborder部分に画像を使いたいのですが、そういうことは可能でしょうか？
413:Name_Not_Found
12/03/31 16:19:57.41
tableに拘らなければいくらでも可能。
414:Name_Not_Found
12/04/02 07:46:14.92
borderに画像とか鬱陶しいだけなんで
415:Name_Not_Found
12/04/05 06:52:26.37
おまいらがいつも参考にしてるサイトってある？
とりあえずかちびととコリスはいつみてもいい情報があって重宝してる
416:Name_Not_Found
12/04/05 06:59:30.50
じゅ・・・重宝
417:Name_Not_Found
12/04/05 07:19:32.95
えっ ネタだよな
418:Name_Not_Found
12/04/05 09:02:57.72
>>415
宣伝乙
419:Name_Not_Found
12/04/05 09:19:59.38
宣伝乙もなにも。
WEBクリエイターボックス並に有名なサイトなのに何言ってるの
420:Name_Not_Found
12/04/05 09:22:25.18
>>419
自演乙
421:Name_Not_Found
12/04/05 09:27:38.13
まぁいつもの流れ出し構おう。大御所がこんなとこ見るわけないから
422:Name_Not_Found
12/04/05 10:27:13.27
>>421
信者乙
でも見てると思うｗ
423:Name_Not_Found
12/04/05 10:30:30.81
そういう人って大抵海外のクリエイターのブログかなんかみて情報収集してるくらいで初心者が情報求める場にはさすがに来ないんじゃないの。
教えるくらいなら書籍出してるからそれ見ろって言うだろうし。西畑とか。
424:Name_Not_Found
12/04/05 10:31:24.04
そもそも名前も聞いたことないんだが
大御所とか有名とか行ってんのマジ本人か信者じゃねーの
425:Name_Not_Found
12/04/05 10:32:09.01
とりあえず全員スレチ
426:Name_Not_Found
12/04/05 10:34:57.30
>>419>>421>>423
必死すぎﾜﾛﾀ
427:Name_Not_Found
12/04/05 10:38:44.94
>>424
さすがにWEBクリエイターボックスとコリスくらいは知ってるだろ？
日本でHTMLとCSSやってたら普通は目に付くサイトだとは思うが。
428:Name_Not_Found
12/04/05 10:41:19.50
>>427
いいから巣にお帰り
429:Name_Not_Found
12/04/05 10:41:36.65
どこだよ巣って
430:Name_Not_Found
12/04/05 10:45:08.05
おすすめ書籍教えて→◯◯が参考になっていいよ→宣伝乙
おすすめの参考サイトおしえて→◯◯のリファレンスサイトいくと勉強なるよ→TAG index と とほほ 以外は宣伝乙
おまえらの参考にしてるサイトどこ？→同上→宣伝乙
ワンパターンすぎだろ。何年このパターン続けるつもりだ
431:Name_Not_Found
12/04/05 15:49:00.90
わかったわかった
432:Name_Not_Found
12/04/05 16:28:51.89
┐(´д`)┌
433:Name_Not_Found
12/04/05 17:08:50.98
E1~*:not(E2:nth-of-type(n)) とかって、書けない？
E1以降の要素全部だけど、n番目のE2だけは除外、みたいな。
読んでるけどよく分かんない。
URLﾘﾝｸ(www.w3.org)
434:Name_Not_Found
12/04/05 17:10:07.66
オレも知らない
サイトは勿論見てるかもしれないけど、サイトの名称も管理人も知らんし
435:Name_Not_Found
12/04/05 17:11:52.35
いつかはCSS3もCSS5とかになってJavascriptと並走できるくらいまでになっちゃうんだろうか
436:Name_Not_Found
12/04/05 18:16:58.05
ならないでしょ。役割が違う
437:Name_Not_Found
12/04/05 20:13:53.01
>>433
URLﾘﾝｸ(myakura.github.com)
438:Name_Not_Found
12/04/05 20:15:51.53
お、できるっぽいじゃん。
でもCSS4本格対応いつからしてくれるんだろうか。（FF、Chrome）
439:Name_Not_Found
12/04/05 20:18:24.41
つーか対応以前
440:Name_Not_Found
12/04/07 14:39:30.75
zenbackの幅を狭くしたいんだけどうまくいきません
CSSに、
.zenback { width:400px; }
と書いても変わらないんですが
どうしたらいいんでしょう。
Fc2ブログなんですが
441:Name_Not_Found
12/04/07 14:44:13.22
!importantをつけてみなされ
442:Name_Not_Found
12/04/07 19:27:23.09
.zenback { width:400px !important;
}
としてみましたが変わりませんでした。
Fc2ブログだとダメなんですかね…
443:Name_Not_Found
12/04/07 22:31:46.66
それはブログ板のが詳しい
444:Name_Not_Found
12/04/11 01:16:57.79
CSS Variables Module Level 1 Draft Published
とうとうｷﾀｺﾚ
445:Name_Not_Found
12/04/11 01:23:28.00
お？URLｋｗｓｋ
446:Name_Not_Found
12/04/11 01:24:49.41
URLﾘﾝｸ(www.w3.org)
ほれ
447:Name_Not_Found
12/04/11 22:56:56.96
ページ番号使えるようになったん？
448:Name_Not_Found
12/04/12 06:36:18.85
あるcssファイルで
input, textarea, select { width: 210px }
と指定されてあります（このファイルには手を加えられないとします）。
この指定を、別のcssファイルで無効にして、あたかもwidthが指定されてないようにすることはできますか。
input, textarea, select { width: undefined }
とやってみましたがだめなようです。
449:Name_Not_Found
12/04/12 08:17:52.63
>>448
無効には出来ません。上書き出来るだけです。
各要素の初期値で上書きすればデフォルトスタイルシートに戻すことは可能です。
450:Name_Not_Found
12/04/12 08:20:34.61
>>448
widthの初期値はundefinedじゃなくてauto
451:Name_Not_Found
12/04/12 10:46:22.64
!important指定されてたら無理じゃね？
!importantって2重に指定したら後ろのだけ有効になるんだっけ
452:Name_Not_Found
12/04/12 11:00:07.07
サイトのCSSとユーザーCSSの両方でｲﾝﾎﾟ指定すると
ユーザーCSSのほうが優先されるよ
453:Name_Not_Found
12/04/12 12:51:42.87
おまえらのデザインしたサイトとかあったらSSみせてくれ。
ぜひとも参考にしたい
454:Name_Not_Found
12/04/12 14:01:41.08
人にそんな要求するなら、まずは自分が晒すことだJK
455:453
12/04/12 14:19:58.93
>>454
URLﾘﾝｸ(i.imgur.com)
ごめんね。HTML8年くらいやっててこんなデザインしかできないんだ。死にたい。
海外とかのサイトでデザインとか何十種類も見てるはずなのにね。何やってんだろ
456:453
12/04/12 14:24:48.48
一応こっちも晒す
URLﾘﾝｸ(dl.dropbox.com)
地味にMENUのとこにCSS3使ってるだけ。あとは特になし
457:Name_Not_Found
12/04/12 14:29:33.68
リセットCSSのファイル名がbase.cssってのが個人的に気に入らん
458:453
12/04/12 14:32:20.98
base.css→default.cssて名前にしてたのになーって思ったらローカルの話だった。
直しとこう
459:Name_Not_Found
12/04/12 14:37:42.45
>>457
そこはどうでもいいだろｗ
460:Name_Not_Found
12/04/12 14:42:06.46
さて、454のも見てみたいんだけども
461:Name_Not_Found
12/04/12 15:46:45.47
>>451
それ最近まで逆だと思っててはまった
462:Name_Not_Found
12/04/13 18:27:11.29
max-widthで質問です
ウィンドウの幅が狭まったとき
画像を自動的に縮小させたいので
img { max-width: 100%; }
とやってます
問題なく動作してますが
画像を表の中に置いたときは
なぜか縮小されません
(表だけならウィンドウの幅にあわせて
縮小されてます)
何か根本的に勘違いしてますか？
463:Name_Not_Found
12/04/13 18:34:31.62
パーセンテージは親要素からの計算だからねえ
テーブルは中に画像があると最低限画像幅は確保したセルを形成するから
そこから100%じゃ当然縮小されない
464:Name_Not_Found
12/04/13 20:17:28.58
>>463
なるほど確かにそうですね
そうするとtableだけでなく
tdの幅もmax-widthで調整すれば
いいのかと思いきや
ここをどういじっても
中のimgの幅のほうが優先されました
td img { max-width: ボディに対して 100%; }
なんてできればいいんですが・・・
cssは任意の要素に対しての値って
得られないみたいですね
困りました
465:Name_Not_Found
12/04/13 21:18:02.01
あ、すいません
いいアイディア浮かんだので
とりあえず解決にしておきます
thxでした
466:Name_Not_Found
12/04/13 21:20:29.86
そのアイディアはここに書かないのか
467:Name_Not_Found
12/04/14 13:14:58.87
>>466
アイデア乞食？
468:Name_Not_Found
12/04/15 12:04:45.70 KYeQyQmV
←───コンテンツの幅───→
←─ボックスの幅─→
←──ウィンドウ幅──→
ボックスにoverflow-x: scroll してコンテンツがボックスから
はみ出さないようにしても本来のコンテンツ幅がウィンドウ幅より
大きかったらウィンドウにスクロールバーが出るんだが
そういうもん？
469:Name_Not_Found
12/04/15 12:11:14.85
overflow: auto; にすれば
470:Name_Not_Found
12/04/15 14:44:29.91 KYeQyQmV
overflow: auto; にすればスクロールバーが出ないってこと？
471:Name_Not_Found
12/04/15 15:07:13.89
scroll だからスクロールバーが出るのは当たり前
オーバーフローしても何もしたくないなら、hidden
472:Name_Not_Found
12/04/15 15:09:54.03
ごめん勘違い
関係ないけど、overflowにxとかyとかの指定はIEオンリーだから使わないほうが良いのでは？
473:Name_Not_Found
12/04/15 15:13:07.49
CSS3からはoverflowに対してxとyの指定はできるようになったよ と一応
474:Name_Not_Found
12/04/15 15:19:36.61
あそうなの？重ね重ねスマン。
475:Name_Not_Found
12/04/15 20:24:52.40
>>468
>>362
476:Name_Not_Found
12/04/19 07:27:41.33
5分でわかるCSSグラフィック
URLﾘﾝｸ(www.atmarkit.co.jp)
477:Name_Not_Found
12/04/19 20:38:35.92 c8/4+T0O
画面幅に合わせて単語単位で改行させたいのですがどのようにすればいいでしょうか
以下の状態で、word4の途中で画面幅の場合
word1 word2 word3 word4 word5
⬇
word1 word2 word3
word4 word5
478:Name_Not_Found
12/04/19 21:53:47.35
CSS関係なくそれだったらそうなると思うが
日本語の話？
479:Name_Not_Found
12/04/20 02:08:16.69
>>477
画面のサイズ指定してる？
480:初心者です
12/04/20 12:47:56.12 cmpLk9pA
jugemの無料サービスを使ってブログに初挑戦中です。
公式テンプレートをカスタマイズしたいです。
管理者ページに表示されるHTMLとCSSのプログラムをプリントアウトして
（↑こうしておけば自分で散々いじって訳わからなくなったあともそれを見て直していけば
とりあえず初期状態に直せるかなと…）
それを見て font color とか image とかの指示からなんとなく推測して色を変えたり
サイズ変更したりして プレビューで確認しながらやってます。
それでもわからないことだらけなのでCSSを勉強しようと近所の本屋に行ってみたんですが
そういう内容の本はありませんでした。
こちらはCSS初心者のスレッドということですが、このレベルの初心者の相談に乗っていただけるでしょうか？
もしスレッド違いであればその旨ご指摘ください。
481:Name_Not_Found
12/04/20 12:51:13.44
>>480
ここでもいいとは思うが
Webサイト制作初心者用質問スレ part229
ｽﾚﾘﾝｸ(hp板)
↑の>>2の参考サイトで基礎を勉強するのが一番いいよ
本は正直嘘というか間違いが多いというか
あとプリントアウトなんかしなくてもソース保存しとけばいいだけなんで
そういうPCの基礎的なところは・・・板自体違う気がするがどこだかわからん、すまんね
482:初心者です
12/04/20 14:15:23.87 cmpLk9pA
早速の回答ありがとうございます。
教えていただいた板の方覗いてみますね♪
このさいなんで基礎からいろいろ勉強してみようと思います。
483:Name_Not_Found
12/04/20 19:36:09.84
URLﾘﾝｸ(kruz-graphix.com)
CSSでアコーディオンメニューを作りたいのですが、クリックして開閉できるようにしたいと思っています。
このソースのどこをどう直せば良いのか教えて下さい。
484:Name_Not_Found
12/04/20 20:02:02.28
依頼するスレとかに行けば？
485:Name_Not_Found
12/04/20 20:07:20.84
マジレスすると現状のCSSでクリック判定出すのは :target しかない
それ以外はjavascript使う。
てことで誘導
+ JavaScript の質問用スレッド vol.99 +
ｽﾚﾘﾝｸ(hp板)
486:Name_Not_Found
12/04/20 21:50:07.30
>>484-485
ありがとうございます
行ってきます