CSS(スタイルー大柴シート)質問スレ51日目

1Name_Not_Found2006/01/13(金) 00:43:59ID:0j/prymY
CSSに関する質問はこちらへどうぞ。 ※ ブログ厨大量発生月間 ※

■■■■■ 質問のしかた ■■■■■

●基礎は解説サイト(→【解説など】>>3-4)で勉強してください。
●質問の前に【FAQ】(>>5-9)を参照して、既出の再掲を避けて下さい。
●【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
 WinIEの場合は、[Ctrl+F]で検索できます。
●ブラウザによって対応していないプロパティーやバグがありますので、
 解説サイト(→【関連リンク】)の対応表や「CSSバグリスト」に目を通しておきませう。
●土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
 正当(valid)なHTMLを心がけて下さい。validator(>>2)でチェックできます。

初心者の疑問は大抵ここまでで解決します。

●OSやブラウザの種類とヴァージョンについては必ず明記してください。
 特にNetscapeは、ver.4までと6以降でまったく別物です。
●「環境を書け」とか「ソースは?」と求められたら応じませう。
 その方が回答が早く得られます。質問は具体的に。

【まとめサイト】 http://web2ch.s31.xrea.com/?CSS
【FAQ】 http://web2ch.s31.xrea.com/?CSSFAQ
【過去ログ】 http://web2ch.s31.xrea.com/?CSSLog
【関連リンク】 http://web2ch.s31.xrea.com/?CSSRelated
【前スレッド】 http://pc8.2ch.net/test/read.cgi/hp/1134048018/

関聯リンクは>>2-15 あたり
【関連スレ】【仕様書】【CSS検証】>>2
【解説など】>>3-4
【FAQ】>>5-9

472Name_Not_Found2012/08/27(月) 22:59:43.37ID:???
下のようにして、ロゴの下に、ナビを5つ並べたいのですが、
widthでサイズ指定してるのに関わらず、logoの画像が少し右に飛び出してしまい、
また、naviの画像が4つまでしか横並びにならず、最後の一つが二列目にまわってしまいます・・・
どこがいけないのか教えていただけないでしょうか。お願いします。
html
<div id="header">
<div class="logo">
<a href="index.html"><img src="img/logo.jpg" width="800" height="67"></a>
<!-- end .logo --></div>
<div class="navi">
<ul>
<li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li>
<li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li>
<li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li>
<li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li>
<li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li>
</ul>
<!--navi end--></div>
<!-- end .header --></div>

473Name_Not_Found2012/08/27(月) 23:00:41.72ID:???

css
#page #wrapper #header {
width: 800px;
float: left;
height: 100%;
}
#page #wrapper #header .navi {
width: 800px;
float: left;
height: 100%;
}
#page #wrapper #header .navi ul li {
float: left;
width: 160px;
height: 100%;
}

4744722012/08/27(月) 23:53:43.69ID:???
すみません解決しました。

475Name_Not_Found2012/09/15(土) 21:14:43.49ID:???
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね 
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね

476Name_Not_Found2012/09/18(火) 16:14:16.38ID:???
keyframes を途中で停めた状態から transition に移行することは可能でしょうか?
具体的には

#content {
animation: move 10s linear 5;
transition: transform 5s linear;
}


@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}

#content.move {
transform: translateX(300px);
}

#content は keyframes move で 100px へ移動中
javascript で任意のタイミングで animation プロパティを削除、move クラスセレクタを #content に設定

希望する動きはそれまでの keyframes で移動した位置から transition の目標値まで移動してくれることなんですが、
animation プロパティを削除すると #contents は to または from の位置に飛んでしまいます。
任意のタイミングで keyframes の移動位置を取得する方法はありませんでしょうか?

477Name_Not_Found2012/10/17(水) 21:57:00.46ID:YdN4x0Qd
印刷時に重要な部分以外の諸々のパーツを全て非表示にするために、header内にmedia="print"として
印刷用のCSS(print.css)を用意しました。しかし、これを使って印刷すると、IEでもchromeでも全く同じように謎の余白ができてしまいます。

試しに通常のスタイルシート(usual.css)の代わりにprint.cssを印刷時以外にも適用するようにしてみたところ
この謎の余白は出てきませんでした。印刷して出てきません。

