/* CSS、スタイルシート質問スレッド【10】 */(2ちゃんねる)

FTP、CGI、SSI、telnetが自由に使える超高速レンタルサーバ。
工夫しだいで、楽しさ100倍。 www.binboserver.com
月額千円サーバ | サブドメインコース | BIGなサーバ

サブドメインコース:CGIやFTPが使いたい・お金を掛けたくない人のために。
 *****.syo-ten.com *****.gasuki.com *****.zansu.com
 お好きな名前を無料で使えます。早い者勝ち。

人気サイト 月額千円サーバ:.com .net .org で取得できます。.JPドメイン大歓迎!
 超高速・高機能サーバを1000円で!使ってみれば、分かります。

BIGなサーバ:Big なBig なサーバー。充実したサポートをお求めの方へ。
 インターネットでご活躍の皆様へ、そしてご活躍予定の皆様へ。
2ちゃんねるは、このサーバを使っているです。

■掲示板に戻る■ ■過去ログ倉庫めにゅーに戻る■

/* CSS、スタイルシート質問スレッド【10】 */
1 名前: 前スレの932 投稿日: 02/08/07 00:10 ID:???
Cascading Style Sheetsの事で尋ねたいことがあったらこちらへどうぞ。
関連スレやリンクは>>2-5あたりに。

■■■■■ 注意 ■■■■■
質問者 (特に「初心者」) は、
必ず>>4にある解説サイト (かなりわかりやすい) で
 勉 強 してください。

質問の前には過去ログを WinIEの場合[Ctrl+F]で検索しましょう。

また、IE などではまだ対応できていない要素などやバグが多数存在します。
ですので、>>2(関連スレ)の「バグ辞典」に目を通しておきましょう。

また、「環境を書け」 とか 「ソースは?」 と求められたときは
応じるようにしましょう。 回答が早く返るようにするためです。

※ マターリ進行推奨 ※


2 名前: 前スレの932 投稿日: 02/08/07 00:10 ID:???
【前スレ】
 http://pc3.2ch.net/test/read.cgi/hp/1025346520/

【過去ログ】
 http://mentai.2ch.net/hp/kako/974/974934062.html
 http://natto.2ch.net/hp/kako/984/984113434.html
 http://natto.2ch.net/hp/kako/992/992992981.html
 http://pc.2ch.net/hp/kako/996/996828258.html
 http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
 http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
 http://pc3.2ch.net/test/read.cgi/hp/1015474859/
 http://pc3.2ch.net/test/read.cgi/hp/1019881572/
 http://pc3.2ch.net/test/read.cgi/hp/1025346520/

【関連スレ】
・CSS/DHTMLバグ辞典スレッド ver2.0
 http://pc.2ch.net/test/read.cgi/hp/991666454/
・/* CSSでイケてるデザインサイト { number: 3; } */
 http://pc.2ch.net/test/read.cgi/hp/1010800617/
・* CSS { イケてるスタイルを:"作れ";}
 http://pc.2ch.net/test/read.cgi/hp/991906104/
・代替スタイルシートに萌え〜
 http://pc.2ch.net/test/read.cgi/hp/991400015/
・CSSコミュニティの功罪を評価するスレ 4th Reich
 http://pc.2ch.net/test/read.cgi/hp/1021555514/


3 名前: 前スレの932 投稿日: 02/08/07 00:11 ID:???
【仕様書】
・CSS1の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS1/
・CSS2の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS2/
・CSS1の仕様書の翻訳(日本語)
 http://www.y-adagio.com/public/standards/css1/toc.htm
・CSS2の仕様書の翻訳(日本語)
 http://www.y-adagio.com/public/standards/tr_css2/toc.html


4 名前: 前スレの932 投稿日: 02/08/07 00:12 ID:???
【その他資料など】
・W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/
・ごく簡単なHTMLの説明
 http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
 http://www.zspc.com/stylesheets/
・ZSPC - CSS2対応状況ガイド
 http://www.zspc.com/documents/css2/
・CSS1テストスイート
 http://www.doraneko.org/css1test/
・とほほのスタイルシート入門
 http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの CSS リファレンス
 http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・K@tsukun's PAGE! > CSS Reference
 http://hp.vector.co.jp/authors/VA022006/css/index.html
・CSS Laboratory対応表・一覧
 http://www.inter-cool.net/~phantasm/wdzone/note/index.html


5 名前: Name_Not_Found 投稿日: 02/08/07 00:15 ID:???
>>2はアドレス変更を忘れてるネ。正しくは下記の通り。

【関連スレ】
・CSS/DHTMLバグ辞典スレッド ver2.0
 http://pc3.2ch.net/test/read.cgi/hp/991666454/
・/* CSSでイケてるデザインサイト { number: 3; } */
 http://pc3.2ch.net/test/read.cgi/hp/1010800617/
・* CSS { イケてるスタイルを:"作れ";}
 http://pc3.2ch.net/test/read.cgi/hp/991906104/
・代替スタイルシートに萌え〜
 http://pc3.2ch.net/test/read.cgi/hp/991400015/
・CSSコミュニティの功罪を評価するスレ 5th Emperor
 http://pc3.2ch.net/test/read.cgi/hp/1025351897/


6 名前: ばけらった 投稿日: 02/08/07 00:17 ID:???
おつー


7 名前: Name_Not_Found 投稿日: 02/08/07 00:17 ID:???
>>1
新スレ乙〜。


8 名前: Name_Not_Found 投稿日: 02/08/07 01:01 ID:???
乙。


9 名前: Name_Not_Found 投稿日: 02/08/07 01:03 ID:???
■■■ 終了 ■■■


10 名前: いつも名無し 投稿日: 02/08/07 01:10 ID:???
>>1 乙彼


11 名前: Name_Not_Found 投稿日: 02/08/07 01:22 ID:???
>>9
いいセンスしてるな


12 名前: Name_Not_Found 投稿日: 02/08/08 01:16 ID:???
1さん、スレ立て乙彼さまです。
こちらで質問してよろしいのでしょうか?

壁紙固定をしているのですが、私のページではスクロールすると
なぜか、文字が波打つ(っていったらいいんでしょうか?)のです。
他の方の壁紙固定のページをみても、すんなり壁紙だけがスクロール固定され
文字は普通にスクロールされるんです。
なぜだかわかるかた、教えて頂けると有り難いです。
よろしくお願いします。

<style type="text/css">
<!--
body{
background-image : url(○○.gif) ;
background-repeat : no-repeat ;
background-position : bottom center;
background-attachment:fixed;}
--></style>



13 名前: Name_Not_Found 投稿日: 02/08/08 01:22 ID:???
>>12
カクカクするってこと?
画像やフォントを変えても再現する?
何となく画像が大きいからじゃないかと。


14 名前: Name_Not_Found 投稿日: 02/08/08 01:32 ID:???
>>12
ブラウザはIE?

画像固定するとスクロール重くなるよ。
その結果ウィンドウサイズがでかかったり、画像がでかかったり、CPUパワーが無かったりすると、
そんな風になることがあるような。


15 名前: Name_Not_Found 投稿日: 02/08/08 01:53 ID:???
漏れはなぜか文字が消えることがある。

p.hoge{
color:black;
background-color:#cccccc;
border-style:solid;
border-width:1px;
border-color:#333333;}

こんな感じの装飾で、パラグラフの中身がスクロールしてるとふっと消えたり。
Ctrl+A でも表示されないんだけど、文字の上までドラッグすると再表示。なんなんだか。


16 名前: Name_Not_Found 投稿日: 02/08/08 05:52 ID:???
前スレ990でおます

<img src="**" style="float: left;">
<table>
.
.

これでやってみて、成功はしたんですが
imgとtableの間にスペースが・・・(´・ω・`)
解決でけそうでしょうか。

ちなみにposition弄るとMozillaとかでずれる始末(´・ω・`)´・ω・`)


17 名前: Name_Not_Found 投稿日: 02/08/08 09:27 ID:???
>>16
知るかカス



18 名前: Name_Not_Found 投稿日: 02/08/08 09:28 ID:???
>>15
独り言を書き込むなカス


19 名前: Name_Not_Found 投稿日: 02/08/08 09:28 ID:???
>>13>>14
12です。答えてクダサッテ、有り難う御座いました。
画像が大きかったら、そうなる可能性があるんですか?
確かに画像・・・大きいのかも。
ちょっと画像を変えてもう一度見てみます。


20 名前: Name_Not_Found 投稿日: 02/08/08 09:29 ID:???
>16
marginやpaddingあたりをイジれ


21 名前: Name_Not_Found 投稿日: 02/08/08 09:29 ID:???
【URL】
とったんラヴュ
http://www.katch.ne.jp/~manion/

【趣旨説明】
ひきこもりの紹介のサイト

【評価希望ポイント】
・絵
・コンテンツ
・デザイン

よろしく。


22 名前: Name_Not_Found 投稿日: 02/08/08 09:35 ID:???
とったんは偉いなぁ


23 名前: Name_Not_Found 投稿日: 02/08/08 09:41 ID:???
マルチは放置ですよ。。。
http://qb.2ch.net/test/read.cgi/accuse/1028378421/l50


24 名前: Name_Not_Found 投稿日: 02/08/08 10:54 ID:???
>>16
<img/><table>
<tr>...</tr>
</table>


25 名前: Name_Not_Found 投稿日: 02/08/08 15:40 ID:???
<ol>
<li>
<dl>
<dt>アイス</dt>
<dd><p>ミルクで作ったもの</p></dd>
</dl>
</li>
</ol>
dlをliで囲んだのをIE5.5でみると、
1.
アイス
ミルクでつくったもの
となり、アイスの左に1.が来ません。
来させるにはどうすればいいですか?


26 名前: Name_Not_Found 投稿日: 02/08/08 15:50 ID:???
>>25
私も昔悩んだ(過去ログ既出)が、どうにもならない。


27 名前: Name_Not_Found 投稿日: 02/08/08 16:03 ID:???
>>25
説明が短いなら

<li>アイス: ミルクで作ったもの</li>


28 名前: Name_Not_Found 投稿日: 02/08/08 16:12 ID:???
>>25
<dl>
<ol>
<li>
<dt>アイス</dt>
<dd>ミルクで作ったもの</dd>
</li>
</ol>
</dl>
こんな感じの不思議マークアップをすればできる。


29 名前: Name_Not_Found 投稿日: 02/08/08 16:19 ID:???
>>25
<ol>止めて、display:list-itemとlist-style-type:decimalで表現するとか。


30 名前: Name_Not_Found 投稿日: 02/08/08 16:19 ID:???
dlをインラインにする


31 名前: 26 投稿日: 02/08/08 16:22 ID:???
>>30
既出です。
それでもうまくゆかないんですってば。


32 名前: 26 投稿日: 02/08/08 16:39 ID:???
つかえねーな


33 名前: 26(=31≠32) 投稿日: 02/08/08 16:42 ID:???
>>32
誰? ナニ? 


34 名前: 26 投稿日: 02/08/08 16:44 ID:???
ルリたんでオナニーでもするか。


35 名前: 26 投稿日: 02/08/08 16:46 ID:???
ばけらったでオナニーでもするか。


36 名前: 16 投稿日: 02/08/08 20:16 ID:???
>>20,>>24
ダメですた(´・ω・`)
Mozillaだとちゃんと間隔無しで見えるのになあ・・・。
逆に縦幅が分厚くなっちゃって不格好になるんですけどね・・。

モシヤ(´・ω・`;≡;´・ω・`)仕様!?


37 名前: Name_Not_Found 投稿日: 02/08/08 20:21 ID:???
>>36
モシヤ(´・ω・`;≡;´・ω・`)仕様!?


38 名前: Name_Not_Found 投稿日: 02/08/08 20:31 ID:???
>>34=>>35 , >>37
荒らすなや。


