【参考】
IEの position:absolute; のバグを利用した擬似フレーム
----------------------------------------------------------------
*IEの position:absolute; のバグを利用した擬似フレーム
1.標準モードにする
2.body {height:100%; overflow:auto;}
3.fixしたいブロックを position: absolute; で指定
以下に示すようなハックを用いることにより、全ブラウザへの対応も可。
/* 全ブラウザに適用 */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}
/* IE6 のみ読み込む */
* html #menu {position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}
《実現例》
CSS frame emulation
http://www.stunicholls.myby.co.uk/menu/background2.html
次スレいらないって言ったじゃん
CSSは初心者スレじゃない質問スレだったときから
スレをなくそうとする工作員が多いけど何なの
IEが言う事聞かなくてイラついてるんじゃね?
イヤな人は入ってこなければいいだけのにね
>>1乙
>>8および前スレラストで無駄話してた奴らは今後立ち入り禁止
なんでこの板は分散したがる人が多いんだろう
DW の話題は禁止なの?
>>14 それは普通にソフトスレじゃね
DWで作ってようがエディタで作ってようが、CSSの話題ならいいけど
ie8にて、
<div style="overflow:scroll; width:200px; height:200px;">
<table>
略 ※tableの幅と高さが200pxより十分大きいとする
</table>
</div>
とすると、divのスクロールバーをいっぱいまで動かしても、
下は最後の行のセル内まで、
右は最後の列のセル内までのところでしかスクロールできず、
下と右のボーダーのあるところまで動けません。
これ、なんとか解決できないでしょうか...
試した限り、ちゃんとボーダーまでスクロールするな
というわけで
>>16のミス
通常、直接入力以外のひらがな入力とかの時って、未確定の文字列には下線が表示されますよね?
でも、google mapのルート検索のテキストボックスの「input#d_daddr」、「input#d_d」ではその下線が表示されません
これをCSSで表示可能にすることは出来ますか?
出来ます
>>20 どうやるんですか?教えてください<(_ _)>
>>18 すみません、tableのスタイルに、
position:absolute;
を指定すると表示されなくなるようです。
ただ、ちょっと特殊なことをやっていて上記は外せない。。。
なら諦めろよ
できないことはやるなというのがCSSの鉄則
>>22 position:absolute; いらなかったけどな
その前になぜtabeleが必要なのかdivじゃいかんの?
>>25 表をDivにする奴ってかなり無能だなと思うよ
表にしてるならまだしも
tabeleには普通じゃなくてもしない
あ、そうなの?正真正銘初心者なもので失礼しました。
29 :
無能:2010/10/21(木) 19:21:02 ID:???
だとするとオレのブログ全ての表をdivで作ってるから直さなきゃw
誤字の指摘をされたということに気付いてない人がいる?
31 :
19:2010/10/22(金) 00:07:12 ID:???
>>19の質問に答えてください
まさか「text-decoration: underline」で出来るんだよってオチじゃないですよね?
行間異常フォントをブラウザの設定で指定してるに一票
>答えてください
何様
マスゴミっぽい口調だからマスゴミ様
37 :
19:2010/10/22(金) 15:54:51 ID:???
どうせメイリオでも使ってるって落ちだろ
行間が異常に広いから下線が隠れて見えてないだけ。inputの縦幅広げろ
40 :
19:2010/10/22(金) 17:20:51 ID:???
>>38 >>39 縦幅広げたらおkですた!!
みんなありがとだお!!ヽ(゚Д゚)ノ
41 :
16:2010/10/22(金) 23:50:35 ID:???
>>25 遅レスすみません。
純粋に、表形式でデータを表示するというtableを使うべくして使うシチュエーションなもので。
自己解決...とは言い切れ無いですけど、とりあえず見た目は解決しました。
tableのborderをnoneにしたら、セル下のボーダーまでスクロールするようになりました。。
なんだそりゃー。。。
たまたま共通仕様として、
tableは、border-collapse: collapse;
tableとtdはともに、border: 1px solid;
の見た目になっていますので、
tdのボーダーが表示されていれば全体の枠も表示されているようにみえる、
というなんか気持ち悪いものですが。
とりあえずクロスブラウザで確認して大丈夫だったのでヨシとします。
ありがとうございました。
42です
?TB_iframe=true&width=800&height=500"を入れ忘れてました
すみません、自己解決しました
スレ違い
スレ違いスマソ
指定した要素以外の全てに適用、という書き方ってないですか?
なにがやりたいのか具体的に言うと
Stylishで、特定のIDが付いたdivブロック以外すべて非表示にしたいのですが
*
* { visibility: hidden; }
#特定のID { visibility: visible; }
でいんじゃない
>>29の無能ですが
tableにすると、ブラウザのズームや縮小でレイアウトが壊れちゃうんですが
何かコツとかあるんですか?
divで表を作るように、thやtdにスタイルを細かく指定するんでしょうか?
幅の指定をブラウザ任せにしてるなら崩れることもあるだろう
tableの幅なら指定してるんですが・・・
もう少し弄ってみます。
情報を出せない、人には言えないような変なことしてるんだろ?
知らんがな
table-layout を指定してない落ち
>>54 知らなかった、何しろ無能なもんで、今から試してみます。
>thやtdにスタイルを細かく指定するんでしょうか?
>今から試してみます。
試してみればいいじゃない。
むしろ試してから書き込め。
CSSというか、Stylishの質問なんですけど、
<a href="〜〜">
<img src="○○" alt="××" title="△△" />
</a>
とかってなってるときに、これを
<a href="〜〜">
△△
</a>
みたいに置換することって、CSSでできます?
>>56 遅レスゴメン
いや細かく指定するなら、divとあんまり変わらんなと思ったしだいで
勿論文字数はちょっとだけ少なくなって、縦横まとめて指定できるけど。
細かく指定すればズレなくなりましたが
毎回書き直す部分で見た目煩雑になるのは嫌なのでやめました。
お騒がせしました。
見た目で使い分けるなよ……
申し訳ない。
後々複数人で編集してもらおうと思っていて、
そこはオレ以上にCSSやHTMLに明るくない方が多いので
重要な部分はエクセル等で表に変換する予定ですが、その他はなるべくシンプルにしようかと
63 :
Name_Not_Found:2010/10/29(金) 10:45:00 ID:DLlmb3uw
ちょっと携帯向けに表を作りたくて、久しぶりにtableを使ってます。
細めのセルを作りたいのですが…
widthの値をどんなに小さくしても、携帯から見るとセルの幅が「全角1文字分」までしか縮まってません。
理想の幅
| |
現実
| |
って感じです。(パソコンから見ると、理想どおりになってます)
これは仕様でしょうか。(auのCA002で見てます)
何か対策法はありますか?
特にcolspanなどは使っていません。
細いセル、ってだけでもうそれはテーブルの構造から外れてるんでない?
なら別の要素でもってやれば良い
65 :
Name_Not_Found:2010/10/29(金) 11:56:33 ID:DLlmb3uw
>>64 ありがとうございます。
早速試してみました。
しかし、divとかdt・ddとかulで試してみましたが、どうもfloatで横に並べることができないようで…
|あ|い|う|
としたくても、
| あ |
| い |
| う |
になります…。
66 :
65:2010/10/29(金) 13:36:07 ID:DLlmb3uw
さらに色々試してます。
どうやら、ブロック要素は丸々1列使ってしまうようですね。
画像を使って線を引く、というのも試みてみましたが、うまくいかず。(詰まりすぎなのか、携帯が表示してくれない)
あとはabsoluteが使えるかどうか…?
>floatで横に並べることができないようで
CSSの効かないキャリアだとしたらスレ違い
CSSの効くキャリアだとしたら何かの間違い
68 :
Name_Not_Found:2010/10/29(金) 14:28:30 ID:wSLaMvek
なんでそういう見掛けだけのことやりたがるかな・・・
ボックス2つ重ねで内側ボックスをfloatで灰色に、外側ボックスはそのままボックス
71 :
Name_Not_Found:2010/10/29(金) 14:45:54 ID:wSLaMvek
<div>
<div style="float:right;background-color:#d0d0d0;">
文章<br>
文章
</div>
</div>
<br clear="all">
>>69 これで出来ました!綺麗に表示されています有難う御座いました。
>>70 勉強します!
auに限らず携帯の仕様なんて糞だろ
>>72 自分もこないだauのfloatでやられた。
いまはドコモでえらいめにあっている。
先に携帯CSSの本を読んでおけばよかった。
75 :
Name_Not_Found:2010/10/30(土) 11:40:44 ID:RVM1KvXt
ケータイは未だにお馬鹿っていうかやっかいだからね
自分は書籍なしで
ほとんどネットですんでる
偉大なる宝庫 ネットに感謝
divとspanくらいしか使えないんだね
CSSで一番酷いのはiモードブラウザだろ・・・
初心者な質問なのですが、
CSS手打ちの場合、ツールは何を使用するのが一般的ですか?
メモ帳?ezhtml?Crescent Eve?・・・?
>77
今一番マシなのはiモードブラウザ2.0
CSS2.0まではほとんど問題なく使える
その次がSoftBankの最新のブラウザ
position使用時の文字サイズ等、なんかバグらしきものが結構あるが概ね〇
>78
CSS程度メモ帳で十分
>>78 Crescent Eveよかったよ。
プレビューもタグチェックもしてくれるし。
ctrlやshiftとエンター押せば、閉じタグや改行入れてくれるし。
82 :
Name_Not_Found:2010/10/31(日) 04:38:44 ID:6Q49bmZi
livedoorブログの本文の横幅を変更したいと思ってwidthをいじったら
レイアウトがぐちゃぐちゃになってしまいました。誰か教えてくれませんか?
シンプル(ブルー, 2カラム)の#contentのwidth:500px;を700pxに変更したい場合
他にどこを変更すればレイアウト崩れず変更出来ますか?
それで答えられる奴がいたらエスパー
#contentの幅を弄るなら
それを囲むタグは全部広げないといけないね
h1, h2{
color:#505050;
}
↑のように
.aaa{
color:#505050;
}
.bbb{
color:#505050;
}
<div class="aaa">あいうえお</div>
<div class="bbb">かきくけこ</div>
.aaaと.bbbに対して一度に指定することはできますか?
.aaa,.bbb {
color:#505050;
}
じゃないの?
87 :
85:2010/10/31(日) 22:03:04 ID:???
あー、すごい単純な事でしたw
ありがとうございます
divの領域にマウスを乗っけたとき、divの背景色を変えたいのですが
.aaa div:hover {
background-color:#ee0033;
}
.bbb {
width:280px;
height:10px;
}
<div class="aaa">
<div class="bbb">内容</div>
</div>
↑のようにやったらFirefoxなどではOKだったのですがIE6ではダメでした。
IE6でもスタイルシートで実現する方法はありませんか?
IE6はaでしかhover出来ない
>>85 すごく最近見た覚えがあるんだけどこの質問
.container {
height: auto;
width: 600px;
border: thin solid #000;
}
.c-left {
height: auto;
width: 200px;
margin: 3px;
border: thin solid #000;
position: absolute;
float: left;
clear: both;
}
.c-right {
height: auto;
width: 370px;
border: thin solid #000;
margin: 3px 3px 3px auto;
float: none;
clear: none;
}
<div class="container">
<div class="c-left">AAA</div>
<div class="c-right">111</div>
<div class="c-left">BBB</div>
<div class="c-right">222</div>
<div class="c-left">CCC</div>
<div class="c-right">333</div>
</div>
幅600pxの表みたいなものを作りたいのですが、これだとIEだと崩れ、
FirefoxだとAAAとBBBの間に変なスペースが出来ます。どうして;;
370+200=600になるんだ
c-leftのマージン左右3pxとc-rightのマージン右3px
あとボーダーの厚みthin(2px?)が4本…
それで適当に余裕持たせて370にしたんですけどぴったりのほうがいいんですか?
>>91 position: absolute; って必要なのかな?
table で作ったら?
>>96 縄文時代から掘り出してきた情報出されても・・・・
>>81 IEのバージョン書いて。
.c-leftのposition: absolute;が謎だったので削除。
.container {
padding-bottom: 3px;
width: 600px;
border: thin solid #000;
}
.c-left {
float: left;
clear: both;
margin: 3px 3px 0;
width: 200px;
border: thin solid #000;
}
.c-right {
margin: 3px 3px 0 auto;
width: 370px;
border: thin solid #000;
}
99 :
98:2010/11/01(月) 22:53:08 ID:???
いや
>>91がそこの「やってはいけないこと」だらけだったので
ってか、ここはマジレス禁止なのか
普通に
>>91のやろうとしてることdlで簡単にできるよな
div厨だから遊んでる?
divがむちゃくちゃ多いサイトってoperaじゃエラー吐くことが多いわ
おいらも、その理由を追求してからdivは使わなくなったわ
operaがマイナーだけど狐やIEがそれらを補正してるとしたら
それぞれの解釈の違いで表示が狂うのが当たり前
ブラウザ依存のcssになっちゃうよね
> divがむちゃくちゃ多いサイトってoperaじゃエラー吐くことが多いわ
Opera使ってるけど全然エラー出ませんが・・・
でもdiv厨はしね
IEで大崩壊して終了
>>105 div厨に親でも殺されたん?div厨なんて放っておけばいいのに
文字がくっきり表現されている画像をそのままのサイズで使用したいので
すが、ブラウザで閲覧すると画像が 10% ほど拡大され、画像内の文字が
不鮮明になってしまいます。Firefox でのみ問題が発生し Chromium と
IE では問題ありません。css の設定で解決できますでしょうか?
==> test.html <==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="hoge.css" rel="stylesheet" type="text/css" media="screen" />
<title>hoge</title>
</head>
<body>
<div id="hoge"></div>
</body>
</html>
==> hoge.css <==
#hoge {
width: 750px;
height: 400px;
background: url('a.png') no-repeat;
}
[user@host html]$ file a.png
a.png: PNG image data, 750 x 400, 8-bit/color RGBA, non-interlaced
>>109 firefoxの[表示]→[ズーム]→[リセット]
>>110 ありがとうございます。解決しました。
やっぱりクライアントの問題だったのか。
半日もハマってしまった。。。
CSSでメインのコンテンツとメニューを並べ、ページの一番下にフッターを配置しています。
JavaScriptでページのリロードを発生させずに中身の書き換えを行った際、
最初に表示されているものよりも書き換えたコンテンツの高さが高かった場合、
フッターの上にコンテンツが表示されてしまいます。
IE8では再計算してコンテンツの後にフッターを持ってきてくれるんですが、
Firefoxでは上記の通りフッターの位置は変わらず、その上にコンテンツが描画される状態です。
こういう場合、フッターの位置を動的に変えられるような書き方はCSSのみでは無理でしょうか。
bodyなんかをheight:100%にして任意に割り振るやり方もあるようなのですが、
ページの更新が無いと動いてくれないようです。
ひとつ聞きたい。
それが「CSS」の「初心者」の質問だと思うか?
js使ってるんだったらjsスレで聞けばいいとおもう。
どう書いたのさ?
116 :
114:2010/11/13(土) 15:43:44 ID:???
</head>
<body
<div align="center">
<div class="top">
<div class="text"> 「リード文章」○○○○○○○○○○○○○○○○。</div>
</div>
</div>
</body>
</html>
======================================
.top {
height: 500px;
width: 950px;
background-image: url(images/top.jpg);
background-repeat: no-repeat;
clear: both;
}
.text {
width: 200px;
font-family: "フォント名;
font-size: 8pt;
line-height: 150%;
color: #333;
text-align: justify;
}
こんな感じです。
あと前述参考URLの指示どおり、サイト全体をhtml側で「<div align="center">」でセンタリング
したせいなのか左右の位置設定もままなりません。(ブラウザごとに位置が大きく異なる)
う〜む これが噂の・・・
何をどうしたいのかさっぱり
エスパーが来い
>>116 text-align: justify; は実装依存。全てのブラウザで同じ位置にすることはCSS2レベルでは出来ない。
CSS3 の text-justify あたりで可能かもしれないので、調べてみると良いかも。
GoogleChromeに対して文章の両端揃えがしたく、
.a{
text-align:justify;
text-justify:inter-ideograph;
word-break:break-all;
word-wrap:break-word;
margin:0px;
padding:0px;
width:500px;}
------------------------
<p class="a">
文章
</p>
こうやっているのですが、綺麗に両端に揃ってくれません。
(IEやFirefoxでは揃ってくれるのですが)
他に何か、いい方法やプロパティってないのでしょうか・・・?
123 :
Name_Not_Found:2010/11/15(月) 23:01:22 ID:3SRtrVQc
Cygwin使っている人いますか? その20
http://hibari.2ch.net/test/read.cgi/unix/1268282846/ 272 名無しさん@お腹いっぱい。 [sage] 2010/11/15(月) 11:42:30 ID: Be:
マウントオプションとは別に、CRLFをLFに変換するツールはないでしょうか?
美乳セーラー女子高生とSEX顔射フィニッシュ
というコマンドやnkfでも一応可能なのですが
専用のツールはなかったかと思いまして
273 名無しさん@お腹いっぱい。 [sage] 2010/11/15(月) 11:43:21 ID: Be:
>>272 コピペミスった、、、、、
見なかったことにしてください
コマンドは、
cat crlf.txt | tr -d '\r' > lf.txt
です。
>>123 いくら匿名2chとは言え悶死レベルのミスだなw
CSSによって、a[target="_blank"]を無効にするにはどのようにすればよいのでしょうか。
CSSじゃ無理だわな
CSS=デザイン まずこれ覚えような
新窓無効にするのはブラウザの仕事だ
>>126 無理なんですか。残念です
>>127 >>128 target="_blank"
はCSSで指定するんじゃなかったんでしたっけ?だから出来ると思ったんです
HTMLで指定するんです
まずお礼を言いましょう
>>130 なるほど。HTMLでしたか
>>131 すみません、失礼でしたね、申し訳ございません
みなさんご返信ありがとうございました。
うむ
よしじゃあパンツを脱げ
(⌒⌒)
∧_∧ ( ブッ )
(・ω・`) ノノ〜′
(⊃⌒*⌒⊂)
/_ノωヽ_)
136 :
Name_Not_Found:2010/11/19(金) 11:46:35 ID:o+ff3YwJ
「薬師丸ひろ子」って言おうとして、
ついうっかり「よく締まるアソコ」って
言ってしまうことは誰にもよくあるが、
俺の場合「尾道」って書こうとして
「尿道」って書いてしまったことがある。
137 :
Name_Not_Found:2010/11/19(金) 13:40:23 ID:Xpqo/Jan
もしここじゃない場合はすみません。
罫線(┗┃┓)を使って組織図みたいなのを書いているのですが、
その罫線の横に<input>などがあると罫線どうしの間がひらいてしまって
格好悪くなるのですがなにか組織図を表現する良い方法はないでしょうか?
┏a
┣b
┗c
┗┃∵┃┓
>>137 罫線ぽい背景画像使うのはどう?右方向と下方向の線は余裕を持って長めにしておく。
はみ出た部分は、重ねるか隠すかすればいい。
140 :
Name_Not_Found:2010/11/19(金) 19:21:34 ID:Xpqo/Jan
>>139 ん・・・。そうですか。
ありがとうございます。
ワードで書いて画像化。それをHTML画面にはめ込むのが簡単。
IE8でDOCTYPEがあるとマーカの大きさがバラバラになります。環境によるものでしょうか?
DOCTYPE付けたまま治す方法教えてください。
<ul>
<li>1</li>
<li style="list-style-type: circle;">1</li>
<li style="list-style-type: square;">1</li>
</ul>
そりゃ違うマーク割り当てれば大きさ違うのは当たり前でしょうに。
大きさを揃えたいなら画像にすりゃええ
IEの標準モードで描画したときだけ大きさがぐちゃぐちゃになるっぽいね
何でやろ
CSS の仕様書読んでたんですが、px って relative unit なんですか?
computed value を計算するときいったんインチか何かに変換して、レンダリングするときまたピクセルに戻すんですか?
マヂで?
>>147 px は dpi によってサイズが変わるから相対値。
しかし実質的には絶対値
dpi を変更しない人にとっては絶対値といえなくもないか…
HTMLタグびっしりのソースが汚すぎるページを独学で作っていたのですが
CSSというのでスッキリ出来ると聞きました。
(´・ω・)何から始めたら宜しいでしょうか・・・オススメページや、サイト作成に役立つEDITツールなんてありますか?
>>151 CSSでググるとたくさんあるよ
こんなのとか
http://cssstyle.net/ HTMLタグ打てるならネットでわからないとこググれば大抵解決すると思う
フリーのCSSテンプレートをダウンしてソース見るなりいじってみるといいよ
ツール類はHTMLエディタでググるとこれもいろいろ
おいらHTMLProject2使ってます
>>151 いきなりスッキリしようとしないで、できるところから切り替えていけばいい。
たとえば、bodyタグに指定していた背景画像を background-image に替えるとか。
ただ、道を踏み外すとHTMLがdivだらけになるので、それだけは気をつけて。
DIVだらけの何が悪い?
デザインの為だけに必要のないdivを作りすぎるなって事じゃない?
そのデザインを作るのにdivしかなければdivだらけでもいいんじゃね?
>>156 >>155 と同じ内容を発言しているのに気が付いてる?
必要か不要かの判断材料には触れてないようだけど
こまけえことは(ry
>>157 俺には逆のことを言っているように見えるが?
>>159 ・O のために不要な P をするな
・O のために必要な P をしてもよい
両者は同じだと思うけど
対偶法だな
深読みしすぎたっぽい?
・デザインの為だけに(内容を記述するのに)必要のないdivを作りすぎるなって事じゃない?
・そのデザインを作るのにdivしかなければ(デザインのためだけの)divだらけでもいいんじゃね?
そいでもって「作りすぎるな」が「無駄/必要」の境目に対してでなく、人間の感覚(例:5つ以上etc)に対してと考えたからずれた。
だいたいだね
「DIVだらけ}って1ページでいくつDIVきった状態なんだよ え?
あいまいだなぁ
164 :
151:2010/11/27(土) 00:56:06 ID:???
>>152 >>153 レス有難う御座います。頂いたアドバイスをスキルアップに役立たせて頂きます(*´ω`*)
参考ページとツールの方もありがとうございます!
そもそもマークアップ以外の用途で要素を使うのはどうかと
>164 参考に他の人のサイト見たり、自分で作ったやつの微調整を試すのにFirebugもおすすめ。
おまえら「div病」でググって落ち着け
Firefoxだと
border-collapse:collapse;
としても線が太くなったりする箇所が出てくるんですが、これは防ぐ方法あるんでしょうか?
俺は、自分のは太くありたいね
>>168 テーブルの話です。
書き忘れてました、すいません。
divボックスを造りその中に文章を流し込んだところ、ブラウザで見た際に
文章の最上部(ボックスの上辺)に文章がオーバーフローしたかのような
文字列の下部(?)に見えるものが点在します。
実際に文章がボックスからはみ出ているわけではないのですが、原因が判
りません。回避法を教えてください。
>文字列の下部(?)に見えるもの
文字が重なってるって事か? ようわからんがline-heightは?
てかhtmlもcssも書かないで状況もあいまいで解決しろってのが無理があるぞ。
position: relative
left: 90px
bottom:-16px
などで、画像の位置を調整していると、ブラウザや解像度の違いで
ずれが出てしまいました。
ずれないやり方を教えてもらえないでしょうか?
もしくは、positionは使わないほうがよいのかな。
うん、使うなwwwwww
position使わないなぁ
大体marginで足りる
>>173 場合によって寸法が伸張しないなら大本にrelativeでその中はabsolute
でもpxが解像度に依存するもの、しなかったら余計にレイアウト崩れると思うw
日本語でおk
>>173 IEのBugかもしれない
position: relative で検索したらトラブル例と対応策がいっぱいでるよ
179 :
Name_Not_Found:2010/12/03(金) 22:55:08 ID:5bu5x7cM
CSSとCoDシリーズはどっちの方がスペックいるの?
180 :
Name_Not_Found:2010/12/03(金) 23:06:28 ID:5bu5x7cM
やっぱりいいです
183 :
Name_Not_Found:2010/12/07(火) 15:46:25 ID:VSzXP+M3
cssと印刷の関係について質問です。
<ul><li id="link">menu1</li><li …って感じでcssでメニューをつくるとき、
リンクボタンの画像をbackground-imageで指定した場合、印刷しても該当画像が表示されませんよね?
どうやったら表示できるようになりますか?
画像を<img src="....という風にスタイルシート使わない形で指定した印刷用ページを作るしかないですか?
それがいわゆる「印刷用ページを開く」って奴でしょうか?
他にもっと楽に実現する方法ないでしょうか?
185 :
Name_Not_Found:2010/12/08(水) 21:39:03 ID:mhE7UnDT
[html]
<div id="main">
<div id="navi">
<div class="navi-previous">
前のページへのナビ
</div><!-- .navi-previous -->
<div id="navi-next">
次のページへのナビ
</div><!-- navi-next -->
</div><!-- #navi -->
<h1 id="page-title">タイトル</h1>
</div><!-- #main -->
<div id="menu">
サイドバー
</div><!-- #menu -->
[css]
#main,.navi-previous { float: left; }
#menu.navi-next { float: right; }
h1#page-title { clear: both; }
上記のように書くと、firefoxで#naviの上に余白が生じてしまいます(IEでは無し)
ググった結果、#naviに display: inline; を指定すると直ることがわかったのですが
なんだか気持ち悪いです。
display : inline; を使わずに余白を消すことはできないのでしょうか。
186 :
185:2010/12/08(水) 21:47:27 ID:mhE7UnDT
すみません書き忘れです。
#navi-previous , #navi-next { width: 50%; }
188 :
185:2010/12/08(水) 22:32:24 ID:mhE7UnDT
すみません忘れてました。
#navi { margin-bottom: 20px; }
しかしこのマージンがなぜかききません。この解決方法も教えていただきたいです。
>>188 #naviの子要素がすべてfloatだから。
float要素は親要素に対して高さを持たない。
だから子要素が全部floatだとその要素の高さは0になる。
必要な高さをheightで指定してやれ。
>>185 余白ってのはわからんな。半角スペースでも入ってんじゃね?
>>185 CSS一番上に* {margin:0; padding:0;} 入れても無理?
191 :
Name_Not_Found:2010/12/09(木) 13:58:16 ID:7S76tLIq
border-radiusをかけたブロックの上にborderで線を引くとchromeで
おかしな表示になってしまうのですが、対処法はないでしょうか?
firefoxではこの現象は起きません。ソースは以下な感じです
<html xmlns="
http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">
#container {
width: 700px; height: 50px; background-color: #ccc;
border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
}
#box {
border-left: 30px solid #f00;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
}</style></head>
<body><div id="container"><h1 id="box">←何故か上部にradiusのbottomが適用される</h1></div></body></html>
接頭辞ついてるもんをサイト上で使うなよ……
193 :
185:2010/12/09(木) 17:24:01 ID:246im6WG
>>189 heightを指定して無事marginがききました! ありがとうございました。
余白の正体はわかりませんでした。気持ち悪いですが、
display: inline;で対処することにしました。
>>190 既に指定してあります。display: inline;で問題無いようなのでこれでいきます。
ありがとうございました。
CSSで「または」って言う意味を表すことって出来ませんか?
「co.jp|com|org」みたいな感じに
>>194 何をどうしたいか具体的にわからんが
同じ内容を複数同時に定義したいなら,で区切る。
.hoge,
.foo,
.piyo { background:#fcc; }
これでクラスがhogeとfooとpiyoの要素は背景が#fccになる。
それ以上がやりたいならjQueryさんに頼め。
>>193 FirefoxのFireBag使えば
どの要素で何の空白が出来てるかわかるだろうから調べてみ。
ファイアバッグ
あ、ホントだバッグになってるw
すまんw FireBugね
199 :
194:2010/12/11(土) 20:20:49 ID:???
,で2つ入れれ
javascriptでやれ
202 :
194:2010/12/12(日) 00:31:18 ID:???
>,で2つ入れれ
a[href^="
http://www.yahoo."][href$="co.jp,com"]
こういうことでしょうか?これでも動きません・・・
>>201 CSSでは「または」の表記はどうするのかなと疑問に思いまして。
204 :
194:2010/12/12(日) 00:48:42 ID:???
206 :
194:2010/12/12(日) 03:07:13 ID:???
>>205 ですから、CSSで「または」って言う意味を表す語句はなんですか?と最初からお尋ねしているのですが。
208 :
Name_Not_Found:2010/12/12(日) 11:09:26 ID:QyA57snE
>>194 どうしてこう日本語が通じないのか・・・
「,」区切りでは思ったように動作しなかったって事なんだろ?
だったら
>>195に書いてある通りJavaScript使え
もしくは目的のリンクに全部同じクラスを振れ。
210 :
194:2010/12/12(日) 22:09:23 ID:???
>>207-209 (゚△゚)!!
言われてみれば「,」がまさしく「または」の意味を持ちますね
希望通りの「または」の動作をしないのでつい・・失礼しました。
CSSでは私の思う通りの動作を行うことが出来ないと言うことで諦めます
みなさんありがとうございました。
","は「または」じゃないだろ「アンド」だ。
>>211 "," が AND なら「p要素 かつ class="hoge"」は
p, .hoge { color: red; }
で表せなければならない。
>>213 さっぱりわからん。
「または」でもなく AND でもなく「アンド」に特別な意味がある…?
まぁ「または」でも「あんど」でもないのは明白
単に箇条書きだってば
>>214 「AND」は「且つ」って意味でしょ?
そうじゃなくて「と」っていう意味で言いたかったから
>>211はカタカナにしたんだと思うんだけど
何その屁理屈
または、でいいだろ……
218 :
214:2010/12/13(月) 19:25:31 ID:???
and と
or または
, 区切り
body {
width: 700px;
margin-right: auto;
margin-left: auto;
}
として、bodyが真ん中に来るようにしてたんですが、
頭と尻の部分に横幅いっぱいの画像をいれるため、
bodyに
background: url(foo.jpg) no-repeat top center;
addressに
background: url(bar.jpg) no-repeat bottom center;
とやったら、address要素がbody要素の幅を継承しちゃって700pxの背景になってしまいます
bodyの横幅を継承しないようにする方法はありますか?
>>220 addressがbodyの内側にあればそりゃそうなるでしょうよ
>>221 『継承しない』って書き方はないってことっスか?
bodyは幅100%にして
中に幅700pxのdivを入れれ
>>223 代案をだすってことは、ないってことっスかね?
>>220 継承もなにもaddressはブロックレベルでしょ
だったら幅指定がない限り100%(=親要素と同じ)になるのが普通なんじゃね?
<div id="Container">
<div id="SiteWidth">
<address>--</address>
</div>
</div>
body { background: url(bar.jpg) no-repeat bottom center; }
#Container { background: url(foo.jpg) no-repeat top center; width:100%; }
#SiteWidth { width:700px; margin:0 auto; }
>>225 親の幅におさまるのが普通だからこそ親の幅無視できる方法ねーの?ってイレギュラーな質問してんだろ
で、できねーの?
なんで屁理屈並べたがるかね
シンプルな質問じゃねーか
できる、できねー
能書き聞きにきてんじゃねーんだよ
と思いましたが
言わないで我慢しますね
回答ありがとうございました
変なdiv使わねーで、addressにstyle指定。ブロックなんだから。
正論じゃない?
質問と無関係な講釈垂れたがる自称中級者が多すぎる
なりすましの煽りでしょ
回答者は代替案と述べた上で発言すべきだった
>>226 久々に香しい逆切れ乞食だなw
初心者スレに来てそんなイレギュラーな深読み期待すんなよw
700の箱に1000を詰め込もうとかw
>>226 書かない我慢が出来てない時点で
モニタの前で叫んだ可能性すら否定できないww
>>233 親より大きいものを入れることを想定してるoverflowなんかもあるし、あながちおかしな発想でもないと思う
でも親要素からはみ出すことを想定した何かはないわけだから、おかしな発想だと思われるのも当然だよな
Google Chromeでの文章の両端揃えは現状では無理なのでしょうか?
Operaだから
詳細は本スレへ
<html><head><style>
h3 {font-size:1em; width:1em; background:pink;}
</style></head><body>
<h3>ファイナルファンタジー</h3>
</body></html>
としたとき、IE以外では
ファ
イ
ナ
ル
ファ
ン
タ
ジー
となってしまうのですが、綺麗に縦書きするにはどうしたら良いでしょうか?
(スタイルをオフにしたときもおかしくならないようにしたいので、できたら<br />などを使わずに)
span {display:block;}
<span>フ</span><span>ァ</span><span>イ</span>(以下略)
とすれば綺麗にはなりますが、どうも府に落ちなくて…
>>241 そこであってる
CSSの記述は関係なく、Operaのフォントレンダリング自体に問題抱えてるから
対処法はOpera製作元にバグ報告・修正要望出すくらいしか無い
>>241 web制作管理板じゃなくてソフトウェア板だった。
>>243 なんと…
素直に画像使うべきだろうか…
img要素に対するbefore/after擬似要素が機能しないのですが、これはそういう仕様なのでしょうか
img:after { content: "hoge"; }
のように書いています
a要素やdiv要素などでは機能することを確認しました
動作確認をしたブラウザはIE8、Fx3.6、GC8です
img:after { content: "hoge"; }
<img src="" alt="" />
↓
<img src="" alt="">hoge</img>
↓
エラー
>>246 なるほど、理屈が解りました、ありがとうございます
>>242 禁則処理がかかるからCSSじゃ無理
縦書きのプロパティも存在する(writing-mode)が、IE以外ではあまり対応してないぽい
縦書きは画面の構成上見やすいもんじゃないしどうしてもやりたいなら画像にすりゃいいんじゃないかな
フッターを作ってます。
横長のdivに背景画像を入れて、divの中に、トップページ・料金等のテキストリンクをいれたいのですが
横長のdivの上下中央にテキストリンクを持ってこさせるには、どう書いたら正しいのでしょうか?
また中央ではバランスが悪いので、少し上下左右に調整したい場合も知りたいです。
宜しくお願い致します。
テンプレのリンク先にある
>>249 #footer {
background-image:url("〜");
padding-top:3em;
padding-bottom:5em;
}
<div id="footer">初歩的過ぎる</div>
>>245の件なのですが
Operaでは期待に沿う表示をしてくれました
これは非正規だけど都合のいい解釈をしているに過ぎないと考えるべきですか?
解釈はブラウザごとに異なるからな。
非正規を都合良く解釈とか特にIEが顕著だけど、
その他のブラウザにだって無い訳じゃない。
CSS3のメディアクエリなんですが
<link rel="stylesheet" type="text/css" href="large.css" media="only screen and (min-width: 481px)" />
<link rel="stylesheet" type="text/css" href="large.css" media="screen and (min-width: 481px)" />
上記の違いは
上はメディアクエリをサポートしてないブラウザとスクリーンサイズの横幅が481px以上のものに適用
下はスクリーンサイズの横幅が481px以上のものに適用
って解釈で合ってますか?
違いますね
256 :
254:2010/12/17(金) 13:16:27 ID:???
違った…orz
違いを解説して頂けないでしょうか!
あほたれ わしはまだ勃つわい !
idとclassに指定する文字は大文字と小文字のどっちがいいんですか?
ホームページビルダーを使うとhtmlタグは大文字から小文字に修正されるんですが
idとclassはそのまま変わらず、大文字小文字が入り混じって汚らしくなってしまいました。
俺はローワーキャメルケースにしてる
divの枠を作って、その中に文章を入れてます。
枠の中で空白を作りFIREFOXで確認したら、枠自体が大きくなってしまって困ってます。
どうしたら、枠の大きさはそのままで、枠の中の文章と枠の間隔だけを空けれるでしょうか?
■html
<div class="system_textcontents">
文章
</div>
■css
.system_textcontents {
padding: 10px;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
background: #FFFFFF;
width: 726px;
}
大きくなった分だけ小さくする
>>261 ドキュメントタイプ次第では規則があるぞ
265 :
261:2010/12/19(日) 00:03:29 ID:???
>>264 言葉が不足していたかもしれない。
アルファベット([a-zA-Z]) の大文字小文字で使えない文字はないという意味。
(X)HTML 系の文書で [a-z] が使えなかったり、[A-Z] が使えない規定はないんじゃないかな。
>>262 paddingはwidthに含まれない
widthがautoの場合はpadding分も含めて自動調整するが
固定幅の場合は、width値+padding値になるから
左右のpadding分を引いた分をwidth値にする
企業であれこれやってるんだが、帳票の現物はエクセルで作成。配布はまんまかPDFで。
サイトにはそれをgifにして貼るだけでおkなんだが・・質問の趣旨がもひとつわかんね。
269 :
Name_Not_Found:2010/12/20(月) 21:56:45 ID:/eR/+iXw
IE8で互換モードから標準モードに切り替えると、次のような枠線が非常に暗い色になってしまいます。
<div style="border:4px groove">TEST</div>
互換モード時の明るい色が気に入ってたのですが、#FFFとか色指定してもまだ暗いんですよね。
標準モードの時に、可変サイズの枠を互換モードの時と同じような見栄えにすることはできませんか?
>>269 仕様書には「溝っぽく見せろ」とだけ書いてある。その実装はUAによる。
groove,ridgeに頼っていいのはテキストサイトだけだ
そういうことを聞きたいんじゃないんですけどね
>>268 ユーザーが入力する部分でのフォームはどのようにされていますか?
うちの場合では申請業務をWeb化するにあたり、
今使っている紙の申請書をそのままWebで再現しろという依頼があったので、
tableでrowspan, colspan付けて、できる限り紙媒体の様式をHTMLで再現しています。
プログラム組む方の人間で、デザインはド素人なのですが、
tableをレイアウトのために使用しないということ程度は聞いたことがあります。
ただ、先の様式x号みたいな形式のものは、そうせざるを得ないのではないかと思った次第です。
が、自信がないのでデザイン専門の方の意見を伺いたかったのです。
>>273 紙まんまを再現しろとかいう要件を取ってくるなんて、三流の部署に配属されちゃったね…てのは置いといて
「表ではないもの」のレイアウトのためにtableを使うのが好ましくないのであって
「表」をtableで作るのはなにも間違ってない、そこんとこの区別はまず大丈夫だろうか
で、適当に
http://goo.gl/b9Jv5を例にとって言うけど、まず用紙下部の「表っぽい」部分
俺はこういう帳票の理念については明るくないので正しくない指摘かもしれないが、これは情報としては表ではないと思う
でも体裁としては表であって、それを再現しろってんだから、表で作りゃいい
一方、この用紙の上部、いろんな文言とか表題とか、こいつらはまったく表ではない
だから、こいつらをまとめて一つのtableにぶっこむとか、そういうことは避けるべき
あとTextをうまくMarkupできないのは、自分がその文書をよく理解してないってことを意味するのは覚えとこうな
自分が何をやってるのかもよくわからず1000行の関数を書いちまうプログラマみたいなもんだ
275 :
:2010/12/21(火) 12:48:35 ID:???
>>273 帳票って要するに書類だよな。
それは単に印刷して書類として使うもの?
それともwebページとして一般公開するの?
Web文書として公開するなら適切なマークアップをして
デザインやレイアウト用途でのtable乱用は避けるべきだけど
あくまでそれを紙の書類として使う為の印刷用ページなら
別にガチガチのtableレイアウトでも問題ないんじゃない?
そもそもweb文書として読まれる事を前提としてないんだし。
>>275 広義には書類です。印刷用途の場合は大抵PDFで出力します。
それをiframeでブラウザ上で確認させろと言われることもあります。
狭義には検索結果の明細です。
例えばgoogleの検索結果をNoやサイト名、更新日時といった列で区切り
tableでやたらめったらcolspanとrowspanで
レイアウトしたら帳票と呼びます(業務系界隈では)。
デザイナーの方が見たら卒倒するものばかりです。
http://www.google.co.jp/images?q=%E5%B8%B3%E7%A5%A8+%E7%94%BB%E9%9D%A2 >>274 三流は部署であり会社であり、この業界だと思います。
COBOLの時代から大企業だろうが中小だろうが変わらない風習です。
2010年の現在でも「マウスは難しいからクリックしなくていいように」というユーザーがいる世界であり、
「先方の専務がああ仰っているので何とかするように」となる世界ですし。
何十年も昔からこちらから提案することなく、顧客のいいなりになっていたツケとも言えます。
ともかく、やはり「そもそもそのような体裁を取らない」というのが
真っ当な対応なのでしょうか。うちでは無理そうですが…。
277 :
276:2010/12/22(水) 22:22:18 ID:???
278 :
Name_Not_Found:2010/12/22(水) 22:31:03 ID:5ARHfYiS
WEBデザインについて学ばないといけないのですが、何かいい本はないでしょうか?
特にCSSについて学びたいです
ネットに情報なんていくらでもあるのになぜ本を
>>278 っつー事はだ、netの社会のはじっこで生きていくわけだよな ?
netの最大の利点は「情報の検索」と「情報の取捨選択」だ。
いい機会だからその「CSSの何かいい本」を検索してみたらどうだい ?
良い事言った!
>>280 馬鹿は書き込みしないほうがよいのでは?
話わからないなら消えろよ
どうした 、 なんか嫌なことでもあったのか、相談のろか ?
探す努力をしないやつが勉強できるはず無いよな
子要素に img を持つ a ってどうやって指定すればいいですか?
ない
クラスでも付けろ
>>285 子要素って言い方を知っててなぜそれが分からないのか理解に苦しむ
えっ
やはり存在しませんか。ありがとうございました
>>288 JavaScript や XPath ならともかく、CSSセレクタ では無理だと思うが。
生きるの疲れた
>>291 キーワードが解るなら調べられるだろ?って意味なんじゃね。
>>293 キーワードで調べても分からないから聞いているんだろ、常考。
そりゃそうだw
>>293 ないものをないと判断するのは難しい。
仕様書を読めるなら別だが、それなら質問しないだろうし。
classの位置って決まりっていうか推奨みたいなのってあるんですか?
<img class="abc" src="src.jpg" alt="src">
<img src="src.jpg" alt="src" class="abc">
こんな感じで前に来てたり後ろに来てたりサイトによってまちまちなんですが。
決まりはない
どういう順番にするかは好みの問題だな
自分の場合はid→class→その他→イベントハンドラ、って順番にしてる
>>299 自分の場合、大体同じだけど 必須タグ (imgの場合src, width, height, alt)を一番先にしているな
CSSの理解はできても実践でどう使うかは難しい。
なんか、そのへんのいい入門書はないですか?
WEBサイトにおけるCSSの実際の例みたいなやつ
おまえのブラウザは右クリックから
ソースを見ることも出来ないのか。
>>301 実戦で難しいってのがわからん
htmlでプレーンな文書を作って、あと全部cssでレイアウトじゃないの
練習のつもりで何かやるんなら架空のwebサイトでも作ってみたら
あちこちのサイトのソース見るのは良い勉強になるよな
>>301 自分も初心者だけどカッコいいデザインのサンプル見つけて
そのCSSのパラメーターをいじったりして理解→自分でちょっとしたページ作る
ってのが面白いし理解しやすいと思う
まぁ基礎がしっかり身に付かないかもだけどモチベが保てるから継続して学べる
コリスとかかちびとのCSSサンプルは見てて面白いお(^ω^)
307 :
Name_Not_Found:2010/12/25(土) 17:25:17 ID:RI9fhs9a
スタイルシートのセレクタって
divとかpとか無いと駄目なのか?
あ?
え?
ぎ?
ご?
ぐ?
>>313 サンクス
そうなのか
pだと反映されるんだが
適当なのだと反映されなかったんだ
>>314 「適当なの」が間違ってるんじゃない?
それだけじゃ何とも答えようがない。
要は<div id="***"><p class="***">とかでなく
適当に<A id="***"><Z class="***">でもOKか?と聞きたいのだろう
さすがにそれはないだろ
それなんてspan?
XMLなの?
はじめてやります
いろいろおしえてください。
>>320 はじめてかいとうします。
しつもんをおしえてください。
はじめてやります
いろいろおしえてください。
まずは浣腸をしてキレイにしましょう
324 :
314:2010/12/26(日) 20:39:01 ID:???
>>316の通りだ
fとかkとかでやろうとしてた
pだと段落になりそうだと思ったんだ
HTML勉強して来い
>>324 それは CSS の話じゃない。
<z> を定義した DTD を用意してやれ。
それとも、不正な (X)HTML であることを前提にしているのか?
328 :
314:2010/12/26(日) 23:54:27 ID:???
文章型はHTML 4.01 Transitional・・・
と思ったら書き損ねてた
もっと勉強して来る・・・
レスサンクス
#menu ul > li
{
}
などの > で指定するって大抵のブラウザでサポートされてますか?
>>330 WinIE6以下以外はサポートされてる
>>331 ありがとうございます。
安心して使えます
しかしまだIE6は半数以上というところが多いがな、ははっ
IEェ…こいつのせいでほんと手間かかる
IE6使ってる奴ってなんなんだよ・・・情弱にも程があるだろ(´・ω・`)
どっちが情弱なんだか
普通は8にアップグレードされるから情弱は使えないんじゃない?
小さいエって、ブーイングのときに使う感じがするが
由来と読み方がわからない
サスケェでぐぐれ
>>337 勝手にはされないよ
あとOSによっては入れられないOSのところも企業では多い
IE6でしか動かない 業務用ASPやサービスを使ってる会社もまだあるから なかなかね…
会社のPCだと勝手には入れられなかったりするしね
権限持ってる人が情弱な可能性とか単に数が多くて面倒とかってこともあり得る
俺が前いたところも今年の夏の時点でまだ全台6だった
>>337 いつの間にか自動的にされるわけじゃないからそれは無いと思う
うちも一応大企業に分類される会社にいるけど、IE6をIE7以上にアップデートすることは禁止されてる
結局、IE6を使い続けているのはほとんどが企業ユーザーだということ
つまりそいつらを相手にするかどうかでIE6への対応を決めればいい
ちょっと聞きたいんだけど、CSS3もう実務で使ってる?
>>345 うn 一部サイトでは使ってる
古いUAだと再現はされないから、情報の閲覧には支障がでないようにするのが大前提だね
<div class="clr"></divが出来るのですが"clr"とは何でしょう??
使ってるソフトのスレで聞け
>>347 なに?クイズがしたいの?
じゃあ「上は大水、下は大火事。これなーんだ?」
351 :
Name_Not_Found:2010/12/29(水) 18:54:19 ID:2o/k5x41
352 :
Name_Not_Found:2010/12/29(水) 23:42:04 ID:9Z+1uLrQ
>>300 altは必須だけどwidthとheightは必須じゃないよ。(HTML5ではaltも必須じゃなくなる。)
現在、主にIE6(後方互換モード),7対策で
・widthとpaddingまたはborderを同時に指定しない(widthの解釈)
・floatを指定した要素に左右marginを指定しない(IEで2倍になる)
・上下marginはできるだけ使わない(バグが多いような気がします)
上記のことを自分なりに決めてCSSを書いているのですが、他に注意するべきCSSのプロパティやそれらの組み合わせってありますか?
もしかしたら無意識のうちにやっているかもしれませんが...
当然Fxでも確認してるよね ?
355 :
353:2010/12/30(木) 20:16:56 ID:???
>>354 有り難うございます。
はい、最初はFirefoxで確認してその後IEとOperaで確認しています
chromeも追加しようかなと思っていますが...
IE6は官公庁、大企業、研究所などが多くて
「全く無知」と「解って使っている」の両極端だから
もう無視してもいいかも・・・
>353の3点で充分だと思うよ。
超基本なので既にクリアしていると思うが
・属性セレクタ([ ])、チャイルドセレクタ(>)、white-space:pre あたりは未対応なので使わない
・bodyに font 設定する場合は、基本 table 要素にも同じ設定をする
とか
IE6,IE7だとはhasLayout絡みか
互換IE6だとブロック要素のセンター揃えも気をつけねば
>>353 標準準拠モードなら回避できるバグばかりではないか…。
後方互換モードを会えて選択するメリットはあるのかな。
単純にxml宣言が推奨されてるからじゃね?
UTF-8だと省略可だけど推奨ってことで俺も書いてるし
<!DOCTYPE html>でオールオッケーだと思ってるんだけど、なんかまずい事ってある?
un
>後方互換モードを会えて選択するメリットはあるのかな。
IE5対策
>>360 HTTPヘッダでちゃんと文字コードが指定されてたら、どの文字コードでも省略可能ってことになったよ
365 :
Name_Not_Found:2010/12/31(金) 15:04:57 ID:onsTJKN9
>>363 今時IE5なんて無視でしょ。
>>264 まじで?ソース希望。
というか、HTML 4.01でいいじゃん。
まだ少数ながらIE5ユーザも居るから、Webで不特定多数を相手にするなら
対応できるならしておいたほうがベター
シェア1%以下だろ
対応するコスト考えたらアホらしい
時間と労力の無駄
じゃあネスケ4.7にも対応しないといかんな
さすがに6まででしょ
それ以前への対応なんてほぼ骨折り損でベターですらない
よほど余裕があるなら好きにすればって感じだな
半年前のブラウザ占有シェア調査では1位がIE8(25%、連続1位)で、2位がIE6(15%、増加へ転向)だったからな。
最低この2つには対応で、後は任意かな
ベターっていうことなら、
>>370と、あと、FFとかOperaとか有名どころだけ押さえれば、まあ別にいいんじゃね、って思う。
スマン、占有率の数値を間違えてた。
IE8 26%、IE6 17%
(ちなみにIE7とIE8互換モード は別集計)
>>372 ちなみに7は?よかったら教えて。
7にした人はたいてい8にしてるから
6よりもパーセンテージが低い、ってことなのかな
>>373 7は確か11%。
企業ユースは6が多いし、7使ってる人って不人気OSのVISTA使いが多いんでしょうかね
「やること無くて超暇なら対応」ぐらいでいいだろ
XML宣言推奨を打ち消す規定じゃないな。
w3c自体、xml宣言を入れないことを推奨してるわけじゃないんだよね
w3c自身も「IE6が面倒だから」という理由が見え隠れしているような・・・。
俺は無難にxml宣言してるけどね
IE6が後方互換でもよっぽど凝ったデザインにしない限り大丈夫だ
セキュリティアップデート終わったブラウザに対応したら逆にダメだろ
>>376 ごめん、
>>360の二行目に突っ込んだつもりだった
HTTPヘッダに文字符号化を指定できるのはXMLに限らないHTTPの規定。
当然、HTMLも省略できる。
そもそも、XML宣言が文字符号化のためだけにあると思っているのがおかしい。
>>379 彼はHTTPヘッダで指定すれば省略可だけど推奨ってことで書くんじゃないか?
某大手メーカーのWebサイトガイドラインではWinIE5.5もいまだ対象だった
384 :
Name_Not_Found:2011/01/01(土) 13:00:55 ID:uySdSDUj
>>383 そういうのは大抵ガイドラインの更新のし忘れ、あるいは怠り。
大手がIE6を切れば少しは早く撲滅するかな
>>385 2014年のWindowsXpサポート切れまで待て
IE6はもういいよ
IE8が問題
388 :
Name_Not_Found:2011/01/01(土) 18:08:05 ID:L+td9HwC
大人しくIE八苦で個別対応
下手なことしなければIEでもなんとかなってる
px単位で細かく揃えようとするときついね
そういう問題ではなかろう
px単位でっていうのがそもそもアレ過ぎて….
細かい位置指定より、border等がうまく機能しないバグの方が問題じゃないか
それのせいで位置指定が大変ってことも含んでるんじゃ?
394 :
:2011/01/04(火) 19:23:53 ID:???
その場合は大抵pxなんて単位を超越してる
じゃあそんなものをpx単位で揃えようなんてアホということで終了だよね
px使わない奴ってだっせえテキストサイトしか作ったことないの?
いきなり何だ
どっちがいいじゃなくて、それぞれ使いどころありますがな。
人を馬鹿にするのもいい加減にしたらどうだ!!
でした
お正月だ。餅つけ。
あの頃は♪
っは!
昨夜、ふと気付いてしまった
コーマンとコーモンは一字違い!!!
ま、隣同士だからね
コーチンを入れて!(挿入的な意味で)
407 :
Name_Not_Found:2011/01/11(火) 10:19:34 ID:HblpUKIT
とあるdivにマウスカーソルが乗ったときに背景色が変わるようにしたいんですが、
どうすればよいでしょうか?
リンクではないのでa:hover以外の方法でありませんか?
神の光臨お待ち申し上げ奉ります。
>>407 JavaScriptでやったらいいと思います
神とかいっておだてあげてレスを誘発しようとするのは
自分では効果的と思ってるのかも知れないけど
みすぼらしいだけなので、やめたほうがいいと思います
>>407 div:hover
IE6以下にも対応したければJavaScript併用
411 :
Name_Not_Found:2011/01/19(水) 23:44:54 ID:RI1wcpYd
動作環境XP,IE8
ツール VisualStudio2010
問題
Site.css内の記述で
.header
{
position: relative;
margin: 0px;
padding: 0px;
background-image: url("../Styles/071111.png");
width: 100%;
}
と、webアプリケーションの雛型の背景色の部分を背景画像として変更した所
Site.Masterにも他のaspxにも反映されているのにデバッグすると背景色があった
ころのままになっています。甚だ困惑です。原因、対処法の判る方よろしければ
教えて下さい。
キャッシュ
413 :
Name_Not_Found:2011/01/20(木) 00:06:36 ID:M6ipxN6v
>>412 俺頭悪いわwwww
ありがとうございました即時解決です。
aspxの中身はきちんと更新されてるから
CSSだけキャッシュ優先とか思いもよらなかった。
1. div > div:first-child + div + div + a.test
2. div > div:first-child + div + a.test
3. div > div:first-child + a.test
1,2,3を一度に表記する方法はありませんか?
div > div:first-child( + div){0,2} + a.test
みたいに量を指定したいんです
div > div:first-child + div + div + a.test ,
div > div:first-child + div + a.test ,
div > div:first-child + a.test
416 :
Name_Not_Found:2011/01/21(金) 12:19:23 ID:c/reoNen
携帯サイトに用いるCSSはみなさまどうしてますか?
外部ファイルにしたりもできるみたいだけど、実機で確認ができんから実際どのぐらいまでの人にきちんと表示してもらえるかわからん。
まとめサイト的なものも探したけど、2〜3年まえのものばっかりなんだよな。
私はこうしてる、とか最近のこと書いてるページとかあれば、教えてください。
ドコモとかだと、link要素に加えて、style要素を使えないブラウザもまだ利用されてる
そういうブラウザだとstyle要素のセレクタには、a要素の疑似クラスしか指定できない
それ以外のセレクタを書いてしまうと、style要素の中身が晒されて、ページ内のstyle属性まで機能しなくなる
あとcolorやfontプロパティが指定できるのは基本的にspan要素のみ
418 :
Name_Not_Found:2011/01/21(金) 15:46:49 ID:c/reoNen
>>417 ありがとー
DOCOMOの場合、xhtmlがうんたらかんたらなんだよね。
いっぺんチョーシこいてxhtmlでつくったら
ウェブコンテンツヴューアでエラーでまくりで
上司からやめれと指示されたけど、
あのエラーってあてにしていいもんなの?
>>419 おおこりゃいい
ガラケって言葉も今おぼえた。
感謝します。
そんなんでよく・・・
DoCoMoのXHTMLは、HTTPヘッダとmeta要素の両方でContent-Type指定しとかないと
機種によってはCSSいかれるよ
423 :
414:2011/01/22(土) 00:18:01 ID:???
>>415 確かにそれでも可能なんですが、動的なサイトで、 + divの量が可変するんです
あるときには
div > div:first-child + div + a.test
でも、また違うときには
div > div:first-child + div + div + div + div + a.test
みたいに+ divが増減するんです
その度に + divの量を変更するのでは手間なので一意的に表現する方法はございませんか?
CSS3 兄弟
動的ならクラス名を振れるだろ
426 :
414:2011/01/22(土) 02:02:24 ID:???
>>426 div が a.test に先行するのは必要条件なの?
div>a.test:first-child ではダメ?
428 :
427:2011/01/22(土) 02:51:11 ID:???
あるいは、div>div:first-child~a.test かな。
繰り返し回数を任意にするセレクタはないので、完全に期待通りの動作にすることは出来ない。
GreaseMonkey でも使うか、セレクタの方を考え直すしかない。
<h2>ナビゲーション</h2>
<ul>
<ll>コンテンツ</li>
<li>...</li>
</ul>
よくあるマークアップだと思うのですが、CSSありだと見出しのナビゲーションを消す場合、SEOも考えるとどれが妥当でしょうか?
・display:none;
・背景色と文字色を同じにする
・z-indexでかぶせる
・インデントで画面外に飛ばす
見出し自体を消すとCSSオフのときに違和感があるのでテキスト自体は消したくないです。
悪気があって消すわけではないのですが、そう捉えられる可能性がありますよね?
検索エンジンでスパムになる境界がいまいち不明です
>>429 境界がいまいち不明なら消すな。
素人サイトがSEOなど考える必要なし
もっとも効果的なのは内容を充実させることだ !
432 :
Name_Not_Found:2011/01/22(土) 16:05:19 ID:8A+F191Z
::selection { background: rgb(255,255,255); }
で選択文字の背景を白にしたいんだけど、何故か真っ白にならずに背景が透ける。
rgbaで不透明に指定してみたけど効果は無し。 -mozは指定通り真っ白になる。
スタイルを上記だけにしたものだと、真っ白になるのだけど
背景かテキストシャドウを記述すると、透けてしまう。
これどうしてでしょう?
>>433 デザイン上の都合じゃね?
フッターの見出しとか自分も消すことあるよ
435 :
414:2011/01/22(土) 16:21:15 ID:???
>>427-428 ご回答ありがとうございます
お教えくださったことを試した結果、div>a.testで出来ました
兄弟の要素( div:first-child + div + div )は省略できたのですね。どうもありがとうございました。
436 :
:2011/01/22(土) 16:26:50 ID:???
>>435 遅レスだがそういった動的で複雑な条件を指定する場合は
htmlも書かんとなかなか理解しづらいぞ
>>432 #fffじゃだめなのか?
437 :
432:2011/01/22(土) 16:35:05 ID:???
>>436 レスありがとうございます
16進数、試してみたんだけど駄目でしたわ
ユニバーサルセレクタで不透明度100%にして、リセットを試みるも効果なし
デフォルトのライトブルーでも透けてるので、WebKitの仕様かなと思って一旦諦めます
>>437 ::-moz-selection は有効で ::selection は無効ということかな。
Firefox では先行実装扱いになっているからベンダー接頭辞が必要となる。
他のブラウザでもベンダー接頭辞が必要な扱いとなっている可能性があるので、接頭辞を入れて検証してみるといいと思う。
440 :
432:2011/01/22(土) 19:38:23 ID:???
>>438 紛らわしくなってしまって申し訳ない。
Gecko用に ::-moz-selection で記述したものは、Gecko系ブラウザで望み通りになるのだけど
特に接頭辞の必要のないWebKit用に書いた ::selection では、WebKit系において透けてしまうという事ですわ。
因にWebKitでは、擬似要素selectionに接頭辞を付けると無効になってしまうようで。
444 :
432:2011/01/23(日) 22:03:09 ID:???
>>443 いやー色々とどうも有り難うございます。
仰るように、それぞれのエンジンに対応したコードを書き、それぞれに効いている上で
微妙に選択色を透けさせてしまうWebKitのレンダリングに対する疑問だったんです。
>>432 大した問題ではないですし、仕様だと思うので諦めました。
誤解させてしまって申し訳ない。
445 :
Name_Not_Found:2011/01/26(水) 15:42:12 ID:6rqJuliC
一から作り直した方が早いんじゃない
>>445 CSSの記述のどこかをミスってるんだよ
多分、凡ミス
449 :
Name_Not_Found:2011/01/26(水) 22:48:49 ID:6rqJuliC
445です
>>477 「IE CSS ずれる」とかで検索したり質問サイトを見たりです
CSSやHTMLの知識が無いからどこをさわったらどうなるかが
分からなかったので質問が悪かったのはすみません
まず、CSSの基本的な知識を身につけて、それでも分からなかったら質問して下さい。
ボクもここで質問したかったんだけど、やめたよ。
ここ、怖いおじちゃんがいっぱいいるんだから。
>>453 まともな回答もあるんだよ、とはいっておきたい。
過度な期待をされても困るけど。
最近、答えようと思える質問がめっきり減ったよ。
>>452 指摘されて質問内容が悪かったと思ったから消しただけ
もうちょっと穏やかな雰囲気にならないものか。
回答者には同情するが、それでもなあ…。
ゆとりの相手はしてられん
>>456 証拠隠滅の意味が分からないのですが何に対してですか?
>>447に「まず「色々調べた」とは何を調べたのか聞きたい
そもそも何がどう違うのかも言わずにこれ見て答えろは酷い」
って言われて、抽象的で分かりにくい質問だったと思ったから削除したまでです。
他のところで質問していることを聞いてはいけないルールでもあるのですか?
それならば謝罪しますけど。
追加
質問サイトにした質問に対する回答はまだゼロでした。
>他のところで質問していることを聞いてはいけないルールでもあるのですか?
そうです。詳しくは「マルチポスト」でぐぐれば分かります
謝罪して金輪際ネットから姿を消してください
463 :
456:2011/01/27(木) 01:36:13 ID:???
464 :
456:2011/01/27(木) 01:45:33 ID:???
一つ忘れた。
> 証拠隠滅の意味が分からないのですが何に対してですか?
「マルチポストをなかったことにする」という意味での証拠隠滅。
後からここを見た人はマルチポストがあったことさえわからない。
マナー違反してしまったことは謝罪します、すみませんでした。
回答しようとしてくれた方はありがとうございました。
>>465 もうあのサイトはダメだろ。
2chはおろかネットに疎いようだし
荒らされて終わり。
身の丈にあったサイト作りなよ。
>>449 >>2ちゃんねるのニュース☆ネタのまとめブログ
が下にずれるということでいいの? 何を聞いているのかはっきりしない
レイアウトや文字が具体的に何なのか言わないし、個別のページというのも存在しないから分からない
IE8で表示が標準モードだと、旧IEのバグは継承されないからずれない
互換モードだと、description の line-height が padding と競合して高さがずれるんだと思う(未検証)
IE7以下を無視して強制的に標準モードするMETAタグを付けるか、CSSでハックするか
line-height を バグを加味して font と padding から逆算した実数にするか、使わないようにするか
空のページの状況から先のことは分からない
CSSの継承について質問です
html
<body>
<p id="description">ああああ</p>
<p>いいいい</p>
css
* {margin: 0; padding: 0; font-size:100%;}
p#description {background: #ffffff;}
p {font-size: 150%}
例えばこの場合、p#descriptionのほうにもfont-size:150%が継承されますよね?
これを継承させないようにすることって可能ですか?
適宜、100%を指定しないと無理でしょうか?
「idやclassが指定されていない場合はこのフォントサイズを指定」みたいなことを想定しています。
p {font-size: 150%}
p[id], p[class] {font-size: 100%}
しつこく言っておく。
>>456は、非常にひつこい。
こういう類のやつを「ネット弁慶」と呼ぶ
>>467 わざわざ調べていただいてありがとうございます。
マルチポストのことを知らなかったので
質問サイトにも質問をしていました、すみませんでした。
怖いおにいさんにまた叩かれちゃうので書き込みは控えます。
自分のことは棚に上げて他人を怖い物扱い
爆釣ですね。おめでとう
いつまで引っ張るんだよ糞虫ども
>>467 個別記事の2chのコピペ文章が
カラムから外れフロートされていた
>>476 バグでfloatのmarignが倍になったか、中身のmarginが相殺されず肥大してカラムが崩れたとか
ソースだけじゃ面倒くさいしもう知らね
>>477 わざわざ調べていただいてありがとうございました。
理由は分からないけど記事のHTMLのタグの付け方が悪かったみたいで、
なんとか解決しました。
ご迷惑をおかけしてすみませんでした。
479 :
Name_Not_Found:2011/01/28(金) 19:28:32 ID:cSZTy+p4
ie6のバグでmargin:auto;がきかないので
このようにしてセンタリングしてますけど
body{
text-align:center;}
div.wrap{
width:800px;
margin-left:auto; margin-right:auto;}
body自体に横幅、margin:auto;を指定してやれば
ie6でも普通に機能するんですね。さっき気付いたw
body{
width:800px;
margin-left:auto; margin-right:auto;}
>>479 わりと良く勘違いされるが、margin-left:auto; margin-right:auto; が無効なのは後方互換モードの時だけ。
↓div厨だなこりゃ。
<div style="background-color:cyan; min-height:100px;">
<div style="background:url(image.png) no-repeat; min-height:100px;">
<div style="margin-left:200px;">
タイトル<br>説明文説明文
<br>
〜<br>
説明文説明文
</div>
</div>
</div>
あるいは
<img>をpositionで位置調節してmargin-leftでいいんじゃね。
<table>でもいい気がするけど。
どうも
display:block
<a href="aaa.html"><img src="aiueo.jpg"></img></a>
aタグで囲まれた画像にマウスオーバーしたときには pointer 、
<img src="aiueo.jpg"></img>
imgタグのみの場合は default っていう風にする方法教えてください
a:hover
{ cursor: pointer; }
img:hover
{ cursor: default; }
とやってもどちらの場合もカーソルの形が default になってしまいます
486 :
Name_Not_Found:2011/01/31(月) 00:47:49 ID:STSQUKFG
a img:hover
{ cursor: pointer; }
どうもです
質問です
<div id="〜" class="〜">
と1つのdivに同時に設定しているのを見かけたんですが
何か意味があるんでしょうか?
idはCSSだけのものじゃないよ
JavaScriptなんかでも使う
>>489 javascriptでも使うんですね!ありがとうござます
でももしこれがCSSのIDセレクタだったらどういう意味があるんでしょうか?
>>488,490
id はフラグメント識別子の役割もある。
CSS としてはカスケード処理の関係で複数付けることも良くある。
<div id="Sample" class="hoge foo piyo">
無理して #Sample にまとめるより分けた方が管理しやすいことも多い。
>>491 ありがとうございます!参考になりました!
いいえ!どういたしまして!
>>491 IE6では確かclassは2つまでしか指定できないんでしたよね。
で?
ぶ?
女
>>494 IE6 では .hoge.foo が効かないが、class="hoge foo" は出来るから運用次第では使えるはず。
例えば、タブ型のUIを作りたいとする。
全てのタブは統一されたデザインを持つので、class="tab" を指定する。
その中で一つだけアクティブなタブが存在するので、アクティブなタブには class="active" を追加指定する。
最後にフラグメント識別子のために id を指定する。
<style>
.tab { border: solid 1px black; background-color: glay; }
.active { background-color: white; }
</style>
</head>
<body>
<ul><li><a href="#HTML">HTML</a></li><li><a href="#CSS">CSS</a></li><li><a href="#JavaScript">JavaScript</a></li></ul>
<div id="HTML" class="tab">HTML の解説</div>
<div id="CSS" class="tab active">CSS の解説</div>
<div id="JavaScript" class="tab">JavaScript の解説</div>
htmlに
<div id="header">
<p>テスト</p>
</div>
と書かれている時のcssファイル指定には
#header{
border:solid 3px #000000;
}
と
div#header{
border:solid 3px #000000;
}
の二通りの書き方があると思いますが頭にdivを付けない場合と付ける場合とでは何か意味が変わるのでしょうか?
参考書にはよく 「 div#header{ 」と書かれています
「 #header{ 」は「 *#header 」の省略形とも書かれていますがID名は1箇所にしか指定できない事のことで
htmlに <div id="header"> と書いた場合、div#header{と書いた他に例えば「 ul#header 」という別の指定は出来ないと思うのですが
id名のheaderはdiv要素に使われていると一目で分かると言う以外に何か重要な役割を果たしているのでしょうか?
>ID名は1箇所にしか指定できない事のことで
そう。だから明示的であるという以外の意味はない。本来はね。
>参考書にはよく 「 div#header{ 」と書かれています
そんなはずはないと思うがどちらにせよ書いた奴の考えまでは知らんな。もしかしたらdivから書かなきゃいけないと勘違いしてるかもしれんし。
501 :
499:2011/02/02(水) 17:47:30 ID:???
#header{ と div#header{ はどちらの書き方も文法的(?)な間違いではなく考え方や好みの違いであり、
どちらかに個々が統一して書いていれば問題はないとの事かな
私の持っている本は div#header、 div#global-nav p#bannerなどの書き方に統一されていたので
#header{ との違いにふと疑問を持った次第です
モヤモヤが解消されそうです ありがとうございます
要素名をつけない方がごく微妙に早いらしい
やだあたしdiv付けてる怖い…
>>500 ごめんなさい、あたしタチなの
footerがっちり芋系が好きなんだけどスペックは?
P16px
タチって何
テーブルで表がいくつもあるサイトを作ろうと思っています
サイズが違うので一つ一つcssで設定するつもりです
ただデザインは統一したいのでborderやbackgroundなどデザイン部分まとめてだけ設定することってできますか?
510 :
Name_Not_Found:2011/02/05(土) 11:00:23 ID:y+Zyzrxr
一つ一つ違うものはidで指定して、
共通して使うデザイン部分はclassで指定する
>>510 <table id=***** class=*****>とするってことでしょうか?
idとclassを一緒につけれるってことをはじめて知りました
ありがとうございます!
他のスレでも聞いたのですが、相手にされないのでこちらに移動しました
お忙しいところすみません
当社のDQN社長から2月19日までに会社のHPを作れと言われました
ブログしかやったことがない自分には難題すぎます
「実践 Web Standards Design Web標準の基本とCSSレイアウト&Tips」という
本を買って頑張ってみたのですが無理でした・・・
↓レイアウトは決まっているのですがCSSがわかりません
http://nagamochi.info/src/up53810.gif どなたかCSSを教えてください
宜しくお願い致します
>>512 近所にホームページ教室がないかタウンページで調べて味噌
で、いくら払うんだい?
>>512 初心者には難易度が高すぎる。
基本のレイアウトも作れないレベルなら無理だと思う。
レイアウトができてもその先で必ずつまずく。
>>512 ブログにしたら?
ならテンプレに似たようなのがあるかも
もしかすると作者に頼めば作ってくれるかも
517 :
Name_Not_Found:2011/02/05(土) 20:28:42 ID:fDrWbt9R
>ブログしかやったことがない自分には難題すぎます
ブログが自由自在に操れるならcssなんて簡単だろ
FC2ブログはhtmlとcssの両方をカスタマイズできるから
それでやってみれば?
>>517 自由自在に操れるとはどこにも書いてないぞ
ブログしかできない人って、htmlすら理解してない人が大半だ
普通のサイト作りに挫折してブログに流れた人も多い品
521 :
Name_Not_Found:2011/02/06(日) 11:47:46 ID:NA0YtQF3
そのようだなw
IE8ですが、XPと7で、表示が異なります。
原因は何が考えられますか。
D0CTYPE宣言してません。
MakeShopを使ってるんですが、そこの仕様のため。
それぞれ互換表示、非互換表示で比べましたが、
やはりXPと7で異なります。
XPのIE8をベースにしてたので、
7のIE8だと画像がずれてるところがあるんです。
ふたつの表示を合わせるのは難しいでしょうか。
いやDOCTYPE宣言しろよ
>>526 本当に、宣言したいです。
MakeShopの仕様で宣言できないから
ブラウザごとの表示ずれを解消するのに
苦労してます。
今回は、同じブラウザでずれが出てるので、
どうしていいのか、行き詰まってます。
問い合わせた方がいいんじゃない
文法滅茶苦茶でそもそも宣言のしようがないのかもしれないけど
530 :
525:2011/02/08(火) 20:05:01 ID:???
>>528 <head>内を触れない仕様なんです。
だから、cssやjsを外部読み込みするためのコードは、
body内に記述しているんです。
それでも、動くので、
このへんは、柔軟性があるんですね。
>>529 MSとメイリオの違いは、忘れてました。
書体のツラは、メイリオのほうが横幅がありそうなので、
そのへんは気にして組んでたんですが、
いまずれてるのは、jpg画像が本来より下にずれてるという状況です。
でも、どこかでフォントが影響を及ぼしてないか、
一度チェックしてみます。
ありがとうございます。
>>530 そのソフトがどうであれ
メモ帳で開けばいいだけだがな
ソフトじゃなくて糞ホスティングらしいよ
533 :
Name_Not_Found:2011/02/10(木) 14:24:54 ID:n8wGoT44
>>531 MakeShopでぐぐってみれば判るのに
>>530 CSSはリセットしてあるの?
画像はa要素?
535 :
Name_Not_Found:2011/02/10(木) 16:35:33 ID:ENeYxcbB
┌────────┬──┐
|┏━━━━━━┓| |↑
|┃ .┃| ||
|┃ .┃| | C
|┃ .┃| ||
|┃ .┃| ||
|┗━━━━━━┛| |↓
└────────┴──┘
. ←── A ───→← B →
A: ウィンドウの幅に合うように伸縮
B: ウィンドウの幅によらず固定
C: ウィンドウの高さに合うように伸縮
太線: ウィンドウの幅、高さによって伸縮するoverflow:scrollのボックス
↑みたいなボックスを実現したいのですが
どうしたらいいか教えてください。
せめて「こうしてみたんですがうまくいかない」と書いた奴を貼るぐらいはしてほしい
537 :
Name_Not_Found:2011/02/10(木) 19:05:28 ID:n8wGoT44
>>535 まず全体のレクタングルを定義する
次にAレクタングルを定義してから中のスクロール部分を定義
最後にBレクタングルを定義すればOK
簡単だよ
>>537は頭の悪い回答の例です。
みんなは真似しないようにね!
>>538 が頭のいい回答をしてくれるようですので、皆沈黙して待つべし。
>>539はヘタクソな煽りの例です。
みんなは真似しないようにね!
ケチが付いた質問は
>>538 に任せて、次の質問どうぞ
542 :
Name_Not_Found:2011/02/10(木) 21:24:56 ID:ENeYxcbB
では失礼して
┌────────┬──┐
|┏━━━━━━┓| |↑
|┃ .┃| ||
|┃ .┃| | C
|┃ .┃| ||
|┃ .┃| ||
|┗━━━━━━┛| |↓
└────────┴──┘
. ←── A ───→← B →
A: ウィンドウの幅に合うように伸縮
B: ウィンドウの幅によらず固定
C: ウィンドウの高さに合うように伸縮
太線: ウィンドウの幅、高さによって伸縮するoverflow:scrollのボックス
↑みたいなボックスを実現したいのですが
↓からどうしたらいいですか?
<div style="width:1000px;">
<div style="width:700px;float:left;">
<div style="width:600px;overflow-x:auto;overflow-y:auto;"></div>
</div>
<div width="width:200px;float:right;">
</div>
</div>
overflow-xとかって先行実装だよ
545 :
Name_Not_Found:2011/02/10(木) 23:25:35 ID:oed2uBP1
>>542 javascript使わないと無理じゃね?
少しはテーブルの使い方を勉強しろよ
レスアンカーぐらいつけろよ
550 :
Name_Not_Found:2011/02/11(金) 15:18:33 ID:o0lCCYmT
#container {
width:1000px;
margin:0 auto;
background-color:#fff;
}
#main {
width:800px;
float:left;
}
#side {
width:200px;
float:left;
}
<div id="container">
<div id="main">
aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa
</div>
<div id="side">
aa
</div>
</div>
containerの要素(白地の背景、高さ)がmain,sideに受け継がれないんですがどうしたらよいでしょうか?
そもそもcontainerに高さを指定していないようだが
背景色もinherit使わんと継承されんよ
inherit
すみません。
カラーはできました。
ただmainとsideの高さを揃えるにはどうしたら良いのでしょうか?
556 :
Name_Not_Found:2011/02/11(金) 22:28:26 ID:1csCD0bU
>>550 #container {overflow:hidden;}
#main,#side{margin-bottom:-32768px;padding-bottom:32768px;}
追加すれば高さそろう
>>554-
>>556 ありがとうございます
出来ました!
559 :
Name_Not_Found:2011/02/13(日) 09:28:48 ID:SaFohdPO
削除 #lie li {display:block;}
追加 #lie a {display:block;}
かな??違ったらfloatかも
てか、text-indent:-9999pxとか初めて知った
タグごとにちゃんとブロックレベルなのかインラインなのか見ておいた方がよくないか?
> margin-bottom:-32768px;padding-bottom:32768px;
> text-indent:-9999px
何かまともでないHack臭がしますが、将来的にも大丈夫なの?
小手先こねくり集を見てスゲーって思ってやってみたってとこかな ?
>>text-indent:-9999px
h1とかSpriteメニューのliを、画像だけにしたい時によく使われる
例えばYahooとかAppleとか
だんだんと減ってきている気がしなくもないけど
564 :
Name_Not_Found:2011/02/13(日) 17:49:02 ID:IjIxUKDf
IE 6とIE 7を無視できるようになったら、画像置換は、before/after疑似要素に生成内容としてdataスキームURIの画像を入れる手法が一般的になると思う。
>>561 後者はCSSの仕様的に将来的にも恐らく大丈夫
前者はUA依存らしいからそのうちポシャる
566 :
Name_Not_Found:2011/02/13(日) 19:07:09 ID:IjIxUKDf
>>565 > 後者はCSSの仕様的に将来的にも恐らく大丈夫
> 前者はUA依存らしいからそのうちポシャる
根拠を示せますか?
>>561 > margin-bottom:-32768px;padding-bottom:32768px;
そもそも>553の要件を満たせていない。
ボックスに border を適用したら border-bottom が見えなくなる。
> text-indent:-9999px
どんな形であれマークアップされたテキストを読めなくするのはSEO対策的によろしくないので、今はあまり使われない。
568 :
553:2011/02/13(日) 19:38:19 ID:???
marginの件は間違えて書いてましたw
text-indentを使わない方がいいとなると、みなさま画像置換はどうされていますか?
569 :
Name_Not_Found:2011/02/13(日) 20:16:40 ID:IjIxUKDf
>>567 > > margin-bottom:-32768px;padding-bottom:32768px;
> そもそも>553の要件を満たせていない。
> ボックスに border を適用したら border-bottom が見えなくなる。
確かにその通りです。
「margin-bottom:-32768px;padding-bottom:32768px;」は、正確には背景が描かれる範囲を拡げるテクニックであり、高さを合わせるテクニックではありません。
ということは、背景が描かれる範囲を拡げる目的であれば、使っても差し支え無いと思います。
>>568 現時点では素直にimg要素。
将来は
>>564の方法を使うと思います。
>>567 いやいや適切なマークアップのために使うもんだろう
571 :
567:2011/02/13(日) 21:17:19 ID:???
俺は >565 ではないが、レスをもらったので…。
>>569 > 但し、ブラウザが理解できる値は-32767〜32767ですので、その範囲外の数字は指定しないでください。
>
http://scuderia-web.com/tips/xhtml_css/equal_box_heights.php 32767 の値に根拠が欲しい。
少なくとも CSS3 では規定されていない。
http://www.w3.org/TR/css3-values/#numbers 実装依存なら 32768px に依存すべきではない。今後、実装が変化する可能性が高い。
>>568 >569の指摘通り、現在は <img src="foo.jpg" alt="テキスト" /> が妥当だと思う。
bot はaltテキストも解釈してくれる。
.hoge { background-image: url("hoge.jpg"); text-indent: -9999px; }
このスタイルには2つの問題がある。
・background-image を前景画像であるかのように使っている。(前景画像はimg要素でマークアップすべき)
・text-indent: -9999px; でテキストを読めなくしている。(検索エンジンスパムと判定される可能性がある。9999px の値に根拠がない。確実に見えなくなることが保証されない。)
基本的に実装を信用すべきではないと思う。
572 :
556:2011/02/13(日) 23:16:11 ID:SaFohdPO
>>567 >561
> margin-bottom:-32768px;padding-bottom:32768px;
> そもそも>553の要件を満たせていない。
> ボックスに border を適用したら border-bottom が見えなくなる。
divを被せてborder-bottomとゆー手があってな・・
>>571 >32767 の値に根拠が欲しい。
とりあえず、自分は20000ぐらいまでにしときます。
てか、553の現状がわからないw
574 :
556:2011/02/13(日) 23:46:05 ID:SaFohdPO
とりあえず現状はIE6でも最新の5ブラウザでも32768で問題ないです。
将来はわかりませんけど。
575 :
567:2011/02/14(月) 00:13:00 ID:???
>>573 ありがとう。IE (バージョン未記入) の実装依存なのか…。
>>572,574
値の問題ではなく、「実装は仕様と比べて不安定だから仕様に準拠すべき」ということを伝えたかった。
全ての実装を確認したとして、ブラウザが更新されて実装が変わる度にコードに修正を加える、なんて面倒くさすぎるんじゃないだろうか。
また、固定値を与える方法は一定の条件を満たさないと期待通りに動作しない。
・32767px 以上の高さのボックスが形成されたときに margin-bottom:-32767px; は破綻する。
・9999px 以上の幅のボックスが形成されたときに text-indent: -9999px; は破綻する。
>554 のように既に CSS に用意されたプロパティがあるのだからそちらを優先して使うべきだと思う。
その上で IE7- だけ処理を分ければいい。JavaScript で対応するか、先述のCSSハックを使うか。(前者の方が安定している)
CSSに限らないが、最も低機能な実装に合わせて不安定なコードを全てのUAに適用するのは無駄に不安定要素を大きくするだけなので、お勧めしない。
576 :
556:2011/02/14(月) 00:34:27 ID:tvSEGdP8
>>575 勉強になりました。ありがとうございますm(_ _)m
> そちらを優先して使うべきだと思う。その上で IE7- だけ処理を分ければいい。
そこまでするぐらいなら、素直にtableタグを使えば済むのに と思うんだが
この流れでなぜtableレイアウトを勧めるんだろう。
どのあたりが素直なのかわからんが
boxは先行実装だしtable-cellはtable-rowの中に入れないとあかんし
580 :
567:2011/02/14(月) 09:28:03 ID:???
>>580 tableもrowもcellも省略できるのか。便利だなこれ
>>569 imgは全然素直じゃない
あれは画像がメインの場合であって、メニューの文字を画像に置き換える類のものではない
>>582 テキストを画像に置換する実装が素直じゃない、ということかと。
text-indent: -9999px; が素直な実装とは思えない。
素直=楽 って意味で言ったんじゃないん
みんなimgにしないのは、altが要素の代替ではないと考えるからかね
CSSで飛ばした方がHTMLに無理がないと
あとはz-indexか
587 :
569:2011/02/15(火) 03:05:33 ID:DNB9Oy2K
>>583 「現時点では(昔からの習慣に)素直に(従って)img要素(を使います)。」と補完してください。
img要素が理想的な画像置換じゃないことは私も承知しています。
本来内容となるべきテキストを属性値に追い遣るのは変だと思います。
しかしながら、それ以外には、もっと気持ち悪い方法か、理想的だけど実装が追いついていない方法のどちらかしかないのです。
テキストを飛ばす方法は、
>>571の指摘する「2つの問題」がありますし、
さらに画像が読み込まれなかったときにテキストが表れないという欠点もあるので、好きではありません。
588 :
569:2011/02/15(火) 03:16:35 ID:DNB9Oy2K
CSS3では、疑似要素ではない、普通の要素の内容も生成内容で置換できるようになります。
(
http://www.w3.org/TR/css3-content/#inserting3)
foo {
content: url(...), contents;
}
これが理想的な画像置換でしょうが、広く実装されるまで別の方法で我慢するしかありません。
CSS2で、生成内容はbefore/after疑似要素特有のプロパティでした。
じゃあ、before/after疑似要素に画像を生成して代替手段としよう……と言いたいところですが、
before/after疑似要素をサポートしないブラウザがまだ広く使われています――IE 6とIE 7です。
IE 6とIE 7を無視してよくなったら、before/after疑似要素による画像置換を採用し、
CSS3の時代になったら、普通の要素の内容を生成内容で置換する方法に切り替えると思います。
589 :
Name_Not_Found:2011/02/15(火) 10:08:03 ID:YPlNEjKd
糞IE6対策で標準モードの記述をし、
ローカルで問題無くセンタリングで表示したので鯖に転送したら左寄せ…。
なんだよ、ソースの先頭に自動広告が付いて、強制的に後方互換モードじゃん!
久々に初心者やらかしたw
あーあ、また「text-align:center;」のお世話になるのね。
糞広告が入った時点でそれはもはやHTMLじゃない……
ヘンテコな無料鯖の広告はHTMLを阻害する
592 :
Name_Not_Found:2011/02/17(木) 03:01:13 ID:8zKACwJ8
letter-spacingで横幅を取りたいのですが
1px以下の単位はないのでしょうか?
0だと窮屈ですが、1pxだと開きすぎな気がしてます
小数点知らないの?
でもIEだと0.5単位でしか効かなかったかな?
スクリーンで0.5pxとかできるのかよ
A:hoverにtext-decoration : underline;を記述しているのですがマウスを当てたときに下線が出てきません
要因として何が考えられるでしょうか?
マルチ止めれ
180 Name_Not_Found [sage] 2011/02/17(木) 17:50:35 ID:??? Be:
cssでA:hoverにtext-decoration : underline;を記述しているのですがマウスを当てたときに下線が出てきません
要因として何が考えられるでしょうか?
>>596 一々うるせえぞカス
お前にはまだ2ちゃんは早い回線切ってロムってろ
だまっとけよおっさん年がバレるぞ^^;
>>597 回線切ってROMwwwwwwwwwテラ矛盾wwwwwwwwwwwwww
よ〜しパパ 回戦切ってROMちゃうぞ〜〜
回線切るとかテレホーダイかよ
ページを表示するときに背景色が遅れて表示されるんですが、CSSに問題があるんでしょうか?
HTMLが問題なのか、ブラウザが問題なのか、サーバーの性能が問題なのか分からないので原因を探ってます。
テレホタイムに保存して、後で読んだりしてたな
605 :
Name_Not_Found:2011/02/18(金) 14:20:19 ID:YSS34YOL
<body>
<uho!iiotoko>
<ah!!>
</body>
>>603 cssファイルを一番最後においてないか?
head内においてみ。
な ん な ん だ こ の 低 ラ ベ ル は !
>>608 お前の寝てる間に、口の中にカメムシ100匹入りますように。
まだカメムシは食ったことが無い
パクチーで代用すれば良し
612 :
Name_Not_Found:2011/02/20(日) 12:29:54.12 ID:idSymTrd
既出ならごめんなさい。
下記にbox-shadowを適用させる良い方法教えて下さい。
・IE7以後
・divの枠
・divの枠内背景は透過png(5×5を並べてる)
現状では、カラムが崩れたり、背景全部が黒くなったり、
まったく違う場所に影ができたりと、上手くいきません。
たぶん、私の技術不足が重なっておかしくなってるのだと思います。
そこで、皆様お勧めの方法に絞って、検討したいと思います。
613 :
Name_Not_Found:2011/02/20(日) 13:17:58.95 ID:6sOwfSHS
615 :
Name_Not_Found:2011/02/20(日) 15:54:01.25 ID:idSymTrd
>>613,614
ありがとうございます。
枠内の背景自体も黒くなってしまいます。
単一色の背景だと大丈夫です。
そこで、よろしければ追加質問させて下さい。
原因はどちらでしょう?
・そもそも透過pngと併用できない。
・私のやり方が間違ってる。
616 :
Name_Not_Found:2011/02/20(日) 22:15:49.70 ID:hzRvTuWp
>>615 #a{width:100px;height:100px;filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#999999');}
#a div{width:100px;height:100px;background:#fff url('hoge.png');}
<div id="a">
<div></div>
</div>
617 :
Name_Not_Found:2011/02/21(月) 01:29:32.88 ID:c+YD+p//
肝心な事かを書き忘れたけど、バグだけじゃなくて未対応タグとかにも効く
DWMXをずっと使ってたんだけど
プレビュー機能の無能さにいい加減イライラするので
何かいい感じのCSSエディタないかなと思ってるけど無いですか
DWはCS3が欲しいんだけど今探してもないし
更にDWは学生の時に買ったのでその時は安かったけど
流石に卒業した今ではDW高くて手が出せない
MACだとCODAとかがいいって聞くけど
Windowsで探してます
622 :
Name_Not_Found:2011/02/21(月) 09:38:58.38 ID:j8NH73Li
>>616 ありがとうございます。
やっぱり透過無くさなくてはいけない感じですね。
>>618 ありがとうございます。
ちょっと私の技量では上手くいかなかったのですが、
このようなのを使う方向で検討進めたいと思います。
>>622 基本、フォトショップでデザイン組んで
素材作って、それをCSSでコーディングってスタンダードな方法なんだけど
以前はCSSじゃなくてテーブルだったから、DWMXだと
フォトショでスライス切ってDWでソース修正で鬼速だった
けど、MXのプレビュー機能がCSSに追いつかなくなってからはもうグダグダ
プレビュー機能が少しも役に立たないから便利な所が一つも無くなった
様はテーブル時代の時のようにCSSも問題なく
さくさく同時プレビューしてくれよという所です
625 :
</a>:2011/02/21(月) 12:44:06.08 ID:???
test
MX古すぎだろw
テーブルレイアウトなんて
ださすぎ
HTMLコーディングするだけならMXで十分
日本語UTF-8も正常に動くし
>>620 CS3のプレビューは無能だよ
DWのプレビューがまとに使えるのは、WebKitに乗せ換えたCS4以降
>>626 いまテーブルは使ってないよ
CSSつってんですが
>>628 そうなんだ!
なんかCS3なら大丈夫って言われてた気がしたけど4からだったのか
有難う御座います助かります
にしても、高いよ・・・高いよDW・・・
ie6のコメントバグも結構困り者だったな
<!-- 死ねie6!! -->
↓
<!--[if !IE]> 死ねie6!! <![endif]-->
cssの記述に間違いがあると思って何時間費やしたか。。。
>>630 それはバグなのか…。条件付きコメントなのでは?
条件付コメントにするのは、コメントバグの回避法らしいよ
コメントバグwww
何年か前に発生したなぁ。
初心者ですがお願いします。
このサイトのフォントを変更したいと思います。
http://kenji1234.blog75.fc2.com/ /* フォントを変更する */
body{
font-family :'IPAMonaPGothic','MS Pゴシック',sans-serif !important;
}
上記の内容を、サイトのcssの何行目に挿入すれば良いですか?
文字コード指定以降ならどこでもいい
>>637 すばやい回答をありがとうございます。
本当にすみませんが、文字コード指定とはどこですか?
ぐぐったのですがよく分かりませんでした。
お願いします。
ぐぐって分からんとは重症だな
んじゃ猫でも分かるように教えてあげよう
「1行目じゃなければどこでもいい」
>>639 分かりやすい説明をありがとうございます。
1行目以外に挿入してみたのですが、なぜかフォントが変更されません。。
何がおかしいのでしょうか?
>>641 できました!感動です!ありがとうございました!
ユーザースタイルシートでぐぐれ
ユーザースタイルシートを変更しました。(macでsafari使用です)
どうやら全てのサイトに適用されるみたいで…。
2ちゃんねるだけをモナーフォントにしたいです。
分かる方いらっしゃったらどうぞお願いします。
ユーザースタイルシート Safari でぐぐれ
上位300件くらい読んでも分からなかったらまた来なさい
うむ、解決法をしっかり報告
模範的な質問者でござる(^^)v
651 :
Name_Not_Found:2011/02/28(月) 18:03:07.94 ID:Z3DA+QVS
稀にみるw
外部CSSでテーブルを制御したいのですが二つ質問です
3列のテーブルで全体の幅を500pxとする時
100px、200px、200pxで固定したい場合は
どうすればいいでしょうか?
あと一行ごとに背景色を#FFFFFFと#CCCCCCで
交互に変えたいのですがこれもCSSで一括で指定できますでしょうか?
よろしくお願いします
1.それぞれのカラムにクラスを付与して横幅を指定する
2.「css nth-child(even)」でググれ
div{display:inline-block;vertical-align:top;}のときに、
☆<div>a<br>b</div>とすると、
┏━━━━┓
┃☆a ┃
┃ b ┃
┃ c ┃
┃ ┃
┃ ┃
となってくれますが、
☆<div>aaaaa<br>bbbbb</div>とすると、
┏━━━━┓
┃☆ ┃
┃aaaa┃
┃a ┃
┃bbbb┃
┃b ┃
となってしまいます
これを、
┏━━━━┓
┃☆aaa┃
┃ aa ┃
┃ bbb┃
┃ bb ┃
┃ ┃
とするにはどうしたらいいのでしょうか?
CSS2.1以下で優しく教えてください
>>654 body {font-size:80%;}
なにが
優しく
だ
>>654 それはどうみても inline-block の挙動じゃない…。
659 :
658:2011/03/01(火) 15:22:30.20 ID:???
失礼。CSS2.1 では無理だな。
>>654 HTML5 なら <wbr> が使える。Opera の実装が追いついてなかった気がするが。
質問失礼致します。
table内でpaddingを指定してもie6では表示されないのですが、以下のような場合、「あ」の前にpaddingをとろうとするならどういった記述にすればいいでしょうか?
文字列をclassで指定してmarginをとるべきでしょうか?
<table>
<tr>
<td>あいうえお</td>
</tr>
</table>
すみません。
youtubeをブログに埋め込んだ時、画面を上にスクロールしたら、
埋め込んだyoutubeだけが最前面に表示されるのが嫌で、背面に直したいのですが。。。
対応できるCSSとかありますでしょうか><
Firefoxでは問題なく背面でスクロールするのですが、IE8では最前面になります><
初心者ですみません。。。
ブログに、PrettyPhotoをプラグイン追加したら、画像広告が出現したのですが、消す方法(CSS)はありますか?
>>664 PrettyPhotoの規約読みなおせ。
おまえのブログ、アクセスないだろw
>>665 アクセス少ない人だけに表示されるとかですか?w
規約の場所分かりません。。。
ハッハワロス
>>666 広告は消しちゃだめなんだよ。
おまえ成績もわるいだろ。
>>662 ありがとうございます。
Googleの<if 〜>でブラウザ別に対策できると聞いて、埋め込んだのですが改善されませんでした。
効果はあるのでしょうか?
>>668 あのぉダメなのは分かってますw
その上での質問となっております^^
そんな簡単なこと一々聞くなよ^^
お前が死ねばそんな悩みなんてなくなるよ^^
ハッハワロス
 ̄ ̄ ̄ ̄ ̄ ̄ ̄○ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
O 。
, ─ヽ
________ /,/\ヾ\ / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
|__|__|__|_ __((´∀`\ )< というお話だったのサ
|_|__|__|__ /ノへゝ/''' )ヽ \_________
||__| | | \´-`) / 丿/
|_|_| 从.从从 | \__ ̄ ̄⊂|丿/
|__|| 从人人从. | /\__/::::::|||
|_|_|///ヽヾ\ / ::::::::::::ゝ/||
────────(~〜ヽ::::::::::::|/ =完 =
>>670 ママに許可とってから
パソコンさわろうな。
>>670 「ダメなのはわかっているけど、これから君のサイトを荒らしたいからURLを教えて」っていったら、教えてくれるのかな?
>>670 ダメなのはわかってるけど、今すぐ会いたいから電話番号教えてくれるよね
そしたら方法おしえるよ^^
CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。
※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。
但し、当然ながら違反行為の回答はNG
知らない人のレスはいりません
アナタはワタシを知りません
えっ ? ひろちゃんだろ ?
684 :
sage:2011/03/03(木) 15:53:46.72 ID:U5RlTzwm
質問させてください
普通のHTMLページにlightbox2を設置したのですが
レンタルサーバーにUPして確認してみるとうまく表示されませんでした。
cssもjsファイルも絶対パスに書き換えたのですが、なぜでしょうか?
>>684 > 普通のHTMLページにlightbox2を設置したのですが
普通とはなんぞ
> レンタルサーバーにUPして確認してみるとうまく表示されませんでした。
どう表示されたの?
> cssもjsファイルも絶対パスに書き換えたのですが、なぜでしょうか?
そのパスは合ってるの?
そしてはげしくスレ違い
>>654 そういうのは、ul>liでやるべきじゃないか?
687 :
sage:2011/03/03(木) 19:15:57.45 ID:U5RlTzwm
>>685 ごめんなさい。自己既決しました。
勉強しながらHP今作ってるんですが、ページ内で使うフォントは
1. "MS ゴシック", "MS Gothic", "Osaka−等幅", Osaka-mono, monospaceと
2. MS P明朝, MS PMincho,ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, serifと
3. MS ゴシック, MS Gothic, Osaka−等幅, Osaka-mono, monospaceの中なら
どれを設定するのが一般的ですか
何も指定しないのが一般的
2,3は書き方が間違ってるから消去法で1番
>>687 一般的なのがいいの?それより自分がよく見るとことおなじにすればいいんじゃね?
3つともダメだな
>>687 とりあえず、等幅かプロポーショナルかぐらいは自分で決めような。
後は、色んなOSや国(?)に合わせて無難なフォント選んでいけ。
ちなみに、yahoo見たらこんなんなってたぞ。
font-family:"MS PGothic","Osaka",Arial,sans-serif;
フォントのptとem、%の使い分けってどうやってますか?
適当
好きなので
698 :
697:2011/03/07(月) 17:16:25.74 ID:XlTmgfE+
ageわすれ
699 :
697:2011/03/07(月) 18:53:46.83 ID:???
ローテーションバナーで検索したらでてきました。
ありがとうございます。
700 :
Name_Not_Found:2011/03/08(火) 06:50:29.82 ID:Lpx9d7kR
centerで中央配置した2つの要素(id="bbb"とid="ccc")を同じ位置に重ねたいのですがCSSだけでできますか?
<div id="aaa" style="text-align:center;">
<div id="bbb">BBB</div>
<div id="ccc">CCC</div>
</div>
701 :
Name_Not_Found:2011/03/08(火) 08:41:02.07 ID:Lpx9d7kR
重ねたいってのはdivブロックの左上端を同じにしたいってことです。
#CCCをマイナス補正すれば?
>>696 意識しないで製作する人間はド素人だけだよ。
ヒントは文字ベースのレイアウト
>>693 コンテンツによる。
・画像中心なら px
・文字中心なら em
% は親要素に依存する。親要素の font-size が em や px なら上と同じ原理。
ルート要素から % ならデフォルトスタイルシートに依存する。どんな font-size でもレイアウトできるように組まないとダメ。
706 :
700:2011/03/09(水) 15:18:20.57 ID:zUuYVIvM
text-align:centerで画像<img id="xxx">を<div id="aaa">の中央に配置して
画像<img id="xxx">と同じ幅・高さのボックス<div id="bbb">の中の
左上角に画像<img id="yyy">を、右上角に画像<img id="zzz">
を画像<img id="xxx">と重なるように配置したいのですが
CSSだけで可能でしょうか?
<div id="aaa" style="text-align:center;">
<div id="bbb">
<img id="xxx" src="xxx.jpg"/>
<img id="yyy" src="yyy.jpg"/>
<img id="zzz" src="zzz.jpg"/>
</div>
</div>
708 :
700:2011/03/09(水) 16:54:14.33 ID:zUuYVIvM
どうすればよいですか?
>>706 テストしてないけどこんな感じ。
#bbb { position: relative; height: 300px; }
#xxx, #yyy, #zzz { position: absolute; }
#yyy { right: 0; }
>>706 数値***pxは画像に合わせて調整
<div id="aaa">
<div id="bbb">
<img id="xxx" src="xxx.jpg"/>
<img id="yyy" src="yyy.jpg"/>
<img id="zzz" src="zzz.jpg"/>
</div>
</div>
#aaa { text-align:center;}
#bbb { width:***px; margin: 0px auto;}
#xxx{}
#yyy {position: relative; bottom:***px; left:***px;}
#zzz {position: relative; bottom:***px; right:***px;}
>>710 右と左を間違えた。
#aaa{ text-align:center;}
#bbb{ width:***px; margin: 0px auto;}
#xxx{}
#yyy{position: relative; bottom:170px; right:***px;}
#zzz{position: relative; bottom:170px; left:***px;}
>>711 テスト用の数値を残したままだった。落ち着け自分。。。
#aaa{ text-align:center;}
#bbb{ width:***px; margin: 0px auto;}
#xxx{}
#yyy{position: relative; bottom:***px; right:***px;}
#zzz{position: relative; bottom:***px; left:***px;}
jpg画像を画面中央に配置したページを作りたいのですが
>>4のQ6がリンク切れで見つかりません。どなたか参考になる代替案を教えていただけないでしょうか?
>>713 Q6とは違うと思うけど、単に画像を画面中央に配置できさえすればいいなら、
その画像を背景画像にして
body
{background-image:url("hogehohge");
background-repeat:no-repeat;
background-position:center center;}
とかでいいのでは?
>>714 レスありがとうございます
コピペしてやってみたのですが中央に移動しただけで持ってくることはできたのですが
画面の「中心」に置くことはできませんでした
どのブラウザからも画像が中心に見えるように配置したいのですが……
>>716 html,body{
margin: 0px;
padding: 0px;
height:100%;
background:url(hogehoge) no-repeat center center;
}
p {margin-left:2em;}
img {margin-left:3em;}
で左に5emですが、
p {margin-left:2em;}
img {margin-left:3em;}
p img {margin-left:10em;}
にすると12emになりますか?
テーブルの行毎に背景色を変えたいのですが
<tr>などにclassを付けてないで一気に指定する方法ってありますか?
すみません。2色を交互に変えたいという意味です。
<tr class="r1"><td></td></tr>
<tr class="r2"><td></td></tr>
<tr class="r1"><td></td></tr>
<tr class="r2"><td></td></tr>
これをclassなしで指定できないものかと・・
>これをclassなしで指定できないものかと・・
tr:nth-child(even) td{
background: white;
}
th:nth-child(odd) td{
background: red;
}
IEとか除外して良いならこういうのは?
>>727 おおありがとうございます
スゴイこんな事もできるんですね
.test{
position: fixed;
top: 20%;
left 20%;
background-color: #85b9e9;
width: 200px;
height:100px;
}
これにpadding: 20px margin: 20px;
など混ぜると中身のテキストにも反映されますが、ボックスの位置自体もpx分ずれてしまいます
box内部のことだけ指定してやってるつもりなのですが、なぜなんでしょうか?
>>730 そうでしたorz
しかしpaddingだけ指定してもずれてしまうのですが
ボックスの位置はpaddingの分も考慮して決めないといけないってことでしょうか?
そうですよ〜
chrome10
IE8
<ol>
<li><div class="head">あああ</div><div class="body">3時間30分前</div></li>
<p class="however">むむむむむむむむむむむむむむむ</p>
<p class="however">とぅるるるるるるるるるるるるるるるるるるる</p>
<li><div class="head">さぼーん</div><div class="body">2時間30分前</div></li>
</ol>
こーいうマークアップで、
div.headとspan.bodyを横並び、olの横幅は500px、div.headは300px、span.bodyは200px、p.howeverは横500pxいっぱい
olはlist-style-type:decimal;で位置がくずれないようにスタイルしたいんですが、うまくいきません。
ol { list-style-type: decimal; text-align:left; }
ol > li { font: normal 12px/17px Arial; }
div.head { width: 300px; }
div.body {
width: 200px;
float: right;
margin-left: 300px;
color: #F00;
}
p.however {
white-space: nowrap;
font: normal 12px/17px Arial;
color: #333;
}
よろしくおねがいします。
734 :
Name_Not_Found:2011/03/18(金) 22:21:52.64 ID:aARWUhdx
画像
この真下にボックス
と言う形でCSSを組みたいのですが、firefoxとかでサイドバーを出すと
ボックス要素が右側にずれてしまいます。topやleftで%を使ってるからでしょうか?
それとも別の原因があるのでしょうか?
画像はbackgroundにしてfixedやabsoluteなど色々試してみたのですがダメでした
どうすれば位置を固定できるか教えていただけないでしょうか?
>>735 なるほど、その方法がありましたか。
しかし、これだとボックスに入ってないことになるんですかね?
body {
color: #000000;
font-size: 82%;
font-family:'メイリオ',Meiryo,'MS Pゴシック',sans-serif;
background-color: #000000;
background-image: url("../img/hogehoge.jpg");
background-repeat: no-repeat;
background-position: 50% 2.5%;
background-attachment:fixed;
}
}
.main{
position: fixed;
top: 52%;
left:26.20%;
background-color: #FFFFFF;
width: 645px;
height:400px;
padding: 0 5% 1% 5%;
line-height:130%;
letter-spacing: 0.5px;
text-decoration:none;
list-style-type: disc;
list-style-position: outside;
}
738 :
737:2011/03/19(土) 09:08:47.72 ID:???
backgroundの後の}は消し忘れorx
739 :
:2011/03/19(土) 09:49:17.71 ID:???
htmlの方を書かんとワカランだろ
>>739 こんな感じです
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Strict //EN”
“
http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Style-Type" content="text/css">
<title> hogehoge </title>
<link rel="stylesheet" href="about.css" type="text/css">
</head>
div class="main">
<ul>
<li>HN<br>test</li>
<li>ああああああああああああ<br>ああああああああああああ</li>
<li>いいいいいいいいいいいいいい<br>ううううううううううううううううううううう</li>
</ul>
</div>
<body>
</html>
こんな感じです
>>740 ulがbody内にないじゃん
lintで間違いを全部なくす方が早い
>>741 何度も申し訳ないコピペミスでちゃんとbodyタグの中に全部入ってます
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Style-Type" content="text/css">
<title> hogehoge </title>
<link rel="stylesheet" href="about.css" type="text/css">
</head>
<body>
<div class="main">
<ul>
<li>HN<br>test</li>
<li>ああああああああああああ<br>ああああああああああああ</li>
<li>いいいいいいいいいいいいいい<br>ううううううううううううううううううううう</li>
</ul>
</div>
</body>
</html>
ちゃんと確かめたのですが、やっぱりダメ、でし、たorz
画像の下にボックスって言ってなかった?
lintと言うところでググって見たのですが
divの中で<li>タグは使えないと言うだけで、実際表示上は問題なくリスト化できているのですが
ボックスがずれる原因は分かりませんでした……
firefoxで表示すると正常なのに、IEtabを使って切り替えたらボックス位置が初期値に戻って左上に表示されるんですが
これってどうすれば治るんでしょうか
>>745 レスありがとうございます
ulを別にクラス化(ul.hogehoge)で別定義すれば解決するかもしれないと言うことでしょうか
ちょっとチャレンジしてみます!
>>749 違う
div内に直接liを書けないという警告がでるってことは
<div>
<li>なんとか</li>
という形(<ul>が書かれていない)になってるってこと
勝手に回答を妄想解釈せず素直に読めよ
あととりあえずまずlintで警告でてるとこ全部解消してみろ
そしたら解決するから
おまいの問題のほとんどがHTMLがでたらめなことが原因
ここに貼ってるソースと問題が発生してるソースは違うだろ
>>734だけどやっぱりボックスを指定する状態でサイドバー出すだけでもう既にずれてしまう
もはや意味が分からない
>>752 htmlがめちゃくちゃだからだってば
ほんと飲み込みの悪いやつだな
なんか意味不明な人がきたな
ここは昔から意味不明のスレなんだが
>>753 頭が悪いのはあれですがlintで全部問題解決してもずれるんですけど……
上記条件で
>>737で指定した画像ファイルの直下に
>>740のリストタグ外してボックス置いてもずれます
htmlがおかしいならどこが変なのか具体的に指摘してくれないと分からないです
とにかく画像の下のボックスがサイドバー出た時点でずれることの解決とhtmlファイルはあまり関係ないと思うんですけど
>>734 > firefoxとかでサイドバーを出すとボックス要素が右側にずれてしまいます。
仕様。ウインドウが右にずれるのだからコンテンツも右にずれる。
え
サイドバーは右に出るんだから左にずれるのが仕様だろ
つか画像も置いた本物のHTMLソースを提示してくれ
あとずれてるSSと
嘘のソースから原因を判明すんのは無理
Firefoxのサイドバーは左側に出るが、俺の環境が特殊なのか?
スクロールバーとは違うの?
今時FFなんか使わんからわからん
人を馬鹿にするのもいい加減にしたらどうだ。
こうした若者が増えていること自体、本当に日本の未来が心配な気がする。
自分の人生が正しいのかどうかを、荒待てて振り返る必要があなたにはありますよ、
ということだけは断言しておきたい。神様
>>761 Firefoxでなくてもサイドバーは左側に出るのが普通だぞ。Windowsエクスプローラでも左だ。
スクロールバーと混同するぐらいの知識なら回答するなよな。
>>763 そんな必死に怒るほどの話じゃないだろ
なんにせよずれる理由はhtmlの不備で確定してるし
FF儲がマジギレしたw
お前らくだらない事で喧嘩すんな
こうやって煽りにくるあほはどこにでも沸くんだな
次の方どうぞー↓
ふんにゃかふんにゃか
服を着たままの状態で、女子の肛門の位置を正確に割り出す方法を教えてください。
スレ違いだったら申し訳ありません。
春だなあ・・・
777 :
Name_Not_Found:2011/03/28(月) 05:39:11.67 ID:zuNWupxm
背景の色を指定したいのですが、初めにhtmlファイルのヘッダーの中に
body {background-color: #FFEEFF;}
を入れると普通に色が出るんですが、これをcssファイルにコピーすると出なくなります…
なぜでしょうか…?
別の部分でもダブって違う色指定してるとか
cssへのリンクが間違ってるとか
779 :
Name_Not_Found:2011/03/28(月) 07:04:03.67 ID:zuNWupxm
cssに入力した他のやつはちゃんと出ていて、bodyのとこに入力したやつだけ丸々ダメみたいなんですよね。。。
だからリンクが間違ってるということはないと思うのですが、別の部分で違う色を指定してるというのも探した感じそういったものは見当たりません。。。
昨日から始めた者で専門用語がわからず申し訳ないです…
780 :
Name_Not_Found:2011/03/28(月) 07:24:38.47 ID:zuNWupxm
自己解決しました!
答えてくれた方ありがとうございました!
781 :
Name_Not_Found:2011/03/29(火) 01:41:25.23 ID:AOVl6KRt
昨日に引き続き質問させていただきます!
#wrap {width:720px; text-align:center; vertical-align:middle; padding: 2px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border: 1px solid #00F;}
#inner {margin: 10px;}
#mainwrap {width:480px; height:50px; float:left; font-size: 34px; color: #FF2683;}
#sidewrap {width:220px; height:50px; float:right;}
と入力して、htmlは
<div id="wrap">
<div id="inner">
<div id="mainwrap">文字</div>
<div id="sidewrap">文字</div>
</div>
<div class="clear"><hr /></div>
<div id="footer">文字</div>
</div>
と入力して、文字を上下左右真ん中に置きたいのですが、
上下の真ん中に置くことが出来ません。
左右の中央にはなっています。
どうすればできますか?
テンプレの
>>4を読め
以降もちゃんとスレテンプレのリンク先を全て読んでから質問するように
初心者が質問したくなるような事例の大半はそれで済む
>>782 それは君がイケメンだからじゃないかな? 俺だったらたぶん無理。
2chはイケメン専用ですよ.。そうでない奴は一生ROMってなさい。
初めからイケメンの人もいないだろうさ
それは整形したイケメン
画像を重ねて表示するのはcss3で楽になったと聞きました
どのプロパティで出来ますでしょうか?
ググるのは嫌ですか ?
座標が同じなら何枚でも勝手に重なるけど?
<span class="abc def">とすると、.abcと.defという二つのクラス名を使用できますが、
これをidにも同じようにすることは可能でしょうか。
idは一意
複数指定はclassの役目。
リストのタイトルのつけ方で質問
<ol>
<li class="title">a</li>
<li value="1">b</li>
<li>c</li>
</ol>
と
<div>
<h2>a</h2>
<ol>
<li>b</li>
<li>c</li>
</ol>
</div>
を考えたんですが、どちらがお勧めですか?それとも、もっと良い書き方ありますか?
タイトルと内容を同列にしてる前者はダメっしょ
CSSを無効にしたときにどう表示されるか考えてみれ
cssだけで1枚の30x30のgif画像を横に5回繰り返す方法ってございませんか?
background:url(30x30.gif) repeat-x 5;
背景色だけ透過して文字色だけは透過しないままにする方法ってないですか?
背景色にopacity:0.2ぐらいにすると文字も極端に薄くなってしまいます
>>797先生、ありがとうございます!!!!!!!!!!!!!!!!!
799 :
796:2011/04/04(月) 16:53:48.70 ID:???
ぼくのは無理層ですよね?
800 :
Name_Not_Found:2011/04/04(月) 18:41:00.42 ID:e/yY687M
ボックスを中央に配置したいのですが
ボックスと親要素に対してposition:relative;を、ボックスにtop:50%;left:50%;で位置的には中央になったのですが
これだと左上が基点になってますので、結果中央から右寄りにボックスがあることになります
これをtext-align:centerと同じような感じでぼっくを中央に寄せるにはどのようにしたらよいのでしょうか?
801 :
Name_Not_Found:2011/04/04(月) 18:47:21.61 ID:YpHaPJey
>>796 その使い方なら、背景色用に透過pngを作ったほうが早い。
>>801 スクロール量を調べて特定の量だけスクロールしてあればfixedでメニューを固定してるんだと思う
805 :
801:2011/04/04(月) 19:20:31.36 ID:YpHaPJey
さっそくのご回答ありがとうございます
803>
素人なもので、簡単なもので構いませんので、
その記載の仕方をお教えいただけませんか?
-----------------------
スクロール量を調べて特定の量だけスクロールしてあれば
fixedでメニューを固定
-----------------------
よろしくお願いいたします。
これマッチングサイトでも2〜5万円ぐらいで成立してる作業だからちったぁ自分で努力しろ
jqueryで使うならスクロールはtp://stacktrace.jp/jquery/api/css/scrolltop(val).html
スクロール量を見てメニューのcssを変更するならtp://stacktrace.jp/jquery/api/css/css(properties).html
>>793 内容によっては
<dl>
<dt>a</dt>
<dd>b</dd>
<dd>c</dd>
</dl>
これもあり
<ol>
<li class="title">a
<ol>
<li value="1">b</li>
<li>c</li>
</ol>
</li>
</ol>
春だねぇ
教えて下さい。
多々ある画像を1枚の画像に結合し、CSSのbackground-positionで指定してやるとサイトが軽くなるという記事を見ました。この場合、
<style>
.test1{
background-image: url(images/AA.gif); width:20px; height: 20px;
background-repeat: no-repeat;
background-position: 0px 0px;
}
.test2{
background-image: url(images/AA.gif); width:20px; height:20px;
background-repeat: no-repeat;
background-position: -20px 0px;
}
</style>
このように指定してやっても軽くなるのでしょうか。それとも、
<style>
#test{
background-image: url(images/AA.gif); width:20px; height:20px;
background-repeat: no-repeat;
}
#test .test1{
background-position: 0px 0px;
}
#test .test2{
background-position: -20px 0px;
}
</style>
このように親要素で指定した上で子要素で位置を指定してやらないと軽くならないのでしょうか。
下の方法でやると、とても大変になりそうで困っています。
知っている方がいましたら教えて頂けないでしょうか。
このスレでの質問と違う内容でしたら申し訳御座いませんがスレの名前でも良いので教えて頂けると助かります。宜しくお願い致します。
早いお返事ありがとう御座います。
デメリットに関しまして、ブラウザのメモリに関する問題点が上げられていますが、英語のサイトで理解が出来ませんでした。。申し訳御座いません。
具体的にどの程度デメリットが体感出来るのかとても興味深く思います。後で翻訳サイト等にかけて読んでみようと思います。
教えて下さったサイトはとても参考になり、親要素関係なく指定出来る事がわかりました。
このサイトの記述による解釈によると1枚の画像をポジション指定により表示するので、はやり私の書いた上の方法では意味のない、むしろ重くなってしまうという解釈で宜しいのでしょうか?
そこらへんが詳しく書かれていないので最終判断に困っております。宜しければ教えて頂ければ幸いです。
813 :
Name_Not_Found:2011/04/07(木) 13:49:25.19 ID:ATZ3VhwY
背景を透過させたサイトを作っているのですが、
背景だけを透過させたいのに、サイト内のすべての画像が透けてしまいます。
背景のみ透過させる方法はないのでしょうか?
>>812 十分理解してるじゃん。
それ以上なにがしたいの?
816 :
Name_Not_Found:2011/04/11(月) 11:30:27.32 ID:5LPARI1S
cssで表の角を丸くする方法で簡単な方法を教えてください。
ネットで見てたらいろいろありますけど、簡単な方法を知りたいです。
できれば、cssのみの方法と、画像(丸)1枚を使用する方法の両方を知りたいです。
>>816 表の角を丸くしてるサイトのソースをパクる
>>816 ネットで見つけた方法の中で、簡単な方法を使う。
CSS3で使えなくなったプロパティや値ってありますか?
基本的にCSS2.1に新しいプロパティが加わったと考えて使っても問題ないですか?
わかりました
せっかくなのでまとめた情報をサイトに残したほうがいいですか?
どうやってまとめるの?
>>824 あなたは
>>820なのか?
CSS2.1 のように property table を作って各セルに「対応/非対応」を入れてみては?
CSS3って、もう一般化してるの?
>>826 何を持って一般化と言うか知らんが、
2つ以上のブラウザが実装済みのCSS3プロパティは結構ある。
>>825 俺は824だよ
何でいきなり自演みたいに認定するの?
>>828 自演とは思ってないが、便乗質問ならわかるようにしてほしい。回答する方も気を遣うんだ。
質問の内容と口調的に別人だと思ったけどな。
むしろ822と824の方が近いだろう。
CSS3まとめ用
IE9
Firefox4
Opera11
chrome10
safari5
まとめ方なんて人それぞれだろうけど、モジュール名まで書いてくれると親切だな。
+-----------------+------+----------------------------------------+
| property name | CSS2 | CSS3 |
+-----------------+------+----------------------------------------+
| background | ○ | Backgrounds and Borders Module Level 3 |
+-----------------+------+----------------------------------------+
| background-clip | ○ | Backgrounds and Borders Module Level 3 |
+-----------------+------+----------------------------------------+
>>826 2012年に出すIE10ではCSS3への対応度が向上するらしいよ
834 :
832:2011/04/13(水) 20:59:23.39 ID:???
background-clip は CSS2 にはないね…。すまんかった。
一人の人にやらせようとせずてめえも一緒にやれや
俺は必要に迫られて去年からやってるけどここの連中に見せたいと思わない
ほぼ煽りしかいないからなあ。
少しでも良くなればとたまに回答しているけど難癖をつけてくる人はいるし、質問者はスルー気味だし、ここの人にお世話になった実感はごく僅かだ。
840 :
Name_Not_Found:2011/04/14(木) 20:02:43.62 ID:PM29wuPy
礼を求めるなら2ちゃんは止めた方がいいよ
質問に対して好き勝手に答えるだけでいいんだよ。
間違ってたら誰かが指摘してくれる。
<span style="background: no-repeat url('img/creditcard.png');">クレジットカード</span>
文字を見えなくしたいのですが背景画像を前に表示するにはどうしたらいいでしょうか?
<span style="display:none;">クレジットカード</span>
>>842 width 指定しても画像は表示されないです。。
844 :
Name_Not_Found:2011/04/16(土) 17:46:19.49 ID:lDo7GZYV
AとBとfloatでわけてBの背景にいろつけたいのですけど
Aの文章が長いせいかBに白い隙間が出来てしまします。
min-hight とかつかってもブラウザによって変わってきます。
対策はあるのでしょうか?
845 :
Name_Not_Found:2011/04/16(土) 17:49:19.26 ID:lDo7GZYV
AとBと色違いで高さをいっしょにしたいってこっとです
>>841 text-indent -9999pxだっけ。mixiとかそこらじゅうで使われてる。
847 :
Name_Not_Found:2011/04/16(土) 19:18:02.61 ID:Xuq06yW1
css3での質問です。
このサイトのフッターを一番下に表示させたいのですが
sectionのheightを100%にするなど、色々試してみたのですが出来ません!
http://mrgrotesque.com/ なにかアドバイスよろしくお願い致します!
849 :
Name_Not_Found:2011/04/16(土) 20:20:51.09 ID:Xuq06yW1
解決しました
全体的に欧文のページで、一部のセルにだけ和文を使いたいのですが、
<td class="ja">和文</td>
td.ja {font-family: "和文フォント";}
としたところ、文字の上下に妙な余白が出来てしまいました。
margin、padding、vertical-align、line-height、position、displayを使って修正を試みましたが、
ブラウザによっては悪化したり、そもそも根本的な解決になっていなくて気持ち悪かったりで、行き詰まりました。
余白の原因をお教えください。
自己解決しました。読んでいただいた方、ごめんなさい。
td.ja {line-heightではなく
* {line-heightとしたら、
全体的に若干のレイアウト崩れを起こしたものの、問題の余白は綺麗に消えました。
最近は質問してから自分で考えるのが流行ってるのか?
↑は解決しました
お前の寝てる間に、口の中にカメムシ100匹入りますように。
このスレって他のとこと較べて程度低いよね。
読むと気分悪いからブックマークから外した。
たまに気になって見に来たら、この有様w
>>855 あなたが回答してくれなくなってからこの有様ですよ。
それコピペ
firefoxのstylishでGoogleトップの検索フォームの形をいじってるんだけど
検索結果のURLが/search?q=〜から#hl=ja&〜に変わったため検索結果のフォームまで変わってしまうんだけど対処法ありますか?
859 :
858:2011/04/18(月) 05:20:46.91 ID:???
自己解決しました!
860 :
858:2011/04/18(月) 05:29:28.77 ID:???
ID出せよ
>>863 ありがとうございます
スレ内検索すべきでした すみません
865 :
858:2011/04/18(月) 23:17:08.49 ID:???
866 :
858:2011/04/19(火) 06:38:29.41 ID:???
よし!俺も
CSSめんどくさい
この明日も見えない大変な時代やからアムウエイや。
アムウエイやってがんばって成功したら幸せな老後が待ってるんやで。
ねずみ講ちゃうで。アムウエイはすごいビジネスなんや!
IE8、sleipnirでデザインが崩れているという指摘をされて
自分もIE8、sleipnirで確認したのですが、デザインが崩れていませんでした。
PCの環境によってデザインが崩れる場合cssのどの部分に原因があるか
教えて頂けないでしょうか。
IE8、sleipnirでデザインが崩れていると指摘して下さった方はFire foxだと
普通にみれたようです。
フォント設定とか
IEでクライアント領域の境界線を消すのに <body style="border:0;">
としていたんですが、DOCTYPEを指定すると消えなくなりました。
DOCTYPEを指定しても消す方法ありませんか?
input要素のbuttonで、押す前と押した時の表示を変えたいです(へこませたい)
hoverを使うとマウスが上に来たときに変えることはできますが、
クリックしているときだけ変えることってCSSで可能でしょうか?javascriptとか併用が必要?
875 :
874:2011/04/21(木) 00:45:39.39 ID:???
hoverではなくてactiveで期待通りの動作でした
ちょっと勘違いしてました 自己解決
先行実装だからscript使った方がいい気もするけどね
877 :
Name_Not_Found:2011/04/21(木) 06:11:59.40 ID:MumpncBS
YUIのDataTableのスタイルシートを抽出できないでしょうか。
http://developer.yahoo.com/yui/datatable/ 元はといえば、やりたいことはよくある入力フォームでテーブルの左側が見出し(項目名ヘッダ?)になってるやつを、
同じ画面にDataTableがあるので見た目を統一したいのです。
なので、
1.単にCSSだけぱくる
2.YUI DataTableを行列変換(!?)して適用
のどっちも解決方法としてありなのですけど。
878 :
858:2011/04/21(木) 06:12:05.81 ID:???
えっ!?
id 属性と name 属性の違いがイマイチわかりません。
name は一切使わず、 全てのタグで id のみを使うという方針で問題ないのでしょうか?
問題ありませんよ
inputはname属性必須の時があるから
文書内全体で一意か、同じ要素で一意か
>>879 nameは汎用属性ではない。まずどの要素のname属性を指しているか、をはっきりさせる必要がある。HTML4 と HTML5 でも若干違う。
すべての要素の、すべての属性に「font-style: italic;」の値が与えられているものを表すにはどうすればいいんでしょうか。
*[*="font-style: italic;"] や ["font-style: italic;"]
としたんですけどエラーが出ました。
表記法を教えてください。よろしくお願いします
>>886 スタイルが指定されてるかを判定する方法なんてあるの?
>>887 ない。
> すべての要素の、すべての属性に「font-style: italic;」の値が与えられている
これが満たせるだけ。
すべての属性の定義が曖昧すぎる
<style>
div[id="font-style: italic;"][class="font-style: italic;"][style="font-style: italic;"] { color: red; }
</style>
</head>
<body>
<div id="font-style: italic;" class="font-style: italic;" style="font-style: italic;">sample</div>
じゃあstyleとtitleとaltくらいでいいか
>>890 styleとtitleは汎用属性だが、altは汎用属性ではないのでタイプセレクタを併用しないと実装できないよ
892 :
884:2011/04/26(火) 13:55:20.60 ID:???
みなさんご回答ありがとうございます。
一括で指定するという方法はないようですので、一つ一つ属性を指定していくことにします
ご回答ありがとうございました。
893 :
Name_Not_Found:2011/04/26(火) 14:46:39.18 ID:PPfIx3xx
IE9で出たバグっぽい症状なんだけど、どうしたら解決できるかな?
overflowで横スクロールできるようにして、その中のaタグにマウスカーソルを
持っていったり外したりするたびに、その下の方にある文章がだんだん下がっていく。
IE8以下ではでない。Firefox、Chrome、Safari、Operaでもでなかった。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
a { color: #000000; }
a:hover { color: #ff3333; }
div { width: 5em; overflow: auto; }
p { width: 15em; }
</style>
</head>
<body>
<div>
<p><a href='test.html'>テスト</a></p>
</div>
ここが下がっていく。
</body>
</html>
>>893 divにheightで回避できるが、それじゃ根本的な解決にはなってないんだよな?
895 :
Name_Not_Found:2011/04/26(火) 16:44:29.54 ID:PPfIx3xx
>>894 高さの決めうちは無理な場所でしたけど、height: 100%;で回避できました。
助かりました。ありがとう。
(positionとかfloatとか試したけど結局だめだったな。)
div { width: 5em; overflow: auto; height: 100%; }
IE9を使える環境の方に質問します。
IE9で-ms-filter (又はfilter)って効果が有効になってますか?それとも無視されますか?
>>897 こちらはIE9使えないので、filterのIE9での対応状況を知りたいのです。
逃げたとかイミフ
896です。ずっと待ってますが、IE9で実際に試せる環境を持ってる人は居ないんですかね?
わし Winちゃうねん
>>903 ここで人に試してもらうのと
>>900のリンク先で試した人のログを見るのは信頼性に大差はないと思うんだけどな。
>>905 900はIE9リリース前の書き込みじゃないの
css のクラスの指定で
<div class="a">a</div>
<div class="b">b</div>
<div class="a b">a and b</div>
とある時に
3つめの要素のみにスタイルシートを当てる事は
javascriptをつかわずに出来ますか?
.a.b { }
>>908 そんなふうにかけたんですね。
ありがとうございます。
910 :
Name_Not_Found:2011/05/01(日) 18:57:54.15 ID:i4M9F+/0
>>612 背景透過PNGと背景影画像のBOXをずらして表示
ウソテックイズ
この画像をどこから拾ったのか書いてよ
>>914 レスありがとうございます
2ちゃんブログの俺的ゲーム速報っていうところが使っていて
すごく便利そうだなと思って自分も付けたいと思ったのですが
いくらググッても全然ヒットしなくて質問を書かせてもらいました
なにか情報をお持ちでしたらお願いいたします
>>915 positionプロパティと、HTMLのフラグメント
てか自分でソース見りゃ早いんじゃないの
サービスじゃなくて自分で実装してるんでしょ
ソース見たけど単純なものだよ
>>916 返信ありがとうございます
>>916さんの書いた内容がまったく理解できないほどの
素人なんです
でも一つだけ分かったのは、どこかのサービスを利用してるわけではなく
HTMLというのをいじって自分で作ってるものなんでしょうね
ちょっと初心者にはハードル高そうです
返信ありがとうございました
>>917さんもありがとうございます
やっぱり自分で実装してるものなのですね
勉強になりました
ありがとうございます
>>896について、実際に試せる方よろしくお願いします。
IE9標準モードでも-ms-filter (又はfilter)は使えますか?
マジでIE9インストールした奴このスレには居ないの?俺はXpだから無理
MacのVMにWin7+IE9入ってるけど、なにすればいい?
filter動くか試せばいいの?
> filter動くか試せばいいの?
その通りです。よろしくお願いします。
Mac上のWin7でもIE8ではfilterは使えたのですよね。
できましたら、HTMLの先頭行にDOCTYPE(<!DOCTYPE html>等)宣言文の有無で
filter表示が変わらないことも確認して戴けたらありがたいです。
どっちも使えたけど
ありがとうございました。
CSS3を使えるブラウザではfilterと似たような効果で代用していましたが、
そうするとIE9では効果が重複してしまうので片方を殺さないといけないですね。
次の患者さんどうぞー↓
zzz
<⌒/ヽ-、__
/<_/____/
左から2番目のセルのみ背景を変えたいのですが
td:eq(1){
background:#f00;
}
としても変わりません
eqを使うものだと思ってたのですが方法ございませんか?
929は1000のダメージを受けた
eqじゃないのですね
nth-childでした
ありがとうございます
は?
<li>タグの中のテキストを上下左右中央にするのはどうすればいいですか?
一応<li>にwidth170pxとheight30pxの設定をしてます。
>>934 line-height:30px; text-align:center;
>>935 あほか?そんなんで中央にくるわけないだろwww
知らないくせに黙ってろよwww
企業HP程cssを@importで読み込んでるのを見かけるんですが
これはどのようなメリットがあってcssを分けて読み込んでるんでしょうか?
>>937 だからさ、分からないなら黙ってりゃいいんだよ
わざわざ間違ったレスしなくていいから
>>935で合ってるだろ
何がどう間違ってるか説明しような
フォントの設定について教えて下さい。
一般的にフォントは何が一番標準なんですか?あとフォント設定する時はfontとfont-familyの両方設定するんですか?
指定しないのが標準です
943 :
939:2011/05/11(水) 22:44:50.03 ID:???
>>935 これで出来ました!ありがとうございました(^O^)
945 :
Name_Not_Found:2011/05/12(木) 17:25:24.26 ID:YW3+VsL/
>>941 フォントの指定はしてはいけません
それはwindows厨のわがままです。
全ての悪はマイクロソフトです
絶対にフォントの指定はしてはいけません。
ブログなどのページで縦にずらっと長いページの全体をラップしている<div>に高さは指定しなくていいんですよね?
しなくていい
dreamweaverでflashを挿入したらIEで見たときに毎回ActiveXコントロールのダイアログが表示されるんですけど、これを消すことってできないんですか?
css3のプロパティ一覧ってありませんか?
各ブラウザで検証してて最新情報の。
古いのは海外ので知ってるんですけど古すぎるので
命令するなっ!
じゃあ使うわないで
好きにしていいのよ
初心者どもは黙って俺の言うとおりしてりゃいいんだよ
あるなら書けよ
無いアルよ
<li>(width:170px height:30px)の中にある文字のリンクのクリック範囲について、そのままにするとクリック範囲は文字だけに適応されますが、<li>のなか全体をクリック範囲にしたいのですがどうすればいいでしょうか?
<a>にdisplay:block;を定義すると聞いたのですがそれをすると他のリンクにも反映されてしまいます。
できれば<li>のなかのリンクにだけ反映したいです。
li a { display:block; width:170px; height:30px; }
IE9はこれ使えん。使ったら、真っ白になる。
<!--[if lte IE 8 ]> ]
使うな
こいつすげーアホだな
釣りにしても酷すぎる
ズコー 思わず二度見した
流石に釣りだよなあ…
むかしセミナーで、条件付きコメントは使わないでってmsの人が言ってたな
業務では使ったコト一度も無いけれど、HTML5とCSSハック絡みで使ってるサイトはたくさんあるね
ほんだらさっさとIE8以下のサポートを切ってほしいところだ
一番危険なIE9は残すのかよw
>>966 あれ作ったのieの中の人だろ
自分で否定してるのか
テキストの選択が出来なくなりました。直すにはどうしたらいいんでしょうか?
自分で作っておきながらなんですが、すごく鬱陶しいので直したいんですが方法がわからないので直しようがないです。
お願いします。
UbuntuのFirefox3.6です。
コードも張らずに?w
>>972 コードってなんですか?直すのに関係無いと思いますが。
環境は書きましたが?
974 :
Name_Not_Found:2011/05/24(火) 13:05:23.30 ID:ZLF/lP3e
cssの質問じゃなければスレ違い、死ね
cssに関するならコード貼れ、ぼけ
おめぇが書いたCSSやHTMLのせいじゃねぇの ってことじゃね?
他のサイトでもテキスト選択できなくなっているのだとしたら
おめーのPCぶっ壊れてる
釣れたwww
idを晒さない質問者のレスは信用しない方がいいな
このところ騙りが多いし
>>976 そんなに悔しかったのか?www
後だし釣り宣言ほど恥ずかしいものはないんだがwwww
「いつまでも割れwindowsを使ってるのは気が引けるからUbuntuにしたらテキストの選択が出来なくなったんだけど、どうするの?」
ってこと。
OSの話はスレ違い
982 :
Name_Not_Found:2011/05/25(水) 03:35:46.20 ID:NNaTPDR6
classがaaaのdivの中にあるidがbbbのものは # や . を使ってどう指定できますか?
div.aaa #bbb
984 :
Name_Not_Found:2011/05/25(水) 04:47:43.02 ID:Y7P/3aQ3
ある書籍のサンプルで、これでも動作しましたが、下から4行目<h1 class="text">は、
おそらく<h1>の間違いでしょうかね?<h1>タグと<p>タグをスタイル指定するって趣旨のサンプルです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/htm14/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>サンプルページだよ</title>
<style type="text/css">
h1 {
font-family: Arial;
font-size: 16pt;
font-weight: 100;
font-style: italic;
}
p {
font-family: "メイリオ";
font-size: 10pt;
font-weight: 700;
font-style: normal;
}
</style>
</head>
<body>
<h1 class="text">Font Family</h1>
<p>スタイルシートでスタイルを変更した例です。</p>
</body>
</html>
>>987 別にクラス名を使用してないだけで、間違いではないでしょ。
>>988 ありがとうございます。
間違いというか、サンプルとしては<h1>として記述するのが普通ですよね?というのが一番の疑問だったの
ですが、そんなもの書籍を見なきゃわからないですよね。
このサンプルが出る部分まで、この本class=""の""の中は、<style/><style>のなかで記述されてるか、
タグの中で新しく定義?する方法しか解説が無く、いきなり単発ででてきた"text"はなんぞ?と思ったのです。
同書で自分が見落としてる部分があるかも知れないし、この記述が別に普通ならそれが理解できるよう勉強
します。
>>989 確かに勉強用のサンプルとしては、混乱の元かもね。
このサンプルだけでいうと、クラスの有無はスタイルに影響ないってだけ。
ちなみに、pにも同じクラス名をつければ、h1とp共通のスタイルを定義できる。
おまえが建てろぼけが
ふる
どあ
てぃゅ
次スレきたな
埋め
梅テスト
埋め
1000ならオレ億万長者になっちゃうぅううう\(^o^)/
1001 :
1001:
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。