全く同じスタイルシートが適用されているはずなのに、media="print"を介して適用された時だけ謎の余白ができます。
ずいぶんはまってしまっているので、この原因がわかる方がいればご教授お願いします。m(_ _)m

478Name_Not_Found2012/10/23(火) 15:08:17.43ID:813/Owme
macのsafariで見た画面を見れるようなサイトってありますか?
input[type=search]要素のレンダリングがmac/safariでは独特ということで
CSSのレイアウトも無視されるとききました。
mac/safari独自のレンダリングを回避して自前のCSSを適用する方法は公開されていますが
その方法で対処の上、ちゃんと思う画面になっているか確認したいところです。
iPhoneのsafariでは効いてるようだったんですが、不安なので。

479Name_Not_Found2013/01/25(金) 01:35:46.10ID:???
<div id="renban1">〜〜〜</div>
<div id="renban2">〜〜〜</div>
<div id="renban3">〜〜〜</div>


みたいなHTMLソースにて、CSSでこの連番IDのフォントサイズを小さくしたいんですが

div#renban%d {
 font-size: 12px;
}

↑これは通用しませんが、イメージとしてこんなことがしたいです。
div全体のフォントサイズを変えると、変えたくないとこまで変わっちゃいます。
こんな風に連番のついたIDの、連番を無視して全てに適用させるやり方ってないですか?

もしくは、これら連番のついたIDを一括で"renban"にしちゃうことって可能ですか?
このidは自動生成されてて数が多いので1つ1つ変えるのは面倒です。
id="renban"ってなってくれるなら一応解決はするので。。

480Name_Not_Found2013/01/25(金) 06:33:19.21ID:???
>>479
共通のclass指定すればいいと思う

481Name_Not_Found2013/02/08(金) 17:09:24.98ID:???
左に設置したメニューバーを画面のスクロールに合わせてついてくるように設定をしようと思い、
position:fixedを試してみたのですが、メニューバーの上にヘッダーがあるため、
ヘッダーの高さの分だけ空白のまま、画面についていく感じになってしまいます。
メニューバーのてっぺんが画面一番上に来た以降、それに合わせてスクロールされるという風にしたいのですが、
どうすればよいのでしょうか?
よろしくお願いします。

482Name_Not_Found2013/03/22(金) 21:57:33.47ID:???
iOS上でcss3のアニメーション処理をする際、
width/height値をGPUアクセラレータで動かす方法って無いですか?
scaleだと座標情報保持しちゃって複数要素の同時変化に事足りないので、
何か手段があれば嬉しいのですけど

483Name_Not_Found2013/03/24(日) 04:20:50.96ID:???
ライブドアブログを始めてんですが、CSSのどの部分を弄れば行間を変えれますか?

484Name_Not_Found2013/04/04(木) 06:26:00.13ID:???
web制作初心者です。質問させてください。

wordpressでサイト作っていてまだCSSをちゃんと習得できてないので、
値とか少し変えた後すぐにブラウザで読み込んでいちいち確認しています。

大量に書いた後に確認してデザインが想定していたものでなかった場合、
どこが間違いか確認するのが凄い時間がかかってしまうからです。

このやりかたは非効率ですかね? 間違ってますか?