39 名前: Name_Not_Found 投稿日: 02/08/08 20:44 ID:???
>>38
すみませんですた。(´・ω・`)


40 名前: Name_Not_Found 投稿日: 02/08/09 03:22 ID:???
>>25
li dl:before{content:"\A"}
li dl *{position:relative;top:-1em}


41 名前: Name_Not_Found 投稿日: 02/08/09 03:34 ID:???
>>40
いや>>25には
>IE5.5でみると
とあるだろ。
>li dl:before{content:"\A"}
は通用しないよ、


42 名前: Name_Not_Found 投稿日: 02/08/09 03:41 ID:???
>>25
結論
IEのCSS対応が糞なのでCSSでは無理っぽ。
どうしてもやりたければ>>28


43 名前: Name_Not_Found 投稿日: 02/08/09 04:06 ID:???
>>42
って、結論は>>26がとっくに出してるやんけ。

cf. CSS/DHTMLバグ辞典スレッド ver2.0
 http://pc3.2ch.net/test/read.cgi/hp/991666454/67-77


44 名前: Name_Not_Found 投稿日: 02/08/09 07:11 ID:???
YA----N-----KE--------!!!!!!!


45 名前: Name_Not_Found 投稿日: 02/08/09 12:57 ID:7/P8tf8N
過去の日記 : 1月8日 1月7日 1月6日 1月5日 1月4日 1月3日 1月2日 1月1日 ...

こんな横長の、かつ必ずしもすべて表示される必要のない一覧があって、
ブラウザの横幅に応じて見られる範囲が変わるようにしたいと思います。
# 領域は1行におさめたいので、ブラウザの横幅が短ければ
# 3日分(上記の例なら1月6日まで)とかしか表示されなくてもよい。

white-space:nowrap;
overflow:hidden;
これでやると失敗しました。hiddenにならず、領域の幅が伸びるだけでした。

height:1.0em;
overflow:hidden;
これでやるとheightの指定があいまいで文字の大きさによっては下部が切れたり、
隠れていてほしい2行目の頭が表示されたりしました。
ていうか、hidden部分は2行目というより、右方向の部分に隠れていてほしいです。

うまくやる方法はないものでしょうか。


46 名前: Name_Not_Found 投稿日: 02/08/09 13:00 ID:???
???
フレームでメニューと本文表示部に分けるみたいな感じ?


47 名前: いつも名無し 投稿日: 02/08/09 13:09 ID:???
>>45
widthも指定してみてはどうだろうか。


48 名前: Name_Not_Found 投稿日: 02/08/09 13:30 ID:???
うむ。width:98%;位がオススメ。横スクロールが出ないので。


49 名前: Name_Not_Found 投稿日: 02/08/09 14:28 ID:???
width: 100%;は横棒出るの?


50 名前: Name_Not_Found 投稿日: 02/08/09 14:41 ID:???
>>49
!DOCTYPEとブラウザに拠っては。


51 名前: Name_Not_Found 投稿日: 02/08/09 15:16 ID:PI1QBGpF
NNの4.7で大元のテーブルに背景画像を入れて
その中にテーブルを入れ子にすると
背景画像がずれてしまいます。
それを回避する方法はありますか?


52 名前: Name_Not_Found 投稿日: 02/08/09 15:38 ID:???
>>51
テーブルの入れ子?
そんなの出来るの?


53 名前: Name_Not_Found 投稿日: 02/08/09 15:43 ID:PI1QBGpF
ん?
言い方まずかったかなぁ?
テーブルの中にテーブルを入れます。


54 名前: Name_Not_Found 投稿日: 02/08/09 15:43 ID:???
>>52



55 名前: Name_Not_Found 投稿日: 02/08/09 15:44 ID:???
>>53
>>52


56 名前: Name_Not_Found 投稿日: 02/08/09 15:48 ID:???
>>53
そのままやん。


57 名前: Name_Not_Found 投稿日: 02/08/09 15:50 ID:???
>>53
ソース書いてみ。


58 名前: Name_Not_Found 投稿日: 02/08/09 15:51 ID:PI1QBGpF
そのままです


59 名前: Name_Not_Found 投稿日: 02/08/09 15:52 ID:???
>>58
何これ?


60 名前: Name_Not_Found 投稿日: 02/08/09 15:55 ID:PI1QBGpF
こんなんです

<BODY bgcolor="#FFFFFF" text="#000000">
<P align="center">SAMPLE</P>
<TABLE width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD><IMG src="bg_01.gif" width="600" height="18"></TD>
</TR>
<TR>
<TD background="bg_03.gif" align="center">
<table width="75%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</TD>
</TR>
<TR>
<TD><IMG src="bg_05.gif" width="600" height="23"></TD>
</TR>
</TABLE>
</BODY>


61 名前: Name_Not_Found 投稿日: 02/08/09 15:56 ID:???
>>60
それでどうしたいの?


62 名前: Name_Not_Found 投稿日: 02/08/09 15:57 ID:PI1QBGpF
NN4.7で見ると、背景がずれるんです
それをCSSでどうにかならないものかと・・・


63 名前: Name_Not_Found 投稿日: 02/08/09 15:59 ID:???
>>62
画像アップしてくれない?



64 名前: Name_Not_Found 投稿日: 02/08/09 16:00 ID:???
>>62
他のブラウザではどうなの?


65 名前: Name_Not_Found 投稿日: 02/08/09 16:01 ID:PI1QBGpF
ちょっと待っててください
アップローダー探してきます


66 名前: Name_Not_Found 投稿日: 02/08/09 16:02 ID:PI1QBGpF
IEでは、ずれないんです


67 名前: Name_Not_Found 投稿日: 02/08/09 16:03 ID:???
>>66
なぜ、テーブルの中にテーブルを入れてるの?
普通こんな使い方するかな?


68 名前: Name_Not_Found 投稿日: 02/08/09 16:05 ID:PI1QBGpF
アップローダー知りませんか?
ちょっと見つかんなくって


69 名前: Name_Not_Found 投稿日: 02/08/09 16:06 ID:???
http://kari.to/upload/


70 名前: Name_Not_Found 投稿日: 02/08/09 16:10 ID:???
>>62
NN4.7なんて気にしなくていいじゃない。


71 名前: Name_Not_Found 投稿日: 02/08/09 16:12 ID:PI1QBGpF
あげました。
コメントはよろしくお願いします。です


72 名前: Name_Not_Found 投稿日: 02/08/09 16:13 ID:???
>>67
>>51 では無いが良くやるよ。こういうの。
普通にテーブルを細かくするよりも表示が軽くなる場合があるし。
tdの中には普通にtable入るし。


73 名前: Name_Not_Found 投稿日: 02/08/09 16:16 ID:PI1QBGpF
>>72
フォローありがと


74 名前: Name_Not_Found 投稿日: 02/08/09 16:17 ID:???
>>71
おーい、それだけじゃ分からないよ。
bg_01.gifはどれ?


75 名前: Name_Not_Found 投稿日: 02/08/09 16:18 ID:PI1QBGpF
よろしくお願いします。
よろしくお願いします。02
よろしくお願いします。03

です。


76 名前: Name_Not_Found 投稿日: 02/08/09 16:19 ID:???
>>75
それだけじゃ分からないよ。


77 名前: Name_Not_Found 投稿日: 02/08/09 16:20 ID:PI1QBGpF
なにが分からないんですか?


78 名前: Name_Not_Found 投稿日: 02/08/09 16:21 ID:???
>>71 ホントだ、妙にずれるね。

>>76
三枚の画像が
bg_01.gif
bg_03.gif
bg_05.gif


79 名前: Name_Not_Found 投稿日: 02/08/09 16:21 ID:PI1QBGpF
あ、
よろしくお願いします。がbg_01です
すんまそん


80 名前: Name_Not_Found 投稿日: 02/08/09 16:29 ID:???
>>71
なんだか、二重になってるテーブルの各セルに背景が配置されてる感じだね。
一応これで直ったが、めんどくさいな。

<TD><IMG src="bg_01.gif" width="600" height="18"></TD>
</TR>
<TR>
<TD background="bg_03.gif" align="center">
<table width="75%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background=""> </td>
<td background=""> </td>
<td background=""> </td>
</tr>
<tr>
<td background=""> </td>
<td background=""> </td>
<td background=""> </td>
</tr>
<tr>
<td background=""> </td>
<td background=""> </td>
<td background=""> </td>
</tr>
</table>
</TD>
</TR>
<TR>
<TD><IMG src="bg_05.gif" width="600" height="23"></TD>
</TR>
</TABLE>


81 名前: Name_Not_Found 投稿日: 02/08/09 16:29 ID:PI1QBGpF
>>78
そうなんですよ。
前からこれにずっと悩まされてました


82 名前: 80 投稿日: 02/08/09 16:31 ID:fRgqgVyI
age忘れ。
補足:多分、親のTDのbackground属性が、
このテーブルのTDに承継されてるんだろうね。バグだわな。


83 名前: Name_Not_Found 投稿日: 02/08/09 16:33 ID:PI1QBGpF
おーおできた!
ありがとうです。
からTDにも入れるってことか〜


84 名前: Name_Not_Found 投稿日: 02/08/09 16:37 ID:PI1QBGpF
みなさん有難う御座いました。(ペコリ


85 名前: 45 投稿日: 02/08/09 17:13 ID:qsL+IPLZ
遅くなりました。みなさまご回答ありがとうございます。

widthを指定しても、
100%だと文字列全体(1月1日まで)を表示しようとするので、
ブラウザに横スクロールが出てしまいます。

で、その後いろいろ試した結果、
本来は{width:100%}で大丈夫であることがわかりました。
それが、テーブルの中にある領域では大丈夫じゃなくなるようです。
図らずも、わたしがテーブルレイアウトしていることがばれてしまいました。
すみません…。

でも、これってブラウザのバクですよね?
WinMe + IE6.0 です。


86 名前: 45 投稿日: 02/08/09 17:47 ID:???
がんばってそのページだけテーブルレイアウトやめました。
こうなると、全ページでやめたくもなるが…。うむむっ。
おさわがせしました。


87 名前: Name_Not_Found 投稿日: 02/08/09 19:03 ID:???
中途半端が一番良くない


88 名前: Name_Not_Found 投稿日: 02/08/09 19:27 ID:???
て言うか何でテーブルレイアウトしてるの?
CSS使うの辞めたら?


89 名前: Name_Not_Found 投稿日: 02/08/09 19:37 ID:7zUQpBzq
別にテーブルレイアウトとCSSは併用できるよ


90 名前: Name_Not_Found 投稿日: 02/08/09 20:00 ID:???
段組はCSS3で正式サポートだから、現状では別に
テーブルレイアウトを使っても良いんじゃないかと言ってみる。

俺は使わんけど。


91 名前: 45 投稿日: 02/08/09 20:18 ID:???
>>テーブルレイアウト
すでに覚えてないけど、IE5&6とNN6の表示を合わせるなどモロモロの苦悩があって、
確かやむにやまれぬ状況でテーブルレイアウトを選択をしますた。
でももういっぺんトライしてみます。

ところで、テーブルレイアウトをやめてDIVをfloat:leftしたんですが、
そしたら >>16 さんの状況になってしまいました。
どうやらfloatすると3pxの余白が空くみたいです。
>>24 さんの指摘しているような、
htmlファイルの改行やスペースなどの問題でもないようです。

まいった。


92 名前: Name_Not_Found 投稿日: 02/08/09 20:19 ID:???
>>91
参りましたか。


93 名前: 16 投稿日: 02/08/09 20:21 ID:???
ここってcssだよな


94 名前: Name_Not_Found 投稿日: 02/08/09 20:22 ID:???
他のスレの16がのこっとった(汗
>>16スマソ


95 名前: 45 投稿日: 02/08/09 20:22 ID:???
ちなみにテストファイルをアップしたのでこちらで3pxのスキマを確認できます。
http://www.geocities.co.jp/SiliconValley-Bay/9728/test.html


96 名前: Name_Not_Found 投稿日: 02/08/09 20:25 ID:???
>>95
いちいちアップしなくていいよ。


97 名前: 40 投稿日: 02/08/09 21:26 ID:???
>>41-43
試せ


98 名前: Name_Not_Found 投稿日: 02/08/09 22:45 ID:eGcNMhbu
見出しタグへのスタイルシートの適用方法がわかりません。

<h1><img src="hoge.gif" 〜 ></h1>
<h2><img src="hogehoge.gif" 〜 ></h2>

hoge.gif と hogehoge.gif の間を0にするにはどのように定義したら
よいのでしょうか?

windows環境で、Operaだと marginを0pxにするとうまいこと表示できます
が、IEやNNではうまくいきません。


99 名前: Name_Not_Found 投稿日: 02/08/09 22:59 ID:???
>>95
div.c にも float:left;


100 名前: Name_Not_Found 投稿日: 02/08/09 23:01 ID:wbKKHxS9
>>98
こうかな?
h1, h2 { margin: 0; }
h1 img, h2 img { vertical-align: text-bottom; }


101 名前: 45 投稿日: 02/08/09 23:14 ID:qsL+IPLZ
>>99
そうするとdiv.cが左はじにくっついちゃいました。つまり、こう。
http://www.geocities.co.jp/SiliconValley-Bay/9728/test2.html


102 名前: Name_Not_Found 投稿日: 02/08/09 23:15 ID:???
table{display:none} /*広告非表示*/

カッコいいね


103 名前: Name_Not_Found 投稿日: 02/08/09 23:20 ID:???
>>101
white-space:nowrap;は消せないの?


104 名前: Name_Not_Found 投稿日: 02/08/09 23:23 ID:???
>>98
marginだけでなくpaddingも0にしたかい?


105 名前: Name_Not_Found 投稿日: 02/08/09 23:29 ID:???
改行する時<br>を使うと、
htmlと同じように改行できないんですけど、、、、
外部スタイルシートでbodyを指定してます。
body { font-size: 14px; background-color:ffffff; letter-spacing: 0.1em; font-family:
"MS Pゴシック" }
こんな感じなんですが、、、、


106 名前: Name_Not_Found 投稿日: 02/08/09 23:38 ID:???
>>105
>改行する時<br>を使うと、
>htmlと同じように改行できないんですけど

質問の意味がわからないんですけど……。


107 名前: 98 投稿日: 02/08/09 23:41 ID:eGcNMhbu
>>100
回答ありがとうございます。
画像の間を0にしたいんですが、教えていただいた方法でも
NNとIEだとうまくいきません。



108 名前: Name_Not_Found 投稿日: 02/08/09 23:58 ID:???
>>107
この場合は
h1, h2 { margin: 0;}
だけでよくないかな?
なにが原因か調べるときは
border:1px solid black;
をいれて見るといいよ。


109 名前: Name_Not_Found 投稿日: 02/08/10 00:32 ID:???
>105
それはバグ。
letter-spacingを指定すると<br>周りがおかしくなる。

br{letter-spacing: 0em} で回避しる。


110 名前: 105 投稿日: 02/08/10 00:44 ID:???
>>109
バグなんですか。ありがとうございました!
文字間隔を調整するにはletter-spacingを使用する以外に、
他に方法があるんでしょうか?



111 名前: 45 投稿日: 02/08/10 00:45 ID:VD2lOfaJ
>>103
そもそもの主旨が >>45 なので…。


112 名前: 98 投稿日: 02/08/10 00:49 ID:???
>>100 >>107
無事にうまくいきました。
自分の確認不足だったようです。
すみません。
それといい調べる方法を教えていただき感謝いたします。


113 名前: 107 投稿日: 02/08/10 00:50 ID:???
>>108
間違えました。



114 名前: Name_Not_Found 投稿日: 02/08/10 01:30 ID:???
>110
いや、だから br{letter-spacing: 0em} で回避しると言ってるだろ。
そうじゃなければ、、

ス ペ ー ス 入 れ る し か な い な (藁


115 名前: 16 投稿日: 02/08/10 01:32 ID:???
結局謎のまま(´・ω・`)

