CSS初心者スレッド＝8th＝

ですよね
ハミ出しつつも、親要素と一緒にスクロールさせる
なんて都合のいいことはできませんよね

そういうふうに見せかけたいだけなら出来ると思うよ

TABLEで、あるセルだけ枠線を二重線にしたいんだけど
どうしたらいいだろ
わけあって、TDタグのなかにSPANとか書けません

>>303
二重線にしたいセルにクラスを付けて、
cssでそのクラスを二重線になるよう指定するだけ

ここで聞いていいのかわからないんですが、ご教示願います。
最近webfontなるものを見つけて、ブログのタイトルやらを
CSSをいじりwebfontで表示させようとしているのですが、さっぱりわかりません。

そこで、webfontを使用している方のCSSの記述例なんかを教えていただけませんか？

以下環境です
ブログ：blogger
webfont：Fonts.com http://webfonts.fonts.com/　（アカウント作成済み）

俺はこんな感じの記述でやってるよ、みたいな感じの例でも構いません。
よろしくお願いします。

また、webfontならここを使ったほうがいいんじゃね？みたいなのがあれば是非そちらの方も教えてください。

>>304
それやって出来なくて、あれーと思ってたんだけど、できました。

TABLE.unko TD で色とか枠の太さを設定していると
TD.chinko よりも優先されんだな。知らんかったわ。

>>305
@font-faceをjs用いてどのブラウザでも表示させたいんだけど
方法が分からないから教えてってこと？
それともそのwebfont：Fonts.comの使い方を教えてってこと？

>>307
すいません、前者のことです。

>>308
cufonっていうのどう？
ttp://www.netch.jp/articles/2009/06/25/cufon/
こういうフォント関係は日本語（2バイト文字）だと環境によってはめちゃくちゃ重いから、
出来れば英字フォントだけがいいと思うよ
タイトルのみって書いてるからそこんとこ考慮してるとは思うけど一応ね

下記のSUBMITボタンを左寄せしたいのですが
うまくいきません。

<form
省略・・・
<div class="submit"><input type="submit" value="Submit" />
</div>
</form>

下記のように書いたのですが、左いっぱいまで詰まりません。
幅は反映されるものの高さも文字の大きさも変わらずです。

<style type="text/css">