485Name_Not_Found2013/08/23(金) NY:AN:NY.ANID:???
中央にtableタブで表を(幅は可変)。その右にYahoo!の週間天気予報widget( http://n-de.jp/bp_wn.html )を配置。

こんなレイアウトをブラウザの横幅を変えても維持されるようにスタイルシートで作成したいと思っています。
どういう方法を使うのが一般的でしょうか?

tableタブの幅が可変だとややこしいようであれば固定幅にすることも可能です。

486Name_Not_Found2013/09/05(木) 23:42:08.75ID:???
タブだな

487Name_Not_Found2013/09/07(土) 10:46:27.01ID:???
<div class="btn-group">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Action<span class="caret"></span>
</a><ul class="dropdown-menu">
<li><a href="#">アクション</a></li>
<li><a href="#">別アクション</a></li>
</ul></div>

html + bootstrapの勉強してるんだけど、何でボタンクリックしてもリスト出てこないんですか?
chromeのF12機能を使って、コピペしたんですが...
すいませんがスレチだったら、誘導しください

488栗金時2015/04/03(金) 19:22:06.56ID:Zbucnp9B
はじめまして!
HTML、CSSを始めたばかりの者ですが、CSSでどうしても解決法が解らず
相談できる友人も居ないのでこちらに来たのですが、ここで質問をすれば良いのでしょうか?

489栗金時2015/04/03(金) 19:24:38.32ID:Zbucnp9B
いきなりミスった!
最後の更新が2013年じゃねーかw

490Name_Not_Found2016/01/21(木) 06:27:27.86ID:???
marginは0にしてpaddingでスペース調整するのが主流?

491Name_Not_Found2016/03/19(土) 13:45:07.37ID:???
<section><ul><li><span>あ</span><input><span>い</span></li>
    <li><span>う</span><input><span>え</span></li></ul></section>

↑この構造で、

li:befer{
content:"before";
}
li:after{
content:"after";
}
li span{
display:block;
float:left;
}
li input{
display:block;
float:left;
}
ってやると

あ input い before after
う input え before after

と表示されます。beforeが先頭に来るのが正しいと思うのですが。

492Name_Not_Found2016/04/06(水) 15:53:39.53ID:TifERKqy
マージンやボーダーのサイズをセットするとき
pxやemがエブリー必要だけど
単位をオミッションしたときはpxとテイクようなデファインを
どこかでセッティングするテクニックはイグジストしますか?

493Name_Not_Found2016/04/07(木) 11:21:28.66ID:WbB/AW14
float ってどういう意味ですか?
なぜ「浮かせる」という表現を使っているのですか?

494Name_Not_Found2016/04/09(土) 04:31:08.18ID:???
下になるべきコンテンツを
上に浮かせるからだろ

数年前までは、floatさえマスターすればどんなサイトでも自由に作れた。

495Name_Not_Found2016/06/24(金) 04:40:47.23ID:yTR6dTfN
E:nth-child
E:nth-last-child
E:nth-of-type
E:first-child
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type

これらの疑似クラスの説明をみても違いがいまいちわかりません
誰かサザエさんで例えてもらえませんか?

496Name_Not_Found2016/06/24(金) 20:47:29.29ID:???
nth-child は、3なら、
1,4,7,10
2,5,8,11
3,6,9,12

つまり、数字で割った余り。
4なら、4で割った余り

497Name_Not_Found2016/07/17(日) 15:01:37.62ID:???
input type=radio なとき、labelで囲ったテキスト部分も
disabledなときに灰色にしたいんだけど
このテキスト文字列ってどうやってセレクトしたらいいんですかね

498Name_Not_Found2016/07/30(土) 11:52:23.94ID:???
CSS3で、多次元のオブジェクトや配列のセレクタ指定はどうやるのでしょうか?例えば

$('.hoge').attr({'aaa':100, 'bbb':{ b0:0, b1:1, b2:2}, 'ccc':[3, 4, 5] });

で、[aaa="100"]は指定できますが、b1や'4'の部分のみをセレクタ指定したいのです。
[ccc="3,4,5"]では、値が2,4,5"や"3,5,5"など動的に変わるので外れてしまいます。

'ccc': ['c3', 'c4', 'c5']とし、[ccc*="c4"]としてもいいのですが
もう少しシンプルにできる方法はないでしょうか。

499Name_Not_Found2016/08/14(日) 22:55:22.87ID:???
ないです
おわり

500Name_Not_Found2016/08/18(木) 12:54:56.60ID:???
クラスの定義を動的に変更することは出来ますか?

501Name_Not_Found2016/08/18(木) 13:36:04.53ID:???
JSスレ行けば

502Name_Not_Found2016/08/18(木) 14:07:14.38ID:???
>>501
YesかNoかを聞いているんだよ
わかんねーなら書くなボケ

503Name_Not_Found2016/08/18(木) 14:58:15.18ID:???
>>500
個々の class 属性の値であれば js で動的に変更できるが
全般的な class 属性の定義(ふるまい)は変更できないであろう

5045022016/08/18(木) 15:01:35.01ID:???
>>503
ありがとうございます
出来ないのですね・・・ 別のアプローチを検討してみます

505Name_Not_Found2016/08/20(土) 18:36:43.53ID:???
>>502
スレ違いが書くなボケ

506Name_Not_Found2016/08/20(土) 23:49:54.72ID:???
スレ違いかどうかはわからんだろ
実際できなさそうな質問してできる回答があったこともあった

507Name_Not_Found2016/08/21(日) 22:42:35.54ID:???
スレ違い+教える君≠無回答

508Name_Not_Found2016/08/22(月) 14:51:45.15ID:???
薄っぺらな人生を歩んで来た奴ならではの浅はかな思い込みだな

509Name_Not_Found2016/09/17(土) 07:55:42.43ID:FCCwsDLv
ここのスレタイって10年前は面白かったの?

510Name_Not_Found2016/12/12(月) 17:36:28.07ID:???
CSSで、同じスタイルを上書きするとき
どれがどういう順に強いのか ミーにティーチして

たとえば
td { background-color: white }
.hoge { background-color: red }
td.piyo { background-color: yellow }

とあって、td に hoge と piyo のクラスを両方割り当てたとき
なぜ hoge が負けるのか、 仕様なのか、環境依存なのか
アンダスタンできない

511Name_Not_Found2016/12/12(月) 19:44:43.18ID:???
>>510
セレクタ 「詳細度」
でググるといいと思う

環境依存ではない

512Name_Not_Found2016/12/13(火) 16:40:13.29ID:???
>>511
ありがとう
firefoxとIEとで色の付き方に差異があったので
環境依存かと思ってた
ちょっとググってみる

513Name_Not_Found2017/01/19(木) 15:11:27.71ID:oqTRZJiS
CSSが書き込めない この書き方でいいの?

 HTML側

<html>
<head>
<link rel="stylesheet"type="text/css"href="example.css">

</head>
<body>


<h1>どうも</h1>
</body>
</html>


  CSS側

 @charset "Shift_JIS";

h1 { color: red; }
 
  h1のどうもが赤くなりません。

514Name_Not_Found2017/01/19(木) 18:05:13.25ID:???
"stylesheet" と type="text/css” と href="example.css" の間にスペースがない

@charset は本物の @規則ではないので使わない方が良い
何も考えず HTML も CSS ファイルも文字コードは utf-8 に統一するのがベスト

5155132017/01/19(木) 22:52:16.19ID:oqTRZJiS
スペース開けても何回やっても書けない

516Name_Not_Found2017/01/20(金) 03:02:26.39ID:???
「html サンプル」で検索!

知らないけど、こういうサイトを使えば?

HTMLサンプル集 - HTMLチュートリアル
http://www.html-cool.com/samples/

文字コードは、utf-8 だけを使う。
ファイルの保存も、utf-8でする

文字列の部分以外では、全角・日本語を使ってはいけない

5175132017/01/20(金) 20:22:20.16ID:D1yRtxsz
>>516
書けました!!
丁寧に教えてくれてありがとう!!

518Name_Not_Found2017/01/21(土) 14:54:02.97ID:9LskEQvx
下のサイトをコピペしたのですが、この部分: url(XXXX.jpg) no-repeat; の書き方が
わかりません。 それで名前を付けて画像を保存とするとchome(1)として表示されますが
これでいいのでしょうか?
その箇所だけ、直してもらえますか?
このURLのhttp://yachin29.hatenablog.com/entry/2015/05/07/004722

http://www.kalexiko.com/背景動画としたいU動画です。

519Name_Not_Found2017/01/21(土) 20:52:40.79ID:???
「css url 相対パス」で検索すれば?

520Name_Not_Found2017/12/12(火) 07:28:50.49ID:MrUcGD8N
HPなどで友達が稼げるようになった情報とか

⇒ http://asaswq3wq.sblo.jp/article/181819223.html

興味がある人だけ見てください。

MLADYPMHXU

521Name_Not_Found2018/02/01(木) 00:14:41.22ID:???
LESS の質問をここでしてもよいでしょうか。

VisualStudio 2015 C# MVC でソフトを書いています。
この中で画面上の部品のクラス定義を整理したくて LESS を NuGet で dotless を追加して使用できるようにしました。
それはうまく出来たのでよいのですが。

調べると LESS にはクラス定義に引数を使用できるとあります。
たとえば以下のように使用できると捉えました。

.hoge(@width: 1px) {
border: @width;
}

ただ上のようにすると画面を開いたときに画面上部に CSS へのコンパイルを失敗したらしい意味の不明な文字列を表示します。
VS あるいは dotless では書き方に違いがあるのでしょうか。それとも自分が何かを間違えているのでしょうか。

522Name_Not_Found2018/05/01(火) 18:48:00.88ID:l1wYHpV1
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』

VD83B

新着レスの表示
レスを投稿する