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

438 ：Name_Not_Found：2009/11/23(月) 12:21:28 ID:???

>>436
だね
あんまり意味ないんだけどね

IE9はまた独自仕様になりそうでこわいなあｗ
IEは6789でチェックとか、もうやめて＞＜

439 ：Name_Not_Found：2009/11/26(木) 21:02:04 ID:FzH8K/lF

質問スレなんだから、まじめに回答しろ！

440 ：Name_Not_Found：2009/12/01(火) 12:27:45 ID:Mkuhgcka

HTMLの中で以下のようなレイアウトを作ろうとしています。

This is a [pen].
　　　　　 ↑black

[pen]を基準にして「↑black」の位置を決めるにはどうすればいいですか？
positionというのを使うのかな、、と試しましたがよくわかりませんでした。
よろしくお願いします。

441 ：Name_Not_Found：2009/12/06(日) 02:18:57 ID:???

>>440
.pen { position: relative; display: inline-block; }
.black { position: absolute; top: 1em; left: 0; }

<p>This is a <span class="pen">[pen].
<span class="black">↑black</span></span></p>

442 ：441：2009/12/06(日) 02:37:42 ID:???

って5日も前のレスだったか…もう解決してるかな

443 ：Name_Not_Found：2009/12/08(火) 11:25:26 ID:spDDXc55

>>441
ありがとうございます。
とても助かりました。^^

444 ：Name_Not_Found：2009/12/10(木) 19:10:32 ID:???

もうすぐ三周年　トゥギャザー

445 ：Name_Not_Found：2009/12/26(土) 01:26:25 ID:???

jsだとオライリーのサイ本がバイブルっぽいですが、CSSでそういった書籍ってありますか？
もちろん一冊で完結する訳はないんですが、皆さんどんな本で勉強されたのかなと。

446 ：Name_Not_Found：2010/01/11(月) 02:32:45 ID:QmXP9yD9

CSSで、この画像のような構造のサイトを作りたいと考えています。
ttp://imagepot.net/view/126314455414.jpg

今このようなCSSを組んでいるのですが、実際には以下の画像のような表示になってしまいます。
http://imagepot.net/view/126314476261.jpg

div#content {
position: relative;
width: 900px;
margin-left : auto;
margin-right : auto;
top: 40px;
text-align: left;
bottom: 40px
min-height: 90%;
height: auto !important;
height: 90%;
}

div.nakami {
background:#fff1c3;
border:solid 10px #c96c29;
overflow:scroll; padding:30px;
position: absolute;
bottom: 71px;
left: 0px;
top: 72px;
right: 0px;
z-index: 11;
}

<続きます>

447 ：446：2010/01/11(月) 02:34:08 ID:QmXP9yD9

<続きです>

div.copyright {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
background-image: url(images/copyright_2010.png);
background-repeat: no-repeat;
background-position: right bottom;
}

検索しているのですが、どうしてもわかりません。
どなたか、何が悪いか、御指南ください。お願いします。
それから、position="relative"にしておくと、margin-bottomは適用されないのでしょうか？

448 ：Name_Not_Found：2010/01/11(月) 02:46:17 ID:???

>>447
cssに
html,body { height: 100%; }
を書いてなさそう？

449 ：446：2010/01/11(月) 05:20:52 ID:???

>>448
レスありがとうございます！
今急いで追加してみたんですが、変化なしでした。
どこか他におかしい所はないでしょうか？

450 ：446：2010/01/11(月) 05:32:46 ID:???

HTMLの方はこうなっています。

<div id="content">
<div id="menucontainer">
メニュー
</div>
<div class="nakami">
テストテスト
</div>
<div class="copyright">
</div>
</div>

451 ：Name_Not_Found：2010/01/11(月) 11:41:54 ID:???

>>450
>>446-448と>>450コピペしてやってみたけど、div.copyrightを下に固定？することは出来たよ

452 ：446：2010/01/12(火) 00:30:03 ID:???

できました！
ありがとうございました。

453 ：Name_Not_Found：2010/01/12(火) 12:50:53 ID:???

ここはネタスレであって質問スレは別にあるだろボケ

454 ：Name_Not_Found：2010/01/16(土) 12:03:39 ID:???

定期的に書いておかないと駄目か
ここは質問スレじゃないぞ

455 ：Name_Not_Found：2010/03/19(金) 15:28:56 ID:uF0/sJns

Adobe Spryのアコーディオンで、
クリックするとSarariで青い枠線が出ます。
Abobeのサイトのサンプルでも出るもの、出ないものがあります。
この違いは何なのでしょうか？
また消すためには、どう指定すれば良いのでしょうか。
お教えください。
ttp://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html

456 ：Name_Not_Found：2010/03/30(火) 12:19:19 ID:???

a:link { color: white; }
a:visited { color: white; }
a:hover { color: red; }

いくら指定してもブルーのまま。
試しに<head>内をいろい消しても変わらず・・・
ドキュメント宣言とか文字コードとかも関係アルのかな？？

457 ：Name_Not_Found：2010/03/30(火) 12:20:21 ID:???

検証もしてないし根拠もないがoutlineとかは？

458 ：Name_Not_Found：2010/03/30(火) 13:12:11 ID:???

>>457
outlineはどこも設定してません・・

全てを消して
a:link { color: red; }
未訪問リンク
a:visited { color: red; }
訪問済みリンク
a:hover { color: blue; }
マウスカーソルを乗せたリンク
書いてみたけどマウス載せても色が変わらない・・