ttp://members.tripod.co.jp/Yaki_aco/test.html

こんな感じなんですけどねえ


116 名前: Name_Not_Found 投稿日: 02/08/10 01:37 ID:???
>>111
いっそ
div.b {
background:#99ff99;
position: absolute;
width:200px;
}

div.c {
background:#9999ff;
position: absolute;
left:200px;
white-space:nowrap;
}
dic.cの後がどうなってるのかしらないけど。


117 名前: 45 投稿日: 02/08/10 01:49 ID:???
>>115
全体をDIVかなんかでくくって、
{
background:url(/*画像*/) no-repet;
padding:0 0 0 /*画像サイズ分*/;
}
これでどう?


118 名前: 45 投稿日: 02/08/10 01:57 ID:VD2lOfaJ
>>116
それでいくと、div.cが200px分だけブラウザから右にはみ出してしまいました。
# div.cにwidth:100%を指定した上での話です。
# width指定しないと、さしすせそ…の文字列を全部横に表示してしまいます。


119 名前: 16 投稿日: 02/08/10 02:02 ID:???
>>117
ああああ・・・
貴方は自分の中で神と化しますた。
ホントにありがとう(;`・ω・)人


120 名前: Name_Not_Found 投稿日: 02/08/10 03:08 ID:???
他スレでも書いたんだけどこっちの方が良いと思われなので

selectのスクロールバーの色を指定したいんだけどこれじゃできなかった…
<html>
<head>

<title></title>

<style type="text/css">
<!--
select {
scrollbar-base-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-arrow-color: #000000;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #ffffff;
}
-->
</style
>
</head>
<body>

<form>
<select name="test">
<option value="1" selected>A
</select>
</form>

</body>
</html>
プロパティが違うの?


121 名前: Name_Not_Found 投稿日: 02/08/10 03:12 ID:???
>>120
できないつーの


122 名前: Name_Not_Found 投稿日: 02/08/10 03:14 ID:???
マルチかっつーの


123 名前: 120 投稿日: 02/08/10 03:16 ID:???
>>121
レスサンクスコ

出来ないってのは根本的に指定出来ないの意?


124 名前: Name_Not_Found 投稿日: 02/08/10 03:19 ID:???
>>123
そう根本的に


125 名前: Name_Not_Found 投稿日: 02/08/10 03:20 ID:???
123は偽者 氏ね


126 名前: Name_Not_Found 投稿日: 02/08/10 03:21 ID:???
>>125
その前にマルチ氏ね


127 名前: Name_Not_Found 投稿日: 02/08/10 03:21 ID:???
>>118
「ブラウザの横幅に応じて見られる範囲が変わるように」
という趣旨に合ってるとおもうのだが。

かなり卑怯くさいが

div.b {
background:#99ff99;
position: absolute;
width:200px;
z-index: 1;
}

div.c {
background:#9999ff;
position: absolute;
padding-left:200px;
width:100%;
white-space:nowrap;
overflow: hidden;
}

双方heightを指定しないと文章量によっては
悲しい事態になると思われ。


128 名前: Name_Not_Found 投稿日: 02/08/10 03:27 ID:???
>>127
div.cに
box-sizing: border-box;
-moz-box-sizing: border-box;
追加ね。


129 名前: Name_Not_Found 投稿日: 02/08/10 12:35 ID:???
li要素に孕ませてるformをインラインにして所謂メニューっぽくしようとしたのですが
Mozillaで上手くいきませぬ。
IE5.5だとli form{display:inline;}でできるんですが。
どなたか解決方法教えてください。おながいします。


130 名前: Name_Not_Found 投稿日: 02/08/10 12:55 ID:???
孕(はら)ませてる、所謂(いわゆる) 難しく書くね
再変換しないと読めないつーの


131 名前: 45 投稿日: 02/08/10 13:04 ID:???
>>116 >>127 の双方を参考にして、
ページ内の他の要素との問題も解決しつつ
ぐちゃぐちゃのスタイルでなんとか希望の表示を実現しました。
しかし…ソースは恥ずかしくて他人に見せられないです。
これでいいんだろうか。藁
ありがとうございました。


132 名前: Name_Not_Found 投稿日: 02/08/10 13:09 ID:???
>>130
それぐらい読めたほうがいい。


133 名前: Name_Not_Found 投稿日: 02/08/10 14:19 ID:???
>>132
所謂は2chでも時々レスでも見ることあるけど(極稀に)
「孕む」なんて初めて見たよ 絶対、読めない
って、スレ違いなので終わり


134 名前: Name_Not_Found 投稿日: 02/08/10 14:31 ID:???
孕むはよく見るな。


135 名前: Name_Not_Found 投稿日: 02/08/10 14:34 ID:???
読めるだろ…

>129
どういうことかよくわからないんだが、

○孕(はら)ますぞゴラ
○既出(がいしゅつ)です
○お願(なが)いします
etc...

というリンク群があって、:hover時にフォームっぽい動きをして欲しいと。
┏━━━━━━━━━━━━━━┓
┃お願(なが)いします         ┃ ←反転中
┗━━━━━━━━━━━━━━┛

こういうことか?


136 名前: Name_Not_Found 投稿日: 02/08/10 14:43 ID:???
>>134
一体どこでよく見るのかと小一時間。


137 名前: Name_Not_Found 投稿日: 02/08/10 15:09 ID:???
>>129
同じくわからんのだけど、フォームの部品を li に孕ませて、
それをスタイル指定で inline にしたい、ってこと? 下みたいに。
<html><head><style>
li {display: inline;}
</style></head>
<body><form>
<ul>
<li><input type="text"></li>
<li><select><option>#1</option><option>#2</option><option>#3</option></select></li>
<li><input type="submit"></li>
</ul>
</form></body></html>
これは Mozilla でも inline になる。

孕むは風を孕む、とかでも使うし。


138 名前: 129 投稿日: 02/08/10 16:16 ID:???
書き方が悪かったですね、スマソ。
ソースはこんな感じです。
<div>
<ul>
<li><a href="">hogehoge</a></li>
<li>
<form action=うんちゃらかんちゃら><input type=hidden name=なんやらかんやら>
<select><option>もにょもにょ</select><input type=submit"></form></li>
</ul>
</div>

この時にhogehogeの横に来るようにinline指定したのですがダメですた。
他の要素(selectとかsubmit)辺りにも指定してもダメですた。
わ・・かりますかね?


139 名前: 45 投稿日: 02/08/10 16:30 ID:???
>>138
ulとformの両方にinline指定。


140 名前: 129 投稿日: 02/08/10 16:57 ID:???
ってかselectとか「submit」って何だよ(w
鬱氏。
訂正:selectとかoptionとかinputとか。

>>139
やり済み。でも無理。


141 名前: Name_Not_Found 投稿日: 02/08/10 17:29 ID:???
>>140
何だその口の利き方は。


142 名前: Name_Not_Found 投稿日: 02/08/10 18:34 ID:???
(゚д゚)ハァ?


143 名前: Name_Not_Found 投稿日: 02/08/10 22:08 ID:???
<li>の自動改行をCSSで防げる?


144 名前: 129 投稿日: 02/08/10 22:09 ID:???
解らないのなら黙ってろ


145 名前: Name_Not_Found 投稿日: 02/08/10 22:31 ID:???
>>143
IDだしてからもう一度、どうしたいのかを明確にしてレスおねがいします。


146 名前: Name_Not_Found 投稿日: 02/08/10 22:32 ID:qWCtKX1x
li {
display: inline;
}


147 名前: Name_Not_Found 投稿日: 02/08/10 23:28 ID:Fr9Xyr7U
border-bottom: 1pt #0066ff solid;
border-left: 1pt #0066ff solid;
border-right: 1pt #0066ff solid;

と書くと何だかどうかと思ったので
(要は上の線を消したい)

border: 1pt #0066ff solid;
border-top: 0pt;

としたのですが、IE6.0以外だと問題ありますでしょうか?


148 名前: 129=140 ◆r/rsx0nA 投稿日: 02/08/10 23:33 ID:???
>>144
騙るな、ヴォケ。

>>145
138でわかりませぬか?

>>147
別段問題は無いけどバリデターで2重指定ですとか言われるはず。


149 名前: 147 投稿日: 02/08/10 23:44 ID:???
>>148
なるほど…。ありがとうございました。
感謝します。


150 名前: Name_Not_Found 投稿日: 02/08/11 00:36 ID:???
>>147
 border:#0066FF solid;
 border-width:0 1px 1px 1px;
とかどう?
漏れはいつもそーゆーときは↑のようにやってるんだけど。


151 名前: Name_Not_Found 投稿日: 02/08/11 00:42 ID:???
>>150
俺もそうやってる


152 名前: 147 投稿日: 02/08/11 01:52 ID:???
>>150-151
なるほど、そんな方法もあるんですね…。
全然思いつきませんでした。(汗)
有難う御座います。早速使わせて頂きます。


153 名前: Name_Not_Found 投稿日: 02/08/11 05:16 ID:hfInzqh6
すいません ちょっくら質問させてください
<div>内にいくつか画像を置いて外部スタイルシートで画像の配置を
position : absolute;
top : 90%
left : 90%;
って感じで指定してるんですけど
IEやMozillaではうまく表示されてるんですけど
Operaで見たときにある画像だけが<div>の外にはみ出して表示されてしまうんです
なんとかこれを回避する方法はないでしょうか


154 名前: Name_Not_Found 投稿日: 02/08/11 05:24 ID:???
>>153
divの指定を書かないと何とも言えないな。
divにwidth,height指定してるんでしょ?で、そのdivにbackgroudとborder指定かなんかして
その枠外に画像が表示されるってこと?


155 名前: 153 投稿日: 02/08/11 06:14 ID:???
>>154
あ、はい そうです


156 名前: 153 投稿日: 02/08/11 06:17 ID:???
>>154
えっと、divに当ててるCSSはこんな感じです
div {
width : 400px;
height : 200px;
border : dashed 1px #000000;
padding : 0;
margin : 0 auto;
position : relative;
top : 50px;
}


157 名前: Name_Not_Found 投稿日: 02/08/11 06:30 ID:???

Opera、NNはボックス領域を指定してもIEと違いきっちりと
width,heightを表示するよ。
IEの場合、width,height指定してもコンテンツがそれよりも大きければ
ボックス領域が可変するけど、
Opera,NNは、コンテンツに関わらずwidth,height指定通りにボックス領域を
レンタリングする。
回避する方法は、画像が一枚であればその画像に沿ったボックス領域を指定。
画像が複数枚であれば<br>などであらかじめ長さを決めといてボックス領域を指定するぐらい
だろうと思う。
min/max-width/heightってのがあるけども、IE6では対応してない。



158 名前: Name_Not_Found 投稿日: 02/08/11 09:50 ID:???
>>2の訂正:

【関連スレ】
・CSS/DHTMLバグ辞典スレッド ver2.0
 http://pc3.2ch.net/test/read.cgi/hp/991666454/
・/* CSSでイケてるデザインサイト { number: 3; } */
 http://pc3.2ch.net/test/read.cgi/hp/1010800617/
・* CSS { イケてるスタイルを:"作れ";}
 http://pc3.2ch.net/test/read.cgi/hp/991906104/
・代替スタイルシートに萌え〜
 http://pc3.2ch.net/test/read.cgi/hp/991400015/
・CSSコミュニティの功罪を評価するスレ 6rd Stuff
 http://pc3.2ch.net/test/read.cgi/hp/1028647240/



159 名前: Name_Not_Found 投稿日: 02/08/11 09:54 ID:???
>>158
それ>>5で既出。


160 名前: Name_Not_Found 投稿日: 02/08/11 16:55 ID:???
>>159
ここ
・CSSコミュニティの功罪を評価するスレ 6rd Stuff
が新スレになったみたいなんだなー。   ̄ ̄
だから今日からは>>158なんだなー。


161 名前: Name_Not_Found 投稿日: 02/08/11 16:55 ID:???
ミスってageちゃったんだなー。
ゴメン。


162 名前: Name_Not_Found 投稿日: 02/08/11 16:59 ID:???
そんなん移行前にまとめてやればいいじゃん


163 名前: Name_Not_Found 投稿日: 02/08/11 19:18 ID:???
すみません
スレ違いだと思うのですが
外部にjavaスクリプトファイルを作るにはどうすればいいのでしょうか?
cssは作れたのですが・・・


164 名前: Name_Not_Found 投稿日: 02/08/11 19:20 ID:Ze9j2FzY
<script type="text/javascript src="hoge.js"></script>
スレ違いだが。


165 名前: Name_Not_Found 投稿日: 02/08/11 19:20 ID:Ze9j2FzY
<script type="text/javascript" src="hoge.js"></script>
まちがえた。



166 名前: Name_Not_Found 投稿日: 02/08/11 19:24 ID:???
You is a big fool man



167 名前: Name_Not_Found 投稿日: 02/08/11 19:39 ID:???
ありがとうございます
本当にどうも


168 名前: Name_Not_Found 投稿日: 02/08/11 19:41 ID:???
Thank you.
Really plese.


169 名前: Name_Not_Found 投稿日: 02/08/11 19:50 ID:???
すいません
ページへの記述は<LINK rel="javascript" href="usotsuki.js" type="text/javascript">
これだとならないのですが別のですか?


170 名前: Name_Not_Found 投稿日: 02/08/11 19:51 ID:???
外部ファイルは
<script type="text/javascript" src="usotsuki.js">
<!-- 不可視領域
function swMenu(elem){
if(elem.style.display != "none"){
elem.style.display = "none"
} else{
elem.style.display = "inline"
}
}
function dispImg(image,text) {
photoArea.innerHTML = "<img src='" + image + "'><br><br><div style='font-size:9pt;text-align:center;image-align:center'>" + text + "<"+"/div>"
window.status = photoArea.innerHTML
}
// 不可視領域終了 -->
</script>
こんな風に書きました


171 名前: Name_Not_Found 投稿日: 02/08/11 19:51 ID:???
>>169
>ページへの記述は
って何が?


172 名前: Name_Not_Found 投稿日: 02/08/11 19:51 ID:???
<html>
への書き込みです


173 名前: Name_Not_Found 投稿日: 02/08/11 19:55 ID:Ze9j2FzY
HTMLのほうに>>165をかくんだよ


174 名前: Name_Not_Found 投稿日: 02/08/11 19:56 ID:???
<html <LINK rel="javascript" href="usotsuki.js" type="text/javascript"> >



175 名前: Name_Not_Found 投稿日: 02/08/11 19:56 ID:???
>>169
スレ違い


176 名前: Name_Not_Found 投稿日: 02/08/11 19:57 ID:???
>>174
ありがとうございます
助かりました
>>175
板汚してすいません
今後はしませんし、自覚してます


177 名前: Name_Not_Found 投稿日: 02/08/11 19:59 ID:???
>>176
自覚しましたでしょ。
自覚してるんだったら書き込むなよ。


178 名前: Name_Not_Found 投稿日: 02/08/11 20:03 ID:???
>>177
くどいですよ


179 名前: Name_Not_Found 投稿日: 02/08/11 20:37 ID:???
onmouseover='this.style.backgroundColor="#FFDDDD",
this.style.color="#444444",this.style.fontSize=13' onmouseout='this.style.backgroundColor="black",this.style.color="red",this.style.fontSize=13'
これcssに書き込めますか?
よろしくお願いします


180 名前: Name_Not_Found 投稿日: 02/08/11 20:52 ID:???
>>179
書き込めたよ。


181 名前: Name_Not_Found 投稿日: 02/08/11 20:54 ID:???
span.1{この部分}
この部分に書いたんですが作動しません
>>180さん、どうかきましたか?


182 名前: 180 投稿日: 02/08/11 20:57 ID:???
span.1{
/* >>179 */
}


183 名前: Name_Not_Found 投稿日: 02/08/11 21:04 ID:???
やっても作動しないのですが
span.1{
/* onmouseover='this.style.backgroundColor="#FFDDDD",
this.style.color="#444444",this.style.fontSize=13' onmouseout='this.style.backgroundColor="black",this.style.color="red",this.style.fontSize=13'*/
}
これだといけないのでしょうか?


184 名前: Name_Not_Found 投稿日: 02/08/11 21:12 ID:???
/* これはコメントです。
「CSS」と「JavaScript Stylesheet」の違いを勉強しましょう */


185 名前: Name_Not_Found 投稿日: 02/08/11 21:32 ID:???
>>179
無理だから


186 名前: Name_Not_Found 投稿日: 02/08/11 21:38 ID:???
なるほど


187 名前: Name_Not_Found 投稿日: 02/08/11 21:48 ID:Ze9j2FzY
>>179
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--

span.c1 a:link
{
color: red;
background-color: black;
font-size: 13pt;
text-decoration: none;
}
span.c1 a:visited
{
color: red;
background-color: black;
font-size: 13pt;
text-decoration: none;
}
span.c1 a:hover
{
color: #444444;
background-color: #ffdddd;
font-size: 13pt;
text-decoration: none;
}
-->
</style>
</head>
<body>
<p>
<span class="c1"><a href="#">ABCDE</a></span>
</p>
</body>
</html>



188 名前: Name_Not_Found 投稿日: 02/08/11 21:53 ID:???
>>187
使えませんでした


189 名前: Name_Not_Found 投稿日: 02/08/11 21:59 ID:???
バリバリ使えるんだが?


190 名前: Name_Not_Found 投稿日: 02/08/11 22:09 ID:???
自分のHPに適用したら拒否されました


191 名前: Name_Not_Found 投稿日: 02/08/11 22:18 ID:???
君のやり方でいくとこうなる。タグに含めるんだな。

<span
onmouseover='this.style.backgroundColor="#FFDDDD",this.style.color="#444444",this.style.fontSize=13'
onmouseout='this.style.backgroundColor="black",this.style.color="red",this.style.fontSize=13'>ABCDE</span>

ホントは分離したい。

<span onmouseover='eve1()'>ABCDE</span>

eve1()を別途定義するわけだが、それは自分で勉強してくれ。
ちなみに、このレベルでjavascriptスレに行くと苛められるから止めとけ。


192 名前: Name_Not_Found 投稿日: 02/08/11 22:27 ID:???
はい、ありがとうございました


193 名前: Name_Not_Found 投稿日: 02/08/11 22:34 ID:???
>>192
あんた、もーちょいCSSの基礎から学ぶことをすすめする。
CSSは他との組み合わせによって表示が崩れたりするから
何が原因かをつかめるようにしといた方がいいぞ。
その場しのぎで今回に限って使いたいってのならまた別だが。


194 名前: Name_Not_Found 投稿日: 02/08/11 22:39 ID:Ze9j2FzY
なんだよJavaScripじゃなくてCSSでやりたいけどって意味じゃないのか世。


195 名前: Name_Not_Found 投稿日: 02/08/11 23:13 ID:???
どっちにしろ無理だろ


196 名前: Name_Not_Found 投稿日: 02/08/11 23:37 ID:7pBl8Tl1
CSSなのかJavaScriptか分からないので
こちらに書かせていただきます。

マウスカーソルの形を変えているサイトはよく見るのですが、
自分でそのマウスカーソルの画像を作るにはどうしたらよいのでしょうか?
もちろん、自分のパソコンだけでなく、
サイトの訪問者全員が見られるようなものです。
どなたかよろしくお願いします。


197 名前: Name_Not_Found 投稿日: 02/08/11 23:42 ID:???
>>196
そんな事するな。アクセシビリティ、ユーザビリティ共に不便な事極まりない。
以上。


198 名前: Name_Not_Found 投稿日: 02/08/11 23:54 ID:???
>>196
ウィンドウズ用のカーソルファイルを作って、CSSで

body { curosr: url(my.cur); }

とする。ただしIE6のみ。



199 名前: 196 投稿日: 02/08/12 00:05 ID:???
>>197
すみません。
あるサイトで普通のマウスカーソルに色がついたものを見て
どうやってやってみるのか知りたかったんです。

>>198
できました。ありがとうございます!


200 名前: Name_Not_Found 投稿日: 02/08/12 05:21 ID:???
スクロールバーの色変えるのあるじゃないですか?
詳しく忘れたけど、
bodyのあとに、カーソルの色、矢印の色って、設定するやつです。

それは出来るんですが、
例えば、フレームを使ってるページで、
「フレーム内に表示されるものは、全部このスクロールバー」
っていう風に設定できないですか?

おそらく出来ないんでしょうけど、
もしあれば、楽だなぁなんて思いまして・・・


201 名前: Name_Not_Found 投稿日: 02/08/12 05:27 ID:???
>>200
そうですか。あれば楽ですね。


202 名前: Name_Not_Found 投稿日: 02/08/12 08:16 ID:???
>>200
あんまり言ってるいみがわかんないけど、
フレームの各ページにそれぞれの設定した外部スタイル
読み込ませればいいんじゃない?


203 名前: Name_Not_Found 投稿日: 02/08/12 13:58 ID:???
全部タグに書いてるので外部スタイルなんて知らない罠


204 名前: Name_Not_Found 投稿日: 02/08/12 14:48 ID:eBRpVk6L
ちょっとお聞きしたいんですが
border-styleのdashedはNN4.7では表示されないんでしょうか?



205 名前: Name_Not_Found 投稿日: 02/08/12 14:49 ID:???
はい


206 名前: Name_Not_Found 投稿日: 02/08/12 14:50 ID:eBRpVk6L
そうですかー
ありがとうです


207 名前: Name_Not_Found 投稿日: 02/08/12 14:52 ID:???
なんで改行がBRじゃだめなんですか


208 名前: Name_Not_Found 投稿日: 02/08/12 14:54 ID:t/7110mz
だめじゃないけど


209 名前: Name_Not_Found 投稿日: 02/08/12 14:57 ID:???
でも<P>が多いですよね。
<BR>が好きなんでDreameWeaverでもいつもshift+enterなんですけど


210 名前: Name_Not_Found 投稿日: 02/08/12 15:01 ID:???
突っ込まれる前にDreame=Dream


211 名前: Name_Not_Found 投稿日: 02/08/12 15:03 ID:???
好き嫌いじゃなくて時と場合によりけり。
PとBRはそもそも用途が違うでしょ。


212 名前: Name_Not_Found 投稿日: 02/08/12 15:12 ID:???
段落、ですよね。
でも一行改行するだけでも<br><br>としてしまう
俺はだめですか


213 名前: Name_Not_Found 投稿日: 02/08/12 15:15 ID:???
だめです


214 名前: 212 投稿日: 02/08/12 15:22 ID:???
だめ人間に認定されますた


215 名前: Name_Not_Found 投稿日: 02/08/12 15:24 ID:???
ヤッタネ


216 名前: Name_Not_Found 投稿日: 02/08/12 15:28 ID:???
俺も<br><br>だよ…


217 名前: Name_Not_Found 投稿日: 02/08/12 15:41 ID:wYZ/F30x
body { font: 16px #000000 "MS Pゴシック";
background: #ffffff fixed url(kabe.gif); }
h1 { font: 14px #000000 "MS Pゴシック" }
こんな感じの外部スタイルソートを指定して、
文字を少し小さくしたい所だけ<h1>ここに小さくしたい文章</h1>
としているのですが、NNで表示させるとフォントがやけにでかくなります。
<h1>の使い方間違ってますか?


218 名前: Name_Not_Found 投稿日: 02/08/12 15:44 ID:???
NNもバージョンによる可能性あり。

あと、スタイルシートなしのときとの大きさは?


219 名前: Name_Not_Found 投稿日: 02/08/12 15:47 ID:???
<hx>←文字装飾目的に使ってるなら間違い。


220 名前: Name_Not_Found 投稿日: 02/08/12 15:48 ID:???
何から何までネタですか?


221 名前: Name_Not_Found 投稿日: 02/08/12 15:49 ID:???
>>217
デザイン目的で装飾したいならdivやspan、
文字を小さくするだけならsmallでも使いなさい。


222 名前: 217 投稿日: 02/08/12 15:50 ID:wYZ/F30x
外部スタイルシートへのリンクをはずし、
<h1>をはずし、NNで表示させるとと普通のサイズになります。
(K@tsukun's PAGE!さんをNNで見たときと同じ)
ちなみにNN4.78とNN7どちらもためしました。


223 名前: 217 投稿日: 02/08/12 15:55 ID:wYZ/F30x
ネタじゃないんです。。。<div>や<span>で指定すると、
文字装飾の指定できる数にも限界がありますよね?
<hx>なら<h2><h3>..としていけば、、と思っていたもので、、
すいません。。アホです、、


224 名前: Name_Not_Found 投稿日: 02/08/12 15:56 ID:???
>>223
classやidといった概念があるので>>4当たりのサイトを見て勉強してください


225 名前: 217 投稿日: 02/08/12 15:59 ID:wYZ/F30x
はい、電波な質問連発ですいませんでした。
>>4で勉強してきます。


226 名前: 217 投稿日: 02/08/12 16:19 ID:???
できました!
ではお世話になりました。


227 名前: Name_Not_Found 投稿日: 02/08/12 16:25 ID:???
>>223
class指定って知ってるか?


228 名前: 227 投稿日: 02/08/12 16:26 ID:???
うわ、もう解決済みって話?
バカは漏れか・・・。
逝ってきます。


229 名前: Name_Not_Found 投稿日: 02/08/12 17:23 ID:???
>>227-228
オツカレ(w


230 名前: Name_Not_Found 投稿日: 02/08/13 07:20 ID:???
特定の列にtext-alignを一括指定する方法はないのでしょうか?
CSS2仕様書では、
'border' 'background' 'width' 'visibility'
のセルそのものを操作するプロパティしか選べなくて、セル内の
テキストを一括して操作するのは無理っぽいんですが。

IE6では無理やりテキスト操作しますが、Mozillaでは仕様書通りの
動作をするので・・・。できたら便利なんだけどな。


231 名前: Name_Not_Found 投稿日: 02/08/13 07:21 ID:???
関連URLです。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/tables.html#q4


232 名前: いつも名無し 投稿日: 02/08/13 12:36 ID:???
<col span="x" style="text-align:center">でいくしか思いつかない。
ところでMac IE5.0ってテーブルtext-align:center指定すると無視らない??


233 名前: Name_Not_Found 投稿日: 02/08/13 15:13 ID:???
>>230
3列目を中央揃えなら
tr > * + * + td {text-align: center}
tr > * + * + * + td {text-align: left}


234 名前: Name_Not_Found 投稿日: 02/08/13 15:18 ID:???
>>230
<col align="right">
でやるのが正しいのでは。
col, colgroup, td, thのalign属性はstrict DTDに含まれてるし。


235 名前: Name_Not_Found 投稿日: 02/08/13 16:54 ID:???
>>232
無視はしないと思うが?
と言うか、tableにtext-align:centerを指定すると
結果がどうなるべきかわかってるよね?



236 名前: いつも名無し 投稿日: 02/08/13 17:38 ID:???
>235
中身のテキストや画像が中央揃いになるはずなんだけど、ならない……。
Windowsだとなるんだけど。


237 名前: 235 投稿日: 02/08/13 17:51 ID:???
>>236
スマン、tableに指定しても無視するかも。
tdにtext-algin:centerを指定してみれ。



238 名前: 235 投稿日: 02/08/13 18:01 ID:???
てことで、ちょっと確認してみた。
tableに指定しても無視するね。
俺は自分のサイトでtdに指定してたよ(鬱)



239 名前: 230 投稿日: 02/08/13 20:21 ID:???
>>234
なるほど、CSSでなく、HTMLでやればよかったのですね。
アドバイスをしてくださった皆さん、ありがとうございました。
これから試してみます。



240 名前: Name_Not_Found 投稿日: 02/08/13 21:36 ID:xrDFbzG4
みんな、動作確認のブラウザはverいくつを使ってる?特にIE。

うかつに上げる訳にはいかないけど、CSSの現状も体感しておきたい。。
リファレンス本の対応表だけで知った顔してるのもアレだしね。

PC一台しかもってない身は潮時の見極めが難しいな。


241 名前: Name_Not_Found 投稿日: 02/08/13 21:40 ID:???
>>240

6と5.01SP2と4.01SP2を用意。
まあ6と5.0xで行けるなら間の5.5でも大丈夫だと思い、5.5は省略。

難しいことをやると4.0xで崩壊することがあるので、時々チェック。

4からのバージョンアップした5なら(インストール時に指定したら)
4互換モードがあるので、それでもよい。

GeckoモノやOperaは最新版だけでよかろう。


242 名前: Name_Not_Found 投稿日: 02/08/13 21:59 ID:???
3つも使えるのか…うらやましいな。
俺はつい最近、魔がさして5.0→5.5に上げてしまった。

あの頃の非対応ぶりを忘れるべからず、と自戒しつつも、やっぱりどこかで
下位互換に対する意識が甘くなっていっちゃうんだよね。1つだけしか持ってないと。

>GeckoモノやOperaは最新版 には同意だな。


243 名前: いつも名無し 投稿日: 02/08/13 23:16 ID:???
>>237-238 サンクス。セルに指定してみますわ こんなバグあったんだな……


244 名前: Name_Not_Found 投稿日: 02/08/14 00:37 ID:???
>>240
N7.0PR1(Win&Mac)、WinIE5.5、MacIE5.1.5、Opera6.04で確認してる。
スタイルシート適用除外のブラウザ(N4.79、iCabとか)でも
一応念のためチェックしているけど、こっちはあまり意味はないな。
むしろlintで文法チェックすることの方を重視してる。




245 名前: Name_Not_Found 投稿日: 02/08/14 04:14 ID:???
imgにボーダーなしで
a:hoverの時のみボーダー出るようにするにはどうすればいい?


246 名前: Name_Not_Found 投稿日: 02/08/14 06:03 ID:???
>>245
imgのボーダー関連は色々と問題があるから
具体的にどうやって、どう駄目だったか説明してくれないと。


247 名前: 245 投稿日: 02/08/14 06:29 ID:???
本当はimgにボーダー表示したくないんだけど
1px指定しないとa:hoverも反映されないんだ
だから今はこういうソースになってるよ

img{
border : 1px solid #000000;
}
a:hover img{
border : 1px dashed #ff0000;
}

どうすればいいかな?


248 名前: Name_Not_Found 投稿日: 02/08/14 06:31 ID:???
>>247
それでいい


249 名前: 245 投稿日: 02/08/14 06:34 ID:???
む、無理ってこと?


250 名前: Name_Not_Found 投稿日: 02/08/14 09:05 ID:???
ポイントは擬似要素


251 名前: Name_Not_Found 投稿日: 02/08/14 10:13 ID:4zvpkbJP
画面の左に線を出したいのですが

html{
margin: 0;
padding: 2em;
border-color: #fff;
border-style: solid;
border-width: 0 0 0 4ex;
}
とするとUAの枠が消えてしまい、違和感が残るので
body{
margin: 0;
padding: 2em;
border-color: #fff;
border-style: solid;
border-width: 0 0 0 4ex;
}
としましたら、UAの枠は残っていましたが 線が途中で切れてしまいます

UAの枠を残して尚且つ画面いっぱいまで線を出すにはどうしたらいいでしょうか?
意味不明ですいません。


252 名前: Name_Not_Found 投稿日: 02/08/14 10:34 ID:???
UAの使い方間違ってる。
htmlに指定したらできるぞ?
html{
margin: 0;
background:black;
border-color: #fff;
border-style: solid;
border-width:0 0 0 3em;
}


253 名前: 251 投稿日: 02/08/14 10:41 ID:???
アフォか。志ね


254 名前: Name_Not_Found 投稿日: 02/08/14 11:09 ID:???
騙りか?


255 名前: 251 投稿日: 02/08/14 12:34 ID:???
>>768
( ´,_ゝ`)プッ


