/* CSS・スタイルシート質問スレッド【18】 */
ul{list-style-image:url(URI);} li{text-align:right;} Opera7.10なんかでマークがついてこないのはバグでしょうか 既出ならスマソ
>>853 バグっぽいですね。
ちなみにOpera6では再現しません。
>>853 ,854,855
って、いうか各リストに表示したいなら、
li {
list-style-image:url(URI);
text-align:right;
}
もしくは<ul>のみ表示されるには
ul{
display:list-item;
list-style-image:url(URI);
}
li{
text-align:right;
list-style:none;
}
こうだけどな
バグ以前の問題だけどな(w
独自拡張を使うと、W3CのValidatorではエラーが出るんでしょうか?
>>859 試せばすぐわかることをなぜ訊くの? 出るよ。
861 :
856 :03/05/18 18:25 ID:???
>>857 自分への問いかけ?(w
<li>表示したければlist-style:noneを消せば良い。
つまり、<ul>にはリスト用のボックスがないので、display:list-item;で
リスト用のボックスを生成させてlist-style-imageを指定するってこと。
<ul>に何も表示されないのではなくて隠れているのでmargin付ければでる。
意味分かるか?
言ってる意味がよくわからないのは僕だけでしょうか?
>>856 何でそんな面倒臭いことするの?
ul li {
list-style-image:url(URI);
text-align:right;
}
で充分じゃん(w
864 :
856 :03/05/18 18:54 ID:???
>>862 .863
20pxぐらいの mark_ul.gif・mark_li.gifを用意してやってみな
ul {
border:red thin solid;
display:list-item;
list-style-image:url(mark_ul.gif);
margin-left:30px;
}
li {
list-style-image:url(mark_li.gif);
border:blue thin solid;
margin-left:30px;
}
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
865 :
856 :03/05/18 18:59 ID:???
>>863 一見それでいいようだけど、<ul><dl><ol>はブラウザによって
初期値が違うんだよね、バグじゃないよ
初期値違ってもmarginとpadding指定してやればそんな面倒なことする必要ないんじゃ?
>>866 まったく意味がわかってない香具師
アフォだな
868 :
昔の人 :03/05/18 21:29 ID:???
>>856 は根本的に勘違ひをしてゐませんか。
>つまり、<ul>にはリスト用のボックスがないので、display:list-item;で
>リスト用のボックスを生成させてlist-style-imageを指定するってこと。
そんな「<ul>のみ表示される」なんてこと、
質問者(
>>853 )が求めてゐたとは思へないんですが。
tableタグにfilter:alpha をつけて表を半透明化させたのですが、 その表の中の画像だけ透明化をきりたいので、IMGタグの中にfilter:alpha(opacity=100)と記述したのですが半透明なままです。 画像のみ半透明をきることは不可能なのでしょうか?
んなもんMSに聞け
871 :
856 :03/05/18 21:53 ID:???
>>868 オマエも解ってないな?
<ul>のみに表示させるっていうより、基本的にいえば<ul>にlist-style-image
を指定することは、Strictじゃないわけで、あえて表示させるなら...
ってことで説明してやたんだけど?
<ul>にlist-style-imageしたところで継承の関係で<li>のマーカーとして
表示されているだけで、実際のところは、
>>853 はどういう風に要素に対して
マーカーを表示させたいのかは知らないし、どうでもいいことなんだけどな。
>>869 そんなモノ使用するのやめる
最近は糞なWinIEのせいで勘違いしている香具師が増えてきたね?
873 :
昔の人 :03/05/18 22:04 ID:???
>>871 偉ぶってウソ説かれたら、困りますな。
>>872 独自拡張位で目くじら立てなさんな。ええやん、どうせIEで見てないんでしょ?
>869とは違うんだけど IEのfilter: Alpha みたいなのって CSSではでけへん?
>>875 正式には、できない。
でもMozilla/NN6なら、独自拡張のmoz-opacityでできるから、検索してごらん。
>869 tableに50、imgに100を指定してたとすると imgは結局50% * 100% = 50%だから半透明のまま。 200にすれば解決 するかどうかは知らんけどな、IE使ってないから
つかimg{filter:none;}で良いんじゃないかって気もするが
880 :
853 :03/05/18 22:51 ID:???
質問者です。多数のご意見有り難うございました。 えと、CSSの例文については疑義もあると思いますが、 質問点は以下で取り上げていただいた通りで、大変参考になりました。 > 「CSS/DHTMLバグ辞典スレッド 第3版」 > 112 :Name_Not_Found :03/05/18 15:54 ID:??? # スレ違いスマソ
881 :
875 :03/05/18 22:58 ID:???
>>882 >>864 の例からして、単純にULのマーカーではなくて、
ULと、LIのブロックの配置について語っていると思われ
なんかよくわからんけど<ul><ol>にわざわざdisplay:list-itemする必要ないし、 list-style-imageプロパティはli要素だけじゃなくてdisplayプロパティが list-itemの要素にも適用できるってことでいいのかな。
885 :
Name_Not_Found :03/05/20 00:14 ID:MzEdboz8
テキストに重ねて色付きの横棒を表示させるデザインにしたいんですが、どうしたらいいんでしょうか。
>>885 その色付きの横棒とやらを何処にどういう風に付けたいのかが問題
>885 打消し線の色は変えられなかったような希ガス
888 :
Name_Not_Found :03/05/20 00:27 ID:MzEdboz8
>>886 打ち消し線のように重ねて表示です。で、テキストの色とは別の色でテキストを強調させるような
効果をだしたいんですが。
>888 positionとz-indexで「─」を文字の上に重ねる、かな。 あんまりお手軽には出来ないね。
ちょっとすれ違い気味かもしれないけど、、 CSS切り替えスクリプトでBBSの外観までコントロール しているページって知ってます?
どういうこと? サイト全体の外観が変わることでBBSの外観も変わるという所なら、いくつかあるだろうけど。
>>888 こんなんどう?
.ui{color:blue;text-decoration:line-through}
.wi{color:red}
<div class="ui">
<span class="wi">うぃうぃ</span>
<div>
スマソ。 .ui{color:blue;text-decoration:line-through} .wi{color:red} <span class="ui"><span class="wi">あうあう</span></span> こっちのほうがスマートかも。 しかしspanって入れ子にしてよかったっけ? ちゃんと動作するみたいだけど。
>>893 レスども。
切り替えスクリプトを使ってCGIまでいじってるとこあるのかな、と思ったんですけど。
よくよく考えるとその道のサイトでは結構ばんばんやってましたね。
しょうもないことに時間とらせてスマソ
>>895 回答するなら仕様書ぐらい読め。間違った事教えたらどうするんだ。
で、spanをネストするのはinvalidではないが、
むやみやたらとネストすることはお勧めできない。
895
>>897 いや、すみませんでした(汗
フォロー、サンクスです。
テーブルの幅をウィンドウ幅に合わせて伸縮させ、かつ左右の余白は常に一定…とするには、どうすれば良いでしょう? こんな感じ テーブル ┌―│―┐ │┌↓┐│ ││ │←余白 │└―┘│ └―――┘ テーブル横幅はウィンドウにあわせて伸縮 ┌――│――┐ │┌―↓―┐│ ││ │←左右の余白は一定 │└―――┘│ └―――――┘ どうも、すごい基本的なことのような気がするのですが、どうぞよろしくお願いします。
width=100% margin=適当。
901 :
899 :03/05/20 09:01 ID:???
>>900 やってみました。
右のほうが画面外にはみ出してしまいます…。
100%じゃなくてautoとかにしないと実装がアレだったような…。資料出せなくてスマ。
>>899 div厨かもしれないけど、こんなん駄目?
.hako{margin:1em 3em 1em}
.hyou{width:100%;margin:0}
<div class="hako">
<table class="hyou" border="1">
<tr>
<td>あ</td><td>ん</td>
</tr>
</table>
</div>
あ、スマソ。
>>904 の.hyouのmargin:0は消し忘れです。
907 :
899 :03/05/20 11:30 ID:???
レスありがとうございます。
うーん、いずれの方法でもうまく表示されません。
環境はIE6.0で確認しているのですが、やはり
>>903 のような事情なのでしょうか。
少し考えてみます。
>906 不思議マークアップで笑タ。 おまけにうざくてオナニーサイト化してきたな。
>>908 不思議って……広告の部分は仕方ないのでは。ケチつけることばかりうまくなって。
>>909 今見てきたら不思議というよりあまりにも酷過ぎだったけど。
でもwikiってのよく知らないんだけど、
これが吐くソースがひどいのではないだろうかと推測。
あと関係ないけどxreaなら広告を手動で挿入すれば正しいHTMLソースでいける。
>>899 marginのサイズに合わせてwidth:95%くらいに加減すればハミデナーイ
新しいテンプレ見てきましたが・・・ ああいうデザイン、今はやってんですか? Operaのフロントページ、Lunascapeのフロントページ、 みーんなそっくし。 もしかして作ってる人が同じ? 特徴がなくて何だか見ててつまんにゃい。
オナニーサイトだからな。 他人の評価なんてどうでもいいんだろう。
>>906 このスレの関係サイトがこれじゃなねぇ。
>>915 流行っていると言うかpukiwikiだし
まあこの板で使うなら、ちゃんとしたソース吐くように 改造しても良さそうなもんだけどな。
pukiwiki使う必要があるのかはさておき、 なんでCSSスレなのにpukiwiki使うのか。
プッ
925 :
Name_Not_Found :03/05/22 09:01 ID:LdW0NUPk
質問です。 CGIで生成されるHTMLで(DOCTYPE宣言無し)、 Opera6のH要素につけた<CENTER>がききません。 <CENTER><H3 style="border:solid 1px #000;">見出し</H3></CENTER>が ブロックごと普通に左寄せになります。 <CENTER><table><tr>・・・・・</table></CENTER> だと画面中央にちゃんときます。 <CENTER>なんか取っ払ってcssでBODY{text-align:center}とすれば いいんでしょうが、 CGIなので<CENTER></CENTER>が記事を追加するたびに 延々吐き出されつづけます。 どう対処すればいいのでしょうか? ちなみにIEでは問題ありません。
>925 center{text-align:center} これでダメならCGI改造するべし。
927 :
動画直リン :03/05/22 09:09 ID:eu9qdXFr
質問ではないのですが、 今自分でトラブってて解決したことからちょっと。 <p class=" myclass"> という感じに半角スペースをいれて .myclass{ /* いろいろ */ } とやるとオペラで無効、IEと根輔では有効に働きます。 ブラウザ振り分けのとても邪道な方法になる・・・・・わけないですよね。 駄文許してけろ。
932 :
930 :03/05/22 21:20 ID:???
すみません。初めてで解説サイト見ながら四苦八苦やってるんですがどうも出来ないので質問させてください。 素材サイトからフォントを落としたんですがこれをIEで表示させたい時はどうすればいいのでしょうか? windowsのフォルダファイルに落としたフォントファイル入れてテキストエディタで <font-family: "落としたフォントファイルの名前">〜</font> でいいんでしょうか?
<span style="font-family:xxxxx;">〜〜</span> だけど結局自分以外には意味が無いからやめとけ。
>934 まあCSSでやるにはどう?って質問ならスレ違いじゃ無いんだけど。 見る人がそのフォントを持ってないとブラウザで指定されているフォントが使われるか、 まあそれなら良いんだけど実装や特定の環境によっては文字化けの原因になっちゃうので フォント決め打ちはちょっと推奨できないかな。
ああ、自分専用のローカルな文書を作るのなら問題無しだけど。
>>922 なんだ、まだまともなHTMLのところもあるじゃないか。
つーか、結局このスレにテンプレ張っているんだから
あんまり必要ないような気が
>>934 特定のフォントきめうちでは、そのフォントがインスコされていない
他のPCでは、あなたの思っているような表示にならないでしょうから、
(A) あきらめる
[閲覧者の好みのフォントを使わせてあげる♥]
(B) 画像にしてみる
(C) "MS Pゴシック","Osaka",,,,,のように候補を増やす
942 :
934 :03/05/23 00:08 ID:???
詳細&迅速なレスありがとうございます。 あまり実用的でない&スレ違い失礼致しました。 フォントファイルを画像にして保存するってできないですよね? ちと自分で方法探してみます
>>942 著作者の意向も考えなきゃだめだよ。
画像にする、ってことは加工して表示するわけなんだから。
>>933 > ユーザエージェントは、CDATA型属性値の、冒頭あるいは末尾の空白
> 文字を無視してよい
って、ユーザエージェントが空白を無視しないのも仕様上間違っては
いないのでは?
つまりバグとは言えないような気がするのですが.。
識者フォローお願いします。
新スレッドにテンプレートを使用すべきではなかったか?
<table> <tr> <td><p>oijfeafew<br /> affefew<br /> afewcafe<br /> wafewa<br /> wawoifjewa</p> </td> <td><img src="ea" /></td> </tr> </table> こんな感じの←文字列、画像→のCSSはどんな感じで実現したらいいでしょうか <p>feawfeawfewafea<img src="ea" /></p> こんな風にすると結局文字列が画像の大きさに左右されて見にくくなってしまうので
949 :
404 :03/05/23 07:47 ID:???
>>948 言ってる意味理解するのに時間かかった。・゚・(ノД`)・゚・。 うえええん
<img style="float:left;" src="ea" />
950 :
404 :03/05/23 07:50 ID:???
全然違う・・・。・゚・(ノД`)・゚・。 うえええん
951 :
404 :03/05/23 07:52 ID:???
style="clear:right;" 鬱だ・・・
解説サイト見ながらやってるんですがある素材サイトで重ねることで形が完成するようなメニューアイコンを落としたんですがどうもうまくいきません。 どうも上と下で微妙なスペースが空いてしまいます。 メニューアイコンを上下スペースナシで貼り付けるにはどうしたらいいんでしょうか?
>>952 htmlソース書いてくれたらアドバイスできるかも。
自分である程度cssわかりますというレベルなら「margin、padding、line-height」
あたりをキーワードに調べてみるといいかも。
954 :
953 :03/05/23 11:34 ID:???
と思ったらマルチだったので放置します
>>948 >文字列が画像の大きさに左右されて見にくくなってしまうので
意味わからん。なので回答できん。説明求む。
-----------┌───┐ -----------│ │ ----- └───┘ という感じになると良くて ------┌───┐ ------│ │ ------└───┘ ---------- のようにテキストが回り込むのが嫌って事なのか?
957 :
948 :03/05/23 15:38 ID:???
>>957 文をdivでくくって、floatで回り込ませれるとか…
959 :
952 :03/05/23 21:04 ID:???
自己解決しました。地道にやってりゃできました。 マルチすみません
960 :
Name_Not_Found :03/05/24 14:07 ID:tFA3GdMj
すみません。 <li></li>の項目をCSSで どうすれば横一列にすることができますか? きっと初歩的なことだと思うのですがお願いします。
961 :
960 :03/05/24 14:09 ID:tFA3GdMj
あ、float:left; ですね。 スレ汚しでした。ごめんなさい。
964 :
960 :03/05/24 14:37 ID:tFA3GdMj
>>962 さんありがとう。
で、リストのアイコンを無しにしようと
ul の class で list-style:none;
と指定しましたが、消えません。
どうしたらいいでしょうか。
>>964 ・OSやブラウザの種類とヴァージョンについては必ず明記してください。
特にNetscapeは、ver.4までと6以降でまったく別物です。
967 :
960 :03/05/24 14:50 ID:tFA3GdMj
あの、、叩かれるのを承知でドキドキしながら書きますが、、 自分のパソコンのブラウザってどこを見たら分かるでしょうか。 ちなみにwindosです。 馬鹿ですいませんです。
>>967 叩きはしないけど、初心者板あたりで聞いた方がいいと思うよ。
>>964 IEとN7では消えるけど?
<ul style="list-style:none;">
<li style="float:left;width:3em">111</li>
<li style="float:left;width:3em">222</li>
</ul>
>>967 WindowsならInternet Explorerがデフォルト(初期装備)で入ってる。
他にブラウザをインストールしてなければIEだと推定される。
使ってるブラウザのメニュー・バーから「ヘルプ」を開けば
ヴァージョンは判るはず。
971 :
Name_Not_Found :03/05/24 15:06 ID:eHhCqL32
FrontpageExpressを使ってるんですが 改行するとやたらと行間が広くなってしまいます。 狭くするにはスタイルシートを使えば出来るってあったんですけど、 コピペしてやっても狭くなんないんですが、どういう事dしょう?
973 :
960 :03/05/24 15:09 ID:tFA3GdMj
Internet Explorer の ver6 でした。 皆さんありがとう。 dreamweaver上では消えるのですが、送ると消えていないままです。 色々やってみます。お世話かけました。
975 :
Name_Not_Found :03/05/24 15:10 ID:eHhCqL32
>>972 すいません。こんな感じです。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>Contents</title>
<STYLE type="text/css">
<!--
BODY { line-height:1.5em; }
-->
</STYLE>
</head>
<body bgcolor="#FFFFFF">
<div align="right">
<table border="0">
<tr>
<td><p align="left"><font size="2"><strong>Contents</strong></font></p>
</td>
</tr>
<tr>
<td><p align="left"><font size="2">▼ C</font></p>
</table>
</div>
</body>
</html>
>>975 そのソースを見て、色んな感情を通り越して
むしろ爽やかな気分になった。
>971 シフト+Enterで改行してみたら?
978 :
Name_Not_Found :03/05/24 15:16 ID:eHhCqL32
>>977 おおおおお!!!!
ありがとうございます!!!!!!!マジうれしいです!
>>976 なんででつか?
>>978 おい、冗談をまともに取って感激するなよな。
p要素とbr要素について学んで下さい。
brでやたらに改行するものではありません。
p要素のマージンを指定すると幸せになれるかもしれません。
Frontpage Expressに依存してる限り、まともなCSSなんてムリでしょ。
どうやらまともなCSSじゃなくても かまわないみたいですので気にせず そのまま続けてください
982 :
Name_Not_Found :03/05/24 15:34 ID:eHhCqL32
>>979 そうでつか。アイスィー。
どうでもいいですけど、更新履歴って英語でなんていうんでつか?
私もHTML触り立ての初心者の時はp改行とbr改行で悩んだな。 やはりフロントページ(昔は無料だった)を使ってたのだが、 CSSの便利さを知るにつれて、フロントページでは 思った通りにスタイル指定できないのが嫌になって、メモ帳に移行した。
うめー
まつー
987 :
Name_Not_Found :03/05/25 10:56 ID:XIZjMQqn
ページを開こうとするとパスワードを入力せよと言うのがでて 正解か不正解によって2つのページに飛ぶ、といったようなものを つくるにはどうしたらいいでしょうか
>>987 一体、いくつのスレにマルチしたんだよ…埋め。
991
990
989
976
902
752
1001
67
401
0
1001 :
1001 :
Over 1000 Thread このスレッドは1000を超えました。 もう書けないので、新しいスレッドを立ててくださいです。。。