459 ：Name_Not_Found：2010/03/30(火) 14:15:46 ID:???

a:hover { color: red; }

<body link="white" vlink="white" alink="white" >

<a href=" ">リンク</a>

結局これで解決・・・なんでできないんだろう。。

460 ：Name_Not_Found：2010/03/30(火) 14:54:55 ID:???

>>457は>>455へのレスなんだけど、
クリックしたとき出る枠線ってのはoutline:noneで消せたはず、と思って。

>>456は>>455ではないよな？
CSSだけだされても誰もわからんと思うよ。

461 ：Name_Not_Found：2010/04/02(金) 09:06:49 ID:???

だからここはネタスレだと何度

462 ：Name_Not_Found：2010/07/27(火) 23:19:22 ID:???

スタイルシート使いたいと思ったけどさっぱりわからんわ、難しいなあ。
HP作成ソフト使っても思うようにいかへん。

463 ：誘導されました：2010/11/18(木) 17:08:37 ID:???

http://desperadoes.biz/style/css_sample_frame_2.html
このサンプルページにある上のメニューだけど
メニュー数を増やさずに横巾いっぱいに表示することって出来ないんでしょうか？

464 ：Name_Not_Found：2010/11/18(木) 20:01:01 ID:???

ここネタスレ

465 ：Name_Not_Found：2011/04/30(土) 23:16:52.66 ID:???

.entrytext {
font-size: 100%;
margin: 0;
padding: 50;
width: 100%;
}

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

写真は900pxで貼り付けてあるんですが、その下に流し込んでるテキストのみ
例えば幅600pxとかっていう指定はできないでしょうか？

466 ：Name_Not_Found：2011/05/01(日) 03:22:24.72 ID:???

できますん

467 ：Name_Not_Found：2012/01/09(月) 10:57:34.27 ID:???

divタグのdivの由来ってdivision の省略したものでしょうか？

468 ：Name_Not_Found：2012/06/04(月) 09:20:27.65 ID:???

>>467
<div>
それであってる。どっかの本にもdivisionとかいてあった
</div>

469 ：Name_Not_Found：2012/06/04(月) 23:40:13.51 ID:???

>>467
仕様書読め

470 ：Name_Not_Found：2012/06/15(金) 02:28:12.39 ID:???

>>469
いやじゃぼけ(´・ω・`)

471 ：Name_Not_Found：2012/08/10(金) 23:23:21.71 ID:WDR6FW17

MouseOverはhoverでできるけど、MouseLeaveって指定できないの？
具体的にはposition: relative; でずらしたテキストをマウスが離れるときにゆっくり元の位置に戻したい。

472 ：Name_Not_Found：2012/08/27(月) 22:59:43.37 ID:???

下のようにして、ロゴの下に、ナビを５つ並べたいのですが、
widthでサイズ指定してるのに関わらず、logoの画像が少し右に飛び出してしまい、
また、naviの画像が４つまでしか横並びにならず、最後の一つが二列目にまわってしまいます・・・
どこがいけないのか教えていただけないでしょうか。お願いします。
html
<div id="header">
<div class="logo">
<a href="index.html"><img src="img/logo.jpg" width="800" height="67"></a>
</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>
</div>
</div>

473 ：Name_Not_Found：2012/08/27(月) 23:00:41.72 ID:???

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%;
}

474 ：472：2012/08/27(月) 23:53:43.69 ID:???

すみません解決しました。

475 ：Name_Not_Found：2012/09/15(土) 21:14:43.49 ID:???

創価死ね
創価死ね
創価死ね
創価死ね
創価死ね　
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね

476 ：Name_Not_Found：2012/09/18(火) 16:14:16.38 ID:???

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 の移動位置を取得する方法はありませんでしょうか？

477 ：Name_Not_Found：2012/10/17(水) 21:57:00.46 ID:YdN4x0Qd

印刷時に重要な部分以外の諸々のパーツを全て非表示にするために、header内にmedia="print"として
印刷用のＣＳＳ（print.css）を用意しました。しかし、これを使って印刷すると、IEでもchromeでも全く同じように謎の余白ができてしまいます。

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

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

478 ：Name_Not_Found：2012/10/23(火) 15:08:17.43 ID:813/Owme

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

479 ：Name_Not_Found：2013/01/25(金) 01:35:46.10 ID:???

<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"ってなってくれるなら一応解決はするので。。

480 ：Name_Not_Found：2013/01/25(金) 06:33:19.21 ID:???

>>479
共通のclass指定すればいいと思う

481 ：Name_Not_Found：2013/02/08(金) 17:09:24.98 ID:???

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

482 ：Name_Not_Found：2013/03/22(金) 21:57:33.47 ID:???

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

483 ：Name_Not_Found：2013/03/24(日) 04:20:50.96 ID:???

ライブドアブログを始めてんですが、CSSのどの部分を弄れば行間を変えれますか？

484 ：Name_Not_Found：2013/04/04(木) 06:26:00.13 ID:???

web制作初心者です。質問させてください。

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

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

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

485 ：Name_Not_Found：2013/08/23(金) 17:46:09.21 ID:???

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

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

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

486 ：Name_Not_Found：2013/09/05(木) 23:42:08.75 ID:???

タブだな

487 ：Name_Not_Found：2013/09/07(土) 10:46:27.01 ID:???

<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機能を使って、コピペしたんですが...
すいませんがスレチだったら、誘導しください