CSS(スタイルー大柴シート)質問スレ51日目
■ このスレッドは過去ログ倉庫に格納されています
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
下のようにして、ロゴの下に、ナビを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>
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%;
} 創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
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 の移動位置を取得する方法はありませんでしょうか?
印刷時に重要な部分以外の諸々のパーツを全て非表示にするために、header内にmedia="print"として
印刷用のCSS(print.css)を用意しました。しかし、これを使って印刷すると、IEでもchromeでも全く同じように謎の余白ができてしまいます。
試しに通常のスタイルシート(usual.css)の代わりにprint.cssを印刷時以外にも適用するようにしてみたところ
この謎の余白は出てきませんでした。印刷して出てきません。
全く同じスタイルシートが適用されているはずなのに、media="print"を介して適用された時だけ謎の余白ができます。
ずいぶんはまってしまっているので、この原因がわかる方がいればご教授お願いします。m(_ _)m
macのsafariで見た画面を見れるようなサイトってありますか?
input[type=search]要素のレンダリングがmac/safariでは独特ということで
CSSのレイアウトも無視されるとききました。
mac/safari独自のレンダリングを回避して自前のCSSを適用する方法は公開されていますが
その方法で対処の上、ちゃんと思う画面になっているか確認したいところです。
iPhoneのsafariでは効いてるようだったんですが、不安なので。 <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"ってなってくれるなら一応解決はするので。。 左に設置したメニューバーを画面のスクロールに合わせてついてくるように設定をしようと思い、
position:fixedを試してみたのですが、メニューバーの上にヘッダーがあるため、
ヘッダーの高さの分だけ空白のまま、画面についていく感じになってしまいます。
メニューバーのてっぺんが画面一番上に来た以降、それに合わせてスクロールされるという風にしたいのですが、
どうすればよいのでしょうか?
よろしくお願いします。 iOS上でcss3のアニメーション処理をする際、
width/height値をGPUアクセラレータで動かす方法って無いですか?
scaleだと座標情報保持しちゃって複数要素の同時変化に事足りないので、
何か手段があれば嬉しいのですけど ライブドアブログを始めてんですが、CSSのどの部分を弄れば行間を変えれますか? web制作初心者です。質問させてください。
wordpressでサイト作っていてまだCSSをちゃんと習得できてないので、
値とか少し変えた後すぐにブラウザで読み込んでいちいち確認しています。
大量に書いた後に確認してデザインが想定していたものでなかった場合、
どこが間違いか確認するのが凄い時間がかかってしまうからです。
このやりかたは非効率ですかね? 間違ってますか? 中央にtableタブで表を(幅は可変)。その右にYahoo!の週間天気予報widget( http://n-de.jp/bp_wn.html )を配置。
こんなレイアウトをブラウザの横幅を変えても維持されるようにスタイルシートで作成したいと思っています。
どういう方法を使うのが一般的でしょうか?
tableタブの幅が可変だとややこしいようであれば固定幅にすることも可能です。 <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機能を使って、コピペしたんですが...
すいませんがスレチだったら、誘導しください はじめまして!
HTML、CSSを始めたばかりの者ですが、CSSでどうしても解決法が解らず
相談できる友人も居ないのでこちらに来たのですが、ここで質問をすれば良いのでしょうか? いきなりミスった!
最後の更新が2013年じゃねーかw marginは0にしてpaddingでスペース調整するのが主流? <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が先頭に来るのが正しいと思うのですが。 マージンやボーダーのサイズをセットするとき
pxやemがエブリー必要だけど
単位をオミッションしたときはpxとテイクようなデファインを
どこかでセッティングするテクニックはイグジストしますか? float ってどういう意味ですか?
なぜ「浮かせる」という表現を使っているのですか? 下になるべきコンテンツを
上に浮かせるからだろ
数年前までは、floatさえマスターすればどんなサイトでも自由に作れた。 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
これらの疑似クラスの説明をみても違いがいまいちわかりません
誰かサザエさんで例えてもらえませんか? nth-child は、3なら、
1,4,7,10
2,5,8,11
3,6,9,12
つまり、数字で割った余り。
4なら、4で割った余り input type=radio なとき、labelで囲ったテキスト部分も
disabledなときに灰色にしたいんだけど
このテキスト文字列ってどうやってセレクトしたらいいんですかね 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"]としてもいいのですが
もう少しシンプルにできる方法はないでしょうか。 >>501
YesかNoかを聞いているんだよ
わかんねーなら書くなボケ >>500
個々の class 属性の値であれば js で動的に変更できるが
全般的な class 属性の定義(ふるまい)は変更できないであろう >>503
ありがとうございます
出来ないのですね・・・ 別のアプローチを検討してみます スレ違いかどうかはわからんだろ
実際できなさそうな質問してできる回答があったこともあった 薄っぺらな人生を歩んで来た奴ならではの浅はかな思い込みだな CSSで、同じスタイルを上書きするとき
どれがどういう順に強いのか ミーにティーチして
たとえば
td { background-color: white }
.hoge { background-color: red }
td.piyo { background-color: yellow }
とあって、td に hoge と piyo のクラスを両方割り当てたとき
なぜ hoge が負けるのか、 仕様なのか、環境依存なのか
アンダスタンできない >>510
セレクタ 「詳細度」
でググるといいと思う
環境依存ではない >>511
ありがとう
firefoxとIEとで色の付き方に差異があったので
環境依存かと思ってた
ちょっとググってみる 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のどうもが赤くなりません。 "stylesheet" と type="text/css” と href="example.css" の間にスペースがない
@charset は本物の @規則ではないので使わない方が良い
何も考えず HTML も CSS ファイルも文字コードは utf-8 に統一するのがベスト 「html サンプル」で検索!
知らないけど、こういうサイトを使えば?
HTMLサンプル集 - HTMLチュートリアル
http://www.html-cool.com/samples/
文字コードは、utf-8 だけを使う。
ファイルの保存も、utf-8でする
文字列の部分以外では、全角・日本語を使ってはいけない >>516
書けました!!
丁寧に教えてくれてありがとう!! 下のサイトをコピペしたのですが、この部分: url(XXXX.jpg) no-repeat; の書き方が
わかりません。 それで名前を付けて画像を保存とするとchome(1)として表示されますが
これでいいのでしょうか?
その箇所だけ、直してもらえますか?
このURLのhttp://yachin29.hatenablog.com/entry/2015/05/07/004722の
http://www.kalexiko.com/背景動画としたいU動画です。 HPなどで友達が稼げるようになった情報とか
⇒ http://asaswq3wq.sblo.jp/article/181819223.html
興味がある人だけ見てください。
MLADYPMHXU LESS の質問をここでしてもよいでしょうか。
VisualStudio 2015 C# MVC でソフトを書いています。
この中で画面上の部品のクラス定義を整理したくて LESS を NuGet で dotless を追加して使用できるようにしました。
それはうまく出来たのでよいのですが。
調べると LESS にはクラス定義に引数を使用できるとあります。
たとえば以下のように使用できると捉えました。
.hoge(@width: 1px) {
border: @width;
}
ただ上のようにすると画面を開いたときに画面上部に CSS へのコンパイルを失敗したらしい意味の不明な文字列を表示します。
VS あるいは dotless では書き方に違いがあるのでしょうか。それとも自分が何かを間違えているのでしょうか。 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
VD83B ■ このスレッドは過去ログ倉庫に格納されています