256 名前: いつも名無し 投稿日: 02/08/14 16:22 ID:???
それを見た瞬間、私は凄い誤爆だと思ったんですよ。


257 名前: Name_Not_Found 投稿日: 02/08/14 16:50 ID:cPg04FUD
positionがabsoluteのボックスでは、margin-left:autoとmargin-right:autoで
センタリング出来ますか。どうも左寄せのままになってしまうのですけれども。


258 名前: Name_Not_Found 投稿日: 02/08/14 16:54 ID:???
>>257
絶対無理。



259 名前: 257 投稿日: 02/08/14 16:55 ID:cPg04FUD
初心者で申し訳ないのですが、どうしたらうまくセンタリングできますか。



260 名前: Name_Not_Found 投稿日: 02/08/14 16:57 ID:???
>>259
ボックス位置を絶対指定してるしてるのに、センタリングしたいってのが意味不明。
absolute削って、普通にmarginをautoにすればいい。


261 名前: 257 投稿日: 02/08/14 17:01 ID:cPg04FUD
absoluteを削るとボックスの中のボックスが外に出てしまうのですけど。



262 名前: Name_Not_Found 投稿日: 02/08/14 17:05 ID:???
>>261
absolute指定したボックス内のボックスをセンタリングしたいってことね。。
んじゃ、普通に内側のボックスにmargin:autoを指定してやればできるでしょ?


