/* CSS・スタイルシート質問スレッド【35】 */
1 :
Name_Not_Found:
2 :
Name_Not_Found:04/09/01 09:34 ID:GnL8S9ny
3 :
Name_Not_Found:04/09/01 09:35 ID:GnL8S9ny
4 :
Name_Not_Found:04/09/01 09:36 ID:GnL8S9ny
5 :
Name_Not_Found:04/09/01 09:36 ID:GnL8S9ny
6 :
Name_Not_Found:04/09/01 09:37 ID:GnL8S9ny
7 :
Name_Not_Found:04/09/01 09:38 ID:wr0XZ5sa
8 :
Name_Not_Found:04/09/01 09:38 ID:wr0XZ5sa
前スレ976へ。
規格外です。割り切れないので。
12 :
Name_Not_Found:04/09/01 16:21 ID:6jgA3lJy
次スレ告知をまともにしてないから、
誰も人がこないじゃん。
みなさ〜〜〜んここですよ。
のそ〜〜
14 :
Name_Not_Found:04/09/01 20:50 ID:6jgA3lJy
こんばんはー
今日一日悩んでも分からなかったのですが・・
分かる方いれば教えて頂きたいのですが。
ttp://cssbug.at.infoseek.co.jp/detail/winie/b054.html にあるIEのバグと全く同じで、
<div style="float:left; width:3em; height:3em; border:2px solid blue;"></div>
<div style="height:1.5em; border:2px solid red;">
<div style="float:left; clear:left; width:5em; background:aqua;">フロート</div>
</div>
としたときに、
divとdivの間に、1pxくらいのマージンが出来てしまいます。
FireFoxとSafariでは全く問題ないのですが、IE6のみで起こります。
上のページでバグらしいのですが、
これの対策というのかこの1pxのマージンを無くす方法ないでしょうか?
最終的にフロートしたdivとdivの間に1pxの細いラインを入れたいのですが、
IEでは余分にラインが入ってしまい2pxとかになるので・・
もしくは、仕方ないのかな?とあきらめかけてますが。
よろしくです。
>>前949
A4ノートで1400*1050ですが何か?
もう自慢話はいいから。
へぇ
ちょっと相談です。
table の設定で、
table.hogehoge
{
margin-left:auto;
margin-right:auto;
}
てなことをやりたいんですが、実装の関係(?)で、
IE だと、auto が効かないみたいです。
W3C 非推奨の <div align="center"> を使わずに、上手に表現できる方法は
ないでしょうか。
※現在は、仕方なく左マージンだけを設定してごまかしています。
DOCTYPEは?
>>18 1つ外側のdivにtext-align:center;
IEにあわせようとすると余計なcss書かないといけないからな・・・
迷惑ですな。
>>18 > IE だと、auto が効かないみたい
テンプレのサイトをよく見よう。
IE5 もしくは、IE5 の実装に会わせるための互換モードの場合にそうなります。
親要素{
text-align: center;
}
小要素{
width: 適宜;
margin-left: auto;
margin-right: auto;
text-align: right;
}
とすることで、カバーできます。
>>18 あ〜テーブルにはそのままオートマージンきかせたままでね。
IE以外はそれでセンターにくるので。
23 :
18:04/09/01 23:45 ID:???
すばやいレス、感謝です。
>>19 XHTML 1.1 Strict です。
ちゃんと W3C のチェックでも OK がでます。
>>20-22 やっぱり、そうですか。
いろいろ試してみましたが、テンプレサイトどおりの方法でやってみます。
表示の確認は、メインで使っている Firefox の他に IE でやっています。
過去ログ&まとめサイトなんで、古い IE にも対応させようと思ったんですけど、
思ったより難儀ですねw
全てはIEが悪いんだよな。
IEがなくなればみんな幸せになれるのに。
みんなOperaユーザになればいいのに
IE のレンダラが Gecko になればいいのに
ttp://www.mdn.co.jp/Wdesign/Wdt/15Tips4/chap2/fig_01.jpg ↑のような角を丸くしたものを作成したいのですが、
テーブルを使わないで、cssのみでリキッドデザインとして作りたいのです。
幅などを固定値にして無理矢理表現することはできたのですが、
ブラウザのサイズを変更すると、当たり前と言えば当たり前なのですが、
画像自体の大きさも変更され、角の横幅も広がってしまい思うようにいきません、
どうすればよいのでしょうか?
ちなみに、現在は以下のように表示させています
左上と右上を丸めた画像
文字の背景として画像
左下と右下を丸めた画像
>>27 ブラウザのサイズ変更しても画像サイズは変わらないでしょ・・
そろそろ使いづらいCSS捨てて、別の規格を作ればいいのに…
特殊ルール多すぎて、ブラウザがバグ実装しても発見しづらいし、
プロパティの名前がだんだん支離滅裂に拡張されてる気がする。
30 :
27:04/09/02 04:29 ID:???
>>28 説明不足のうえわかりずらくてすみません
div内にある画像の横幅を100%にしていて
divの横幅を固定すれば当たり前ですがきちんと表示され
divの横幅を指定しなければ、ブラウザの横幅を広げれば広げる程不自然になるということです
上下それぞれ画像1つで済まそうとするからそんな事態になるのさ
メニュー:テキスト・ロールオーバー式のナビゲーションリンク
文中:普通のリンク(ブラウザ標準)
と分けたいと思っています。
しかし、メニューでa:hoverやa:linkを使っているので
全体のリンクの色や形式が統一されてしまいます。
各部分(エリア)ごとにリンクの色や形式を変える事はできないのでしょうか?
>>29 使いにくくしているのはマイクロソフト。
他のブラウザーではどれも問題なくデザインできますよ。
>>27 画像の幅を固定したらいかんのか?
%で指定したいなら縦横どちらか片方だけに指定を入れれば
自動的に等倍してくれるんじゃない?
>>36 NN4も最悪なんだけど、
すでに過去の遺物なので問題外。
IE6の場合は、最新のOSの一部とされているブラウザー。
ブラウザーのバグというよりOSのバグになる。
マイクロソフトじたい、バグの固まりなので
あの程度のブラウザーを作るのがやっとなのかも。
ある意味がんばってるんだろうがな。
使い物にならないばかりか世界中のweb制作者の作業の負担になってる。
このへんマイクロソフトはなんとも思ってないのだろうが。
世界中のweb制作者の苦労の固まりで、IEがウインユーザーがまともに
ネットブラウズを出来る事を。
迷惑かけんなよ。糞マイクロソフト。死ね
>>38 MS 批判は別スレでお願いしたい。
同意見のヤツもいるだろうけど、荒れる元だから、ね。
MSIE6 は最新ブラウザとされてはいるが、なんだかんだで3年近く
メンテされていない、古参のブラウザの一つです。
シェアで言ったら世界最大。それを無視してまともなウェブサイトを構築するなど、到底出来得ない。
例えIEの実装がウンコでカスでも、そのシェアを無視する事は出来ない。
ウンコ素人から
「あなたのホムペが綺麗に表示されないんで、まともに表示されるようにしておいて下さいね♥」
などと言われない様にするのも、製作者の努めなり。
ま、そう言われたからといって動じない人なら、IEを切り捨てるのもありだけどな。
ただな、それだと自慰ページに成り下がる。そんなのはアレだよ、そこら辺に資源の無駄遣いとして転がってるような「個人情報(趣味とか、家族構成とかのウンコ)ホムペ」に成り下がる。
誰かが見て、理解して、それを利用してこそ情報の価値が発揮されるんだから、使用者数の多いIEを無視しては、宝の持ち腐れだ。IEを無視しようとしているサイトの情報が有益かは別としてね。
……誤爆?
ちみ達のアホさは解った。 だから議論は他所でね。 チュッ
tableタグを使って次のように指定したのと同じ事をスタイルシートでやりたいのです。
<table width="200" height="200" border="0" cellpadding="0" cellspacing="0" background="画像A">
<tr><td align="center" valign="middle"><img src="画像B" width="100" height="50"></td></tr>
</table>
背景画像Aを指定して、そのレイヤーの中に画像Bを置いて、縦横中央に表示させる。
ためしに次のようにしたところ、ずれてしまいました。(画像の左上がレイヤーの中央にくる。)
#menu {
background: url(画像A);
float: none;
position: relative;
visibility: visible;
z-index: auto;
height: 200px;
width: 200px;
}
.hv_center {
position: absolute;
visibility: visible;
z-index: auto;
top: 50%;
left: 50%;
}
<div id="menu"><img src="画像B" width="100" height="50" class="hv_center"></div>
背景が無ければ、画像Bを背景にしてリピート無しで、センターに表示させられるのですが…。
また、JavaScriptなどを使って、レイヤーと画像のサイズを読み取って書き換えれば可能だとは思うんですが、なんとかスタイルシートだけでやる方法は無いのでしょうか?
よろしくお願いします。
もはやIEを切り捨てる段階に至った人は
「あなたのホムペが綺麗に表示されないんで、まともに表示されるようにしておいて下さいね♥」
などとぬかす輩など眼中にないのでは
>>43 >(画像の左上がレイヤーの中央にくる。)
貴方は答えのヒントを自分で書いています。
>>44 他人に迷惑をかけるなと、ママンは教えてくれなかったのか?
>>45 > 貴方は答えのヒントを自分で書いています。
レイヤーのサイズと画像のサイズから、毎回表示位置をピクセル単位で指定する形であればやり方は判るんですが…
やはりそういう形で指定するしかないんでしょうか…
<align='center'>のように、一発でOKなクラスを作れないかなぁと思ってたんですが…
んだ。
>>47 スマートじゃないが、divを入れ子にしてそれぞれに背景指定する。
<div id="menu"><img src="画像B" width="100" height="50" class="hv_center"></div>
この時点でスマートじゃないような
垂直中央はFAQ
色々有難うございます。
FAQは読んだつもりだったんですが、読み落としていたようでした。
これからも精進します。
うん。 がんがれ
スタイルシートでリンクにマウスをかぶせたときの背景色を変更させたいのですが
画像にリンクをかけてるときと、テキストにリンクをかけてるときを区別して、
背景色を違う色にするイイ方法はないでしょうか?
単純な方法として、クラス属性で区別するなどあるとは思うのですが、
リンクをかけてるのがテキストか画像かを判断して区別するといった方法があれば
ありがたいなと思っています。
a img { }
55
>>56 上手くいきました。
>>56を見て、すぐに理解は出来たのですが、自分自身では思いもつきませんでした。
既に60ページ近くあるので、クラス属性で分類するのは作業的にも大変そうだし
サイズもでかくなるなと悩んでおりました。
本当にありがとうございます。
>57
子孫セレクタを上手く使えば、結構楽に作れるようになるよ。
がんがれ。
あややっておっぱいも大きくて最高だね
オッパイプロパティってあったっけ?
b:85;
63 :
62:04/09/03 15:50 ID:???
済まない、単位つけない奴は逝ってよしだな
bust{ under: 70cm; top: 88cm; cup: d; }
なあ、漏れのサイトで使ってるCSSってMacで読み込めないんだけどなんで?
Validだし、おかしい点もないはずなのに、何故かMacでは読み込めない。直接URL指定しても404だし。
もしかしてMacではCSSって読み込めないの?なんか対処法あったら解説きぼん
切り替えスクリプト使ってる?使ってるんだったらそれがMacIEに対応してないだけ
危ないからこうしておく。
>>63いいだろ?
bust{ under: 70cm; top: 88cm; cup: d; chichibanddo="on";}
テーブルレイアウトよりレイヤーレイアウトの方が良いそうなので質問です。
例えば5行6列のテーブルをレイヤーで作ろうとするとどのように記述したら良いのでしょうか。
レイヤーレイアウトってなに?
釣りか?
>>68 表はtableで、
表じゃないものはtable以外で。
72 :
68:04/09/03 19:23 ID:???
>>69-70 CSSを使ってテーブルの代わりになるということでレイヤーと思ったのですが
レイヤーではない方法でCSSによってテーブルの代わりになる手段はどのようにしたら・・・
_______________
|あいうえお|かきくけこ|さしすせそ|
_______________
|たちつてと|なにぬねの|はひふへほ|
________________
このようなものをテーブルを使わずに作りたいのです。
勝手な自分語で知ったかすると誰も答えないぞ。
>>72 それはホントに”あいうえお”なのか?
内容によって使うものが変わるんじゃ、ボケ
段組したいだけなら>6あたり
>>72 表なら素直にtableをつかって書けばいいじゃん。
正しくマークアップしてCSSで装飾、というのが基本スタンスなので、
そんな訳わからん質問には答えようがないYO!
>>75 調べてみようと思います。ありがとうございました。
匂うな。
>>73 お前の言ってる「自分語」も自分語だと気づかんのか?
遅いよん
>>79 なんか嫌なことがあったのか? 話してみろよ。
>>81 いや、何も無いが。IEはいつまともにフロート出来るんだろうかと・・・
無理だろうがな。
ター 面白くない奴だなぁ・・・
>>65 404ならCSSの記述とは関係ないだろうな。
URLがおかしいんじゃね?
それかサーバーが弾いてるとかな。
>65 のブラウザが何かもわかんないしね
なあ、おまいらMacIE5のバグにはどこまで気使ってる?
みんなはmedia構文でCSS全体を囲んでる?
それとも糞マクー対策にしてない?
MacIEはWinIEに比べればCSSはマシだと思うけど
自分は@import "〜.css";使ってる
>>89 マックIEはもう見捨ててもらってもいいですよ。
使ってる人もう居ないし。
その労力を糞MSIEにつぎ込んでやってください。
94 :
93:04/09/04 00:26 ID:???
重要な事抜けてた。
サンプル1000に大してマカーが5%とすればサンプルは50になっちまう。
そんなに完全に無視しなければならんほどでもないと
思っています。バグ具合は。
JavaScriptが有効な場合 -> MacIE 用に一部だけカスケード上書き
〃 無効 -> 切り捨て。
そんなかんじで。
96 :
Name_Not_Found:04/09/04 03:18 ID:q2xEyw7U
>>92 アホ言え!
...マックIE使ってる人いない?...
己の小さな世界が全てだと思うな!!
あれ?祭りがあるって聞いて来たのに(・ω・)?
>>93 勘違いしてるかしらないのだろうけど、
SafariのUAは古いアクセス解析にはネスケとなってしまうので
正確には出ない。
のでその情報はあてにはならない。
それとMacIEが多いのは〜9までのIEとOSXのIEがあるので、
それを考えるとSafariの1.5%は多いと思わないか?
モジラ0.2
オペラ1.6
ネスケ1.9
>>96 まー表示が汚くてもいい人は長年使って来たIEつかうのだろうけど、
綺麗にページを見たい人はSafari使うだろうもしくはSafari相互エンジンのブラウザーを。
表示が綺麗なのは間違いなくSafari他のブラウザーはどれも汚い。OSXでみてもね。
MacIEは文字が太いしファイアーは色が薄いってか全体にノベ〜としてて立体感が無い。
WINは・・言わなくとも分かるだろうが、フォントがあれだからどうしようもないが。
OSXのIEは開発が終わってるのでもう使う意味が無いしね。
pngが表示しにくい(MSが元々pngを表示出来ないってか8で透過出来ないとかバグあるので)
とか問題あるし、javaスクリプトのバグとか。
まともにネットブラウズするのならSafari系で見るのがいい。
・・・ってwinの人にいっても分かんないだろうね。
綺麗って表現が。
同じページでも綺麗だよ〜〜機会があったらお店でみてみましょう。
今までの自分のご自慢IEが情けなくなるので。
と言うか、マック使ってる奴の事なんか正直どうでも良い
はい、次どぞ〜
>>99 ヲタってどうして直にムキになるの?
>ってwinの人にいっても分かんないだろうね。
世の中の9割の人が理解しないってことだ。わかってるならグダグダ駄文でスレを汚すな。
まあお前に必要なのはスレタイ読む学力をつけることだ。ちゃんと学校言って来いボケ。
まあまあ、チンポでもこすってもちつけ
>>99 まあ、あれだ。オナニーは外に見せないようにな。
ええと、もしかすると、釣りでは?
>>99 winでフォントにアンチエイリアスかけてますが何か?
winIEは無いと困るだけで全然自慢できませんが何か?
おまいら、釣られすぎですよ。
safariが好きなんだね。よくわかりました。はい次
てゆうかIE6以外は無視していいだろ
>>110 スポポポポポポーン!!!
。 。
。 。 。 。 ゚
。 。゚。゜。 ゚。 。
/ // / /
( Д ) Д)Д))
スパパパパパパーン!!!!!!
+ ,, * +
" +※" + ∴ * ※ *
* * +※ ゙* ※ * +
+ "※ ∴ * + * ∴ +
* ※"+* ∵ ※ *"
( Д ) Д)Д))
112 :
Name_Not_Found:04/09/04 20:19 ID:IN6Ek4xB
「IE 5.5を使っているユーザーがまだ何百万人もいるというのに、CSSなどというよく分からないもののためだけに、どうやって彼らをIE 7.0に移行させるというのだ?」
CSSなどというよくわからないもの
C S S な ど と い う よ く わ か ら な い も の
(∩ ゚д゚)アーアーきこえなーい
えーと、ああそうだ。
大雨洪水注警報が出ているぞ。
この認識なのにIE7.0を有料にする気なのだろうか。
CSSって何か知っているのだろうか
奇形児を見たことはありますか?
これは北海道の網走市であった話です。古塚美枝さん(当時23)
は、いわゆる売春婦でしたが夫がいました。
しかしその夫は働こうとせず、酒に溺れる毎日、そして酔う
と必ず美枝さんに暴力を振るいました。
83年の夏、美枝さんは体調を崩し病院へ行きました。
原因は妊娠によるつわりなどでした。売春婦であった美枝さんは、
まず誰の子なのか考えましたが夫の子である事 を確信し、
早く報告しようと急いで帰りました。しかし夫は自分の子とは信じず、
中絶を命じました。
それから5ケ月。結局美枝さんは中絶を拒み、生むことを決意しましたが、
夫は従わなかった事を不満に 思い、さらに暴力を振っていました。
そしてその日夫は美枝さんの腹部に膝蹴りをしました。
すると、美枝さんの股間からは溢れる様に血が流れてきました。
そして美枝さんは崩れ落ち、声にもならない 様なうめき声で唸りながら.....
...流産でした。夫は慌てて家を飛び出して行きました。
何故?それは
生まれてきた子供が余りにも醜かったからです。
目はあべこべに付き、片方の目は眉毛の上に付いていました。
鼻はだらしなく直角に曲がり、口なんぞは縦向きに、
しかも耳のつけねから裂け目の 様に付いていました。
動きもせず、ただこちらを眺めていました。 それからどうなったかは分かりません。
ただ、この話を聞いた人は最低3日間気を付けてください。
うしろで何か気を感じても振り向いて いけません。
それはあの子があなたを眺めているから。
10分以内にこれを掲示板の5箇所に貼らなければ
そのままあの子は離れて行きません。お気を付けて
おい、幾ら何でもそれはMS担当者の認識じゃないだろう。
一般ユーザーへの普及の困難さを喩えたんじゃ無いのか。
119 :
Name_Not_Found:04/09/05 00:03 ID:SEVXSGmC
リストで「・」の位置より文字の位置の方が高いのですが、どうのように修正すれば
いいのでしょうか?
何回やっても↓で警告出されるんだけど
font-family: Osaka, "MS Pゴシック", sans-serif;
一般フォントファミリー名(generic font family)を最後の選択肢として付け加えておく事を推奨します
どっかおかしい?
IE7有料化絶対賛成!
寧ろIEなどどうでもよい
W3Cがscreenメディアだけでもレンダリングアルゴリズム作って公開すればいいのにね
>>117 >ただ、この話を聞いた人は最低3日間気を付けてください。
>うしろで何か気を感じても振り向いて いけません。
>それはあの子があなたを眺めているから。
ここが結構キタよ;時間が時間だし部屋真っ暗だし・・・・
IEもWIN OSも有料になってくれ。
少しはwebデザイナーの労力減らしてくれ。
ぁ。WIN osはもしかして有料だったか?
あれはでも無料だよな?
MS自身がSP2のProductKeyを配布するんだからさ。
自作自演な糞なMS死んでくれ〜〜〜〜〜〜〜〜
>webデザイナー ????
気取ってないかい?
128 :
126:04/09/05 14:42 ID:???
ごめん・・・
同感だ。Webクリエイターの労力を減らしてくれ。
130 :
Name_Not_Found:04/09/05 16:35 ID:xDBidhPh
質問です。
cssで入れた背景画像がネスケ7では表示されません。
上のバグ辞典サイトで確認してみたところ、
「未確認バグ」っていうところにのっていました。
まだ解決策は見つかっていないっていうことなのでしょうか?
方法をご存知の方がいらしたらよろしくお願いいたします。
それだけの情報でこっちに何かわかるとお思いか
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
●●●●●●●●●●●●●●●●不合格●●●●●●●●●●●●●●●●●
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
これを見た人は確実に【不合格】です。これをコピペでどこかに1回貼れば回避できます。
これは本当です。やらないと一年無駄になります.
私も最初は嘘だと思ったんですが、一応コピペしました。それでセンター私大に合格出来ました。
けどコピペしなかった友達がA判定とっていたのに、おちたんです。(慶応合格h.sさん)
俺はもうE判定で記念受験だったんだけど、コピペを10回くらいした途端に過去問が
スラスラ解けるようになって、なんと念願の早稲田に受かりました。(早稲田3学部合格r.kくん)
これを今年のセンター前に見てシカトしたら、センターミスって最悪です。(n.aさん)
信じられますか?この威力。
133 :
Name_Not_Found:04/09/05 22:47 ID:zLSYBXfZ
┏━━━━━┓ 左のようなレイアウトにしたいのですが
┃メニュ部分 ┃ メニュー部分が冗長になりそうなので
┣━━━━━┫ CSSを適用する前のHTMLでは
┃本文など ┃ 本文を先に書こうと思っています
┗━━━━━┛ そこで、次のようなHTMLを書いてみました
<div id="main">
本文など
</div>
<div id="menu">
メニュ部分
</div>
↑このようなとき、要素同士が重ならないように上下入れ替えるにはどのようにすればいいのでしょうか
#main{
margin-top:○○;
}
#menu{
position: absolute;
top:0;
}
とかどうでしょう
135 :
133:04/09/05 23:57 ID:???
うまく表示されました
ありがとうございます
XHTML 1.0 Strictではol要素のstart属性が非推奨属性となっているのですが
これに代替するスタイルシートってありますか?
CSSリファレンス見ても載ってないし、もしかしてスタイルシートで代替するのは無理なのでしょうか…。
IEとMozillaともに有効な、スクロールバーの色を変える方法はありますでしょうか。
ない
迷惑だからやめれ
ついでにカーソルを「+」に変えるのもやめてくれ。
出来るんだから仕方がない
143 :
Name_Not_Found:04/09/06 10:13 ID:Z1hCJJBk
おはようございます。宜しくお願いします。
Contentという大きなボックスの中に色んなボックスを
作っているのですが、ブラウザで表示した時に中央に表示される
様にしたいです。色々本を見てなんとか表示されたと思ったら、
・macでは中央に表示
・winでは左詰に表示
という状態です。htmlの方で<div algin=center>もやって
みたのですが、文字まで中央にきて悩んでます。
【cssの部分です】
.Content {
margin-top:0px;
margin-left:auto;
margin-right:auto;
padding:20px 20px 20px 20px;
color:black;
background-color:#eee;
border:1px dashed black;
width:720px;
}
お忙しいところすみません。力を貸して下さい。
>>143 1つ外にtext-align:center;
でだめですか?
145 :
143:04/09/06 10:28 ID:???
>>143 素早いレスをありがとうございます!!
未熟ですみませんorz 理解できてないのですが
一つ外というとbodyの部分に書くんですよね?
そんな本なんか捨ててリファレンス読んでこい
147 :
143:04/09/06 10:39 ID:???
>>144 コンテントの部分に入れてみたのですが、テキストだけ
中央によってコンテント部分は左に寄ったままでした。
orz
.Content {
margin-top:0px;
margin-left:auto;
margin-right:auto;
padding:20px 20px 20px 20px;
color:black;
background-color:#eee;
border:1px dashed black;
width:720px;
text-align:center;
}
148 :
143:04/09/06 10:40 ID:???
>>146 ひぃ!スタイルシートスタイルブックという本です。
リファレンス読んできます・・
149 :
Name_Not_Found:04/09/06 10:40 ID:Gy4y5BkT
150 :
143:04/09/06 10:58 ID:???
>>149 ありがとうございます!!
おかげさまでできました!皆さん色々と感謝します。
もっと努力します!
>>150 この子自分に絶望とかしないのかな?
この程度で人に聞かなきゃ駄目なんて・・・・・・社会に出ても役に立たねえだろうな。
間違っても部下にはしたくない。
それも
margin-left:auto;
margin-right:auto;
でセンターに来れないIEがどうにもこうにも情けないんだけど・・・
>>151 ここは質問スレだからな。
内容にもいろいろある。
155 :
昔の人:04/09/06 19:03 ID:???
>>153 標準モードにしなさい。さすればIEでも有效であらう。
>>152 ありえるから怖いよなw
>>153 メジャーブラウザのCSS実装を自分で調べることもできないってのもな。
そもそも仕様自体を理解しているのかも定かではないしな。
>>154 そうだな。大人げないのは俺の方だ。
>>155 せっかくだから標準準拠モードと言ってみよう。
ついでにスイッチはDTDであるということも。
しかしDTDって何?とか言ってきそうだから説明しよう
D...どえりゃー
T...とんでもねえ頭の
D...ドンキング
笑点か?テンプレ置くから皆もやってみ。
D...
T...
D...
>>155-156 標準準拠モードにうまく切り替わらないって話をどこかで聞いた希ガス。
そもそも DTD にそのような切り換え機能を持たせること自体間違えなんだけどね。
ところで、互換モードか標準準拠モードかを簡単に確認する方法を誰か知らんかね?
>>157 通用するのはIE6とNN7だけじゃなかったっけ?
そもそも互換モードはそのブラウザの後方互換なので、ブラウザによって意味が違う。
とりあえずIEなら
text-align:cener
で内包してるブロックレベルまでセンタリングされるか否かで調べるのがいい。
NNはしらん。
>>157 Mozilla系はページの情報見れば判る。
160 :
Name_Not_Found:04/09/06 20:23 ID:cxMYmklq
CSSの初心者なんですが、下のような場合タグをCSS化すれば Frontpage
でも Builder でも同じように解析するんですか?
>10 frontpageとBuilderでは解析が微妙に異なるの?
>Frontpage作成でHTMLは正常なのにBuilderでは
>エラーniなり表示がボロボロです。
>1例で<span absolute〜><table〜>のcodingは
>Frontpageでは解釈するのにBuilderは解析できない。
>codingを<Table absolute〜>toすれば解釈できる。
http://www13.plala.or.jp/NTT10432358/COMPLAINT_index_frame.htm
>>160 言ってることは理解出来んが、そのリンク先を参考にしようとしてるなら止めとけ
そのサイトの存在自体が疑問だ
>>158 最近のブラウザはほとんど標準モードと互換モードがあるようです。
operaもkonquerorも。(ということはsafariでもあるでしょうな。)
デフォルトスタイルや、CSSの解釈に差があるようです。
特にkonqueror、標準モードでは一部の独自拡張を無視します。
scrollbar-ナントカ-colorとか。モードで無視するのはmozilla等には見られない現象ですな。
特に事情がない限り標準モードで作っとけば無難ですか?
>>164 単刀直入に答えれば「標準準拠モード」で制作すべきだ。
各ブラウザによる互換モードの実装方法は慣習的解釈に差があるわけだから、
ある整形効果を制作者が意図したとしても、そのとおりになるとは限らない。
ウェブの制作者は仕様を理解し、それに沿ってスタイル設計を試みるべきだ。
もちろん各ブラウザの実装ミスを把握して、妥協的対策を採る必要があるが。
論理的にはtable要素だからデフォルトレンダリングでは↓
ヘッダ1 ヘッダ2 ヘッダ3 ヘッダ4 ヘッダ5 ヘッダ6 ヘッダ7
セル1 セル2 セル3 セル4 セル5 セル6 セル7
.......
これをCSSで↓にしたい
セル1 セル2 セル3 セル4
セル5 セル6 セル7
thは簡単に消せるけど、セルを途中で折り返すのって無理なの?
td { display:block; }
とかしても何もかわらないんだけど・・・
>>166 positoin使うしかないんじゃない?
でもposition使うならセル全部にクラス振る必要があるからHTMLに手を加えることになるだろうね。
どれくらいのレコード数あるのかしらないけど、正直バカバカしい作業になるから
あきらめれ。CSSの限界だ。
168 :
166:04/09/07 02:25 ID:???
>>167 thx
なんか他の方法を考えてみるよ。
td { display:inline; } にしたらoperaとmozilla firefoxでなら
セルの内容次第で似たような表示になるけどこれじゃいまいちね
っていうかやっぱりCSSは実装も含め(これが7割くらいかな?)まだ未完成品だよね。
早く実装がよくなってCSS3も出てほしいね。
>>170 出たところでIEさんは対応させる気無いだろうけどな
172 :
Name_Not_Found:04/09/07 11:24 ID:xKGMnmZn
<img src="hoge.gif" align="ansmiddle" />ふがふが
と同等の見栄えを実現してくれるスタイルシートってないですか?
align="ansmiddle"って今後消滅の可能性があるそうなので。。。
173 :
Name_Not_Found:04/09/07 11:26 ID:xKGMnmZn
もとい、align="absmiddle" です
absmiddleって属性値は知らなかったが
img {vertical-align:middle;}でいいんじゃない?
175 :
Name_Not_Found:04/09/07 14:39 ID:/0f3Y/tU
以下のようなHTML&CSSを作成しているんですが、
IE6での表示が期待通りになりません…。
-- HTML側 --
<div id="header">
<div id="logo"><img src="***"></div>
<ul id="sitenavi">
<li><img src="***"></li>
<li><img src="***"></li>
</ul>
<ul id="globalnavi">
<li><img src="MenuImage01"></li>
<li><img src="MenuImage02"></li>
<li><img src="MenuImage03"></li>
<li><img src="MenuImage04"></li>
<li><img src="MenuImage05"></li>
</ul>
</div>
176 :
175:04/09/07 14:40 ID:/0f3Y/tU
-- CSS側 --
#header {
margin:10px 0px 0px 40px;
width:710px;}
#sitenavi li {
list-style-type:none;
float:left;
margin-left:15px;}
#globalnavi li {
list-style-type:none;
float:left;
margin-left:10px;}
#logo{float:left;}
#sitenavi{float:right;}
#glovalnavi{
float:right;
clear:right;
margin-top:15px;}
globalnaviの画像を1行に並べて、header内で右寄せにしたいんですが、
IE6で見ると、5つめのli要素の画像が、2行目に改行されてしまいます。
Netscape7では、きちんと見えています。
177 :
175:04/09/07 14:41 ID:/0f3Y/tU
▼試したこと
・li要素を画像ではなく、テキストで入力すると、IEでも1行になる
・li要素の「margin-left:10px;」を5px以下にすると、1行になる
・globalnaviにwidthで画像幅分+li要素につけた余白+5px程度の大きさを
指定すると、IEで1行になり右寄せされたが、これだとNetscapeでは中途半端
な右寄せ(右側の余白が大きくなる)になってしまう
logoとglobalnaviの間は、240px近く離れるので、十分1行に収まっても
いいと思うのですが、何かCSSの指定方法がおかしいのでしょうか?
>175-177
改行エラーで怒られたので、細切れですみません。
178 :
172:04/09/07 16:05 ID:???
>>174 うお、しらなかった・・・ありがとうございます。
>>177 直感だけど #glovalnavi を display : inline してみては?
>>177 floatさせるならブロックにwidthを指定しろよ。
独り言
重いページになるんだろうなぁ・・・・
182 :
175:04/09/07 18:32 ID:???
>179、>180
レスありがとうございました。
>180さんの言うようにwidthも、いろいろ指定してみたものの
IEだと、どうしても実際の画像幅+余白幅より、10px程大きく
しないとうまくいかず…。
>179さんの指摘をみて、#globalnavi li {display:inline;}を
追加してみたら、うまくいきました。
183 :
Name_Not_Found:04/09/07 18:59 ID:3KIBFslE
色々調べてみて、どうしても分からなかったので、良かったら教えてください。
画像を固定して、背景色をグラデにしたいのですが……できますか?
と、いいますか、この二つって組み合わせ出来るのでしょうか??
ご教授お願いシマス。(´Д`υ)
よーわからんが
グラデーションの画像を背景にするの?
だったらできる。
そろそろ1時間が経とうとしているが、
>>183は長ーいうんこをしているのか?
>>172 今後消滅ではなく、はなから存在しません(正式には)
CSS3のvertical-align:central待ち。
>>185 1時間以内にレスが着くとは思ってなかったのかもよ。
例えば、CSSでデザインする場合
<div class="honbun">
<p>
本文
</p>
</div>
と
<div>
<p class="honbun">
本文
</p>
</div>
だと、どっちでデザインするのがいいのでしょうか?
どっちが効率がいいか考えろ
多分
>>183はこうしたかったんじゃないかと。
body {
background-color: gradation( #fff, #000, vertical );
background-image: url( hoge );
}
勿論こんな属性値は存在しない。
IE5.5以降だけならfilterを使って何とかなるかもしれないけど。
>>188 状況によるだろ。
p要素が一個しか入ってないのならそのdiv要素すら必要かどうかが不明だけどな。
擬似フレームを使わず、メニュー部分のテキストを左下に固定したいのですが
fixedを使うとIEでは未だに固定になってくれないようなので
どうすればいいか悩んでいます。
#sample{padding:10px;
z-index:2;
position:absolute ;
bottom:1em;}
今はこれでやっているのですが、何かいい方法がありましたら教えて頂けると嬉しいです。
IE6が未対応だから
195 :
183:04/09/07 23:07 ID:3KIBFslE
みなさん色々お答えして下さってありがとうこざいます!!
こんなにカキコして貰えてるとはっ!
190さんの通り、画像と背景色は別に指定(使用)したかったのです!
フィルタ使うと画像が表示されないんですよね……
やっぱり出来ないのでしょうか??
196 :
183:04/09/07 23:14 ID:3KIBFslE
連レスすみません;
body { background : #000000 url(gazo) no-repeat fixed bottom;}
の#000000をグラデーションにしたいと思ってるのです。
だからできないっつってんだろ
200 :
183:04/09/07 23:38 ID:3KIBFslE
できないですか?残念ですが、勉強になりました!!
ありがとうございます〜!
わざわざ教えてくださった方々、ありがとうございますvv
また何かあったらお邪魔すると思いますがよろしくお願いします。
202 :
なつみ:04/09/07 23:45 ID:Y2VAiGl0
>>204 ・・・自演ってオマエ、何の為の自演だよ。
210 :
Name_Not_Found:04/09/08 02:12 ID:ppDLRhWE
ulのli要素を↓のように並べたい。
1 2 3
4 5 6
でもli要素の数が違う時もある。その時は↓にしたい
1 2 3
4 5
1個なら
1
横に3列で縦が不定。右側から置かれていく?うまくいえないけど↑の図の通り。
ul要素が複数あって、中身のliの数がそれぞれ違うけど同じclass。
右側から埋まってくれるようなCSSなんて不可能かな?
211 :
210:04/09/08 02:13 ID:ppDLRhWE
追記。
li要素の中にはブロックレベルの要素が入るので
li{ display:inline; }
ul{ text-align:right; }
のようなことは不可能。
┐(´д`)┌
∋oノハヽo∈
∩从VvV) <待つのだ
⊂,,__つ⊂)
ごめん誤爆
ミキサマ!!
217 :
210:04/09/08 06:20 ID:ppDLRhWE
やっぱ無理かな?
> のようなことは不可能。
この言い方がなんか生意気だから答える気なくした。
219 :
210:04/09/08 06:38 ID:ppDLRhWE
>>219 おいボケェ。俺様が教えてやろうかwwww
このクソゴミが!いきがりやがってwwwwwwwwww
土下座したら教えてやるよw
221 :
sage:04/09/08 07:45 ID:6+Etm6Yh
初歩的な質問ですいません。
例えば...
tableのセルの中にテキストを挿入して、そのテキストの大きさをcssで11pxに
指定し、縦を中央に揃えようとした場合、
中央よりも若干上に配置されてしまいます。
これは、名瀬?どのようにすれば縦位置を中央に配置できるのでしょうか??
あぁぁぁ、sage間違えた。
223 :
210:04/09/08 07:50 ID:ppDLRhWE
>>223 >?
じゃねんだよボケがwww
早く土下座しろよwwwwwww
225 :
221:04/09/08 07:56 ID:???
>>210 inline-tableで何とかなるかも。
228 :
224:04/09/08 15:22 ID:???
ああ。 それには触れないでくれ。 ゥゥ
229 :
210:04/09/08 22:06 ID:ppDLRhWE
>>227 ありがとう。でも現実的には今のUAの実装じゃ使えないよね。
230 :
Name_Not_Found:04/09/08 22:25 ID:PbpNEQMg
wwwwwwwwwwwwwwwwwwwwwww
wwwwwwwwwwwwwwwwwwwwwwwww
おい224 お前結構良い奴だろ?
あとネ実の住人だろ?巣に帰るぞ。
はい次どぞ〜
hahaha
hohoho
>>221 右から左に入れれば良いじゃん。その要素のときだけ右→左指定にしてあとは通常動作。
左から右がメインなのは英文(など)が左→右で書かれてるだけ。
あ、とうぜんli内も通常動作ね。つーかテーブル使っちゃえば?
asfdafd
237 :
Name_Not_Found:04/09/09 14:18 ID:ievpwCOb
質問なんだが、head内で
h1{
text-align:center;
font-size:large;
}
と指定してる。でこの効果を適用しないh1を作りたいんだけどどうしたらいいかな?
<h1 style="text-decoration:none;">だと駄目だった。
>>237 効果を適応するh1にクラスまたはIDをふるなどしてやる。
もしくは、適用したくないh1にクラスまたはIDを振って!important
240 :
237:04/09/09 16:02 ID:ievpwCOb
できねえ・・・CSSを適用しないH1を表示させたいんだが勝手に適用される。
h1.hoge {
text-align:center;
font-size:large;
}
適用したい奴だけ <h1 class="hoge">にしる。
>>237 普通にクラスかid振ればできるハズだけどなあ?
失礼だけど、クラスの「.」ぬけてたり「"」が抜けてたりしませんか?
243 :
237:04/09/09 16:40 ID:???
いや、CSSは外部ファイルで、それを複数のHTMLファイルから読み込んでるんだよ。
だからそうすると変更箇所がすごく多くなるし、適用しないh1は1個で十分なんだよ。
!importantとかやっても駄目だったよう・・・
244 :
237:04/09/09 16:42 ID:???
>>242 かぶったスマソ
何も適用しないh1を作りたいわけで。そこをどうしたらいいのか・・・
何も適用しないH1→希望の初期設定を適用したH1
246 :
237:04/09/09 16:50 ID:???
>>245 CSSを適用しないって意味で書いてる。スマソ。
>>246 君のデフォのスタイルなんて僕には分からないよ
>>246 <h1 style="text-align:left; font-size:medium;">
他のh1要素をdivなりで囲んで
div h1{ … }
で、適用したくないタグはdivで囲まない。汚いか。
>>237 cssは外部なのか?
head内に書き込んでるって書いてなかったか?
251 :
237:04/09/09 17:08 ID:???
>251
意味不明。
とりあえず、HTMLの時点で無茶苦茶な悪寒。
CSSは子孫セレクタも勉強しろよ。
お前ら、もちついてください。
>>247 で FA じゃないですか。
ていうか、ここの質問って
「勉強シル!」で済んじゃうのが殆どだよね
そういう質問に親切丁寧に対応出来るここの住人って偉いよなあ
>>254 漏れのように教えたくてしょうがない人種も存在しておるのです。
構造的に実は<h2>だった。というオチでいいじゃないか。
パチパチ 賛成
>>254 ここはこれでもまだましだ。
HPBスレに行ってみろ。まるで我慢大会だ。
><h1 style="text-decoration:none;">
これでネタだと思った。
dl{
width:280px;
padding-top:20px;
font-size:90%;
border:1px solid #ccc;
}
dt{
width:60px;
clear:left;
float:left;
border:1px solid #ccc;
}
dd{
width:180px;
clear:right;
float:left;
border:1px solid #ccc;
}
<dl>
<dt>a</dt>
<dd>1</dd>
<dt>b</dt>
<dd>2</dd>
</dl>
IE6で標準準拠モードで↑をやるとバグ?dl要素の幅が子要素につけた
clear:right; or float:left;
の影響で拡張される・・・・・・・・かなりウザイ!
>261
いまいち何がしたいのかわからん
clear:right;するモノは何だ?
263 :
Name_Not_Found:04/09/10 08:10 ID:mPvt6kE5
ナビゲーションバーをcssで作りたくて
以下のように記述しました
#navi{
list-style-type: none;
}
.button{
display: inline;
}
-----------------------
<ul id="navi">
<li class="button">画像1</li>
<li class="button">画像2</li>
<li class="button">画像3</li>
</ul>
すると、ブラウザで見た時に
画像と画像の間に隙間ができてしまいました。
ソース上で改行しないと消えるのですが…
もしかしたらcssの問題ではないのかもしれませんが、
どなたか改善する方法をご存知の方、
いらっしゃいませんか?
dl{
border:1px solid #ccc;
margin-left:100px;
}
dt{
width:60px;
border:1px solid #ccc;
}
dd{
width:180px;
border:1px solid #ccc;
}
<dl>
<dt><input type="text" size="3" value="0" name="hoge"></dt>
<dd>1</dd>
<dt>b</dt>
<dd>2</dd>
</dl>
IE6標準準拠モードで↑を試して!テキストボックス近辺がおかしなことになるから。
これもバグだよね?なんかうっとおしくなってきたo...rz
>>263 >ソース上で改行しないと消えるのですが…
それでやるか、floatでの方法に変えるかだな。しょうがないよ。
とりあえずおまいclass=buttonって論理的な理由でのクラス付けか?
#navi li{
display:inline;
}
でいいだろ。
<p>aiueo</p>
p{
width:100px;
height:100px;
border:1px solid #ccc;
}
aiueoがp要素の一番下に表示されるようにしたいんですが、
vertical-align:bottom; と vertical-align:100%;
を試してみましたが、変化なしです。どうやればよいでしょうか?
朝っぱらからあげてしまってすみませんが、エロイ方どうかおながいしますm(_ _)m
幅・高さがわかってるなら、フォント固定して
div {
border: 1px solid #CCCCCC;
height: 100px;
width: 100px;
}
div p {
font-size: 13px;
margin-top: 85px;
}
<div><p>aiueo</p></div>
でいいんじゃない
>266
display:table-cell;
対応ブラウザは知らん
そんな腐れた事するくらいなら
p{
width:100px;
height:100px;
margin-top:80px;
border:1px solid #ccc;
}
ってやった方がマシ
270 :
266:04/09/10 09:52 ID:???
>>267-269 ありがとうございますm(_ _)m
縦幅の不定なボックスの中の、テキストをborder-bottomに合わせるのは現状では
display:table-cellの対応が遅れてるせいで、代替方法をとるしかないのですねorz
>>267さんのフォント固定は厳しいです;
>>269さんのはよくわかりません。padding-top:80px;の間違いですか?
でもそれもフォント固定ですよねorz
vertical-alignってイマイチ使い道がわからないです;なんかテーブルレイアウトを推奨する勢いが
あるプロパティなような気がするんですが、私の気のせいですか?(CSS1での話しです)
気のせいです
次どうぞ
>>270 CSSとそれの対応状況がショボイだけ。気にするな。
そういえば何でstyle帳消しプロパティってないんだろうな。
<div class=chapter>
<h2>...</h2>
<p>...</p>
...
<div class=section>
<h3>...</h3>
<p>...</p>
...
</div>
</div>
これで
div.chapter p{ font-size:110%; margin:100px ; .............}
div.section p{ 帳消しプロパティ:on font-size:90%; text-indent:1em;}
みたいな事ができればいんだけどな。まあCSS2のセレクタ関係がちゃんと実装されればさほど必要ないけどさ。
帳消し指定=ブラウザ初期値指定 だとするとそれなりに意味不明になると思う。
ブラウザごとに設定違うしね
>>274>>275 だって元々ブラウザごとに設定の違うデフォルト状態から始まるんだから問題ないでしょ?
始まりにもどすだけさ^^
それに解釈はどちらにしろUAまかせなんだから、各UAのデフォルト状態に戻すプロパティがあっても
なんら不思議もなく、実装に面倒なこともなく、いいと思うんだけどなぁ。
リストにフォントサイズを指定する場合、
<ul>や<ol>に指定するほうがいいのか、<li>に指定するほうがいいのか、
どっちなんでしょうか。
むきー!!
Opera(6.03)でだけ正しく表示されない。
display:block;とpaddingが超無視される。
これは設定する要素でなんとかクリアしたけど
今度はbackground-imageが無視されるorz
メニューだから全く消えたら困るし…
それならdisplay:none;も無視してくれりゃいいのに…
そんな古いバージョンでどうこう言ったって・・・
281 :
Name_Not_Found:04/09/10 18:16:00 ID:GfDiowsb
背景の画像を左、または右の縦一列に固定する方法は分かるのですが、
左右どちらにも固定する方法はあるのですか?
>>281 背景画像は、今のところ、一つのオブジェクトに一つしか設定できません。
残念。
>>281 <body>
<div>
</div>
</body>
DIVに透過GIFを使うとか。
はぁ?
透過GIFじゃなくてもいけるね。
286 :
Name_Not_Found:04/09/11 02:57:19 ID:+QTfchEr
addressやemが勝手に斜体指定されて困っております。
これは恐らくブラウザの仕様ですが、回避したいと思います。
最初に思いついたのは
address {font-style:normal;}
なのですが、
他のxhtml要素で新たに勝手に斜体に指定される物が出てくるかも知れません。
その都度対応するのは面倒なので、その上の要素のfont-styleを継承させたいと思います。
つまり、全ての要素のfont-styleをinheritに指定したいのです。
そこで、
html {font-style:inherit;}
にしました。
これでブラウザ設定のfont-styleで全てが表示されると思っていたのですが、
addressの斜体が残ってしまいました。
どなたか勝手斜体回避の方法を教えてくださいませ。
ブラウザは mozilla firefox 091 と ie6 で確認しました。
>>286 * { font-style: inherit }
font-styleに限らずブラウザデフォのスタイルやユーザーシートはあるでしょうに。
288 :
Name_Not_Found:04/09/11 03:13:26 ID:+QTfchEr
> * { font-style: inherit }
ただ今、試させていただきました。
firefoxでは巧くいきました。
しかしながら、ieでは斜体が残ってしまいました。
ieは行儀が悪い、と切り捨てる事は出来かねます。
別の方法を教えてくださいませ。
* {font-style:normal;}じゃダメなん?
290 :
Name_Not_Found:04/09/11 03:42:16 ID:+QTfchEr
> * {font-style:normal;}じゃダメなん?
上位の要素が非normalの場合も御座いまして、巧くいきません。
特別な指定をしない時に要素内で
斜体 <-> 非斜体
と変化しないことを望みます。
たとえば、* {font-style:normal;}の場合、
1 <p style="font-style:normal;">p<em>em</em>p</p>
2 <p style="font-style:italic;">p<em>em</em>p</p>
3 <p style="font-style:italic;">p<em style="font-style:normal;">em</em>p</p>
1の p では問題ありませんが、
2の p の中では全てitalicであって欲しいので、巧くいきません。
3のように、特別に指定する事もあります。しかし、基本的に指定しない物に対応させたいと思います。
> * {font-style:normal;}じゃダメなん?
上位の要素が非normalの場合も御座いまして、巧くいきません。
基礎ぐらい覚えてから書き込めよ
292 :
289:04/09/11 04:35:33 ID:???
>290
* {font-style:normal;}
とした上で
<p class="italic">abc<em>def</em>hij</p>
とクラスつけて
.italic , .italic * {font-style:normal;}
みたいにクラス以下のセレクタにも適用させるとか
>287が指摘してるけど、他の要素でも同様な現象はあるから
一度デフォルトを回避する指定をしておいて
それぞれ必要な要素に対して指定するのが楽だと思う
<h2>可変長文字列</h2>
1ページにh2が複数個あり、h2の中身の文字の後ろに100px*20pxの装飾画像を
付けたいのですが、h2の中身の文字列の長さが均一ではありません。
完全に装飾画像なので
h2{
background:url(hoge.gif) no-repeat right center;
}
のように背景とするべきだと思いますが、文字の後に来てくれません。
widthを指定すれば一定の位置に来ますが、目的は文字列のすぐ後ろに装飾することなので
文字列の長さが違う場合に目的が果たせません。
一応
<h2>可変長文字列<img src="hoge.gif" alt=""></h2>
のようにすればできますがこれだと非strictになってしまいます。
全てのh2に個別でやったとしても、文字サイズを変えられたらアウトです・・・
CSSの限界なのかとも思いましたが、もしかしたら私がショボイだけの可能性もあるので
知恵を借りに来ました。どうぞよろしくお願いします。
h2:after
{
content: url(hoge.gif);
}
とか。縦位置はverticali-alignとかで適当に。
…IEで使えないのが最大の問題ではありますが。
h2 {
background:url(hoge.gif) no-repeat right center;
display:inline;
padding-right:100px;/*画像の横幅*/
}
装飾画像がどんなのかわからんが
いずれにせよ文字サイズ変えられると問題あるなら
文字を含めた画像にしてしまえば?
296 :
293:04/09/11 10:17:34 ID:???
>>294 content:ってもの凄く使えたらいいですよねorz
IEってばもう・・・・
>>295 display:inlineはいいアイデアですね^^
でもinlineにしたら何故か1個目のh2のはるか下にあるはずの2個目のh2が隣に来てしまいました;
h2〜次のh2の間が全部浮動要素だからかな?clear:leftはしてるんだけどな。
がんばって直します^^;
たとえば
h2 {
ほにゃほにゃ
}
h2 {
ほげらほげら
}
って感じで同じ要素が重複してもだいじょうぶですか?
また
h2 { }
って感じに中身がなくても大丈夫ですか?
だいじょうぶというか変な挙動をするブラウザはありますか?
何故自分で検証しない?
position:absoluteの起点になる位置って、positionプロパティを持つ
一番近い祖先要素の左上。で、合ってますよね?
これってどんなことがあっても変わらないのが正しい実装ですか?
NN7で標準モードで下のソースをやると↑で言った起点じゃなくなってしまいます。
原因はfloat:leftです。これがあるかないかで起点が変わります。
どうすればよいでしょうか?
<div class="chapter">あいうえお<div class="section">1</div></div>
<div class="chapter">かきくけこ<div class="section">2</div></div>
<div class="chapter">さしすせそ<div class="section">3</div></div>
div.chapter{
padding-top:1em;
position:relative;
border:1px solid #000;
width:100px;
height:100px;
float:left;
}
div.section{
position:absolute;
top:0;
left:0;
}
天の邪鬼なやつだなぁ
301 :
299:04/09/11 11:46:44 ID:???
>>300 私に言ってるのでしょうか???ソースは例なので実際のものとは違います。
ただ、positionとfloatがからむバグをなんとかしたいのです。
どーせ回避法は質問スレとか言われるぞ
304 :
299:04/09/11 13:34:40 ID:???
>>302>>303 やはりバグなんですね。NN7はかなり標準準拠しているブラウザだと思ってましたがorz
ところでどうしてこれほどバグが多いのでしょうか?
仕様書の解釈違いとかならしょうがないですが、今回みたいな完全なバグは勘弁してもらいたいです。
やはりW3Cがレンダリングエンジン部を作るべきですよね。まあ使ってもらえるかはわかりませんが。
正直CSSっていまだに使い物にならないなんて本当に今後のweb標準になっていくんでしょうか?
イラレでデザインの決定後にコーディングしてますので、いろんな実装の不備さ加減に気づくたびに
がっくしします・・・
>>303 回避はアホらしいですがHTMLを書き換えてなんとかしました。本当にアホらしいことですが;
結局CSSでうまくできるように考えてHTMLを仕上げないといけない現状でW3Cが
strictの薦めるのって、ちょっと頭おかしいんじゃないかとさえ最近思ってきましたorz
>304
W3Cに直接言ってくれ
仕様がどうのとか準拠するとかしないとかってのは一部のWEB製作者が言ってるだけで
ブラウザ作成側や利用者やW3Cは(そういうつまらん話は)ほとんど重要視していない。
>>304 AmayaってブラウザはW3Cが作ってなかった?このブラウザで表示させると泣けてくるけど。
それにしても、CSSのためにHTMLを書き換えなきゃならないのはつらいよね。
>>306 >W3Cは(そういうつまらん話は)ほとんど重要視していない。
そうなの?じゃあW3Cは何がしたいわけ?
309 :
299:04/09/11 13:50:14 ID:???
>>305 はい申し訳ないです;
>>306 テーブルレイアウトが最強ってのはこの辺なんですかね。
>>307 >泣けてくるけど
これはどちらのいみでしょうか?仕様通りにレンダリングしてくれるので
うれしくって事ですか?
311 :
Name_Not_Found:04/09/11 18:24:18 ID:2DY4IvGZ
左右に
| コ |
| ン |
| テ |
| ン |
| ツ |
こんな感じでラインを引きたいのですが、画面の上下に隙間ができてしまいます。
div.contents{ border-left: 1px solid black;
border-right: 1px solid black; }
隙間をなくすには、このほかに何を加えれば良いでしょうか?
>>311 そのすきまは、div じゃなくて body の方。
>>299 そのバグは新しいバージョンの Mozilla では既に直っている。
Mozilla は日々更新しているからフィードバックが至極早い。
開発が止まっていてまったく進展のないWinIEよりは遥かにマシ。
レンダラは各ベンダが責任もって開発すべきことで、W3C の役目ではない。
どんなソフトウェアにもバグは付き物で、完璧なものなどこの世にはない。
つまり、各ベンダのCSS実装にバグがあるのは当たり前のことであり、
その当たり前のことを回避し、工夫するのがウェブデザイナーの仕事。
自分のスキルがないことを責任転嫁して、愚痴を晒すのはみっともない。
しかと心得ました。
315 :
Name_Not_Found:04/09/11 22:33:25 ID:YSVuAlH6
<p class="a b">ほげほげ</p>
と指定した上で、
.a {何か}
.b {何か}
はともかく、
aとbが両方指定されてるときに限り、という条件を指定する方法はありますか?
仕様書のどっかにあったか?見落としたかな・・・
p.a.b
89へぇ〜
しかし WinIE は マルチクラス非対応な罠
(p.a.b を p.b などと最後しか解釈しない)
>>313 >つまり、各ベンダのCSS実装にバグがあるのは当たり前のことであり、
>その当たり前のことを回避し、工夫するのがウェブデザイナーの仕事。
こいつ頭おかしいんじゃないの?
言語のコンパイラをUAごとに個別に作るメリットは何よ?
例えばPerlでCGIを組んだ時に同じPerlのバージョンなのにサバごとにあまりにも差が
あったら困るだろ。で、今CSSではみんな困ってるだろ。
そもそもレンダリングエンジンを作る側のスキルが足りないことを棚に上げて
制作者側にその分のスキルアップを求めるってアホだろ。何故少数がわで対応せずに
大多数の人間に負担をかけるんだよ。おまえもう少し・・・というか病院にいった方がいいぞ。
あっちのスレでやれば?
病院 二人して行って来い。
>>322 消防は学校で国語をきちんと勉強してこい。
スタイル
スタイルシート
カスケーディングスタイルシート (CSS)
この3つの語彙や使われ方の違いを説明してください。
>324
スタイルシートは文書の見栄えを提供する技術全般のことで、
CSSはその技術のうちの一つ。
で、スタイルは、スタイルシートによって書き換えられた表現かな?
俺解釈だけど。
実際、そんなに厳密に気にする用語じゃない気がする。
自作自演パソコン
328 :
324:04/09/12 04:46:29 ID:???
>>325 ありがとう。では、次の文章はどこかおかしいですか?
HTMLにおける「CSS」の記述方法には、以下の3つがあります。
・別のファイルに「スタイル」を記述し、linkタグによって呼び出す
・styleタグを使って直接「スタイル」を記述する
・タグのstyle属性に直接「スタイル」を記述する
>>320 >言語のコンパイラをUAごとに個別に作るメリットは何よ?
きみきみ CSS はそういう類のプログラミング言語ではないので。
サーバ側の言語と、クライアント側の言語を一緒くたにするなよ。
CSSスタイルシートはデバイスの多様性という面で事情が違う。
対象となる環境が多様になれば自然とバグもでてくる。
しばらくの間は、実装がヘボイのにひたすら耐え忍ぶか、
Bugzilla などのように開発に協力して改善を求めか、するしかない。
最近、「アホ知ったか野郎」がずいぶん増えたな。
ちょっと解ってくるとすぐこれだもんね。厨と何ら替わりがないね。
あっちとか病院とかよそでと言われても、何も感じないのかねぇ?
>>332 だから知ったか厨でいられるんだよ〜ん。
はい次どぞ〜
>>330 お前・・・・だからコンパイラを複数種類作ってどうするのよ。
みんなで1個ちゃんとしたもの作れば無問題だろ。
それぞれがバカみたいなことやってっからダメなんだよ。そもそも言語開発者が
コンパイラの製作に関わらない時点でアフォまっしぐらなんだよ。
てめえで作った言語なんだから最後までてめえでケツ持ちやがれよ。
要はCSSの解釈をするエンジンはW3Cも公式に絡んでの共同制作をしれってことだ。
あなた達なにしてるの!! パンツ脱いで廊下に立ってなさい!!!
337 :
貧乏神 ◆4C1MajRa36 :04/09/12 09:32:33 ID:7+xzFwhQ
340 :
貧乏神 ◆4C1MajRa36 :04/09/12 09:44:45 ID:7+xzFwhQ
↑ 踏むなよ ALL
342 :
貧乏神 ◆4C1MajRa36 :04/09/12 09:52:03 ID:7+xzFwhQ
onload onunloadも設定してないし威力的には押さえてあるから大丈夫。
知ったかも一緒に消えたか?
345 :
Name_Not_Found:04/09/12 11:54:05 ID:JeL7czP8
はじめまして。質問です。スタイルシートを外部ファイルで定義したのですが一部だけ反映されません。外部ファイルの内容は以下の通りです。
body, table, td{
font-size:10px;
color:#CCFFCC;
font-family:'Verdana';
overflow-x:hidden;
filter:dropshadow(color=#003300,offx=2,offy=2);}
a{
text-decoration:none;
}
a:link, a:active, a:visited{
color : #33CC66;
}
a:hover{
color :palegreen;
}
.imgscroll{
filter:chroma(color=black)
}
反映されないのはfilter:dropshadow〜の部分です。CSS関係のサイトを参考にしたのですが、できませんでした。
何が間違ってるのでしょうか。。。アドバイスをいただけたら嬉しいです。どうかよろしくお願いします。
d
ds
348 :
貧乏神 ◆4C1MajRa36 :04/09/12 12:11:30 ID:7+xzFwhQ
じゃあトリップ復活。
漏れはCSS守備外だが
初期化してなくない?
offxとoffyて関数なの?
>>
そもそもブラウザはcssをコンパイルなどしない
350 :
貧乏神 ◆4C1MajRa36 :04/09/12 12:31:27 ID:7+xzFwhQ
そりゃコンパイルしないが勘で見たところテーブルにいちいちFONTとか付けるのが面倒くさいので定義してるのは解った。それとOFFXとかだけじゃ足りない。四角形を定義できてない(陰の方向)
やっぱり最初に再定義する必要があるのでは?
(しつこいようだが漏れは守備外なので確証なし)
そもそもブラウザが秘密なんだが・・・
353 :
345:04/09/12 13:18:56 ID:JeL7czP8
レスが遅れてすみません。追記ですが、私のネット環境はWIN XPのIE6.0です。
いくつかレスをいただけて感謝しています。ちょっと難しくて分からなかったのですが
>>四角形を定義できてない(陰の方向)
>>最初に再定義する必要があるのでは?
というのはどういう意味ですか?
あと、貧乏神さんの勘の通りの理由で外部ファイルにしたのですが、以前は
<font style="filter:dropshadow(color=#003300,offx=2,offy=2)">で定義していました。
それではきちんと表示されたんですけど…
フィルター系ってwidth指定しなくちゃいけないんじゃなかった?
355 :
Name_Not_Found:04/09/12 13:33:48 ID:oiAryZ6K
リンクを張った画像にマウスが乗ると動くようにしたいのですが、
リンクを張ってない画像は動かないようにしたいのです。
この場合は、わざわざclass指定をして分けないといけないのですか?
<a>タグがらみで、一括で分けられるようにはできないでしょうか?
356 :
貧乏神 ◆4C1MajRa36 :04/09/12 13:35:36 ID:7+xzFwhQ
そういうのはCSSより
JavaScript
a:hover {
position : relative;
top:2px;
left:2px;
}
何が動くんだ?
むう…
JS推奨派閥の立場が…
CSSって万能なのね…
どうやらCSSも覚えないと「憑」いていけないようですから勉強してきまつ
m(_ _)m
363 :
358:04/09/12 13:46:16 ID:???
お前ら…主語が無い質問によく答えられるな。
勘なのか?
a img:hover{
...
}
しかし:hoverはまだa要素にしか効かないバカUAが多数なのでアヘハエh^^
ホントにゴミだよCSSって。テーブルレイアウトもクソだから結局全画像で決着。
>>363 アホにはアホの言うことが解るんだ。
まだまだ修行が足りんぞ。363
>>363 CSSの質問スレだから、CSSであることを大前提で答える。
ただそれだけのこと。
週末は盛り上がるな
370 :
355:04/09/12 15:16:41 ID:oiAryZ6K
アホですいません。
どうもでした。
付き合って2ヶ月の彼女に「今日親いないから」って家に呼ばれた。
まだ交わりをかわしてなかった俺は今日がその日だと思った。
彼女の家のあるマンションに着いて、大事なものを用意していないのに気付いた。
運よくマンションの一階に薬局が入ってた。
店主がおっさんだったので気楽にゴムを買えた。
レジでそのおっさんがニヤニヤしながら「兄ちゃん、いまからか?」と聞いてきた。
俺もにやつきながら「今日初H」と答えた。
おっさんは「がんばれよ」とか言って送り出してくれた。
彼女の家に着くなり「ごめんもうすぐ親が帰ってくる」と言われた。
今日はダメか・・と思ったが「とりあえず挨拶だけしていって」ということだったので彼女の親の帰宅を待った。
5分ほどで彼女の父親が帰ってきた。
下の薬局のおやじだった。
ものすごいコピペにせつなくなった・・・
374 :
345:04/09/12 16:18:53 ID:++rO7XQV
>>フィルター系ってwidth指定しなくちゃいけないんじゃなかった?
元のソースはwidth指定されていました。でも、外部ファイルにすると
filter:dropshadow(color=#003300,offx=2,offy=2);}
ってなっていますよね。
なので、どこに入れていいのか分からなくなってしまったんです。
どうしたら良いのでしょうか・・・
あちゃー (きっと誰かが「アホ」「ボケ」「カス」って言うと思う。)
376 :
345:04/09/12 16:36:23 ID:++rO7XQV
説明が不十分でした。すみません。
<font style="filter:dropshadow(color=#003300,offx=2,offy=2)">
のソースは他サイトで見つけたタグですが、width設定がされているものもいくつかのサイトにありました。
width設定はしなければいけないものなのでしょうか?
上のタグだけでも反映されたのですが…
もししなければいけない場合は、widthは
body, table, td{
font-size:10px;
color:#CCFFCC;
font-family:'Verdana';
overflow-x:hidden;
filter:dropshadow(color=#003300,offx=2,offy=2);
width:100%; ←
}
の様に入れていいんでしょうか?
>>372 ≫テーブルの活用
テーブルタグでレイアウトをしよう。
Wow!!
<table border="0" width="200" height="117" cellspacing="0" cellpadding="0" background="001.gif">
<tr>
<td>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<marquee scrollamount="2" width="180" behavior="alternate">今時のHP作り!!</marquee>
<br>
<br>
<marquee scrollamount="5" width="180">
更新履歴や最新ニュース・その他管理人からの簡易伝言版として活躍することでしょう☆</marquee>
</td>
</tr>
</table>
</td>
</tr>
</table>
あいたたたたw
うえぶデザイナのプロはテーブルレイアウトなんて日常ちゃはんじ(←なぜか変換できない)だぜ!!
marqueeにはつっこまんのか
>>380 “ちゃはんじ”ではなくて“ちゃめしごと”で変換するだze(プ
>>382 おお、変換できた。それにしてもMS−IMEは頭悪いな
オレ、プロだけど、さすがにマークイーは使わんなあ
今日は変な流れだな
はい次どぞ〜
はぁ、うまそーだな…
blinkみたいなことを表現できるCSSはありますか?
text-decoration: blink
ただし、仕様書には
「適合 UAでもこの値をサポートする必要はない。そのことは不適合を意味しない。」
と書いてある。
388 :
372:04/09/12 22:28:55 ID:???
冗談じゃなくて、たとえばこういうソースでもなります。
これはバグでしょうか?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
a:link{text-decoration:none;color:green;}
a:visited{text-decoration:none;color:green;}
a:hover{text-decoration:none;color:blue;position:relative;top:2px;left:2px;}
-->
</style>
<title>test</title>
</head>
<body>
<a href="
http://www.test.com/"><img src="image/itopp.gif" width="92" height="34" alt="トップに戻る"></a></div>
</body>
</html>
389 :
Name_Not_Found:04/09/12 22:41:53 ID:wmJM1ag8
KEN PLAZA
http://xxxx.s56.xrea.com/ ↑にある緑のブロックのCSSが↓なんですが、文字を大きくしたりすると、
位置ががズレちゃうんですけど、仕方ないですかね〜?
img.special {
position: relative;
top: -890px;
left: 220px;
display: block;
border: 1px solid green;
}
<body>直下に<img>はダメじゃなかった?
ほかのブロック要素に入れないとダメなような。
その緑のはたしかにずれるけど、もともとはどこに表示したいの?
どの文字サイズのときが理想なんですか?
赤い枠の背景に画像を配置したらどうかな?
一部の環境では思い通りに表示されなかったりするかもだけど。
デフォで崩れまくりでワラタ
優しすぎてもどかしい奴
二つの意味で優しいと思った
398 :
83:04/09/12 23:44:52 ID:z6M6ZJ5w
<frameset>にborder:0pxを適用させようとしたのですが、境界線が消えません。
他に何で指定すれば消す事が出来るんでしょうか?
あと、frameborder="0"をCSSで表現するには何がいいでしょうか?
399 :
Name_Not_Found:04/09/12 23:45:49 ID:z6M6ZJ5w
>>400 すみません。説明が足りなかったようです。
frameborder=0に指定しても、細い境界線が細くなるだけで消えないので、それも消したいのです。
border=0ではStrict的によくないと思いましたので、CSSで表現する方法を教えてください
<html>
<frameset cols="50%,*">
<frame src="2.html" frameborder="0">
<frame src="3.html" frameborder="0">
</frameset>
</html>
これで消えたよ?
ってか、「Strict的」にはフレーム自体よくないんじゃ?
403 :
401:04/09/13 00:06:33 ID:???
細い境界線が→境界線が
orz
404 :
401:04/09/13 00:28:36 ID:???
>>402 frameborder=0を指定しても白い境界線のようなものが残るのです。
白いので背景が白だと分からないのですが、他の色にすると見えてしまいます。
border=0を指定すると消えます。どこが原因なんでしょうか?
>>404 <frame>のところに
marginwidth="0" marginheight="0"
を入れる
あと反則だけど
<FRAMESET>のところに
border="0" frameborder="0"
を入れたりするとか。
>>405 やはりCSSで消すのは無理なようですね。
おとなしくHTMLで消す事にします……
あまり意味の分からない初歩的な質問をしてしまって申し訳ありませんでした。
レスありがとうございました
<ol>
<li class="test"><a href="test"><img src="test" /></a></li>
<li class="test"><a href="test"><img src="test" /></a></li>
<li class="test"><a href="test"><img src="test" /></a></li>
<li class="test"><a href="test"><img src="test" /></a></li>
<ol>
.test img {
border: 0px;
vertical-align: bottom;
}
LI {
display: inline;
}
左右の隙間を埋めて、隙間を無くしたいのですがうまくいきません。
>>407 何の左右? ULやLIのmarginとかpaddingとか?
画像の左右の隙間なら、ソースから空白文字を取り除く。
411 :
407:04/09/13 07:46:13 ID:???
まともな方法じゃ実現できない?ということか
>左右の隙間を埋めて、隙間を無くしたいのですがうまくいきません。
なにとなにをやって上手くいかないのか何故書かないんだ?
>>407 <ol>〜</ol>
関係ない話だが、タグが閉じてないよ。
414 :
413:04/09/13 12:18:21 ID:???
<ol>は番号付きリストだけど<ul>じゃなくていいのか?
list-style-type : none;とかじゃダメか?
list-style-position : inside;とか。
出来んかったら悪いな。俺にはワカンネ。
<li><img /></li>
<li><img /></li>
じゃなくて
<img />
<img />
でも隙間ができるよね
<img /><img />
だと隙間はできないんだけど、多くなるとソースが見にくくなる
<img /><!--
--><img /><!--
--><img />
ソースの改行位置には
隙間というか、半角スペースが入る
これはブラウザの仕様じゃなかった?
>265のfloat:leftはダメなのか
>>416 おお!こんな方法があるんだ!頭いいね!感謝感激!
>>417 ブラウザの仕様と言うよりは英文の仕様の方が正しい気がする。
ブラウザ(IE)の仕様だっての
>420
しかしこの場合、IEの動作のほうが正しい。
教えてください。
tableを入れ子にしたとき
外側のスタイルを、内側のtableに適用しない
てっとりばやい方法ってないでしょうか?
外部CSSファイルでちょっとしたときに1行だけコメントアウトして、
その1行分のプロパティがない場合のスタイルを確認したいんだけど
CSSのコメントアウトって
/* 〜〜〜〜〜 */
だけなの?一行だけっていう場合もちゃんと括らないとできないっけ?
かなり不便なんだけど、改行が来るまでコメントとして解釈するような演算子はないの?
>422
class使うとか、セレクタも入れ子にするとか
>>422 とりあえずテーブルレイアウトはヤメロ。
オレの口から言えることはただ一つ。テーブルレイアウトするかどうかを決めるのは
本人次第ということだ
>>427 お前みたいなバカがいるせいでみんなが迷惑する。バカだからといって、甘えるな。
430 :
422:04/09/13 14:56:26 ID:???
>>424-425 ありがとうございます。試してみました。
親がidで子がclassだと親が有効
子を有効にするためには
それ以外の組み合わせにする
っていう認識であってますか?
>430
その認識はちょっと違う気が……
試したのならソース見せてみそ
ちょっとどころか全然違うじゃねぇかよ
たとえば親にid="oya"をつけた場合
<table id="oya"><!-- 親 -->
<table><!-- 子 -->
</table>
</table>
親だけにスタイルを反映させるには
table#oya {}
子だけにスタイルを反映させるには
table#oya table {}
434 :
422:04/09/13 15:45:57 ID:???
う、ごめんなさい
どの組み合わせでも子側で上書けました
tableに書いたのとtdに書いたので
勘違いしてしまいました。失礼しました。
435 :
Name_Not_Found:04/09/13 16:25:27 ID:tBbIHc6Y
HTML:
<div class="leftside">
メニュー
</div>
<div class="main">
<p> 本文 </p>
<p> 本文その2</p>
</div>
CSS:
.leftside { float:left; }
ってやって、左端にメニュー、中央に本文って構成にしようとしてるんですが、
本文の周辺にborderをつけようとすると枠がmenuの部分と重なって困ります。
.main { border: ...; margin-left: xxx(メニューの幅+α); }
って決め打ちしてやればうまくいくんだけど、それ以外の方法ってないんでしょうか?
隣にあるブロック要素の端を基準とするような位置決め法が欲しいんですが。
437 :
435:04/09/13 17:23:34 ID:???
>>436 その場合、mainの幅はどうやって決めればいいんでしょう?
leftでwidthをem指定している場合、ウィンドウの大きさによって
レイアウトが崩れたり変な隙間ができたりしてしまう。
|■ □□□|
|■ □□□|
|■ □□□|
|■ □□□□□|
|■ □□□□□|
|■ □□□□□|
のように、左はサイズ固定、右はウィンドウの大きさに合わせて伸縮ってことはできないんですかね。
>>437 floatさせた要素の幅が固定ならmarginが一番だと思うが、
なぜmarginではだめなのかは説明てきる?
>>377に興味もって試してみたんだが、
ブロック要素に:beforeでcontent指定するとcontentの後に改行されちゃうんだが。
誰か解決法わかる?つか教えて下さい。
>>435 質問がごちゃごちゃになってるんじゃね?
.leftside {float:left;width:○em;}
.main {margin-left:○em;}
これでダメか?
>>438は↑これ以外の方法を聞いている説明が欲しいということか?
442 :
423:04/09/13 21:02:55 ID:???
誰か回答してくれよ。やっぱ1行だけ簡単コメントアウトは無理なのか?
しつこい
444 :
439:04/09/13 22:05:28 ID:???
>>441 おぉ、それのこと。どうも。
今一体どこでこのIE7のこと話してるんだ?
445 :
423:04/09/13 23:35:01 ID:???
何故誰も回答してくれないんだ???????どういうことだ???????
>>423の回答をきぼん
次逝ってみよう〜
>>446 なんでやねん!
何故に誰も答えない?????????
450 :
423:04/09/13 23:44:02 ID:???
だからなんでやねん!!!!!!!
おかしな質問か?お前ら無理かできるかなんてわかってるんだろ?
なんで答えないんだよ?
452 :
423:04/09/13 23:56:33 ID:???
>>451 なんだこいつ?
っていうかお前らかたくなに答えない理由はなんだ?
ぬるぽ
455 :
423:04/09/13 23:59:49 ID:???
1.7 注釈
CSSスタイルシートにおけるテキスト注釈は、Cプログラミング言語 [7] における注釈に似ている。
EM { color: red } /* 赤い、まさに赤い!! */
コメントはネストできない。CSS1パーサにとって、注釈は空白と等価である。
これしか書いてないのはこれ以外の方法がないってことなのか?
お前ら頭委員だから教えてくれよ。
>>423=452
>>1 ●基礎は解説サイト(
>>4・かなりわかりやすい)で勉強してください。
( 中 略 )
初心者の疑問は大抵ここまでで解決します。
457 :
423:04/09/14 00:00:59 ID:???
>>454 うそつくな!知ってるに決まってるだろ。そんなアフォの集まるスレじゃない。
おれみたいなバカを優しくけなしながら回答をくれるのが本来の姿だ。
しつこい
459 :
423:04/09/14 00:02:00 ID:???
>>456 だから仕様書の該当部分は読んだよ。で、無理なんだよな?
460 :
423:04/09/14 00:03:37 ID:???
言っとくけどお前らが答えるまで俺は聞き続けるぞ。
何日でも聞き続けるぞ。
floatって2段カラムを作るときとかに使っちゃダメなんですか?
positionを使ったほうがいいんですか?
462 :
423:04/09/14 00:05:40 ID:???
463 :
423:04/09/14 00:13:55 ID:???
お前ら逃げる気か?
464 :
423:04/09/14 00:24:24 ID:???
おい・・・・・・orz
466 :
Name_Not_Found:04/09/14 00:47:32 ID:oJZTM7yB
467 :
466:04/09/14 00:49:41 ID:???
失礼しました。
safariは、スクロールできないのではなく、ボックスの高さが広がっている?ような気がします
468 :
423:04/09/14 00:51:29 ID:???
うちには古いウィンドウズしかないんだけど、
>>466のマックとかウィンドウズXPとか、もともとボタンの形が変わってる場合、
フォームのインプットのボタンとかにスタイルを適用させたらどうなるんですか?
背景に画像を配置したり、ボーダーを設定したり
471 :
423:04/09/14 01:02:06 ID:???
>>469 んなこたない!
>>470 俺XP。ルナスキンのことを言ってるんだろうけど、試してほしいソースをあげたら
やって感想をいってもいいぞw
>>471 信じたくないだろうけど、本当に誰も知らないんだ。
(´-`).。oO(関西人はしつこい粘着が多くて困る・・・)
ルナスキンの
>>471さん、これおねがいします。
<html><head><style><!--
input,textarea,select { color: #ff0000; background: #00ffff url(
http://img.yahoo.co.jp/images/new2.gif); border: 1px solid #0000ff;}
--></style></head><body>
<form><div>
<input type="text" size="20"><br>
<textarea rows="3" cols="20">test
test
test
test</textarea><br>
<select size="1" tabindex="0"><option>1111</option><option>2222</option><option>3333</option></select><br>
<input type="checkbox"><input type="checkbox" checked="checked"><br>
<input type="radio"><input type="radio" checked="checked"><br>
<input type="button" value="TEST">
</div></form>
</body></html>
475 :
423:04/09/14 01:23:06 ID:???
>>474 やったよ。効いてるけどこれまたずいぶんけったいなスタイルだね。
アップローダの場所とやりかたを教えてくれたら、スクリーン撮ってうpしたげるよ。
今までアップロダ使ったことないから自分ではわからない;
477 :
423:04/09/14 01:41:07 ID:???
どうもです。ボタンにもちゃんと境界線と背景画像が適用されてますね。
でも、ルナ標準のボタンのほうがかっこいいかな・・・?
( ・∀・)⊃─[]ガッ
[ ] (・∀・ )←>453
>423
実はいいヤツかも
駄々こねないでgive and take
>470
>476のうpろだにMacでの表示確認あげときました
>>480 やっぱりフォーム関係にはスタイルを指定しないで
OSとかブラウザが提供するインターフェイスのほうがいいっぽいね
483 :
423:04/09/14 13:30:18 ID:???
>>481 え・・・・・・・・・・?
それがコメントアウトならURIやばいんじゃないのか?とりあえず試してくる。
423てのがコテハン化しちゃってるし…
他のスレでも使ってたらおもしろいんだけどなぁw
485 :
Name_Not_Found:04/09/14 16:31:09 ID:NwooEnEx
<dt>おれ</dt><dd>馬鹿</dd>
<dt>おまえ</dt><dd>間抜け</dd>
を
おれ |馬鹿
おまえ |間抜け
と表示したいんですけどどうすればいいの?
馬鹿には出来ん。 float
>>485 dt{
width: 適宜;
float: left;
clear: left;
border-right: 幅適宜 solid 色適宜;※
}
※
dt:after{
content: "|";
}
でも。
>>486 ありがとう
dtに float:left; をすると
おれ 馬鹿
おまえ 間抜け
になってしまうんだけど参考材料ください
>>487 なるほど
Clear
ですか
お世話になりました
491 :
Name_Not_Found:04/09/14 17:21:42 ID:h0KQUFqi
そのデザインなんて言ったかな…前に見た気がする。
AllAboutJapanだったかな。
493 :
491:04/09/14 17:50:26 ID:h0KQUFqi
ログ見ていたら同じようなのが見つかりました。
>>437みたいな感じです。
.left
{
float: left;
width: 200px;
}
.right
{
float: right;
margin-left: 250px;
}
としてみたら横に並びませんでした…
どうしたらよいのでしょうか。
>>493 いや、キミ以外の人はおおかた
#menu{
width: 適宜;
float: left;
}
#main{
margin-left: 適宜;
}
で出来ている。せめて環境くらい書こう。
>>493 float: right; はいらんよ
496 :
495:04/09/14 18:31:09 ID:???
被った・・すまん
ゆるさん
498 :
Name_Not_Found:04/09/14 20:03:14 ID:xRFGlE53
以下のバグに対する対処法を教えてください。お願いします。
**********************************************************
バグ:スタイルシートでフォントサイズの認識をしない
MSIEにはユーザー補助>ユーザー スタイル シート が存在し、そこでスタイル シート を読み込むと、自分で表示形式を変更できる。
スタイル シートは、たとえば
BODY,TABLE
{line-height:150%;]
とかいてある場合、行間を150% 開けることになる。スタイルシートを設定しない場合、前後のフォントサイズから自動的に行間を作る。フォントサイズが10のときも20のときも、同じように5ドット開ける、などの方法だ。
しかし、{line-height:150%;]
と設定しても、実際にはフォントサイズに応じて150%ほど あかない。正しくは、基準フォントサイズ(=自分で設定した、大、中、小などのサイズ)にしか影響を受けない。本来なら、ディフォルト時と同じように、それぞれ前後の文字サイズに応じた行間を作らなければならない。
この説明意味わからんと思うのは自分だけかな
line-height:150% !important;
としてもダメか
>>498 line-height:1.5
と
line-height:150%
の違いわかりますか?
ときどきline-heightで単位を付けないのはけしからんと
騒いでるバカを見かけますが、惑わされぬように。
>>500 えっ?単位つけなくてもいいの?
1.5は1.5emにすべきだと思ってましちゃ
むしろline-heightは単位無しの指定がよい。過去スレッド既出。
506 :
昔の人:04/09/14 22:17:47 ID:???
>>504 不具合あるのなんてNC4.7だけでせう。初心者を惑はしてはいけない。
あんな駄目ブラウザにCSSを讀み込ませる奴がまだゐるのかね?
自分でも漠然としか捉えることが出来ていないので、上手く質問出来ないのですが、
winIE6.0で<div>に指定したボーダーがdiv内部の<dd>の下線としてバグ表示されてしまいます。
その部分をスクロールし直すたびにボーダーが付いたり消えたり太くなったり細くなったりと決して実体のある線ではないのですが、
どうにも消すことが出来ません。
なにか特定のミスをしていると出る現象なのでしょうか?
ソースは?
うむ。了解した。
512 :
Name_Not_Found:04/09/14 22:43:51 ID:xRFGlE53
ありがとうございました。改善しました。
しかし、ひどいバグですね。
>507
自分も似たような現象になって
divのボーダーの太さを1pxにしてるとそうなった
2px以上にすれば出なくなったけど
516 :
507:04/09/15 00:00:03 ID:???
>>515 ありがとうございます。
ソース出そうにも原因が絞り込めないので、どこからどこまでを出せばいいのかもてんで判らず……。
divの枠線を太くしたところ、バグ線の太さもそれに合わせて太くなったので、
divで指定しているボーダーがその内部のddに対して悪さをしているように見えるのですが、
全く同じ設定で左にフロートのイメージがあるddではその現象は起こらないため、
分け判りません。
dd自体にボーダーあり無しを設定しても、その上からバグ線が現われてしまいます。
>>516 </div>の直前に
<br style="clear:both"> (←ここは全角スペースあり)
を追加してみな。
てじな〜にゃm^^
>てじな〜にゃm^^
これナニ?
別の板でも見たんだけど。
>507
そういう原因不明のバグはスタイルシートでコメントアウトしつつ
どの指定が問題なのかを突き詰めていくしかないんじゃないかな
>>507 ブロックの小要素がマイナスのマージンを持っていたりすると、
意味不明なブロックが重ねて出現することが、多々あります。> MSIE
はずしてたらスマソ。
マックで(OS9とXのIE5)見てみたらリストの入れ子の表示が変
になってしまったんですがどこがいけないのか分からず…
floatやpositionで何とかならないか試してみたけど自分では上手くいきませんでした。
メニュー1
メニュー2
子メニュー1
子メニュー2
メニュー3
メニュー4
と表示されるところが
メニュー1
メニュー2
子メニュー1 メニュー3
子メニュー2 メニュー4
メニュー5
みたいになってる感じです。
横に来た親要素のliは隣の要素にはみだしてます。
>>523 この情報だけで正解できたら、漏れはネ申だな。
答:スタイルシートがおかしい。
>>524 すみません…スタイルシートはこんなです。
#navi {
margin: 0px;
padding: 6px 0px 0px ;
background-color: #ffffff ;
list-style: none;
}
#navi li{
padding: 6px 0px 0px ;
background-color: #ffffff ;
}
#navi li a {
display: block;
font-size: 80%;
color: #555555;
text-align: left;
text-decoration: none;
}
#navi-in {
margin: 0px 0px 5px;
padding: 0px;
list-style: none;
}
>>525 widthがない。しかし本当は親要素たるものにwidthをつけてるはずだ。
すなわちお前は情報を小出しにしている。
よって却下。2度と来るな。
>>526 下手に指定するとブラウザごとにずれまくるので指定してません。
IEとそれ以外でわけるとOperaが崩れるし。
テーブルで左と右に分けてるだけです。
524,526じゃないけど
そのスタイルシートだけじゃわかんねーゾ
ソースが必要ってことですか?まんまですが…
<table>
<tr>
<td>
<ul id="navi">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a>
<ul class="navi-in">
<li><a href="#">子メニュー1</a></li>
<li><a href="#">子メニュー2</a></li>
</ul>
</li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>
<td>
<td>
hogehoge
</td>
</tr>
</table>
<hx>の上下に改行を入れないようにするにはどうやって書けば良いですか?
h1 , h2 , h3 , h4 , h5 , h6 {display:inline;}
>523
>525,529のソースでおかしいのは
class="navi-in"と#navi-in
最初のtdの閉じタグ
んーでもこのソースで
>523の下のようにはならないと思うが
534 :
Name_Not_Found:04/09/15 17:01:06 ID:6EqW0ucW
質問です。
htmlからxmlに移行してみたんですが、いままで
margin-left:auto;
margin-right:auto;
でセンタリングできてたブロックレベル要素が
ずれるようになってしまいました
そこで
width:80%;
margin-left:10%;
margin-right:10%;
といった手段に切り替えたんですが、それでも微妙に左にずれてしまいます
完全にセンタリングする方法はありませんか?
>>533 どうせ実際の時とソースを微妙に変えて投稿してるんだろ。
floatやpositionがどこにもないのに
>>523の下になるなんてのはありえない。
アフォはほっとくに限る。
>>534 xmlにしたときに何かしでかしてるんじゃないか?
xmlはよくわからんな
>>534 ブラウザは何?
xmlはXHTML? それとも別のxml?
540 :
507:04/09/15 23:38:08 ID:???
dt {
margin : 0 0 0 1em;
color : #000099;
}
dd {
margin : 0 0 0 2em;
font-size : 90%;
font-family: "MS Pゴシック",sans-serif;
}
.content {
border : 3px solid #ccccff;
padding: 10px;
background-color: #FFFFFF;
}
.photoexp{
clear : both;
}
.photoexp dt {
margin : 0;
float : left;
width: 6.5em;
}
<div class="content">
<div class="photoexp">
<dl>
<dt>あああ</dt>
<dd>あああのこと</dd>
<dt>いいい</dt>
<dd>いいいのこと</dd>
う・え・お……
</dl></div></div>
541 :
507:04/09/15 23:49:55 ID:???
>>517-522 ありがとうございます。
試してみましたが残念ながら特に変化ありませんでした。
状況は、上記の「いいい」以降の<dt>の上部に、
.contentで指定したborderのtopの線がバグ表示されています。
XHTML 1.0 とCSSはvalidになってるので単純な記述ミスは無いとお思います。
今書きながら気づいたのですが、<dd>じゃなく<dt>でしたので、
もしかして単に<dt>のfloat指定でミスってますか?
543 :
Name_Not_Found:04/09/16 01:07:59 ID:j+oK10b7
レンタルBBSをトップページにボックス内に表示させたくて
.case1 {
width : 〜;
height : 〜;
border : 〜;
padding : 〜;
overflow:scroll; }
<span class="case1">
<script type="〜"></script>
</span>
とやってるんですが、表示がめちゃくちゃになってしまい上手くいきません。
どこか間違ってるんでしょうか?
こういうのって大抵伏せた部分に原因があるよね
545 :
534:04/09/16 03:28:09 ID:???
爆睡しちゃったZzz...orz
>>536 すっごい時間かかったんですよ…それだけは勘弁です
>>537 一応チェックしまくったんですが…
>>539 Sleipnir…つーかIE6です。
xhtml1.1です
546 :
Name_Not_Found:04/09/16 05:02:22 ID:9PMkh6sc
■の部分はfloat:rightです。
|□□□□□ ■|
|□□□□□ ■|
|▲▲▲▲▲ ■|
|□□□□□ ■|
|□□□□□ |
|□□□□□ |
と▲の所にtableを持ってきたいのですが、なぜか
|□□□□□ ■|
|□□□□□ ■|
| ■|
| ■|
|▲▲▲▲▲ |
|□□□□□ |
と変なスペースが空いてしまいます。
547 :
Name_Not_Found:04/09/16 05:02:44 ID:9PMkh6sc
tableの横幅を狭めて
|□□□□□ ■|
|□□□□□ ■|
| ▲▲▲▲ ■|
|□□□□□ ■|
|□□□□□ |
|□□□□□ |
とすると変なスペースが空きません。
|□□□□□|
|□□□□□|
|▲▲▲▲▲|
|□□□□□|
|□□□□□|
|□□□□□|
としてもスペースが空かないので、
おそらく右にfloatしている部分が何らかの
影響を与えているのだと思うのですが、
何とか正しく表示させる方法は無いでしょうか。
>>547 それだけじゃなんともいえないけど
左に寄せたい物にはfloat:left;とするといいかもしれない
>>547 floatはあまりぴっちり詰めるものではない。
▲のwidthが他よりでかい、もしくはmargin等がある。
IEはボックスのwidthの計算方法が多少違う。
そこらへんを含めてもう1度1行目を頭に置きつつ書き直せ。
まぁとりあえず段組み関係は>6に一度目を通せ
セレクトメニューのテキストを中央に寄せるのは不可能ですか?
お教えください。
AAよろしく調整するしかない
| 中 |
| 中央 |
| 中央寄 |
| 中央寄せ |
| 中央寄 |
| 中央 |
| 中 |
 ̄ ̄ ̄ ̄ ̄ ̄
553 :
Name_Not_Found:04/09/16 13:46:54 ID:GWHwVl3h
別ファイルからスタイルシートを読み込むLINKタグの質問をさせてください。
現在、CSSファイルをHTMLファイルがあるフォルダの下の階層CSSフォルダに
入れています。(
http:****.jp/aaa/css/hoge.css)
そここで、下記のように定義しました。
<link rel="stylesheet" href="css/hoge.css" type="text/css" />
一応、上記の指定で問題なくCSSファイルを読み込んでいるようなのですが、
使用しているDreamweaverのエラーチェックをすると、
href="css/hoge.css"が必ずエラーになってしまいます。
こちらは絶対パスで書かないと駄目とか、そういうルールがあるのでしょうか?
ちょっと気になっているので、わかる方がいらっしゃいましたら教えてください。
m(_ _)mペコリ
相対パスで問題なし。
>>553 HTMLは問題ないはず。
> エラーになってしまいます。
エラーって何のためにあるか知ってるかい?
水の中で息する
名詞に付いて、程度がはなはだしい、たいそう、などの意を表す。
liタグの中にdivでマルチカラムってやっても良いもんなんでしょうか?
>>558 そもそもliがブロックレベルだからといってあまりいろんなものを詰め込むなよ。
基本的にはただのリストなのよ。拡大解釈して何でもリストにしてしまうのはよくない。
>560
CSS関係無いけど質問良いか?
<ul>
<li><dl><dt>hoge</dt><dd>moge</dd></dl><li>
</ul>
これってやっぱおかしいかな?
hogeの説明は別の場所に書いて、そこにリンク張った方が良い?
</li>閉じ忘れ…orz
563 :
558:04/09/16 16:49:40 ID:???
>>559-560 やりたいことは
<ul>
<li>タイトル 名前 発売日</li>
<li>ほめ ぱげげ 2004/04/04</li>
</ul>
こんな感じに表示させたいんですが、
divが駄目だとするとそれ以外で何か良い方法ありませんか?
そんなときこそtableの出番じゃないか
表だよな・・・
>>563 そんなときこそtable要素だ。
>>561 そもそもその場合わざわざul要素の子要素にする必要がない。何のための定義リストだと思ってるのだ?
リストだぞ。階層構造が必要な時以外にリストのネストは不要だろ。
567 :
561:04/09/16 17:10:55 ID:???
>566
いや、一応リストは階層構造としてちゃんと意味があるから使ってるんでふ…。
まぁ、俺から出した話だけど、とりあえずスルーしておいてくれw
>>567 ではそのul要素のヘッダを教えてちょ。なんのリストなの?
>>567 スレ違いじゃね? strictスレで聞けば?
>>569 別にどのスレでもよくね?だって聞きなおすのもったいないじゃん。
おまいも2ちゃんの1スレの内容が
>>1を遵守してるかなんてどうでもいいだろ?
どうせこのサイト自体ギャグなんだから。
571 :
569:04/09/16 17:48:07 ID:???
>>570 いやいや、別にここで聞いてもいいけどさ、
strictスレで聞いた方が正確な答えが得られると思ったからね。
あと、2chにルールが無いと思ってるなら、それは大間違いだから気をつけて。
<h1>きゅうり</h1>
<h3>りんご</h3>
<h2>ごま</h2>
みたいにhの数字が連続してなくても大丈夫ですか?
>572
その例だったら全部h1だと思うが・・・っていうのは野暮だから置いておいて。
StrictDTDの場合、見出しのレベルは連続していなければならない。
ただし↓みたいなのならOK。
<h1>Plant</h1>
<h2>Vegetable
<h3>Tomato</h3>
<h2>fruit</h2>
...
ってか、なんでこのスレで聞くのさ。初心者とかStrictスレとかあるだろうに・・・
<h4>まいたけ</h4>
むしろ<h1>きゅうり</h1>と<h3>りんご</h3>の間に<h2>りょうり</h2>とか
>>575 きゅうりに内包されているりょうりの中のりんごが想像出来ん……
<h1>きゅうり</h1>
<p>きゅうりの使い方を考察していきたいです。</p>
<h2>りょうり</h2>
<p>きゅうりを料理に使う場合、以下の食材と合わせて色んなものが出来ます。</p>
次のh2が気になるな。
>>576 次のh2はゴマですよ・・・と
<h1>きゅうり</h1>
<p>きゅうりの使い方を考察していきたいです。</p>
<h2>りょうり</h2>
<p>きゅうりを料理に使う場合、以下の食材と合わせて色んなものが出来ます。</p>
<h3>りんご</h3>
<p>きゅうりとりんごは共通してはちみつと相性がよく、きゅうりとはちみつでメロン、りんごとはちみつでバーモントになります。</p>
<h2>ゴマ</h2>
<p></p>
というか、しりとりなんだけどね・・
>>576 <h1>きゅうり</h1>
<p>きゅうりの使い方を考察していきたいです。</p>
<h2>りょうり</h2>
<p>きゅうりを料理に使う場合、以下の食材と合わせて色んなものが出来ます。</p>
<h2>かざり</h2>
<p>きゅうりはお盆の精霊馬(しょうりょううま)として飾られることがあります。</p>
<h3>精霊馬(しょうりょううま)</h3>
<p>キュウリとナスビに割り箸を刺して馬と牛に見立てたものをこう呼びます。</p>
とかかな?まーCSSの話じゃないから終了
579 :
576:04/09/16 22:39:43 ID:???
>>579 <p>きゅうりは料理以外にもいろんなところで役に立ちます。</p>
ってことかー!!
きゅうりでやけに伸びてるじゃないの?
<p>イボイボで傷が付きやすいので事前に取るか<be>
ゴムを2枚被せると良いでしょう</p>
>>581 >><be>
ここにいやらしさが隠れているんだと予想
オラの野菜に何スルだ…
田吾作どんでねえが!?
川*’ー’)<残念!いーたんやよ
何語?
CSSってクソだと思いますが、お前ら何点をつける?実装を含めての点数ね。
そもそも実装=現実のCSSだから、キチガイみたいにw3c擁護するのはやめてくれよ。
俺は75点。テーブルレイアウトよりはずいぶんとマシだと思う。でももっとよくなれるはずだから
25点マイナスの75点。
オマイの頭 -25点
>>587 オマエが言ってるのはCSS云々じゃなくて
テーブルとフローティングカラムの比較だろ。
点数の基準も明示されていないし、釣りだろ。
>>589 なんだその妄想は
>>590 本気で受け取りすぎじゃないか?リアルでもお前は雑談中に何かに点数をつけるときに
「点数の基準も明示されていないんじゃどうにもならない!!!」
とかいう痛いやつか?適当に答えて置けよ。
はい次どぞ〜
593 :
507:04/09/17 11:57:56 ID:???
>>591 >リアルでもお前は雑談中に
いや、雑談中じゃないから。
.space{
lineheight : 200%;
}
<ol class="space">
<li>きゅうり<br>おいしいよ</li>
<li>りんご</li>
<li>ごま</li>
</ol>
これが
1 きゅうり
おいしいよ
2 りんご
3 ごま
と表示されるのですが、可能であれば
1 きゅうり
おいしいよ
2 りんご
3 ごま
と表示させたいのですが…初心者ですいません。
>>595 li {
padding: 0.5em 0 0.5em 0;
}
これは?
>>594 >いや、雑談中じゃないから。
もしかしてお前2ちゃんが仕事だとか言っちゃう気持ちの悪い人?
お前そんなこと言ってるようじゃマジでやばいって!病院行って来いって!
マジ、2ちゃんのスレ&レスのチェックと書き込みが仕事です。
600 :
595:04/09/17 17:45:50 ID:???
>596
ありがとうございます。
おかげで解決しました。
初心者なんで、ブロックレベル要素とインライン要素を理解してるつもりでも、
肝心のところでパッと適切な処理が思いつかないんです。
li { width:4em; text-align:justify; }
<ul>
<li>りんご</li>
<li>なし</li>
<li>みかん</li>
</ul>
text-align:justifyを指定してみたのですが
MozillaやOperaで均等割付ができません。どうすれば均等割付できるのでしょうか。
シーッ ココハ2ch
605 :
Name_Not_Found:04/09/18 11:20:52 ID:U4z4g+2n
センタリングをするために「container」というボックスで全体をつつんでます。
背景には左から緑⇔白になるグラデーションを入れてます。
分かりやすいように、青のボーダーラインも入れてます。
Geckoでみると、何故か下の方は「container」でくくられていません。
どうすれば直るにかご教授ください。
#container {
text-align: left;
margin: auto;
width: 800px;
background-image: url('img/hai-midori-gra.gif'); /* 背景 */
border: 2px solid blue;
}
KEN PLAZA
http://xxxx.s56.xrea.com/
>>604 2ちゃんねる≠なんでもあり
バカじゃねーの?
>>605 <H1>MAP</H1>以下の<div>で囲まれた部分を
<div id="map-box">
<IMG src="KEN PLAZA.files/map7.gif" alt=地図 height="385" width="492" id="map-image">
<DIV><EM>各種チケット</EM><BR>高価買取</DIV>
<DIV><EM>委託販売受付中</EM><BR><SPAN>☆コンサート・野球…☆</SPAN></DIV>
<DIV><EM>7月</EM>より左記に<BR>移転してます</DIV>
</div>
として、
609 :
608:04/09/18 11:43:12 ID:???
スタイルに
#map-box {
position: relative;
}
#map-image {
position: absolute;
top: 0;
left: 0;
}
#map-box div {
margin: 0 0 0 500px;
BORDER-BOTTOM: black 3px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 3px solid; BORDER-TOP: black 1px solid; MARGIN-BOTTOM: 30px; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px;
}
を指定したらどうかな。POSITIONつかってるけど。
611 :
605:04/09/18 11:57:21 ID:???
>>608 IEでも表示が変になった。。。
ってことは<div>の入れ子が間違ってるのかも。。。
>>609 サンクス。
上の<div>の入れ子をとりあえず見直してみます。
612 :
601:04/09/18 12:44:38 ID:???
>>602 うー。諦めるか…ありがとうございました。
フレームを使用してページを構成しています。
メイン、メニュー、選択したメニュー内の一覧。この三つのフレーム構成です。
フレームを廃止してCSSで同じような構成のページを作成する事は可能でしょうか?
>>613 CSSで外部のHTMLドキュメントを取り込むことは出来ないので、不可能、と答えておこう。
見た目だけフレームで、一個のHTMLで完結してるのなら、
擬似フレーム
>>7を参照すれ
615 :
613:04/09/18 13:45:38 ID:???
>>614 ありがとうございました。
と言う事はページをリニューアルする場合
現在作成しているページ全てにメニューなどを記述しないといけないのですね・・・
鬱出し脳・・・
>>611 やっぱしfloatがらみだと思うので、一番最後にclear: bothなダミー要素
を追加してみては。そうしたらfloatの影響が抑止されるような気がする。
>>615 そもそもstrict-HTMLならリニューアルしたところでHTML側をいじることはあまりない。
お前はHTMLの再利用性を高めたいなら、黙ってstrictに書け。
>>615 閲覧者側の意見として、
綺麗にまとまってるサイトなら、全ページにメニューなんていらないです。
インデックスページが重くなければ見て戻って見て戻ってしますし、
重ければ、見たいページを「新しいウインドウ」で開いて、閉じて、ってやりますし。
他人のサイトを閲覧してるとき、次々メニューをクリックする?
テレビのリモコンみたいに考えてるかもしれないけれど、
そんなに頻繁に切り替えないし、フレームはデメリットに勝てるメリットは持ってないよ。
俺は頻繁にメニュークリックしますよ。
ウィンドウズXPだと、スクロールバーの色が変わりません。
変えるにはどうしたらいいんでしょうか?
Transitionalだよな?
622 :
Name_Not_Found:04/09/18 16:10:44 ID:EwZbgDk8
JPG画像2つを使って
Aの画像に対してBの画像をちょっと重ねるなんてのはできますのでしょうか?
レイヤー あとはググって。
>620
doctypeの有無で変わるんじゃない?
625 :
Name_Not_Found:04/09/18 16:50:24 ID:5Q316W6V
>>625 どこのマージンかわかんないからアレだけど、
おそらく、li の vertical-align ではないかと。
デフォ状態だと baseline なので、y とか g とかの下にはみ出る部分の
分だけあくので。
bottom にしる。
あら、カブッタ
皮?
ヅラ!!
\ /
\ /
氏ね氏
氏 ね 氏 ね シネヤシネヤシネヤ
氏 ね 氏 ね 氏
__氏ね 氏 ね 氏 ね__
/ 氏ね 氏 ね 氏 ね 氏 \
__氏 ね 氏 ね 氏 氏ね__
/ 氏ね 氏 ね 氏 ね 氏 \
__氏 ね 氏 ね 氏 ね __
/ 氏 ね 氏 ね 氏 \
氏 ね 氏 ね
氏ね氏
ね
634 :
605:04/09/18 21:08:37 ID:???
>>616 昼から仕事に行ってました。
返事が送れてすみません。
ダミーで
<div style="clear: both;"></div>
を入れた、直りました。
感謝します。
635 :
Name_Not_Found:04/09/18 22:53:42 ID:dS20wF53
生物の進化図(横図)を表示したいのですが、CSSではどのようにすればいいのでしょうか?
>>635 リストのリストスタイルイメージに「 ┣ 」の画像を使って、一番最後のリストには「 ┗ 」の画像を
・・・って、なんで「:first-child」があって「:last-child」がないの!?
リストって階層に限度は無いのですか?
>>643 dt,dd { width:○○px; float:left; }
dd { margin-top:1.5em; margin-left:-○○px; }
負のマージンは微妙なところか・・・
>>644 そ、そうか!負のマージンだ。
ありがとうございました!出来ました(ノд`)
>>642 ルート要素から数えて100階層までは許容される(HTMLではなくSGMLの仕様)
結局、CSSも万能ではないんだな。
>>647 万能で無いからCSSで出来ない事はあきらめる、是ストリクター也
>>649 アホなこというなよ。ストリクターはオナニーなんだから現実には妥協して
コーディングの段階でデザインを変更するなんていうマヌケなことはしない。
そもそもできることとできないことがあるコーダーなんて雇わない。
デザイン案を渡したら何が何でもそれを実現するコードを書くのが彼らの仕事。
>>641 class=first
class=last
おまえはバカか?
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
アホっす!アホっす!
真性のアホっす!!!
真性のアホが現れたっす!
大変っす!こんなアホ見たことないっす!
驚きっす!驚愕っす!愕然っす!呆然っす!大ニュースっす!
このスレッドにこんなアホがカキコするなんて驚きっす!
こんなアホ2ch始って以来っす!
信じられないっす!
ビックリっす!お笑いっす!
人間国宝級のアホっす!世界遺産級のアホっす!
真性のアホっす!!!
みんなを呼んでくるっす!他の板のみんなも呼んでくるっす!
653 :
641:04/09/19 12:40:13 ID:???
>>652 この子は書き込んでる最中にやけっぱなしだろうな。
マジでおまえらpcのそばに鏡置いたほうがいいぞ。アホな発言しようとするときに
自分の顔見ると、ばかばkしくなる。
>650
> デザイン案を渡したら何が何でもそれを実現するコードを書くのが彼らの仕事。
それはあってるけど、デザイン案の不備をうまいこと「できるもの」に変えるのは交渉役の仕事だよ。
漏れはどっちも一人でやってるから「ああ、それは一般的にウケが悪いんすよ」で切り抜けてる。
おう 「ああ、それは一般的にウケが悪いんすよ」 これ頂くよ。
>>657 補足ね。
それをやってて閑古鳥な個人サイトをいくつか見せると効果的。
「ほら、見づらくなっちゃうんです」って。
それでもバカは「いいからやれ」ですけどね。
じゃあ、探しとこ。 さんきう
てめぇの飯のタネを教える馬鹿が何処に居るんだよ。
↑流れ的に意味不明
でも正直last-child擬似クラス欲しい時もある・・・
>>658 その後の「変わりはいくらでもいるんだぞ」
もセットになってる気がする。
>>662 だから実装をまつより、class振るのがはやいって。
strictなんて雰囲気遵守してれば、細かいところは妥協していいんだよ。
w3cのメンバが作るサイトでもそんなもんだ。
とくに文字メインの表現力の乏しいサイトなどはよいが、画像メインの通販サイトなどは
hagehagehagqhega
自分が書くスタイルシートは改行をたくさん使って書くもの(よくCSS解説サイトとかにのってる?書き方)
なんdねすが、他人のサイトのCSSを覗いてみると「
↑」みたいなものがたくさんあって、
改行がまったくされてないんですけど、自分の書き方がおかしいのでしょうか?
このように書くにはどうしたらいいのでしょうか?教えてください。よろしくお願いします
別にどっちでもいいんだよ
667 :
665:04/09/19 16:10:25 ID:???
すいません。文がおかしくなってしまいましたね。。
>>666 確かに今のままでも自分の思ったと通りの結果が現れますが、違うやり方でもやってみたいんです。
どんなもんでしょうか?
>>667 >なんdねすが、他人のサイトのCSSを覗いてみると「
>
>↑」みたいなものがたくさんあって、
2行目に何がある????俺にはなにも見えないぞ・・・・・
一体何がたくさんあるんだ?
>>667 もう一度読み返したぞお前の665を。
多分tabの事を言ってるんだよな?違うか?
Tabキーをおせばだせるが、ここでは無理。メモ蝶野などでのためしてくれ。
>>668 本当は
自分が書くスタイルシートは改行をたくさん使って書くもの(よくCSS解説サイトとかにのってる?書き方)
なんですが、他人のサイトのCSSを覗いてみると「↑」みたいなものがたくさんあって、
改行がまったくされてないんですけど、自分の書き方がおかしいのでしょうか?
このように書くにはどうしたらいいのでしょうか?教えてください。よろしくお願いします 。
こう書きたかったのです。すいません。
>>670 「↑」って!?全角の矢印がCSS内にあるの?
それとも矢印の指す方向に私には見えない何かが!?
それとも、
>>670さんが使っているエディタに表示される制御文字??
672 :
670:04/09/19 16:30:12 ID:???
>>671 「↑」は半角のものですが、コピペできなかったので「↑」みたいなものと書かせてもらったのです。
どなたか、よかったら意地悪しないで教えていただけませんかね
ああ、あの矢印みたいな奴ね
タブインデントで「→ あああ」みたいな感じちゃう。
文字のコードが間違って表示されているだけだよん。
今のままの書き方で問題ナッシングですよ。
>>675 それだったら「↑」じゃなくって「→」って書くと思う
ちなみにうちで使ってるテキストエディタのタブは
てらぱっどもJMEditer2も「>」ですた。
改行はてらぱっど「↓」みたいなの、JmEditer2「v」みたいなのですた。
>677
一人で何言ってんの?
679 :
672:04/09/19 17:28:08 ID:???
Cellspacing
Cellpadding
をCSSで明記したい。どうすれば。
相変わらずウインのフォントはきたねーな。。
目。悪くならんか?
>>679 TeraPad落としてそれで開いてみ。
改行になるから。
テーブルやめろよ。。。
そこまでこだわる意味が分からん。
>679
それ、改行コードが(ry
685 :
679:04/09/19 17:39:43 ID:???
>>682 あなたのおかげでやっと解決しました。
本当にありがとうございました。
>>683 ママから与えてもらったPCでオナニーサイト作ってるような消防ではわからんだろうな。
ふ〜〜〜ん。
っていうか俺もterapad使ってるけどなんで\r\nが↑みたいな変な記号にになるん?
俺のは全然ならないよ?
エディタによって制御文字の割り当てが違うなんてことはないよな?
>688
設定だろ
693 :
692:04/09/19 22:07:39 ID:???
スマソ間違えた。collapseではなくseparateだ
スキル低いやつに限って回答したがるのなw
リアルでゴミのような人生のやつに限って、2ちゃんで暴言をはくのな。
殺伐としたスレにようかんマンが!!
____________
. . / /.|
/ / |
| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄| |
| | |
| | |
| | |
| | |
ヽ| ・ ∀ ・ | ノ |
| | |
| | |
| | |
| | |
| | |
| |.. /
| | /
 ̄ ̄ ̄ ̄| ̄ ̄ ̄ ̄ ̄| ̄ ̄ ̄
>692の顔がいまだに真っ赤に 200マッカ
>>696 豆腐マンだぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁあぁああああああああああああ!
699 :
696:04/09/20 10:13:27 ID:???
あらら、これ豆腐マンなんだ…orz
<div id="box">
<div id="pass">パスワードを入力してください</div>
<form action="index.php" method="post" id="pform">
PASS<input type="text" name="pass" size="10">
<input type="submit" value="送信">
</form>
</div>
このid="pass"要素を左寄せ、id="pform"要素を右寄せにして
かつid="box"を1行(もしくはそれに近い大きさ)のブロックにまとめたいんですが、
IE6・NN7・Operaで上手く表示させるためのスマートなやり方ってありますか?
form前後やdiv前後の改行の振る舞いとfloatやclearの動作の繋がりが見えず
何とか書けたものの自分でも良くわかってないんです。
>>700 というか<form>にいきなり<input>とか置いちゃダメじゃなかった?
<form>
<div>
<input>
</div>
</form>
みたいな
休日は釣り日和
>>701 確かにデザインする上ではその様にinput要素を纏める事で
一行ブロックにしやすくはなるのですが、
form前後の改行が外側に行ってしまうだけなんですよね。
質問の仕方がまずかったのかも知れません。
「前後の要素に影響を及ぼす事無く、
form要素を1段にまとめるためのCSSの書き方」をご教授ください。
<html>
<head>
<style type=text/css>
div#main {
border-left : 2em solid #032850;
border-right : 2em solid #032850;
padding : 0em 2em 2em;
}
</style>
</head>
<body>
<div id="main">
<p>あいうえお</p>
</div>
<div id="footer">
<p>かきくけこ</p>
</div>
</body>
</html>
win xp ie6 で見ると、「かきくけこ」の部分が隠れてしまいます。
div#main のボーダー、もしくはパッティングを消すと隠れません。
ボーダーもパッティングも残したままで、隠れないようにできますか?
また、なんで隠れてしまうのでしょう?
パッティング って何だ
paddingだろ
プディング
>>700がどのDTD使ってるかなんて誰も知らない。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>TEST</title>
<style type="text/css">
<!--
body { background-color: #FFFFFF; margin: 0px; border: 0px; padding: 0px; }
#HEADER { border: 1px solid #000000; margin: 0px; padding: 0px; background: #000000; width: 750px; voice-family: "\"}\""; voice-family: inherit; width: 748px; }
html>body #HEADER { width: 748px; }
#HEADER #LOGO { border: 0px; margin: 0px; padding: 0px; background: #333333; width: 200px; float: left; }
#HEADER #CONTRACTOR { border: 0px; margin: 0px; padding: 0px; background: #666666; width: 548px; float: right; }
-->
</style>
</head>
<body>
<div id="HEADER">
<div id="LOGO">LOGOです。</div>
<div id="CONTRACTOR">CONTRACTORZです。</div>
</div>
</body>
</html>
寝助でfloat属性入ってると問題が出まつ。
回避策知ってる方いたら、よろしくメカドック。
>>708>>709 ありがとうございます。勉強になりました。
xhtml11に沿えるよう頑張ります。
もう一度調べて見たところtableを使ったhtmlベースでの解決法と
marginを使ったcssベースでの解決法を知ることができました。
713 :
710:04/09/20 16:21:31 ID:???
7.1でつ。
idやclassがなくて、それ以外の特定の属性があるやつだけにスタイルを指定する方法ってありますか?
たとえば<input type="submit">みたいに
inputの中でtype="submit"があるやつにだけスタイルを指定したい場合
>>715 属性セレクタがあるだもんよ input[type="submit"]
IEは無視するけどね。
>>716 親要素に〜がない場合、という指定はできますか?
Googleキャッシュの最初のテーブルにスタイルを指定するには
親要素にBODYがない場合、という方法しか思いつかないんです
720 :
719:04/09/20 18:29:04 ID:???
レス番号は気にしないでください
またIEか…
最近のM$を見ていて頭に浮かぶ言葉
「凋落」
でもお前らIE使ってるんだろ?それともヲタブラウザ?
background-imageをtopとかleftとか以外に細かく数値でポジショニングすることはできるのでしょうか?
726 :
724:04/09/20 23:28:42 ID:???
>>725 端的なお答えありがとうございました。
すいません。質問文がちょっと曖昧でした。
{background-position:20px 30px;}
のように左上隅を起点に数値で指定する方法はわかるのですが、
たとえば仮に下から30px、右から20pxのように右下隅を起点に
数値でポジショニングすることは可能なのでしょうか?
過去ログさがしても見あたらなかったので質問させてください。
http://bluerobot.com/web/layouts/layout3.html こんな感じで縦に3つDIV使っています。
左から #menu、 .contents、 #photomenuという名前で管理していて
#menu と#photomenuは、.cssの中に height=80%って書いて
常にheightが80%になるんですが、真ん中の.contextのheightはだけは
同じ事をしても変わりません。
.cssのbody{}の中に height:100%;と入れるといいってあったので
やってみたんですが変わらずでした。
原因わかりますでしょうか?
ドラッグした際、背景色が反転しないようにできませんか?
>>728 Javascriptとかではできるんでない?
>>727 どこか間違ってるんだろ。
ちゃんとなるし。
>>727 「contents」が「context」になっている
・・・のはレスだけで、CSSではちゃんとなってる?
734 :
728:04/09/21 01:25:36 ID:???
>>730 ありがとうございました。調べてみます。
CSS3なんか出ても
無敵のマイクロソフトクリーム様がことごとくつぶしてくれるさ^^^^^
M$がW3Cなんか抜けて独自HTML+CSS規格作って暴走しちゃえばあっさりネットを制することができると思ってるのは俺だけ?
そして、みんなその独自の規格対応ブラウザを使う訳か…
余計ややこしいわ
738 :
728:04/09/21 01:50:55 ID:???
739 :
727:04/09/21 02:18:06 ID:???
>>732 >>733 レスでは書き間違えました。
うあ、Mozillaで見てみたらちゃんと表示されました・・・・
Safariが問題だったのですね、これからはmozillaでチェックします。
ご迷惑でした。
>>736 独禁法違反で訴えられるからあり得ない気も。
あり得ないのがM$だったりですが。
>>740 独自規格だけでは
独禁法には触れないんじゃないかな。
しかし考えてみりゃブラウザの新規格への対応なんてボランティアもいいとこだよな
技術的にはもう十分って感じなわけだしMSが「CSS3? ('A`)マンドクセ」って言う気持ちも分からないでもない・・・
Googleが新しいブラウザを作るとか言ってるみたいですよ
742の言うとおり、CSS3に対応したところで
どうせCSS3.1でIEの仕様に合わせて改定されるので無駄。
今からIEに合わせておくのがよほどマシ。
IEの開発者にまともなHTMLが書けるやつがいない限りIEはクソなまま
>746
んだね
>>746 ieというよりはマイクロソフト全体だよな。
馬鹿ばっかりらしいし。
そのバカの作ったOSで毎日仕事してるわけだがな
ごもっともだ
俺はlinuxとOSXで仕事してるので同類にしないでほしい。
752 :
Name_Not_Found:04/09/21 22:51:26 ID:4+RtA3aY
はい次どぞ〜
ぶっちゃけ、Web関連のソフトを作るためにプログラム言語は書けても、
HTMLやらCSSやらは全然書けない、書けてもそこら辺の厨サイト程度
って奴が多過ぎない?
>>754 99%くらい同意しつつ、
「それじゃあ、他の人はついてこないよ orz」
となってしまう自分が悲しい。
どんなに CSS でがんばったって、「IE が auto に対応していない」
という理由だけで、<div> で囲って中央に持って来ざるをえない。
ビシッと CSS を vaild に書いたところで、NN 4.x は徹底的に無視してくれる。
まぁ、CSS はあくまでも見栄えで、「なくても読めるようにすべき」なのは、
WAI level.1 なんかで指示されるまでもなく自明のことなんだけどね。
>>755 おー素晴らしいサイトですな。
色んな意味で刺激が強いかもですが、ウチのバカどもに読ませます。
中途半端な意識でコーディングされるのは困り者。
読ませても全然意識変わらない気もするけどね・・・
758 :
727:04/09/22 01:58:45 ID:???
初歩的な質問なのですが、すみません。
ttp://sarwat.net/bittorrent/ でDIV .skbodyの上に #tomatoが重なって、tomato.pngが上になっているのですが
何故ですか?
同じようにやってみたのですが、画像が他のDIVの下にいってしまうのですが。。
CSSとHTMLみても分からなかったので・・・・
分かるまで自力で調べれば力がつく。
基礎が無いのに教えてクンする人は2度と来ない事。
>>758 同じようにやれば同じようになるから、もう一度見直したらいいよ。
どこか違うところがあるから。
小説サイトを作りたいんですが、縦書きって、CSSだとどうやるんですか?
自分で調べる頭が無いようなやつには、小説は書けん。
Windows2000SP4, Mozilla1.8Alpha4(Gecko/20040915)を使っています。
input { border-width : 0px; }
<input type = "text">
<input type = "file">
上の様に書いたときに、<input type = "file">とした方にはスタイルシートが反映されません。
type = "file" にした時は border をいじれないのでしょうか??
質問スレで質問して、自分で調べろって???
>>762 「CSS 縦書き」でググったらす具に出てくるよ
IE5.5以上しかだめっぽいけど
小説は誰でも書けるよ
よしあしは別として
>>765 なんでもかんでも、板違いスレ違い、自分で調べろ。
回答できないくらいのにわか知識しかないのなら黙ってロムしてろって思うよね。
しかも質問スレなのに。
ここに回答してるやつなんて、なんの知識もない、ただ、過去スレの内容を覚えてるだけなので、
新しい質問は遠慮してやったほうがいいぞ。
他所でしらべたらここの糞な回答者に元ネタのアドレス書いてあげてね。
>>764 いじれなかったらいじれないんだろうな。
やってわかってるのになぜ聞くの?
>>767 仕様書読めない分際でなぜ回答者を煽る?
ここはCSS・スタイルシート質問スレッドであって、
CSS・スタイルシート初心者質問スレッドでも、
CSS・スタイルシートを代わりに書いてあげるよスレッドでもないんだぞ。
最低仕様書の該当箇所くらい目を通して、わからなかった部分だけ聞くくらいはしてほしいもんだな。
ここの質問者は包丁握ったことないのに回鍋肉の作り方1から教えて、って言ってるようなやつらだから。
多分
>>767は回答読んでも理解出来ないんでいらいらしてるんだろうなぁ・・・
♪ ♪ チ
♪ \ | /// チ ャ
♪ ∧_∧ ミ ♪ チ ャ ッ
/\, ( ´∀`) /ヽ ャ . ッ !
|● |>⊂ つ<| ●| ッ !
ヽ/ ) ) ) \/ !
彡 .(__)_) 彡 .
赤勝て! 白勝て!
次は
>>767さんの反論です。
どーど。
773 :
767:04/09/22 12:36:24 ID:???
おのれ〜〜〜 今に見ておれ〜〜〜
飯食ってくる〜〜〜
どーど。って言われてもナァ・・・
飯食うのに、なにもそんなに力入れなくても
776 :
764:04/09/22 12:55:17 ID:???
>>768 私のやり方が間違いで、何か他に方法があるのかもしれないと思い質問させて頂きました。
<input type = "file">にも border-width を指定出来る方法をご存じでしたらお教えください。
>>776 フォームのアイテムはプラットフォームのUIを引きずっているのが
多いので、クライアント毎にその辺の柔軟さはまちまちだと思った。
ボタンとかのスタイルを各ブラウザでいじった結果を比較している
サイトがあったはず。
このスレか、初心者スレのどこかに。
確変だぁ
779 :
764:04/09/22 14:30:33 ID:???
>>776 レスありがとうございました。
やはり <input type = "file"> の border を指定するのは無理なんですかね??
参考リンクと初心者スレッドの方も見てみましたが、
>>776さんの言うようなサイトは見つかりませんでした。
時間を見つけて最初のほうから過去ログを見てみる事にします。
>>779 どうでもいいけどなんで属性と属性値のあいだの=に妙なスペース入れてるの?
>779
type="file"はなかったが
>470-477あたり
>>780 ソースが見やすくなるように入れているんですが…。
もしかして、普通は入れないものなんでしょうか??
>>779 わざわざありがとうございました。
IEとNetscapeでも見え方が違って来るんですね。
自分の環境でも色々試してみる事にします。
>>782 あまり見かけないな。
プログラミング言語とかだと普通なんだけど。
>>782 そう言われるまで気づきませんでした。
確かに適当なページを表示してソースを見てもスペースを空けているサイトって無いですね。
スペースの分だけサイズが大きくなるからなのかな??
治した方が良さそうですね。
ご指摘ありがとうございました。
申し訳ありませんが教えてください。ソースは以下に出します。
メニュー部分でそれぞれのリンク先のページについての簡単な説明が
マウスオーバーした際に出るようにしたいと思っています。
(その動作部分はjavascriptで。)
メニュー部分は定義リストでマークアップしています。
で、ココからなのですが、デザイン的に<dt>直下に<dd>を出したいのです。
そして各<dt>が横並びになるようにしたいのです。
今のところ、真下に<dd>を出すのは以下のソースで出来ているのですが、
<dt>を横並びにすることが出来ません。
floatでは階段状に並んでしまうし・・・。
(<dt>だけにfloat : left;指定、<dd>だけに指定、両方とも指定とそれぞれ試してみました。)
メニュー項目を一つずつ、一つだけの定義リストにして、
そのリストごと<div>でくくって、横並びにするか、
あとは、もう定義リストにせず、並べる方法しか思いつきません。
何とか定義リストのまま横並びにする方法はないでしょうか?
こちらで色々拝見しているとアレコレ<div>でくくるのはあまりほめられた事ではないようなので
思い切ってお尋ねしてみました。宜しくお願い致します。
788 :
764:04/09/22 16:52:13 ID:???
で、お前ら回答はまだか?
急いでるから、ソースも書けよ。
789 :
787:04/09/22 16:53:42 ID:???
【html部分】
<div id="menu">
<dl>
<dt>contents
<dd >当サイトの目次です。
<dt>top
<dd>topページです。お稽古予定はこちらをご覧下さい。
<dt >お稽古について
<dd>お稽古の流れをご説明しています。
</dl>
</div>
790 :
787:04/09/22 16:54:59 ID:???
【css部分】
DT{
padding-top : 2px;
padding-left : 2px;
padding-right : 2px;
padding-bottom : 2px;
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
width : 6em;
}
DD{
visibility : hidden;
background-color : #ffefbf;
padding-top : 2px;
padding-left : 2px;
padding-right : 2px;
padding-bottom : 2px;
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
margin-left : 0em;
width : 6em;
iFrameを中央に寄せたいのですがどうしたらいいのですか
質問です。
CSSで実現可能と聞いて、こっちに来ました。
BBSを作っていて、IDとパスワードを入力する部分があります。
<INPUT type="text">と<INPUT type="password">なのですが、
sizeやmaxlengthを同じにしても、微妙に<INPUT type="password">の方が縦が長いのです。
CSSを使って縦のサイズを揃える方法はどのようにすればいいのでしょうか。
回答者 同じ
795 :
764:04/09/22 20:32:21 ID:???
さっさと質問に答えろや、屑ども。
797 :
791:04/09/22 20:53:13 ID:???
>>792 margin-left: auto;
margin-right: auto;
で中央にならなくない?
最近何も知らない人たちが質問者に向かってデカい顔してるだけのスレになってきてるな・・・w
最近質問者が何も知らない人たちに向かってデカい顔してるだけのスレになってきてるな・・・w
800 :
Name_Not_Found:04/09/22 21:53:42 ID:xIW7pbe/
803 :
764:04/09/22 23:31:14 ID:???
>>786 レスが遅くなってしまって申し訳ありません。
紹介していただいたサイトのやり方を試してみましたが、そのサイトと同じ結果になりました。
しかし、border-width を変更することに関しては記載が無かったようですので私の方でも少し試したところ、
border-width : 0; や、border : none; を指定した時と何も指定していない時では見え方が違うため、無視されているわけでは無いようですが、
border-width : 0px; も border-width : 100px; 同じ見え方になってしまうようです。
諦めた方がよさそうですね。 ありがとうございました。
>>788 >>795 私の名前を使うのは止めていただけませんか?
自演乙ー
見る度見る度バカしかいないスレ
>>805 そんなに自分自身を卑下しちゃいかんYO
808 :
787:04/09/23 12:55:49 ID:???
>>807 有難う御座いました!できました!
よくよく読んだつもりで
>>644のようにしてるつもりだったんですけど
topのマージンがなかったんですね。一段下げないとそりゃあ、回り込まないですよね。
<dt>と<dd>の間に隙間を空けるつもりがなかったので、いらないものだと思いこんでました。
何かずっとソースをにらんでいると煮詰まって自分では訳がわからなくなってしまってました。
本当に有難う!!
>>644で答えてくれていた方にも感謝!
809 :
764:04/09/23 17:41:53 ID:???
>>803 お前が最初から名前欄に質問したときのレス番号を入れておけば、少なくとも俺が現れる事は無かった。
CSSでショートカットアイコンを指定することってできますか?
811 :
Name_Not_Found:04/09/23 18:47:59 ID:JZNHlnNv
全体を枠で囲って、さらに中を左側にメニュー、右側を本文と分けたページがあります。
その仕切り線の部分を、全体枠の下線までピッタリくっつけたかったんですけど
メニュー側のborder-right-width: 2px;で指定したら、本文の方が長いときに途中で切れるし
本文側の border-left-width: 2px;で指定したら、やはりメニューの方が長いときに切れちゃいます。
どちらにも影響されず、全体枠の縦幅にだけ合わせて線を引いてくれる方法を探してるのですが
何か良い方法はありますでしょうか。
814 :
810:04/09/23 19:28:05 ID:???
>>812 違います。
>>813は偽物です。
faviconでしたらぐぐって分かったのですが、えっとブラウザーからソフトを起動できないかと思って質問しました。
よろしくお願いします。
余計意味分からん。
もっと質問をまとめてくれ。
アプリケーションの起動は、CSSでできたらこわすぎる・・・
どのみち答えは無理。
819 :
810:04/09/23 20:41:51 ID:???
814は偽者です...
無理らしいののでもう良いですが...
820 :
810:04/09/23 20:42:27 ID:???
×無理らしいのの
○無理らしいの
何がしたいのかを明確に書いてくれ。
>>811 メニューの幅が決まってるなら、背景画像でやることが出来る。
>>822 なるほど、やってみます。ありがとうございました。
偽者が出てるな。 質問者は偽者出るのいやだったら、トリップつけとけ。
要素のボーダーを2重3重としたいのですが、どうすれば可能ですか?
border-style:double;
3重は入れ子か?
828 :
826:04/09/24 01:20:52 ID:???
>>827 入れ子ではなく、body直下のHn要素です。
3重とも個別に色を指定したいと思いまして…。
ボーダーは2重線まで。
情報後出しでは面倒見きれん。
>828
827が言ってるのは現状では三重にするにはdivかなんかを入れ子にするしかないという意味(自分は827じゃないが)。
二重なら827にあるように
border-style: double;
で可能だけど、各ボーダーの色を個別に指定したいのならやっぱりdivを入れ子にでもするしかない。
831 :
826:04/09/24 01:30:32 ID:???
そうですか。
色々と調べてみたのですが、見つからなかったので
何とか画像で代用してみようと思います。
ありがとうございました。
まぁ、borderなんてオマケ的要素だしなw
833 :
826:04/09/24 01:39:05 ID:???
>>830 結構な数のHTMLファイルなので、入れ子にするのはちょっと大変です。
CSS自体、2日前に覚え始めたので、どう質問すれば良いのやら…。
と、基本すらまだ理解していないので…(^^;
とりあえず、今作っているCSSを完成させれば、じっくり勉強してみようかと思います。
失礼なヤツだね。
曖昧な質問しといて、回答もらえば否定して更に情報後出し。
終いにゃ回答は関係なく、画像で代用すると言いやがる。
なら質問しないで初めっから画像使えよ。
835 :
826:04/09/24 01:46:49 ID:???
>>834 次回からは、思いつく限りの情報を出して質問しますね。
ナニの色まで書くんだぞ。
>810とさほど変わらん質問の仕方なのに何この差?(w
回答者が違う。
839 :
811:04/09/24 02:02:32 ID:???
>>822さんの方法で、全体枠を作ってる<div>のbackground-imageに
線の書いてある背景画像を指定してみました。
IE6だと、この方法で全体枠の中だけ、上から下までキッチリ線で区切ってくれるんですが、
ネットスケープ7.1だとページ左側からの座標を指定しないと線(画像)が何故かズレてしまいます。
当然ながら座標を指定すればIEの方がその分ズレてしまいます。
IE6用の線とネスケ用の線を一緒に描いた画像を作り、全体枠の座標を固定し、画像座標の指定は無しにして
ネスケの場合は全体枠の線にIE用の線が重なるようにし、IEの場合はネスケ用の線が消えるよう
本文側を囲む<div>の背景色で塗り潰す、、、と強引な方法もやってみたんですが、
本文側の内容が短いとき、IE6ではネスケ用の余り線が見えてしまいます。
分かり難い説明ですいませんが、要するに思いつくかぎりの方法は試したんですがダメでした。
何が駄目なんでしょうか、もう一度アドバイスをお願いします。
あと
>>824さんのサイトも参考にしようとしたんですけど、
このCSSって見る方法あるんでしょうか(保存できなかった……)
841 :
811:04/09/24 02:57:37 ID:???
>>840 すいません。説明不足でした。
>>824のトップで呼び出してるCSSだけだと、divとかに使ってるclassやidが無いけど何故?
と、思ってたんですが、よく見たらCSSの中でさらに別のCSS呼び出してるんですね……
そんなことできるなんて知らなかったです。。。
>>683 >テーブルやめろよ
なんで?脳内でテーブルレイアウトと決めつけたのか?
最近中途半端なストリクター気取りが多くて困る。まったくもう
五日も経ってから青筋立てるなよ。
目から脳に伝わるのに3日くらいかかるから仕方ないんだよ。
脳に伝わってから青筋たてるまでに2日かかるのかw
box指定で overflow:auto にしています。
ウィンドウを小さくするとスクロールバーが消えてしまいます。
何か方法はありませんか?
overflow: scroll
じゃダメなの?
一つのタグに二つのクラスを指定する方法ってありますか?
SPANで文字色とフォントサイズを別々に指定するみたいな。
そこまでやるなら直接書け?ですかね
849 :
Name_Not_Found:04/09/24 14:54:59 ID:hyuGw2io
サイトのページをブラウザで見たときに中央に配置するようにしたいのですが、
ページを水平部分を中央にすることはできるのですが(ビルダーの「中央揃え」)、
高さの部分をページに対して真ん中に指定する方法はないでしょうか?
ページが真中に来るように改行を連続すればできるのですが、
それでは見栄えが良くないと思ったので・・・。
どなたか詳しい方がいましたら、是非ご教授くださいませ。
>>848 スペースで区切る
class="foo bar"
この次ぎは「ぴったり」が来る予感がする。
なんか書きづらくなった。
>>849 現状のCSSで高さを算出できない以上、
JSに頼るのが現実的。
ちなみにJSはJenkin Sushiの略ね、一応。
856 :
854:04/09/24 21:11:16 ID:???
>>855 今ジェンキン寿司 WEB製作支店見てたとこだったから吹いたじゃねーか
858 :
Name_Not_Found:04/09/25 11:22:12 ID:EvhAw1tW
質問です。
<div id='a' style='height: auto'>
<div id='aa'
style='position: absolute;
left: 0;
height: 100px;
width: 100px;'></div>
<div id='ab'
style='position: absolute;
left: 100px;
height: 50px;
width: 100px;'></div>
</div>
とした場合、`div#aのheight: auto`は通常フローの子供要素に依存するみたいですが。
これを、浮動ボックスや絶対配置のボックスの子供要素を持つ包含ボックスが
子供要素の高さにあわせて変化するようなテクニックとかありますか?
>>858 結論から言えば、無い。真っ当な方法では。
浮動ボックスの場合は
div#a:after { clear: both; }
で行けるかも知れないが、IEが対応していない。
div#a:afterに相当する要素を埋め込んでおくか、
JSで生成する方法はある。
絶対配置ボックスの場合は
そもそも他に何の影響も与えないので無理。
そのソースを見る限りではどちらも
heightを固定しているようなので、そこから逆算して
div#aにheightを指定したらいいと思うが
多分通常フローの要素がはみ出した時には
伸びて欲しいんだろう。
min-heightと言う属性は用意されているが
これもIEが未対応。min-heightに相当する処理を
JSで代替するしか無い。
# div#a:after { clear:both }に関してはFAQに入れても良さげだが。
普通は<br style="clear: both">だっけ?
FAQのQ4にあるじゃん
861 :
859:04/09/25 12:17:40 ID:???
orz
862 :
Name_Not_Found:04/09/25 12:35:24 ID:EvhAw1tW
すみません、確認せずに書き込んでしまいました。
CSSのみでは絶対配置ボックスの包含は無理みたいなので、浮動ボックスを使用することにします。
div#a:after{ clear: both}のほうがよけいなタグが入らないぶんきれいですが、IEが対応していないなら無理ですね。
<br style=''clear: both'>で回避します。
ありがとうございます。
なんだかわざわざ難しくしてるみたい。
結局IEか・・
またieかよ。。
質問なんですが
画像にリンクで触ったら凹むスタイルシートを適用させて
文字リンクには触ったら下に線を入れるようにしたいのですが
出来ますか?
よろしくお願いします
できます
>867
宜しかったら教えてくれませんか?
>>868 >>1 ■■■■■ 質問のしかた ■■■■■
●基礎は解説サイト(
>>4・かなりわかりやすい)で勉強してください。
870 :
Name_Not_Found:04/09/25 19:08:39 ID:vmNPqdXe
質問なんですが・・・
サイトチェックでネットスケープ4.7で確認すると文字が見えなくなります。
レイアウトもくずれます。
ちなみにWin、MACとも最新のネットスケープ、IEでは見れます。
リンキングスタイルシートで文字などは指定しています。
レイアウトはtableで行っています。
原因はなんなんでしょうか?
>>870 tableタグの閉じ忘れとか。そもそもテーブルレイアウトは(ry
あと>871の言ってることも正しい。
873 :
Name_Not_Found:04/09/25 19:24:27 ID:vmNPqdXe
>>871 ありがとうございます。
そうなんですか?
実は就活用に作ったんでNN4.7で見れないとまずいんですが、
なにか、解決策はないんですかね?
>>873 見れないとまずいと思ってる君の方がまずいぞ。
875 :
Name_Not_Found:04/09/25 19:46:50 ID:vmNPqdXe
>>874 学校の先生に就活用はNN4.7に対応してないと使えないと言われてたんですが、
どうなんでしょう?まずくないんですか?
就活で問題なければ僕的にはいいんですけど。
>>872 tableタグはチェックしてるんですが、ミスはないようなんですよ。
やはりtableでのレイアウトは今後やめようかな。
>>870 あのね、ネスケ4が駄目ブラウザで、CSS対応がバグだらけなのは有名なのよ。
@importやmedia属性などでNN4除けをしてスタイルシート非適用にできるよ。
こう書いてあるルールがあるんだけど、
この 0px って意味あるのかな?
どうせなら二つ書かないと意味ないような…。
background: url(back.gif) no-repeat 0px bottom;
ルール?
観覧に支障が出るようなブラウザを就活に使わせる
その先生にも問題があるような…
>>877 background-position の2値目の省略は50%として扱う。
それを狙ってやってるんだろうから別にいいじゃん。
何か問題でも?
881 :
Name_Not_Found:04/09/25 21:05:27 ID:vmNPqdXe
>>876 ありがとうございます。
試してみます。
> 実は就活用に作ったんでNN4.7で見れないとまずいんですが、
意味がわからん。
採用担当者がNNマニアなので4.7で崩れるとネチネチ文句言ってくるとか?
学校の先生とやらに「採用担当者はNN4.xでもチェックする。」と吹き込まれたんだと思うけど、
>>875自身が、NN4.xを切り捨てても良い明白な理由を持っていないなら、
素直に先生に従っておいたほうがいいんじゃない?
テーブルレイアウトがどう評価されるかは、その先生は何も言わないの?
テーブルレイアウトが未だに多勢って現実くらい受け止めるべきかと
うちはユニークユーザが2万くらいでN4系が0.7%って所。
単純計算で140人くらいだから会社的にもサポートから外そうって動きがある。
ただ、サポートは外しても閲覧に支障はないようにしようってのが前提。
ただ、N4でサイト回ってみてもまだまだ同じ見た目で見れるようにしてる所が多い気がする。
コンテンツしか見れない大手サイトだとマクロくらいしかしらないけど他にどこがあるかな?
887 :
Name_Not_Found:04/09/26 02:33:12 ID:2uuI+lnK
リストの項目に
リンクを貼った言葉とdivで括った言葉を作ってみたら
ブラウザの表示では勝手に改行されてしまいました。
この改行を止めさせたいのですがどうしたらいいのでしょうか?
よろしくお願いします。
a {text-decoration : none ;}
li {list-style : outside none ;}
div.xxx {font-size : 70%;color : black;}
<ol>
<li><a href="xx.html"><div class="xxx">・</div>言葉1<div class="xxx">言葉2</div></a>
<li><a href="xx.html"><div class="xxx">・</div>言葉1<div class="xxx">言葉2</div></a>
<li><a href="xx.html"><div class="xxx">・</div>言葉1<div class="xxx">言葉2</div></a>
</ol>
[ブラウザMacIE5.0表示]
・
言葉1
言葉2
・
言葉1
言葉2
・
言葉1
言葉2
[狙っている表示]
・言葉1言葉2
・言葉1言葉2
・言葉1言葉2
889 :
887:04/09/26 02:35:12 ID:???
間違えました。
<div class="xxx">・</div>と
<div class="xxx">言葉2</div>は別のクラスで
それぞれに違うスタイルをしています。
>>887 oioi
本気でいってるのか?おれは釣られたのか?
891 :
887:04/09/26 02:40:52 ID:???
>>888 ゾロ目の方、早速ありがとうございます。
早速やってみたところ
なおりました!ありがとうございます。
もう一回出直してきます。
>>890 すみません。マジです。
ごめんなさい。
>>887 アンタ回りくどい事をやるね……
li {list-style-type:square;}
<ol>
<li><a href="xx.html">言葉1言葉2</a>
<li><a href="xx.html">言葉1言葉2</a>
<li><a href="xx.html">言葉1言葉2</a>
</ol>
これでいいだろ?
ついでに言うと、もし言葉1の説明を言葉2がしているのなら
これはdl/dt/ddでマークアップした方が自然だし今も後も楽。
>>880 その解釈はわからないです。
background: url(back.gif) no-repeat 0px bottom;
は
のうち、positionは
0px bottom;
になるよね。
これはどういう解釈になるのかな?
キーワードと長さの組み合わせって無意味かと思って。
894 :
887:04/09/26 03:01:14 ID:???
>>892 ありがとうございます。
えっとですね、
ポインタが乗った時に色を変える演出をしたかったので
list-style-typeはnoneにして
:hoverで指定しようと思っていたのです。
…ひょっとして、行頭マークの色って:hoverで変えられるとか…?
「ついでに〜」はその通りで
言葉2で言葉1の説明をさせるつもりです…。
実はdl/dt/ddって何だか良く分かっていないんです。
今改めてとほほさんトコの説明読んでいるんですけど
やっぱり今日も???です…。
>自然だし今も後も楽。
とおっしゃるのでガムバって理解します。全然わかんないけど…。
895 :
887:04/09/26 03:23:15 ID:???
たびたびすいません。
>>892さんのアドバイスから
<dl>
<dt><a href="xx.html">コーラ <dd>[炭酸]</a>
<dt><a href="xx.html">カフェオレ<dd>[乳飲料]</a>
<dt><a href="xx.html">緑茶<dd>[清涼飲料]</a>
</dl>
と直しました。(分かりやすいように言葉も入れてみました)
【表示】
コーラ
[炭酸]
カフェオレ
[乳飲料]
緑茶
[清涼飲料]
これを以下のようにしたいのですが、そうすればいいのでしょうか?
ダメ元で <NOBR>で挟んでみても意味がありませんでした…。
【狙っている表示】
コーラ [炭酸]
カフェオレ[乳飲料]
緑茶[清涼飲料]
>>895 ええと、正直CSSがどうとか以前に
HTMLから勉強やり直した方がいいと思いますけど。
とはいっても「とほほ」はとほほ…だからなぁ。
897 :
892:04/09/26 03:35:01 ID:???
>>894 HTML の <dl> <dt> <dd> についてしっかり理解すべし。
それから CSS の display プロパティの説明をよく見とけよ。
行頭のマークの色は結論から言えば変えられる。
list-style-image を使って、 :hover の時にlist-style-image を上書きすればいい。
Mozilla や Opera ならこれだけで簡単に実現できる。
……が、IEに対応させようとすると面倒臭い事になる。
(IE は <a> 以外に:hoverを指定しても無視するから <a> に display:list-item を使い
<li> や <dt> にCSSを指定する必要が出てくる)
>>895 上の流れは全く読んでないが、それは
(HTML)
<dl>
<dt><a href="xx.html">コーラ</a></dt>
<dd>[炭酸]</dt>
<dt><a href="xx.html">カフェオレ</a></dt>
<dd>[乳飲料]</dt>
<dt><a href="xx.html">緑茶</a></dt>
<dd>[清涼飲料]</dt>
</dl>
(CSS)
dt
{float:left;
clear:left;
width:5em;
}
て感じでどうかな
899 :
887:04/09/26 04:34:15 ID:???
>>896 か、返す言葉もございません。
やっぱりでもとほほはとほほなんですか?
ここでもそうですが、推奨する人がいないので
きっとなにかまずいんだろうなと思いつつも
googleでほとんど最初に出てくるのでついつい使ってしまうんです。
もっと勉強します。
>>897 ><dl> <dt> <dd> display プロパティ
はい。
>list-style-image
画像を用いる方向になりますか。
できれば画像は使わない範囲でと思っていたのですが
それに固執してもいい方向に行きそうもないみたいなので
考え直します。
>>898 早速試したところ、成功しました。ありがとうございます。
でも、他の指定したものが上手く表示されなくなってしまいました…。
ちょっと最初から一つずつ書き直してみます。
>>898 <dd>を</dt>で閉じちゃダメ!
…多分コピペミスだろうけど。
>>900 うお、今気が付いた
偉そうに「て感じでどうかな」とか言っときながら最悪だな俺
吊ってくる
HTML分からん奴は内田さんのリファレンス読むといいと思う。
誰それw
春菊