.submit{
display:block;
width:80px;
height:15px;
text-align:left;
font-size:11px;

</style>

cssじゃなくてhtml勉強してきた方がいいよ

>>310
divにあれこれしたって意味ないよ
.submit input{ }
でボタンそのものを指定しる

他にもツッコミ所は満載だけど、とりあえず後は自分でやってみ

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

.submit input{
display:block;
width:80px;
height:25px;
text-align:center;
font-size:11px;

position: absolute;
left:0px;
}

>>313
display:block;　→　イラネ
position:absolute; + left:0;　→　float:left;

>>309
遅くなってしまいすいません
目的はタイトルやサブタイトルをwebfontにしようと考えていて
そのタイトル等は英語なので英字フォントのみ適応させようと思っています。

cufon参照しました。これはこちらでフォントファイルを用意する必要があるようですね。
この場合著作権に触れないフォントであることが前提になる気がするので、
できれば前述したFonts.comから引っ張ってくる方法をとりたいです。

>>315
これで分からないなら諦めた方がいい
ttp://blog.petitboys.com/archives/fontscom-web-fonts.html
あと著作権フリーの英字フォントなんてググればいくらでも見つかるぞ

CSSのソフトってネット繋いでなくても、オフゲ出来ますか？

申し訳ないです。板違いでした

preタグをchromeやsafariで表示すると文字サイズが小さく表示されます。
他の文字サイズと統一させたいのですが、どうするべきでしょうか？

100%指定したら

<input src="http://example.com/gazou.png" class="borderbottom">

.borderbottom:hover {
border-bottom:2px solid black;
}

inputで貼りつけた画像にマウスオーバーした時2ピクセルのボーダーライン（下部にだけ）を表示させたいのですが
実際にマウスオーバーすると下のほうが全て２ピクセル下にズレて表示されてしまいます。（マウス外すと元に戻る）
何か解決法ないでしょうか？

>>321
inputのtypeは書き忘れ？

.borderbottom { border-bottom: 2px solid white; }
.borderbottom:hover { border-color: black; }
or
.borderbottom { margin-bottom: 2px; }
.borderbottom:hover { margin-bottom: 0; border-bottom: 2px solid black; }

元から線をつけておくか、hover時にmargin-bottomを外すかのどっちかでいいと思うよ

>>322
なるほど。頭良いですね。
type等は関係なさそうだったので省略しました。ありがとうございました。

下線(underline)そのものだけ色を別にするってことは、できないんでしょうか？
border-bottomで代用するしかありませんか

>>324
できない

無駄な要素を増やさないと無理やね

>>316
そのページでwebfontを知って各登録であったりはできていたんですが、
手順どおりやってもブログのフォントが反映されなかったためここで質問しました。
フリーのフォントを変換してもｂｌｏｇｇｅｒだとアップロード先が無いので
別でサーバ借用となるのも変な気がしたので
できればwebfontっていうのが希望です。
このサイトはフォントの大御所も参加してるってとこも是非とも使いたい理由です。

ヘッダとフッタ以外を全てCSSで擬似インラインフレームにしたいのですが、ヘッダとフッタ部分をピクセル数や行数で指定できないので、margineを使ったやり方が使えません。
他にどのようなやり方がありますか？

もっと人にモノを伝えようという努力をしよう

IE以外のFireFoxやSafariの場合には、正常に表示されるのですが、
<form>タグと<div>タグが連続している場合に、
特別　margin-top　といった余白の指定している訳では無いのですが、

<form>
　〜 略　〜
</form>
　　↑
　この form　と div の上下間隔がIE8では大きくなるのはなぜでしょうか？
　また、この不具合を解消するにはどうすれば良いのでしょうか？
　　↓
<div>

</div>

>>330
> 　この form　と div の上下間隔がIE8では大きくなるのはなぜでしょうか？
こっちの環境では大きくならないから何らかのcssが影響してると思う
解消したいなら具体的なソース出してください

クラス名に大文字を使う（大文字と小文字を混在させる）って
定石的に言って問題ありませんか？

IDは大文字で書くのが慣わしでしたっけ？

クラス名にアンダースコア'_'を使うと古いブラウザで認識できないと見ましたが
古いブラウザというのは、具体的になんでしょうか？

HTMLならIDはある意味習わしってよりリンク先のための必須事項だがXHTMLなら関係ない
アンダースコアはIE4で駄目だったと思うがNN4以上IE6以上なら関係ない
クラス名に大文字小文字混在は問題ないが大小間違えるとapplication/xhtml+xmlでは間違い

>>332
> クラス名に大文字を使う（大文字と小文字を混在させる）って
> 定石的に言って問題ありませんか？
はい
> IDは大文字で書くのが慣わしでしたっけ？
いいえ
> クラス名にアンダースコア'_'を使うと古いブラウザで認識できないと見ましたが
> 古いブラウザというのは、具体的になんでしょうか？
IE6以下だから気にする必要は全くない

どっかのサイトでIDは大文字で書いとけって見たような気がする

HTMLならIDは大文字
ていうか>>333が言ってるじゃないか

いい加減ブラウザ、ＣＳＳの仕様を統一してくれんかね。
メンドクサイ。

携帯会社の docomo　もひどい。

CSSで、リンクでページ内の特定の領域だけを書き換えるって
できませんよね？

ちょっと何言ってるかわかんないっすね

>>337
CSSの仕様とブラウザの実装をごっちゃに語るな

>>338
わからんがa要素にcontnetで文字挿入とかの話か？

スパイウェアを仕込んでるJane Styleは危険です。

Google Adsense違反報告スレ Part10
http://pc12.2ch.net/test/read.cgi/affiliate/1267346244/

JaneStyleがスパイウェアみたいな動作するらしい件
http://namidame.2ch.net/test/read.cgi/poverty/1278496905/

【スパイウェア？】JaneStyleで書き込みしようとしたら、○○に情報が送信されていた件
http://tsushima.2ch.net/test/read.cgi/news/1278681871/


■Google Adsense 違反通報URL
https://www.google.com/adsense/support/bin/request.py?contact=violation_report


※個人情報漏洩による被害者をこれ以上出さない為に、
　このコピペを見つけた方は一人５箇所以上にコピペをお願いします。

CSSでテキストボックスの入力を全角カナにするには
どう指定すればよいのでしょうか？

CSSでやることじゃない

displayプロパティって
何に使うものですか？

>>344
そんくらいググれ
css display

<div style="positon:relative">
<img src="main.jpg">
<img src="sub.png" syle="position:absolute; top:-3px;left:-3px;">
</div>
メインの画像に対してサブの画像を上と左に-3pxずつずらし絶対位置を指定して表示しています。

この場合に、親のdivタグの透明度を動的に変えると、
親タグの外に表示される部分(sub.pngの上と左側に3px分)がIEだと表示されなくなります。
英語ページで同様の問題は見つけることはできるのですが解決策がわかりません。
解決策等ありましたら教えてください、宜しくお願いします。

静的に変えて問題がないのなら
その動的に変えるスクリプトの問題だろ
スレチ

>>346
物理的に親の外に出てようが親子関係は変わらねーだろ
親にマスクされたような状態になって透明度も継承されてんじゃね？
subだけに再度透明度を設定し直してみれば？

line-heightで行の高さを大きくすると、文字の上下に均等に余白が付く感じなのですが
余白を文字の下側のみにしたいのですが、どうにかならないでしょうか？
一緒にvertical-align: top; を指定しても、変化ありません

一行ごとにmargin-bottomを付けたボックスとしていては面倒だし
折り返しになったときに問題が出ます

上下についてもいいじゃん。
その段落の上の余白を無いように見せれば。

ですよねー

firefox3.6.6を使っています。
すみませんが教えて下さい。
全てのサイトで、全ての文字のサイズを同じに、且つ、文字が上下左右に重ならないcssを。

なお、デスクトップ右クリ→プロパティ→設定→詳細→フォントサイズを192パーセントにしています。
firefoxのオプション→コンテンツ→フォントと配色の詳細設定→最小フォントサイズは24です。

どうぞよろしくお願いします。

firefoxスレで聞け。スレチ

スレチではないと思います。
わかる方、どうぞご回答お願いします。

>>354
スレチではない理由を教えてよ

cssに関する質問だからです。
この質問がスレチというなら、全ての質問が「そのcssを使うhtmlビューワのスレで聞け」となってしまいます。

>>352
> 全てのサイトで、全ての文字のサイズを同じに、且つ、文字が上下左右に重ならないcssを。
無理だね
優先度：サイト側css＞ユーザーcss

ありがとうございます。
ie6だと、以下のcssで、私の知る限りの全てのページで同じ文字サイズで表示できましたが、firefoxだと同じ文字サイズにならないページがあります。

a:link, a:visited, a:hover, a:active, body, dd, div, dl, font, h1, h2, h3, h4, h5, h6, hr, img, input, li, ol, p, select, span, table, td, textarea, th, tr, ul {
line-height : 2 !important;
}

完璧でなくてもかまいませんので、上記のcssより確実に、同じ文字サイズにできるcssがありましたどうぞ教えてください。

>>358
> firefoxだと同じ文字サイズにならないページがあります。
サイト側cssでfont関連に!importantされてたら無理
> line-height : 2 !important;
文字サイズではなくこれは行間

!importantしているサイトを除けば、単純に
* {
font-size: 13px !important;
line-height: 1.4 !important;
}
とでも書けばいんじゃね？

>>358
IEでも無理です。残念でした

>>357
最後の行ェ・・・

下のような、画像に対してテーブルが回りこむようなレイアウトは可能でしょうか？
・画像にfloat: leftを指定してもテーブルは回り込みまない（その後ろの文字が回りこむ）。
・tableにfloat: rightを指定すると画像とテーブルの間隔が大きくあいてしまう。

画像画像画像画像　｜―――――――｜
画像画像画像画像　｜―――――――｜
画像画像画像画像　｜―――――――｜
画像画像画像画像　｜―――――――｜
画像画像画像画像　｜―――――――｜
画像画像画像画像　｜―――――――｜
画像画像画像画像　｜―――――――｜

>>362
＞・画像にfloat: leftを指定
で普通にできてるけど？

>>362
両方floatをleftでテーブルの左にだけマージン入れたらどうよ？
table { margin-left:20px; }
とか。

>>362
それか、両方を囲むdivで囲って、横幅持たせて
画像はレフト。テーブルはライトでどうよ？
親の幅で隙間の広さが調整出来るんじゃね？

position:absolute;やposition:fixed;を指定した要素ないの文字が画面の端で折り返してしまいます
どうすればよいでしょうか

こうしたい↓
┏━━━━━━━━━┓
┃　　　　　　　　　┃
┃　　　今日はいい天┃
┃　　　　　　　　　┃
┃　　　　　　　　　┃

こうなる↓
┏━━━━━━━━━┓
┃　　　　　　　　　┃
┃　　　今日はいい天┃
┃　　　　　　気です┃
┃　　　　　　　　　┃

>>366
その要素にwidthもたせて、
overflow:hidden;
かな。

http://www.dotup.org/uploda/www.dotup.org1045511.png

みなさん↑こういうデザインつくるときどうコーディングしてる？

<div>
　<img />
　<div>
　　<h2>見出し</h2>
　　<p>あいうえおあいうえおあいうえお…</p>
</div>

今まで、こうやって、
imgと内部のdivにfloat:left;もたせていたんだけど、
もっと簡単な方法ないかなぁと思いまして。

>367
だめでした…

質問です。

サイト全体で、リンクの文字の背景色を指定していて、
ある部分だけ背景色"無し"にしたい場合はどうしたらいいんでしょうか？

すいません、解決しました。
transparentでした。

>>369
white-space: nowrap;

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

a:hover
{
color:darkblue;
background-color:white;
text-decoration:none;
}

こういうのを設定したんですが、
whiteが反映されません。
なぜでしょうか？

snowやredはちゃんと反映されるんだけど、whiteはダメです。

＞snowやredはちゃんと反映されるんだけど、

whiteのところをsnowやredに変えたらってことです。

Firefoxだとちゃんと白になるなあ。

IE8のバグだったのか。

>>376
IE8でも普通に変わった
他のところ間違えてるだけだろ

>>377
マジ？

他のCSSを削除して
>>374だけにしても白にならなかった
orz

制作者のCSSを反映させない設定にでもしてるんじゃね

うーん、どうやってもダメだわ。
snowで行っとくか。

link
visited
hover
active
と順に書いてる？

sage1_22148.zip
で、うぷしてみた。

？

１、UPロダをさがすのが大変。
２、パスが明確でない。候補をいくつか試したが全部NG
答えてもらいたくないらしい。

パスは「33568」です。
ｽﾏｿ

削除キーだと思ってたｗ

でも、hoverを設定しただけの簡単なHTMLです。

だめだこいつはやくなんとかしないと・・・

IEのバグじゃね。
white → #FFF　でも同じ結果。
aにdisplay:block付けると色変化。
しょうがないからbackground-color:#FFE;でいいじゃん。

>>374
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ていうかなんで今更html4.01使ってるの？xhtml1.0以降にしなよ

>>387
やっぱりバグですか。安心しました。

>>374
いや、それはホームページビルダーが勝手に入れるので・・・

「タグ直打ち」→「ホームページビルダーでタグ整形」
でやってます。

えっ・・・　　それはまた・・・

機械任せもいいけど、それがどういう意味を示しているのか、
どう解釈が違ってくるのか、なんとなくでいいいから覚えた方がいいよ

うぷろだ見つからないからそいつのソースは知らんけどさ
普通にしてればwhiteだろうが#fffだろうが普通にIE8でも変化するんだから
そいつのソースが間違ってるとしか思えないんだが

ttp://sageuploader.vs.land.to/1upload/upload.html?1280021790
です。

だから>>388のようにDOCTYPE変更すれば背景白くなるってば

>>394
白になりました。
THANKS！！

でも、結局はIEのバグなんだよね？

はぁ？お前の設定ミスだろ。
IEの動きがあやしいのは事実だが、自分のミスなのをバグバグ言う奴はｲﾗｯとくるわ。

>397
そこは堪えて!!

>>396
DOCTYPEスイッチ でググるといいよ
元々書いてあったDOCTYPEでは後方互換モードになって、
>>388で書いたDOCTYPEでは標準準拠モードになる
>>397も言ってるけど、自分が納得いかない＝バグっていうのはやめようぜ

>399
その言い方だとめっちゃ傷つくかもしれないだろ
本人がどういう意図や意味でバグと言ったのか分からないし
もうちょっとできるだけ当たり障りのないようにレスして欲しいな
そうすれば神スレになるしそのうち神板になる

2chを変えて行こうよ