263 名前: Name_Not_Found 投稿日: 02/08/14 17:09 ID:???
.outer {
color:white;
background:black;
width:300px;
height:300px;
position:absolute;
top:100px;
left:100px;
}

.inner {
color:white;
background:red;
width:100px;
height:100px;
margin:auto;
}
==================
<div class="outer">
<p class="inner">うんこ</p>
</div>
というような感じ方


264 名前: 257 投稿日: 02/08/14 17:09 ID:cPg04FUD
いえ、ボックスの中は絶対位置で配置してあるのです。
その配置してあるボックスを囲っているボックスを、
ページの真ん中にもってきたいのです。


265 名前: Name_Not_Found 投稿日: 02/08/14 17:12 ID:???
>>264
ガーン・・・
それは無理。絶対指定ってのは親要素を無視(影響を与えない)するから親要素なんだよ
内側のボックスはrelativeにするとできるけど。absoluteジャム理。



266 名前: Name_Not_Found 投稿日: 02/08/14 17:12 ID:???
>>265
するから絶対指定ね


267 名前: 257 投稿日: 02/08/14 17:14 ID:cPg04FUD
そうですか・・・、ありがとうございました。
他のレイアウトを考えて見ます。では。


268 名前: 投稿日: 02/08/14 17:39 ID:???
#outer {position: relative; top: 0; left: 0; margin: auto; width: 400px; height: 300px; border: solid 1px green;}
#outer #inner1 {position: absolute; bottom: 10px; left: 30px; width: 200px; height: 100px; border: solid 1px blue;}
#outer #inner2 {position: absolute; top: 40px; right: 80px; width: 260px; height: 120px; border: solid 1px red;}

<body>

<div id="outer">
<p id="inner1">inner1</p>
<p id="inner2">inner2</p>
<p>normal</p>
</div>

</body>

こういうことがやりたいんじゃないの?
outer はページ(左右)中央で,その中の inner1, 2 は outer に対して
絶対位置ってことじゃないの?



269 名前: 257 投稿日: 02/08/14 18:32 ID:cPg04FUD
そうです。


270 名前: 257 投稿日: 02/08/14 18:34 ID:cPg04FUD
ありがとうございます。上のソースは参考にさせていただきます。


271 名前: 245 投稿日: 02/08/14 22:23 ID:???
>>245 >>247っす
できるはずだよ
以前どこかのサイトでしているのを見た
教えて欲しいっす


272 名前: Name_Not_Found 投稿日: 02/08/14 22:46 ID:???
>>271
しつこい。
だったらそのサイトを探せ。


273 名前: Name_Not_Found 投稿日: 02/08/14 23:13 ID:???
img{
border : 1px solid #000000;
}

img:focus {
border : 1px dashed #ff0000;
}


274 名前: 245 投稿日: 02/08/14 23:17 ID:???
だからさー
できるっていってんだからさー
あ もしかしてここの人スキル低いの?(w
ごめんねー


275 名前: Name_Not_Found 投稿日: 02/08/14 23:19 ID:D4X/kADy
>>274
あほか。


276 名前: 245 投稿日: 02/08/14 23:23 ID:???
>>275
わかんねえなら黙ってろって(w


277 名前: Name_Not_Found 投稿日: 02/08/14 23:47 ID:???
>>276
わかんねぇなら調べろって(激ワラ
つーか、騙ってんなよ。おばぁちゃんの家からアクセスか?
そのまま、行方不明でもなれば?(pu


278 名前: Name_Not_Found 投稿日: 02/08/14 23:59 ID:???
>>274
img{margin:1px}
a:hover img{border:1px solid #000}

とかで、できるかもなー。

ってことで失せろ。


279 名前: Name_Not_Found 投稿日: 02/08/14 23:59 ID:???
>>277
>わかんねぇなら調べろって(激ワラ
これじゃ質問スレッドの意義無いだろー アフォってやつですかー?

>つーか、騙ってんなよ。おばぁちゃんの家からアクセスか?
君、どこからおばあちゃんが出てくるのかね
おばあちゃんっこですかー?

>そのまま、行方不明でもなれば?(pu
意味不明ですねー


280 名前: 274 投稿日: 02/08/15 00:00 ID:???
img{margin:1px}
a:hover img{border:1px solid #000;margin:0}

marginなくすの忘れてた。




281 名前: 274 投稿日: 02/08/15 00:01 ID:???
>>274 は 278ね。


282 名前: Name_Not_Found 投稿日: 02/08/15 00:04 ID:???
>>279
ぎゃはは、脳天爆発してんな、おまえ
いちいち引用して、解説まで加えちゃって(ぷー
めでてーめでてー 、ごくろうさん(ハァト




283 名前: Name_Not_Found 投稿日: 02/08/15 00:08 ID:???
おいおい 煽る方が電波になってるぞ


284 名前: Name_Not_Found 投稿日: 02/08/15 00:16 ID:???
>>280
それじゃできないだろ


285 名前: Name_Not_Found 投稿日: 02/08/15 09:00 ID:???
いままで何度となくこのスレを救ってきた頼みの一言!

↓はい、次の質問。


286 名前: Name_Not_Found 投稿日: 02/08/15 09:37 ID:???
http://pc3.2ch.net/test/read.cgi/hp/1026611260/731n
を読めやゴルァ。

↓改めて、次の質問。


287 名前: Name_Not_Found 投稿日: 02/08/15 11:18 ID:???
感情的にならない
   何の説明なく決め付ける文はよい印象を与えない。
   また態度の大きい人は嫌われる。
      ex) 答えられねぇんなら黙ってろ!!! <お前だけだよ>

弱気な表現は避ける
   弁解じみた表現は良くない。また、まわりくどい。
      ex) 超初心者で何もわかりませんが……
         <わからないなら>>3-5,>>23を読めよ>

表記ミスに注意
   内容がどんなにすばらしくても
   文字使いにミスがあると誤解を招く。

曖昧文は書かない
   いくつにも解釈できる文章は絶対に書かない。
      ex) ここではきものをぬいでください。

「」など無駄な強調は避ける
   読みにくい。♪や顔文字も同様である。

情報を小出しにしない
   読み手は馬鹿にされた気分になる。
   無駄な倒置も不要だ。
   使用したブラウザ、バージョン、OSくらい書こう。


288 名前: Name_Not_Found 投稿日: 02/08/15 14:32 ID:???
<わからないなら>>158,>>3-4を読めよ>


289 名前: Name_Not_Found 投稿日: 02/08/16 09:32 ID:???
読むのがめんどくせーから聞いてんだよ
その程度の事もわからねーのか


290 名前: Name_Not_Found 投稿日: 02/08/16 09:40 ID:???
夏、真っ盛りだな


291 名前: 230 投稿日: 02/08/16 09:46 ID:???
以前テーブルの列にtext-alignを指定する方法について質問した者です。
>>232-234の方法を試してみたのですが、WinNetscape7.0PR1は、
いずれの方法も無視してくれました。WinIE6.0は>>234だけが効きませんでした。
ブラウザが実装してないんですかね?


292 名前: Name_Not_Found 投稿日: 02/08/16 11:16 ID:???
div{
border:1px solid #000000;
margin: 0px 0px 1px 0px}

<div>Name_Not_Found</div>
<div>Name_Not_Found</div>
<div>Name_Not_Found</div>

そんなに変なことやってないと思うんですけど、IE5.0ではボーダー同士がくっついてしまいます。
marginを 0 0 3 0 にしたら、1px分だけ開きました。これはなんでしょうか?

IE6.0、Mozilla1.0、Opera6.03では期待通りに動きます。後方互換モードです。


293 名前: Name_Not_Found 投稿日: 02/08/16 11:57 ID:???
>292
IEはボーダーの内側からマージンを取ってるんじゃないの?
マージン幅変えたり実験してんなら、自分でわかりそうなもんなんだけど・・・


294 名前: Name_Not_Found 投稿日: 02/08/16 12:50 ID:???
>293
IE5と6ではマージンの計り方が違うということですか?
んー、もうちょっと弄ってみます。。


295 名前: Name_Not_Found 投稿日: 02/08/16 13:21 ID:ygVfxhJl
body {} html {}
bodyとhtmlにスタイルするのはどちらも同じですか?


296 名前: Name_Not_Found 投稿日: 02/08/16 13:29 ID:???
>>295
ブラウザによりちょこっと変わる。


297 名前: ひよっこ ◆HeNslLTA 投稿日: 02/08/16 14:58 ID:???
>>274
自分がわからなくて例え相手もわからなくても、
聞いてる側は下手に出なきゃいかんのです。
それが礼儀ってもんであり、厨房脱出の第一歩かもしれん。

あ、言うまでもなく僕はどうすればできるかは分かりません。
チョト覗きに来ただけなもんで。。


298 名前: Name_Not_Found 投稿日: 02/08/16 15:43 ID:???
頼むから終わってる話題にレスして話題をループさせるようなマネは控えてくれんかね、夏君


299 名前: Name_Not_Found 投稿日: 02/08/16 18:21 ID:???
>>298
>>298


300 名前: Name_Not_Found 投稿日: 02/08/16 19:29 ID:a9NK8/fD
"Valid CSS!"貼ってる人いる?


301 名前: ひよっこ ◆HeNslLTA 投稿日: 02/08/16 21:45 ID:???
>>298すごくごめん


302 名前: Name_Not_Found 投稿日: 02/08/16 21:54 ID:wM4ZxKRU
>>300
いっぱいいる


303 名前: Name_Not_Found 投稿日: 02/08/17 00:29 ID:???
いっぱいいるのか…


304 名前: Name_Not_Found 投稿日: 02/08/17 01:29 ID:???
しかし、あんなバナー貼りたくない。カコワルイ


305 名前: Name_Not_Found 投稿日: 02/08/17 02:54 ID:???
テキストに
line-height: 150%;適用してるんですけど
imgを貼ると文字の間隔が狭くなります
解決法はあるのでしょうか?


306 名前: Name_Not_Found 投稿日: 02/08/17 03:18 ID:???
>>305
んなこたーない。


307 名前: 305 投稿日: 02/08/17 03:28 ID:???
本当です。
ソースは↓です。

.text{
line-height : 150%;
}
<span class="text">
ラインヘイト無効になります。<img src="mojikankakusemakunaru.gif" width="15" height="15">
</span>


308 名前: 305 投稿日: 02/08/17 03:30 ID:???
すいません間違えました。

<span class="text">
ラインヘイト無効になります。<br>
ラインヘイト無効になします。<img src="mojikankakusemakunaru.gif" width="15" height="15">
</span>



309 名前: Name_Not_Found 投稿日: 02/08/17 03:31 ID:eZ4cXauS
ヘイトじゃなくてハイトな。


310 名前: Name_Not_Found 投稿日: 02/08/17 04:02 ID:v5NbE3a3
画像を、文字の右にもっていきたいのですが、
画像をdivかspanのとちらで囲めばいいですか?

<h1>タイトル</h1>
<img src="xxx.jpg" width="10" height="10" alt="女の子の画像">

タイトルの右に画像を持っていきたい場合、H1にfloat:leftとしますが、
imgはdivか、spanどちらで囲めばいいですか?


311 名前: Name_Not_Found 投稿日: 02/08/17 04:06 ID:???
h1{
display:inline;
}


312 名前: Name_Not_Found 投稿日: 02/08/17 04:41 ID:v5NbE3a3
#a {width:10px
padding:100px;}
とするのはおかしいですか?



313 名前: Name_Not_Found 投稿日: 02/08/17 04:46 ID:v5NbE3a3
>>311
ありがとうございました。


314 名前: Name_Not_Found 投稿日: 02/08/17 05:47 ID:???
クリックで救える命がある。
http://www.dff.jp/


315 名前: Name_Not_Found 投稿日: 02/08/17 10:54 ID:???
>>310

StrictなHTMLではbodyの直下にインライン要素を置けないので、
ブロックレベル要素のほうがいいんだが、Transitional系HTMLなら
そういう制限はないから別にspanでもいいんだけど、レイアウトの
自由度からするとブロックレベルのほうがいいような。


あとその場合、altの使用が不適切だなあ。
そういう装飾用のワンポイント画像(サイズから判断した)なら、alt=""
のほうがいい。

俺なら、その画像はimgで挿入するのではなく、H1の背景画像に
しちゃうけど。


316 名前: ひよっこ ◆HeNslLTA 投稿日: 02/08/17 16:09 ID:GRDQ60Qk
<HR>タグのborderを設定してるのですが、
paddingもしくはmarginのbottomって設定できますか?
下に空白を開けたくないんですが、なかなかできないのです。


317 名前: いつも名無し 投稿日: 02/08/17 17:05 ID:???
>>316
フツウに出来ると思うが。

hr{
border : #SIZE #COLOR #STYLE ; /* 順不同可 */
padding : ???? ;
margin-bottom : ???? ;
}

でダメなの?


318 名前: Name_Not_Found 投稿日: 02/08/17 22:51 ID:HBsGMFLB
すいません、便乗で質問があります。

>>310さんのようなHTMLでCSSを使って画像をタイトルの左にもっていきたいのですが
どのように指定すればよろしいのでしょうか?


319 名前: ひよっこ ◆HeNslLTA 投稿日: 02/08/17 23:16 ID:???
view-source:http://kusemono.tripod.co.jp/
これなんですが116行目の所のHRと下の<H3>との間が詰まりません。
padding:0px;
http://kusemono.tripod.co.jp/css/design_base.css
HR.2を<HR class="2">って感じで入れてるのですがどこが原因かわかりません。
もし分かりましたら教えてください。


320 名前: Name_Not_Found 投稿日: 02/08/17 23:33 ID:???
>319
HRの線自体が上下に空白の入った画像みたいなものだからそれ以上は無理。


321 名前: 305 投稿日: 02/08/18 00:04 ID:???
やっぱり回避できないんですかね?


322 名前: ひよっこ ◆HeNslLTA 投稿日: 02/08/18 00:18 ID:???
>>320 わかりました。どうもありがとございました。
    できないとは知らず試行錯誤してました(恥ずかし..


323 名前: Name_Not_Found 投稿日: 02/08/18 00:28 ID:???
>>322
<hr>を消して(display:none;とかで)、h3のborder-topに同じ色の
線引くのじゃダメなん??


324 名前: ひよっこ ◆HeNslLTA 投稿日: 02/08/18 00:51 ID:???
>>323
H3
{ border-top-width:3px;
border-top-color:red;
margin-bottom:0px;
margin-top:0px;
padding-left:12px;
padding-top:2px;
padding-bottom:1px;
color:#2f4f4f;
background:#d3d3d3}

これに変えてみたのですが(色は暫定的にわかりやすい色で)
どうもうまくでません。
HR.2というのにdisplay:none;を入れたんですが。
何度も聞いて済みませんが教えていただけないでしょうか?


325 名前: Name_Not_Found 投稿日: 02/08/18 01:02 ID:EGg0ZDBK
>>324
border-top に style 設定しる


326 名前: Name_Not_Found 投稿日: 02/08/18 01:13 ID:???
318です。
あれから色々と試行錯誤してみましたが、やはりどうもうまくいきません。
どなたか、よろしければヒントを下さいませ。


327 名前: Name_Not_Found 投稿日: 02/08/18 01:39 ID:???
>>318
CSS使わんでも普通に画像の回り込みをさせるだけではダメなのか?


328 名前: ひよっこ ◆HeNslLTA 投稿日: 02/08/18 01:43 ID:???
>>325 できました!すごいです。
    ちょっとしたアクセントが欲しかったんですけれど
    助かりました。ありがとうございます。


329 名前: 318 投稿日: 02/08/18 01:44 ID:d1AwvBx1
>>327
レスありがとうございます。
なるべくならStrictでやっていきたいと思っているのです。
現状のCSSではできないということでしょうか?


330 名前: Name_Not_Found 投稿日: 02/08/18 01:58 ID:???
>>329
ん…imgの回り込み指定はstrictじゃなかったのか?alignは何が何でもダメだったっけ、わかんね。
いや、別にCSS使えばすぐに出来るよ、float使えばいい。


331 名前: 318 投稿日: 02/08/18 02:38 ID:d1AwvBx1
レス感謝です。
alignはStrictではなかったと思います。
CSSでもfloatを使えばできるとのことですが

<h1>タイトル</h1>
<p>段落<p>
<img src


332 名前: 318 投稿日: 02/08/18 02:38 ID:d1AwvBx1
それを

┌────┐タイトル
│    │段落
│イメージ│
│    │
└────┘

のようにしたいのです。
具体的には美術館のように絵とそれのタイトルと説明をいれたいのです。

確か過去のスレにも似たような質問をされている方がいましたが、そのときは

<img src


333 名前: Name_Not_Found 投稿日: 02/08/18 02:39 ID:d1AwvBx1
レス感謝です。
alignはStrictではなかったと思います。
CSSでもfloatを使えばできるとのことですが

<h1>タイトル</h1>
<p>段落<p>
<img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">

例えばこのようなHTMLでイメージをテキストより左におく場合、
どこにどのようにfloatを指定すれば良いのでしょうか?

イメージにfloat:leftを指定するだけでは

タイトル
段落
┌────┐
│    │
│イメージ│
│    │
└────┘

このようになってしまいます。

↓続きます。


334 名前: Name_Not_Found 投稿日: 02/08/18 02:40 ID:d1AwvBx1
それを

┌────┐タイトル
│    │段落
│イメージ│
│    │
└────┘

のようにしたいのです。
具体的には美術館のように絵とそれのタイトルと説明をいれたいのです。

確か過去のスレにも似たような質問をされている方がいましたが、そのときは

<img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">
<h1>タイトル</h1>
<p>段落<p>

のようなHTMLだったので自分のとは状況が違っていました。

なにやら初歩的な質問をしているようで申し訳ありませんが、よろしければもう少々
お知恵をお貸し下さい。



335 名前: 318 投稿日: 02/08/18 02:41 ID:???
すいません、一回目の書き込み途中できれてしまいました。
板汚しすいません。


336 名前: Name_Not_Found 投稿日: 02/08/18 02:54 ID:EGg0ZDBK
アフォの意見
h1 と p に 画像の幅のぶんだけ margin-left 設定して
画像は絶対配置でその余白のとこに置く・・・


337 名前: Name_Not_Found 投稿日: 02/08/18 03:49 ID:???
<img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">
<h1>タイトル</h1>
<p>段落<p>

何でこの形にしないのか


338 名前: Name_Not_Found 投稿日: 02/08/18 04:10 ID:???
>>331-334
というか、Strictではbody直下にimgは置けないんだけど。


339 名前: Name_Not_Found 投稿日: 02/08/18 04:14 ID:???
>>337

Strictな考えからいうと、その場合画像はそのタイトルを説明する物だから、
段落と同格でHTML上タイトルより先に画像を配置するのは不自然では?

それに例えば
 <h1>美術作品</h1>
 <h2>XXXX年代の作品</h2>
 <img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">
 <h3>ゴッホの自画像</h3>
 <p>これは****で****な絵。</p>
 <img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">
 <h3>ムンクの叫び</h3>
 <p>これは****で****な絵。</p>
 <h2>YYYY年代の作品</h2>
 <img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">
 <h3>モナリザの手</h3>
 <p>これは****で****な絵。</p>
みたいに画像を先にもっていくと1番めの画像がh2の、2番目のムンクの画像がゴッホの
下の階層、という解釈にならない?

ちなみに俺は美術とか詳しくないからそこら変の突っ込みはご勘弁を。





340 名前: Name_Not_Found 投稿日: 02/08/18 04:18 ID:???
Strictスレより
http://pc3.2ch.net/test/read.cgi/hp/1028963710/87-


341 名前: Name_Not_Found 投稿日: 02/08/18 04:26 ID:???
ここってつまらん突っ込みばっかで結局解決策はでないんだよな(藁)
やっぱCSSなんてクソだな。
Goliveでレイアウトグリッドでも敷いて遊んでろ(藁)


342 名前: 338 投稿日: 02/08/18 04:36 ID:???
>>331-334

その画像が、文書の中で明確な意味を持たない(装飾)ならば、

<div id="header">
<h1>タイトル</h1>
<p>段落</p>
</div>

といったようなHTMLに、

#header {
height : 100px; /* 画像の高さ */
padding-left : 100px; /* 画像の幅 */
background : transparent url(xxx.png) no-repeat scroll left;
}

#header h1,#header p {
margin-left : 1em;
}

という風なstyle指定をしてやるのが妥当かと。
画像の大きさに対して、読み手のウィンドウ幅が小さい場合、
レイアウトが乱れてしまうという難点はあるけど。


343 名前: 338 投稿日: 02/08/18 04:43 ID:???
>>339
スレ違いだけど、画像の説明の場合は、

<dl>
<dt><img></dt>
<dd>説明</dd>
</dl>

とするのが一般的みたいだね。
一般的といっても、あくまでstrict界隈での話だけど。


344 名前: 318 投稿日: 02/08/18 07:39 ID:d1AwvBx1
>>336
アドバイスどうも!
私もそれを考えたのですが、いじる所がおおくて他との兼ね合いで表示が崩れたり
もう少し楽なやり方はないかと探していた次第です。
でもありがとうございます。

>>338
上に書きました通り画像は絵ですので
「その画像が、文書の中で明確な意味を持たない(装飾)」
かどうかは正直怪しいのですが、>>338さんのいうようにしたらできました!
本当にありがとうございます。
これでやっとテーブルレイアウトを卒業できそうです。

レスして下さったみなさん、本当にありがとうございました。
自分の未熟さを知った次第です。
もっと調べて今後は他の方の質問に答えられるようなふうになりたいと思います。
ありがとうございました。


345 名前: Name_Not_Found 投稿日: 02/08/18 08:40 ID:???
>>344
正直、CSSで凝った事やる前にHTMLをもうちょっと勉強した方がいい。
あ、XMLか(w


346 名前: Name_Not_Found 投稿日: 02/08/18 10:39 ID:EflE0iCL
一つの要素に対して二つ以上の背景画像を指定することってできますか。


347 名前: Name_Not_Found 投稿日: 02/08/18 11:23 ID:2WuExo3+
<h2>a</h2>
<h3>b</h3>
h2 margin-bottom:1em;
h3 margin-top:1em;
としたのですが、aとbの間が、1em分しか
あかないのですが、正しいのでしょうか。


348 名前: 318 投稿日: 02/08/18 11:33 ID:???
>>345
ムカッ!もうムカつきました。
こちらが丁寧にレスしているのに随分と失礼な方ですね。

それに、こないだちょっと聞きたいことがあってここで聞こうと思ってスレ立てたら滅
茶苦茶荒らされました。 なんか質問でスレ立てるのはルール違反だの質問スレで
聞けだの言われたけど、初めてここに来た初心者はそんなの知らないことが多いと
思うし 忙しいと検索して探したり過去ログ読んだりなんかできないと思う。急いでる
時なんかは質問スレ行ってもいつ答えてもらえるか分からないし。

そういう人たちに匿名でここまで読んだとか食べ物の話とかして荒らすほうが悪質
じゃないか?本当に困ってる人や初心者で知らずに質問スレ立てる人もいるんだか
ら、少しくらい質問スレが立っても大目に見るべきだと思う。
そうしないとWEB板の住人=知ったかで閉鎖的っていつまでも言われるよ?

ルールで質問スレ立てるの禁止でも上で書いたみたいに仕方が無い場合もあると
思うからWEB板全体のルールを含めて少し質問スレに対する態度を考え直してみ
ませんか?ここで前向きな議論が発展したら他の板にも同じスレを立てて住人の
反省を促していきます。

注・知ったか厨房の荒らし厳禁


349 名前: Name_Not_Found 投稿日: 02/08/18 11:38 ID:???
>>347
marginは相殺されますので、正しいです。

<p>…</p>
<p>…</p>
とすると、pのmargin-topとmargin-bottomは、たいていデフォルトで1emですが、
2つのpの間は1emしか空かないのと同じことです。



350 名前: Name_Not_Found 投稿日: 02/08/18 11:48 ID:???
>>348
もうちょっと改造を加えた方が良かったな


351 名前: 347 投稿日: 02/08/18 12:00 ID:???
>>349
ありがとうございます。
説明が凄くわかりやすいです。


352 名前: 347 投稿日: 02/08/18 12:05 ID:???
ブヒヒヒヒ


353 名前: Name_Not_Found 投稿日: 02/08/18 13:21 ID:???
>>352
何こいつ、キモイ。


354 名前: 353 投稿日: 02/08/18 13:31 ID:???
最近、騙りが多いな ID強制しないと荒れてばっかりだ(ブヒヒ


355 名前: Name_Not_Found 投稿日: 02/08/18 14:11 ID:???
>>354
何こいつ、キモイよ。


356 名前: Name_Not_Found 投稿日: 02/08/18 15:20 ID:???
↓何こいつ、キモイよ。


357 名前: Name_Not_Found 投稿日: 02/08/18 15:21 ID:???
↑何こいつ、キモイよ。


358 名前: Name_Not_Found 投稿日: 02/08/18 17:14 ID:???
お前らみんな落ち着けや

お前らが何を言おうがキモイのはこの俺だ、これだけは譲らんぞ


359 名前: Name_Not_Found 投稿日: 02/08/18 17:34 ID:???
↑何こいつ、ウザイよ。


360 名前: Name_Not_Found 投稿日: 02/08/18 17:44 ID:???
そうだ、俺はキモクてウザイ。それは間違いない。


361 名前: Name_Not_Found 投稿日: 02/08/18 18:02 ID:???
↑何こいつ、臭いよ。


362 名前: Name_Not_Found 投稿日: 02/08/18 18:03 ID:???
臭くもある


363 名前: Name_Not_Found 投稿日: 02/08/18 18:12 ID:???
↑何こいつ、もちょいよ。


364 名前: Name_Not_Found 投稿日: 02/08/18 18:15 ID:???
俺は年中もちょもちょしてるよ
蚊ぐらいは簡単に捕まえる


365 名前: Name_Not_Found 投稿日: 02/08/18 18:23 ID:???
↑何こいつ、ぷるぷるしてるよ。


366 名前: Name_Not_Found 投稿日: 02/08/18 18:31 ID:???
うん、よく言われるんだ。
「うわ、お前めっちゃぷるぷるやな!」って。
子供にはウケがいいよ。


367 名前: Name_Not_Found 投稿日: 02/08/18 18:47 ID:???
↑何こいつ、カチカチだよ。


368 名前: Name_Not_Found 投稿日: 02/08/18 19:21 ID:???
どーしたどーしたぁ!


369 名前: 245 投稿日: 02/08/18 20:18 ID:???
>>245だけど
http://www.fumi23.com/index.html
↑やってる

どうすればいい?


370 名前: Name_Not_Found 投稿日: 02/08/18 20:25 ID:???
おまいはあれだけ暴れといて。。。


371 名前: Name_Not_Found 投稿日: 02/08/18 20:27 ID:???
なんかもっさりしてるな。
リンク多すぎるとa:hover重くならないか?


372 名前: Name_Not_Found 投稿日: 02/08/18 20:27 ID:???
>>348
お前全然ダメ
自己厨ってお前
最悪しね


373 名前: 245 投稿日: 02/08/18 20:41 ID:???
だれか言ってたけど暴れていたのは
騙り野郎ですよ。
教えてください。


374 名前: Name_Not_Found 投稿日: 02/08/18 20:42 ID:???
>>373
ウザイ バレバレ 氏ね


375 名前: Name_Not_Found 投稿日: 02/08/18 20:47 ID:???
>>369
タネは画像に枠を描いていて、それを透過色にしている。

□□□□□□□□□□□□□□□□□□
□■■■■■■■■■■■■■■■■□
□■□□□□□□□□□□□□□□■□
□■□□□□□□□□□□□□□□■□
□■□□□□□□□□□□□□□□■□
□■□□□□□□□□□□□□□□■□
□■■■■■■■■■■■■■■■■□
□□□□□□□□□□□□□□□□□□

hoverでa要素で囲っているとこの背景色変えて、
変わった背景色が透過されてるとこから見えて
枠が出てるように見えるだけ。

終わり


376 名前: Name_Not_Found 投稿日: 02/08/18 21:38 ID:???
それは初耳だな。ホントにできのか。

>369
a img{
border: 1px solid 背景色}

a:hover img{
border-color: 出したい枠の色}


377 名前: Name_Not_Found 投稿日: 02/08/18 21:39 ID:2Fea92jY
×できのか
○できんのか

ついでにage


378 名前: Name_Not_Found 投稿日: 02/08/18 21:40 ID:???
sage


379 名前: Name_Not_Found 投稿日: 02/08/18 22:11 ID:???
hoge

最近いるのは同一人物なのかねぇ…。


380 名前: Name_Not_Found 投稿日: 02/08/18 23:21 ID:???
>>376
たしかに、hoverに背景色指定してやると、画像の背景色も変わります。
Netscapeの6と7だと、画像の下半分しか変わらないけど(バグ?)。

ただ、>>375 のやり方より、 >>376 の方が手間が少ないし、スマートな気が
するなあ。


381 名前: 245 投稿日: 02/08/18 23:52 ID:???
>>374
本当だよ。
みんなわかってそうなもんだったから
わざわざ否定する必要ないかな〜と思ったんだけど。
>>375
なるほどーそういうことか
ソース見てもわからないはずだねありがとう
>>376
この方法で行くよありがとう!


382 名前: Name_Not_Found 投稿日: 02/08/18 23:53 ID:???
なんかなぁ、、、


383 名前: 245 投稿日: 02/08/19 00:38 ID:???
>>382
なんだよ、この言語障害やろう
「なんかなぁ、、、」じゃ、何にもわかんねぇんだよ
言いたいことあるなら、言えよ


384 名前: ひよっこ ◆J7vH27VA 投稿日: 02/08/19 00:44 ID:???
まぁまぁ落ち着いてくださいよ(^_^;


385 名前: Name_Not_Found 投稿日: 02/08/19 04:00 ID:???
(  ゚,_ゝ゚)バカジャネーノ


386 名前: Name_Not_Found 投稿日: 02/08/19 04:47 ID:frCiBj92
チェックボックスのバックカラー変えることできますか?
探し方ヘタなのか、検索しても見つからない


387 名前: Name_Not_Found 投稿日: 02/08/19 04:49 ID:???
(  ゚,_ゝ゚)バカジャネーノ


388 名前: Name_Not_Found 投稿日: 02/08/19 04:51 ID:???
style="background-color: blue;"


389 名前: Name_Not_Found 投稿日: 02/08/19 04:59 ID:???
>>388

できやした。どうも


390 名前: Name_Not_Found 投稿日: 02/08/19 09:00 ID:???
単独のファイルでIFRAMEタグのように振舞うテキストエリアを作りたいのですが、可能でしょうか。
もちろんフォームじゃなくてかまいません。

スクロールバーが付いていて、幅/高さの指定が出来ればいいんですけど。


391 名前: Name_Not_Found 投稿日: 02/08/19 09:56 ID:???
>>390
<div style="overflow: scroll; width: 20em; height: 5em;">
ここに長いテキストを書く。
</div>


392 名前: 390 投稿日: 02/08/19 11:11 ID:???
出来ました。
ありがとうございます。


393 名前: Name_Not_Found 投稿日: 02/08/19 11:50 ID:kFY9QxIf
みなさまはネットスケープ6に対応させていますか?
つい最近CSSの本を借りて勉強し始めたのですが、
いきなり、最初からやる気がしなくなりました。
本のサンプルの通りにpaddingを付けたらネットスケープ6では
widthがその分広がってしまうのです。

CSSを使用している制作者の方々は、こんなブラウザ毎の違いに
時間をかけて対処しているのですか?

あと、疑問なんですが、何故違う会社が作っているのにwidthとかcolor
だとか同じ名前なんでしょうか?どうせブラウザ毎に違うんだから
違う名前にしてくれたほうが有り難いと思うのですが。
違う機能が同じ名前で、記述方法だけは同じだなんて、迷惑千万です。


394 名前: Name_Not_Found 投稿日: 02/08/19 12:02 ID:???
>>393
そうです。


395 名前: Name_Not_Found 投稿日: 02/08/19 12:13 ID:???
>>393
>何故違う会社が作っているのにwidthとかcolor
>だとか同じ名前なんでしょうか?
CSSは違う会社が作っているのではないからです。
>>3-4のリンク先で勉強してからまた来てね。


396 名前: Name_Not_Found 投稿日: 02/08/19 12:14 ID:???
>>393
Mozilla=Netscape 6は仕様通り。WinIEが間違ってるんだけどね。
それがイヤなら、
html * {
box-sizing:border-box; /* CSS3の記述。MacIE5で有效。*/
-moz-box-sizing:border-box; /* Mozilla用の記述。N6で有效。*/
}
とシートに書いておく。


397 名前: Name_Not_Found 投稿日: 02/08/19 12:59 ID:LYHNKHK+
>>390
逆に、iframeを使った外部ファイルの表示を、
スクロールバーなどが出ないように高さを自動調整して
表示させるようなことはできないものでしょうか。

iframeを使うことにこだわりはないです。外部を埋め込めれば。


398 名前: Name_Not_Found 投稿日: 02/08/19 13:39 ID:???
>>397
それはCSSじゃない、SSI


399 名前: Name_Not_Found 投稿日: 02/08/19 16:22 ID:???
>>398
( ´,_ゝ`)プッ


400 名前: 245 投稿日: 02/08/19 16:53 ID:???
>>397
それはMS-DOS


401 名前: Name_Not_Found 投稿日: 02/08/19 17:18 ID:???
>>400
( ゚Д゚)・・・・・・


402 名前: 346 投稿日: 02/08/19 18:52 ID:t/8P/JDk
可か不可かだけでも教えてもらえませんか。


403 名前: Name_Not_Found 投稿日: 02/08/19 19:09 ID:???
>>346
何をどうしたいんだか、よくわからない。
下記を読んで、まだわからなかったらもう一度質問してくれ。
http://members11.tsukaeru.net/msugai/web/CSS/back.html#background-image
http://www.age.jp/~dfj/html/background.html#background_image


404 名前: Name_Not_Found 投稿日: 02/08/19 19:32 ID:???
>>402
可か不可といえば、CSSじゃ絶対できないので、スレ違いだから他のスレ
行ってくれというか。


405 名前: Name_Not_Found 投稿日: 02/08/19 20:06 ID:/2IYV4O8
.jsでOS,ブラウザ別に振り分けた外部.cssでfont-sizeを反映させた場合
なんですが、テキストの色の指定はみなさんどのようにされてますか?

font-size:10px; line-height:150%;のtxt10、で青でボールドの場合は

<div class="txt10"><font color="#0000ff"><b>魂</b></font></div>

なんて結局fontタグ使っちゃってんじゃん、、、おすすめはいかがで
しょうか?


406 名前: Name_Not_Found 投稿日: 02/08/19 20:13 ID:???
若干意味不明なんだが

div{
font-size: 80%;
line-height:150%;
color: #00f;
}

こういうことじゃないの?


407 名前: 406 投稿日: 02/08/19 20:18 ID:???
divtxt10{
font-size: 80%;
line-height:150%;
color: #00f
font-weight: bold;;
}

こうかな ゴメソ



408 名前: Name_Not_Found 投稿日: 02/08/19 20:46 ID:H62pFvHk
外部ファイルでテーブルの背景色を指定したいんですけど、

table { bgcolor: #CCCCFF}

これじゃ変わりません。
正しい記述を教えてください。


409 名前: ネタにマジレス 投稿日: 02/08/19 20:50 ID:???
>>408
……一から勉強し直してください。
 ↓