/* CSS・スタイルシート質問スレッド【26】 */
1 :
Name_Not_Found:
2 :
Name_Not_Found:03/12/22 00:01 ID:EeFatYy0
3 :
Name_Not_Found:03/12/22 00:01 ID:EeFatYy0
6 :
Name_Not_Found:03/12/22 00:04 ID:EeFatYy0
7 :
Name_Not_Found:03/12/22 00:07 ID:EeFatYy0
9 :
1:03/12/22 00:12 ID:???
ミスってたら、すみませんとしか言えません。すみません。
>>1 乙華麗。ぐっじょぶ。
細かいことは(゚ε゚)キニスルナ!!
14 :
Name_Not_Found:03/12/22 17:31 ID:lQwcqFUY
こちらの最初のほうで紹介されてるリンクも、全てでは無いですが
関係ありそうなものを見てみたのですが見つからなかったのでお尋ねします。
質問は、backgroundを使用して背景を表示させてるんですが、
tableでbackgroundを使用した場合、IEでは表示されるんですが
NN7.1だと表示できません。NNで表示させる方法はあるんでしょうか?
>>14 “表関連要素のうち何処に適用しているのか”など明確に質問してください。
Netscape7 は列および列グループへの背景指定には対応していませんが、
その他の表関連要素については、背景関連プロパティは適用される筈です。
まずは HTML および CSS文法の妥当性を検証サービスで確認してください。
それでも解決しない場合には、具体的なソースを提示してください。
もう放置しようぜ
backgroundにfixedを指定した場合はネスケで表示されないことがあるよ。
>>18 それは閲覧領域に対して背景が固定されるからだろ。
その書き方だと Netscape のバグかのように取れる。
20 :
Name_Not_Found:03/12/22 20:47 ID:YPBD2mxY
前スレに書いたのですが、新スレに移動しているようなので、こちらにも書かせていただきます。
985 :Name_Not_Found [] :03/12/22 20:27 ID:YPBD2mxY
a:link{
text-decoration:none;
border:dotted 1px blue;
color:navy;
}
.tabnavi a:link{
text-decoration:none;
color:navy;
}
として、文中のリンクには青い下線を、タブ型ナビゲーションのリンクには下線なし、にしようとしているのですが、下線が出てきてしまいます。
タブナビの方の文字色を赤にしてみても反映されません。
aに複数のクラスを指定して、複数のリンクスタイルを使用したい場合、どう書くべきなのでしょうか?
IE6での確認です。
988 :Name_Not_Found [] :03/12/22 20:39 ID:YPBD2mxY
>>986 タブナビのほうに border:none; を入れても出てきてしまいます…。
文字色の変更すら反映されないんですよ…。
>>20 ちょっと話をずらして悪い。
インライン要素へのborderは右左にしか適用されないと思うが。
IE互換モードなら上下左右に適用されるけど。
んなこたないよ。
>>20 いろいろ突っ込みどころがあるが、まずはできない理由から。
その記述だと、a要素への装飾が、
text-decoration:none;
border:dotted 1px blue;
color:navy;
a要素、class名tabnaviへの装飾が、
text-decoration:none;
color:navy;
つまりa要素なら、class名"tabnavi"のほかに前者の装飾もかかる。
文字色の変更が効かないのは優先度の違い。前者のほうが優先される。
あとは自力で解決できるはず。難しい問題じゃないぞ。
あとうろ覚えだけど、
>>21が言ってるのは確か俺も聞いたことがある。
displayプロパティでブロック要素にしたほうがいいと思う。
display : block;
ってね。
25 :
24:03/12/22 21:50 ID:???
上下のボーダー(border) 要素の上下に存在 各行に存在するが、他の行に重なる場合がある
あ、存在するのか。読めてなかった(´・ω・`)
インライン要素に指定できないのは、heightとwidth。
しっかりしろよ。
>>20 >aに複数のクラスを指定して
という書き方からの想像だけど、もしかして、<a class="tabnavi">とか書いてたりはしない?
もしそうだったら、cssは a:link.tabnavi になるよ。
で、↑ではなく親要素に class="tabnavi" つけてるなら、
改めてa要素にclassふってやれば優先順位上がるから、できると思う。
a:link.navilink {
border:none;
}
<a class="navilink">〜</a>
という感じ。(クラス名は適当につけてみた)
text-decoration:none;
color:navy;
のふたつは a:link の方と重複するので、無くてかまわない。
それと、下線なら border-bottom:dotted 1px blue; じゃないの?
>つまりa要素なら、class名"tabnavi"のほかに前者の装飾もかかる。
>文字色の変更が効かないのは優先度の違い。前者のほうが優先される。
これ、間違ってませんか…?
後者というのは子孫セレクタの方のことでしょうけど、この場合後者が優先では?
意味不明だ…何書いてるんだ。
「後者と言うのは子孫セレクタの方のことでしょうけど、」の部分は読み飛ばしてください…。
>>23の説明で
後者の .tabnavi a:link より前者の a:link が優先される理由が知りたいものだ。
>>20 多分
a:link{ .tabnavi a:link{
↓ ↓
a:link { .tabnavi a:link {
ところで、kai-さんは何時ごろからこのスレにいるんですか?
>>31 「ところで」も何も、スレ違いです。
糞コテですけど、別に荒らしに来てるわけじゃないのでそういう質問には答えられません。
33 :
Name_Not_Found:03/12/22 23:21 ID:YPBD2mxY
>>21 border-bottomでした、書き間違いですスミマセン。オリジナルにはきちんと書いてます。
>>23 常にa要素への記述が優先されるのでしょうか…勉強してきます…。
>>27 >
>>20 > >aに複数のクラスを指定して
> という書き方からの想像だけど、もしかして、<a class="tabnavi">とか書いてたりはしない?
> もしそうだったら、cssは a:link.tabnavi になるよ。
<a class="tabnavi">と書いています。
最初、cssは a:link.tabnavi と書いていたのですが、どうにも反映されないので .tabnavi a:link としてみました。
が、やっぱりダメでした。。。
>>30 >
>>20 多分
> a:link{ .tabnavi a:link{
> ↓ ↓
> a:link { .tabnavi a:link {
ハンカクスペース入れてみたけど、やはり…_| ̄|○
席を外していて、レスが遅れてスミマセンでした。
風呂に行って、すべてのa要素にクラス振ってみます…。ありがとうございました。
a要素にクラス属性つけたのなら、
a.tabnavi:link
では?
そもそも、IE(6.0)は、祖先がクラスセレクタで子孫が擬似クラス、
というのに対応しているんでしょうか。
>>33 特定のクラスが指定されているリンクの設定
a.tabnavi:link{...}
<a href="..." class="tabnavi">
特定のクラスが指定された要素に含まれるリンクの設定
.tabnavi a:link{...}
<p class="tabnavi">
<a href="..."></a>
</p>
という感じ。
36 :
Name_Not_Found:03/12/23 02:34 ID:QryxhHhl
質問です。
ブロック要素に
h1, h2{
display : inline;
}
などとした場合、これらはインライン要素としての扱いをされるということを
知ったのですが、このようなスタイル設定をした要素を
以下のようにbody直下に置いても良いのでしょうか?
<body>
<h1>見出し1</h1>
<h2>見出し2</h2>
</body>
これは、一応ValidなHTMLということになりますが、事実上、
inline要素をbody直下に置いているということになるので、
非常に気持ち悪いのです。
>>36 さて、inlineにした理由から伺おうか…
>>36 >これらはインライン要素としての扱いをされるということ
インライン要素になるのではなく、整形構造がインラインになるだけ。
'display' は HTML の文書構造を変化させるためのものではない。
ソース文書は DTD に沿って記述しなければならない事には変わりない。
>inline要素をbody直下に置いているということになるので、非常に気持ち悪いのです。
少しは仕様書を読んだらどうだ。
[HTML 4.01仕様書邦訳 7.5.3 ブロックレベル要素と行内要素]
>リスト要素を行内スタイルにするなど、ブロック要素を行内スタイルでレンダリングすることが適当であるような場合もある。しかし一般的に言って、著者はHTML要素の慣習的解釈を上書きするようなことはしないよう求められる。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.3
39 :
36:03/12/23 03:22 ID:QryxhHhl
>>37 ブロック要素を、インラインのように扱う必要があったからです。
ページのレイアウトは、次のようにします。
-------------------------
※ウィンドウの幅が広い場合
┌─────────┐ ┌───────┐
│タイトル画像 │ | ナビゲーション |
└─────────┘ └───────┘
メインコンテンツ
------------------------
※ウィンドウの幅が狭い場合
┌─────────┐
│タイトル画像 │
└─────────┘
┌─────────┐
│ナビゲーション │
└─────────┘
メインコンテンツ
---------------------------
ウィンドウの幅が広いときは、ナビゲーションがタイトルの横に、
狭いときはタイトルの下に来るのがミソです。
タイトル画像は<h1>、ナビゲーションは<div>によるブロック要素です。
もしかしたらスレ違いかもしれませんが、
スタイルシートで指定したレイヤー上に、
JavaScriptで…例えばテーブルや画像などを…同位置に指定し重ねると、
どうしてもレイヤーの下にテーブルが隠れてしまいます。
これをテーブルが上位に重なって表示させるにはどうしたら
良いのでしょうか?
説明が分り難くて申し訳ないのですが、何卒ご教授下さい。
41 :
Name_Not_Found:03/12/23 07:17 ID:2QjUIEc8
js板いけ
>>39 何もdisplay:inline;でなくても h1 img {float:left;} で充分なのでは。
43 :
37:03/12/23 16:47 ID:???
44 :
36:03/12/23 18:19 ID:QryxhHhl
>>42,
>>43 レスありがとうございます。
実は、以前はそのようにfloatさせていたのですが、
それだと、ウィンドウの幅が狭くなったときに以下の問題が発生します。
・強制的にナビゲーションをタイトルの横に置こうとするので、
横方向のスクロールバーが発生する(場合がある)。
・以下のようなレイアウトになってしまう。
┌────────┐ ┌─
│タイトル画像 │ | ナ
└────────┘ │ ビ
┌─────────┘
│ゲーション
└───────────
メインコンテンツ
-----------------------------------------------------
これを防ぐには、インラインとして配置させるのが最も合理的であると
判断しました。
45 :
Name_Not_Found:03/12/23 18:20 ID:5a841lVG
絶対的位置配置ってやらない方がいいんでしょうか?
<ul>や<h1>に絶対位置指定してたら、
先輩から「アホか、古いブラウザで見られへんやろ」って
頭叩かれたんですが・・
>>45 古いブラウザは@importなどでCSS適用されないようにすれば読めるようになる
47 :
45:03/12/23 18:59 ID:5a841lVG
>>46 それ言ったら
「はぁ? とにかく絶対位置指定だけはやめとけ。ずれまくる。
相対指定にしろ」
とか言うんですよ・・。
>>47 古いブラウザ対策をして、具体的に表示例を見せてやれば、納得するのでは?
>>44 そのナビゲーションの要素にwidthを指定すればだいじょぶなんじゃないの?
あーでも、幅固定じゃないとだめなのか(´・ω・`)
display:inline;が一番いいかもしれんね
51 :
14:03/12/23 20:01 ID:tjLgP7f8
ゴメンなさい、解決しました。
どうも、ファイル名に日本語を使用していたのが問題だったようです。
NN7.1だと日本語のファイルって読んでくれないんですね・・・
お騒がせしました。
>>47 たしかに絶対配置は、いい加減な知識で下手にやられると困ったことになる。
よぅく理解した上で使用してほしいものだ。
53 :
Name_Not_Found:03/12/23 20:33 ID:/Rev/GXy
IE6 表示OK
NN4.7 表示OK
なのにNN7.1で見ると
ボックスの背景色は出てないわ、
文章表示は全部上の方にごちゃごちゃ固まるわ
でむちゃくちゃなんですが・・・
NN7.1の時も、NN4のscreenみたいにスタイルシートを
適用させない方法ありますか?
むちゃくちゃなのは IE6 & NN4.7 の方の予感。
55 :
53:03/12/23 20:38 ID:???
>>54 違わい違わい。
NN7.1って何か変なスタイルシートになりはらへん??
>>55 君のスタイル指定かHTMLソースが間違ってる方に百万点。
ソース出してくれないと、対策も回答できませんよ。
57 :
Name_Not_Found:03/12/23 20:59 ID:/Rev/GXy
>>56 (1)全部文字が上に集合する
これはおそらく<br><p>等改行タグが一切入っていないからだと思うが・・。
(2)背景色が出ない
.menubar {height: 40px;
width: 600px;
background-color: #000000;
color: #FFFFFF;}
これでNN7.1で背景色が#000000にならない。文字色は合ってる。
>>57 そのスタイルを適用させるHTMLソースを書きませう。
もしや他にfloatとか使ってないか? だったらFAQ(
>>7)を参考に。
59 :
Name_Not_Found:03/12/23 21:08 ID:/Rev/GXy
>>58 <img src="top.jpg">
メニュー
<div class="menubar">
トップ | このサイトについて | 朝食 | 昼食 | 夕食 | メール |
</div>
■更新履歴
<h1>更新履歴</h1>
<ul>
<li>2003.12.21 朝食更新</li>
</ul>
こうすると、更新履歴がまずtop.jpgにかぶる。IEでは正常表示
menubarは背景色が出ない。
>更新履歴がまずtop.jpgにかぶる。
何もしてないのにそんなことなる筈ない。
>>57に出した以外にも何かヘンなCSS指定してるでしょ? それを提示すること。
61 :
59:03/12/23 21:18 ID:???
>>60 してないんですよ・・・・信じて・・・
試してみた所、
.menubar の
height: 40px;
width: 600px;
この2つの要素外すと、表示はずれるけど
一応画像には被らなくなった。
でもメニューの範囲作るために必須なんだよなぁ・・
これ駄目なのかな・・。
>>61 信じられません。下記のソースでちゃんと表示されました。Win98SE・NS7.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<STYLE type="text/css"><!--
.menubar {
height: 40px;
width: 600px;
background-color:#000;
color:#fff;
}
--></STYLE>
</HEAD>
<body>
<img src="top.jpg">
メニュー
<div class="menubar">
トップ | このサイトについて | 朝食 | 昼食 | 夕食 | メール |
</div>
■更新履歴
<h1>更新履歴</h1>
<ul>
<li>2003.12.21 朝食更新</li>
</ul>
</body>
</HTML>
その昔NN6を初めて導入して、自分のページを見たらレイアウトがめちゃめちゃだった。
「Nって使えねぇ!」と思ったが、その後もう少しHTMLやらCSSやら勉強したら
結局自分のページの方がめちゃめちゃだったことに気づいた2年前の夏。
>>61 とりあえずValidatorとかには掛けてみました?
>>63 スタイルシートを外部に持っていくと駄目なんですよ。。
>>63 あ、勘違い!!
行けました!!
でもなんで!?!?!?
>>62は何かの冗談のつもりなの? それにしてはつまらないし……。
おい、まさか
>>57はタブや半角スペースではなく、全角スペースを使ってやしないか?
69 :
62:03/12/23 21:40 ID:???
70 :
Name_Not_Found:03/12/23 21:41 ID:VEwAR23J
>>64 > 「Nって使えねぇ!」と思ったが、その後もう少しHTMLやらCSSやら勉強したら
> 結局自分のページの方がめちゃめちゃだったことに気づいた2年前の夏。
それ、非常にわかる。まず自分を信じてる、ってあるよね。
>>61 >してないんですよ・・・・信じて・・・
俺らがお前を信じて解決するならいくらでも信じてやるが。
望みは信用を得ることか?問題をクリアすることか?
>>66 感嘆符使いすぎで非常に鬱陶しいんだけど。
>>62 >全部絶対配置しろ。
本気で言ってるなら、寒いな。
73 :
62:03/12/23 21:45 ID:???
>>72 全部絶対配置の方が画像と文章がだぶったりする事も無いし、
置きたい場所に置けるから確実だろが。
俺は常にHPBのどこでも配置モードでスタイルシート作ってるが。
とりあえず鬱陶しいので消えてくれ
>>72。
な?皆。
おお!あの悪名高き「どこでも配置モード」ユーザーが!!
>>73 「どこでも配置モード」にチト笑ったが、やはり下手な冗談だな。
つまらないと思ったらレスをしないでください。
縦方向に点線入れる方法ありますか?
82 :
79:03/12/23 21:56 ID:???
頼むから真性のお子様を煽って無駄にレスを増やすのはやめてください。
>44
ナビゲーション部分も float: left; でいいと思うが
背景の画像をスクロールバーを動かしても動かないようにするにはどうすれば?
固定する
>>85 それをやってるページのソースとシートを見る→理解する→真似する→応用する
→熟達する
それをやってるページのソースとシートを見る→間違って理解する→真似する→応用できない
→初心者を脱却できない
それをやってるページのソースとシートを見る→理解する→真似する
→それをやってるページの管理人に見つかる→訴えられる
→裁判をする→敗訴する→罰金を払う→破産する→首をくくる
→天国へ行き再生の準備をする→生まれ変わる
前世で私と一緒に戦ってくれた戦士を探しています
>>91 ひょっとして貴方はエンジェルアドバイズ!?
>>91 無理を言うな。前世も現世も一緒に戦う人なんてお前にはいない。
テーブルを使わないで、新聞みたいに段組する方法教えてください。
<p> <P>
文章ブロック 文章ブロック
<P> <p>
文章文章文章 文文文文文文
文章文章文章 文章文章文章
こんなのって、無理ですの??
96氏
よく見ないで発言してごめんなさい。
そして、レスの番号表示してくれてありがとう。
早速見に行って、頑張って Web サイト作成します。
メリークリスマス。良いお年を。
> <p> <P>
> <P> <p>
……。頑張ってくださいね。
99 :
36:03/12/25 05:34 ID:???
>>84 結局、displayとfloatを併用して
display : inline;
float : left;
width : x;
とすることで解決しました。
ウィンドウ幅が2x以下になるとブロック要素が改行します。
レスありがとうござです。
質問です。
フィルターを使用し
.alfa {filter:alpha(opacity=70);}
これを定義して
テーブルにクラス設定してあるのですが、
テーブル内の特定のテキスト・画像にはフィルターを
適用させない方法って有りますか?
>>100 というか、フィルター使うのはやめましょう。
特定の要素にクラス指定して.hoge{filter:alpha(false)}
フィルタ使わないから正しいかどうかわかんない。
それとクラス名にalfaはどうかと思うよ(もし使っているとすれば)。
あと
>>101に同意
HPデザインをCSSで作り直そうと思っている。
んで、PS2のイージーブラウザーにも対応したい訳。
「Cascade Style Sheet(CSS)1.0 対応 ※一部対応のみ」って書いてある(この一部ってのが気になる・・・)。
また、どっかにPC用のイージーブラウザーのエミュレータみたいなもとないでしょうか?
>100
こういう人がもっと増えますよう
>>100 フィルタ使っても不快なだけで魅力に感じないよ。
可読性を損なってまでも表現すべきことなのかな。
>>103 碌なもんじゃない気がする。
>>100の質問もFAQに入れた方がいいんじゃない?
filter関係の質問てこんなのばっかだし
>>109 >>99 の件に関係なく「提示された仕様書は修正されていますよ」ってこと。
また突っ込むとだな display: list-item; の場合に限ったことではない。
例えば表要素(display: table)をフロート配置にしても「table」のままになる。
質問です。IE6で、
body { line-height:1.3em; }
div.example { border:1px solid #000; }
dt { width:7em;float:left; }
として、
<div class="example">
<dl>
<dt>ほにゃほにゃ</dt><dd>なんとかかんとか</dd>
<dt>ほげほげ</dt><dd>なんとかかんとか</dd>
<dt>ぽにゃぽにゃ</dt><dd>なんとかかんとか</dd>
</dl>
</div>
とすると、何故か全体を囲う線のみでなく、各行の間にも線が入ってしまいます。
どのようにすれば解決されるのでしょうか?
<dl class="example">
幾つかの解説サイトでは、一部分の文字の色を変えるとき等に span タグを使うように と
書かれていますが、実際spanを使っているサイトは少ないように思えます。
これは何故なんでしょうか? spanタグ自体が不適切だからでしょうか?
114 :
111:03/12/26 18:14 ID:???
>>112 実際は
<div class="example">
<ul>
<li>ぽにゃぽにゃ</li>
<li>ほらぽら</li>
</ul>
<p>さて、これから定義リストを始めます。</p>
<dl>
<dt>ほにゃほにゃ</dt><dd>なんとかかんとか</dd> ……
のようにexampleの中にはdl以外にもいろいろなものが入っているので
そのように解決する事が出来ず困っています。
>>113 「一部分の文字の色を変えるとき」というのは,潜在的に何かしらの意図がある筈です。
その意図が HTML の要素型で用意されていれば,その要素で印付けして意図を明示します。
HTML4 には,構造を示すインラインの要素型として,
em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym が用意されています。
なんの構造を持たない div, span要素はなるべく使わないようにするのが基本です。
場合によっては,物理的なsmall, big要素型などを使っても構いません。
例えば「呟き」を表現する要素型は HTML には存在しませんが,
<small class="mutter">〜</small> として表現するのも一つの方法です。
違和感を感じるのであれば,span要素でマーク付けすればよいです。
>>114 とりあえず手持ちのFirebird0.7では出なかったから、IEのバグかも知れんな。
解決法は↓の方よろしく。
おかしくはない、他が原因だろ
いや、確かにIE5.5だと出る。Opera7.23では出なかったけど。
>>114 Operaでも行の間の線は出ないですね。
IEで確認してみたのですが、なぜか border-top が
定義リストの間に表示されるみたいですね。
解決法(?)
・試しに、div.exampleに背景色(background-color))を指定してみたら、
定義リストの間の線が消えました。
・ dl{background-color:white;} でも消えました。
色はなんでも良いみたい。
一応、CSSバグ報告スレッドにもいった方が良いかも。
http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50
120 :
111:03/12/26 20:23 ID:???
返信有難うございます。IEの問題のようですね。
>>119 backgroud-colorの指定は盲点でした。
dtをborder-style:none;にしてみたりしても解決されなかったので、
悩んでいました。
バグ報告スレの方はほとんど覗いた事が無いのですが、
報告させていただくことにします。有難うございました。
<table border="1">と同じ事をスタイルシートで
やろうとしているのですが、上手く行きません。どうしたら同じことができるでしょうか?
>>121 table要素のborder属性は非推奨じゃないと思うが・・・
いや。ISO-HTMLかもしれん。
tableの外枠はブラウザによって微妙に色が違うから
table { border: 1px outset silver }
とか
table {
border-width: 1px;
border-style: solid;
border-color: white gray gray white;
}
とか ThreeDDarkShadow みたいにシステム色使うとか
好きなやつ選んでくれとしか言いようがない。
>>123 ありがとうございます。でも、それでやると内枠が消えるんです。
テーブルタグだと、内枠まで自動設定されるのですが、スタイルシートでは無効になります。
逆にスタイルシートでtdについて指定すると、現在テーブルタグで指定しているものまで書き換えられてしまうのです。
?
↓これで既存の <table border="1"> みたいになるっしょ。CSSのborderは子孫に継承しないんだし。
table {
border-width: 1px;
border-style: solid;
border-color: white gray gray white;
}
td {
border-width: 1px;
border-style: solid;
border-color: gray white white gray;
}
つーか、「現在テーブルタグで指定しているもの」って何?
>>125 ありがとうございます。できました。
あと、class使ったら影響を閉じ込めれました。
しかし、2種類のテーブルを使い分けるとき、
いちいち<td>だったところを<td class="hogehoge">とか指定しなければいけないのがつらいです。
tableにだけclassを指定すれば充分でしょ。
>>128 だめでした。classをtableだけに指定するとtdの指定が無くなり、<table border="1">みたいなことが出来ません。
>>129 仕様書か解説サイトの「セレクタ」の項を参照されたし。
>>130 それを参考に書いているのですが、
class指定がなければデフォルトの一種類の指定が使われてしまいます。たぶん仕様どおり。
td { border-width: 1px; border-style: solid; border-color: gray white white gray; }
td.test { border-width: 2px; border-style: solid; border-color: gray white white gray; }
で、
<td class="test">ほげほげ</td>
みたいなことをやろうとすると、各<td>でいちいちこのclassを指定しないとダメみたいです。
指定しないとクラス無し指定になります。
やりたいことは、<table class="test">な感じで、中の<td>も一括して設定変更をしたいのです。
table.test { 略 }
.test td { 略 }
オイオイ、子孫セレクタがわかってなかったのかよ……。基礎だよ?
>>134
136 :
Name_Not_Found:03/12/28 13:53 ID:ZLnWO3Ti
フジテレビHPより
<TITLE>もしもツアーズ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<!--スタイルシート-->
<SCRIPT LANGUAGE="javaScript" TYPE="text/javascript" SRC="css/css.js">
</SCRIPT>
<!--スタイルシートここまで-->
このスタイルシートって・・・なんですか?
>>136 スタイルシート振り分け用じゃないの?
関係ないけど、新聞・テレビとか大手メディアの悲惨なhtmlはなんとかしてもらいたいとか思った。
いいんだ、ちゃんと振り込んでくれれば
後は知らん。知ったことじゃない。
台本形式のテキストをCSS使って表現したいんですが、
モナー:今日はいい天気だ。
明日もいい天気だろう
ギコ :あさっても多分いい天気だな
という感じに表現したい時、2行目以降にインデントをつけるのと、
2行目以降にマージンつけるのとどちらが正しいのでしょうか?
>>139 フロート使って下記の感じでいいじゃない?
<head>
<title>台本形式のテキストをCSS使って表現</title>
<style type="text/css">
dt {
text-align: right;
float: left;
width: 3.5em;
}
dd {
margin-left: 3.5em;
}
p { margin: 0; }
</style>
</head>
<body>
<dl>
<dt>モナー:</dt>
<dd><p>今日はいい天気だ。<br>明日もいい天気だろう。</p></dd>
<dt>ギコ:</dt>
<dd><p>あさっても多分いい天気だな。</p></dd>
</dl>
</body>
pタグは入れなくていいような気がするんだが…
完全に間違いだな
>>141-142 会話文だって文章なのだから、一つの主題をもって纏まった部分を
段落としてマーク付けするのは至極当たりまえのことだと思うが。
ここはCSS質問スレであって、Strictスレではないのだから、
最終的なマーク付け方法は
>>139 が考えればよいことだろう。
明確な根拠を提示するつもりがないのなら黙ってろ。
こんな感じだとどうなんでしょう。
<title>脚本</title>
<style type="text/css">
* {margin:0; padding:0;}
body{line-height:1.5em;}
dl{margin:1em 0 1em 4.5em;}
dt{position:absolute; left:1em;}
</style>
<dl>
<dt>モナー:</dt>
<dd>
<p>今日はいい天気だ。</p>
<p>明日もいい天気だろう。</p>
</dd>
<dt>ギコ:</dt>
<dd>
<p>あさっても多分いい天気だな。</p>
</dd>
</dl>
>>144 なんで絶対配置なんかするのかね。せめて相対配置だろ。
>>145 上記で、dt{position:relative; left:-4em; top:1.5em;} とかにしろってこと?
理由は?
どこからtop:1.5em;が出てきたんだ?
>>146 ともあれ、positionを使用する位なら、margin-leftに負の値、でよかろ。
positionを使用すると、その子孫要素によっては面倒が起きやすいから。
特にabsoluteはいかんよ。本来の位置を無視してキャンバスに対して配置するんだから。
>>147 >どこから出てきた
スルーでお願いします。
>本来の位置を無視してキャンバスに対して配置するんだから。
(positionにstatic以外の値を指定してない)包含ブロックがない場合?
というか、IEにバグがあるし、使わないほうが無難というのはもっともか。
>positionを使用すると、その子孫要素によっては面倒が起きやすいから。
そうですね。サンクス。
<dl>
<dt>Title</dt>
<dd>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</dd>
</dl>
を、
<table>
<tr>
<td>A</td>
<td>
TITLE
<ul>
<li>B</li>
<li>C</li>
</ul>
</td>
</tr>
</table>
みたいな感じに表示させるには
どんな css を書けば良いのか教えて頂けませんか?
TITLE には本の題名、
A には本の表紙画像、
B, C には著者名等を入れるつもりです。
ほんとに関係ないな(w
>>149 <dl>
<dt>Title</dt>
<dd><img src="A.gif" alt="A"></dd>
<dd>
<ul>
<li>B</li>
<li>C</li>
</ul>
</dd>
</dl>
で、ddを横並びにすればよし。
dt一つに対しdd複数でもいいんだよ?
>>149 無理に定義リストにしなくとも、表ならばtableを使ってよし。
<table>
<tr>
<th rowspan="3">表紙画像</th>
<th>タイトル</th>
</tr>
<tr><td>著者名</td></tr>
<tr><td>発行年</td></tr>
</table>
とか。
以前にもこのスレなどで質問したことがあるのですが、原因がわかったので再度質問
させていただきます。 わかる方お願いします。
Mozilla で XHTML(application/xhtml+xml) 文章に <?xml-stylesheet ...?> で CSS
を関連付けると、例えば
<dc:title> ⇒ dc\:title {...}
<hoge xml:lang=".."> ⇒ hoge[xml\:lang] {...}
のようにエスケープしていても反映されません。 これは XHTML に Link 要素で関連付けても、
XHTML 内に CDATA として書き込んでも同様でした。 Opera7 ではどちらも反映されています。
また、同じ文章を HTML(text/html) として Link 要素で CSS を関連付けると、こちらは反映さ
れています。 これは Mozilla のバグと考えていいでしょうか?
上にもある通り Dublin Core や SVG を埋め込んでいるので、どうしても application/xhtml+xml
として扱いたいんです。 また、Moz スレで訊こうかとも思いましたが、あちらのスレもみている
web 制作板の住人さん(全員?)に判断してもらおうと思ってこっちにカキコしました。
以前は私の説明不足で話が噛み合わなかったので、今回はどうぞよろしく。。。 長文スマソ
156 :
149:03/12/28 23:03 ID:???
>>150 1: TITLE 部分の background image として A を使う
変だったので保留。
2: A を dl の外側に出して float
html として変か・・・
発想が乏しく、試したのはこの 2 つくらいのもんで・・・
後は、画面左側からの位置をきっちり定めるくらいしか方法が思い付きませんが、
出来たらこの方法は採りたくない・・・
>>152 説明不足で申し訳ない。
TITLE も、画像 A の横に来て欲しいんです。
その方法だと、まず TITLE が来て、
その次に画像 A と B, C が来てしまうかと。
157 :
149:03/12/28 23:11 ID:???
>>154 表、と言う事になるのか・・・
そうか、表か・・・
なんかこういうのを表として書いて良いのかどうなのか
ちと疑問だったんスけど、表で逝く事にします。
愚問につきあって下さった皆様、有り難う御座いました。
>>156 float:right;なら順序を変更できますが。
159 :
139:03/12/29 00:49 ID:???
遅くなりましたが、レスをくださったみなさんありがとうございます。
私にはちょっと難しいので、また研究しながらやってみます。
ありがとうございました。
161 :
159:03/12/29 17:26 ID:???
すみません、知らない書き方もあるので、教えていただいた書き方を研究するという意味です。
ただコピーするだけだといつまでたっても理解できないと思うので、意味とか使い方とかを
知ってからにしようと思っています。
久しぶりの謙虚なタコに心洗われる年末。
ここでタコなどと聞くとは。知らないやつが言われると煽りと勘違いされそうだ
↑うぜー
165 :
155:03/12/30 00:10 ID:???
CSS Laboratory さんのソースを眺めていて気付いたんですが、
dc:title を dc|title のようにすればよかったみたいです。
これってどの仕様書にかいてあるんでしょうか?
166 :
Name_Not_Found:03/12/30 04:43 ID:dY/zFyBK
教えて下さい。
<h1>こんにちはアリガトウ</h1>
というタイトルで、こんにちは アリガトウ のように、
間にスペースをあけるにはどうしたらいいのでしょうか?
<h1>メインタイトル<small>サブタイトル</small></h1>
h1 small { margin-left : 50px }
とか。
ダメか。
168 :
166:03/12/30 05:20 ID:dY/zFyBK
>>167さん
できました!
pxの数値を変えたら左右のスペースを思い通りに動かせました。
即レスで教えて下さってありがとうございます!
感謝!!<(_ _)>
169 :
Name_Not_Found:03/12/30 05:37 ID:b86aNd1w
>>166 <h1>こんにちは<span style="margin-left:50px">アリガトウ</span></h1>
とか。
スタイルシートでなければ
<h1>こんにちは  アリガトウ</h1>
とか。
アリガトウの部分が本当にサブタイトルなら
<h2>にでもして分けて、あとはfloatでやるのがいいと思う。
170 :
Name_Not_Found:03/12/30 05:39 ID:b86aNd1w
が消えたよう(´Д`)
171 :
Name_Not_Found:03/12/30 05:43 ID:p38WRZ4A
フォントサイズ固定するアホは死んでもらいたいんですが
政府の見解はいかがなものでしょうか?
172 :
166:03/12/30 05:44 ID:dY/zFyBK
すみません...ブラウザの大きさ変えてみたら、
こんにちはとアリガトウがピッタリ左右には分かれないみたいです。
pxの数値を大きくしたら改行になってしまいます。
169さんのも試してみます。
173 :
166:03/12/30 05:48 ID:dY/zFyBK
度々、後だし情報ですみません。
こんにちはとアリガトウを、
一本の罫線の中で左右に分けることができたらと思って。
>>169 サブタイトルをh2に回すのか?(´д`;)
なんかおかしなことにならないかそれ。
口じゃ説明できないような、モヤモヤが。
>>172 pxじゃそりゃだめだ。それで気に入らないなら、%にしてみな。
>一本の罫線の中で左右に分けることができたらと思って。
俺が文盲なのか、貴方が文盲なのかはおいておいてだな。
もうちょっと意味をしてくれ。
>>175 要するに、画面の左端に「こんにちは」
画面の右端に「有り難う」と表示させたいのだろう。
但し「こんにちは」と「有り難う」は、同じ行に在る・・・と。
h1 big{
position : absolute;
left : 20px;
}
h1 small{
position : absolute;
right : 20px;
}
<h1><big>メインタイトル</big><small>サブタイトル</small></h1>
一応これでできるみたいだけど、インライン要素にしちゃダメな希ガス(´・ω・`)
あんまり関係ないかもしれないけれど、自分は
<h1>タイトル<br><span id="hogehoge">サブタイトル</span></h1>
にしています。
タイトルだけで<h2>まで使ってしまうのはどうだろう、と思ったことがひとつ。
タイトルとサブタイトルを
CSSだけで確実に配置分けできるかどうか不安だ、というのがひとつ。
しかし、強制的に改行させていいのだろうかという迷いもあります。
br は使わない方が良いだろう
>>177 position、しかもabsoluteはおすすめできない。
横並びにさせるならfloatがよいと思ふ。
>>178 お前の理念に興味はないが、「強制的に改行させていいのだろうかという迷い」や「タイトルだけで<h2>まで使ってしまうのはどうだろう」なんてことはつまらんことであることは、もっと勉強すればおのずと理解できる。
182 :
162:03/12/30 09:36 ID:???
>>163 漏れの周りでは普通に使ったりするおっさんが多く、
タコは珍重、もとい、尊重されてるっす。スマソ
>>164 なぜに?
>>182 > なぜに?
勘違いしたやつだろ気にスンナ
( ´ _ゝ`)...
オマエらCSSより先にマークアップを勉強しろよ
>>178 >強制的に改行させていいのだろうかという迷いもあります。
ならばこれでよかろ。悩むほどのことかい。
<h1>タイトル <small>サブタイトル</small></h1>
h1 small {display:block;}
って何?
>>185 ソレってhtml的にも正しいと言えるの?
>>187 誤りや不審な点があるなら具体的に指摘してください。
HTMLがどうだろうとここはCSSの質問スレだ。
W3C信者が集う場所ではない
でもHTMLの記述すらできないヤシは、そもそもこのスレで
質問する資格をもたない。
191 :
Name_Not_Found:03/12/30 17:57 ID:nlmZXRDi
IEは属性セレクタ未対応
193 :
178:03/12/30 18:25 ID:???
お答えをくださった方、どうもありがとうございます。
>179 参考にしてみます。
>181 つまらないことだとは思います。割り切ってしまうことも必要でしょうか。
>185 <small>を使うよりは、<span>の方が適しているかと思います。
確かに、メインのタイトルよりも小さくなりますが・・・。
>191 クラスをつけるのが無難かと思います。
>>185 >ならばこれでよかろ。悩むほどのことかい。
( ´,_ゝ`)プッ
>>193 smallは非推奨ではなかったはず。なんで無意味なspanなの?
emの反対で強調度を下げる要素が無いのだから、smallでいいかと。
>>190 初心者用質問スレなのに、なんでそんなに鼻息荒いの?必死杉w
198 :
166:03/12/30 19:39 ID:D3t19gir
166です。みなさんこんなに考えて下さって
ありがとうございます。
レイアウトは
>>176さんの仰るとおりです。
説明が足りませんでした。
みなさんのお答えを参考に色々試してみます。
ありがとうございました。
>>198 で、結局どうやって解決したの? 結果報告が無いと今後に生かせない。
>>193 small要素に関して。
このモジュールは、単純なプレゼンテーション関係の
マークアップのための要素、属性、最小内容モデルを定義する
XHTML1.1でもsmallは非推奨要素でないし、間違った使い方でもないと思う。
まぁStrictスレ行きだわなこれは。
201 :
166:03/12/30 20:54 ID:???
pxを%に変えてみました。勉強不足で、たびたび恐れ入ります。
>>201 横並びにするのはpositionでやったのかfloatでやったのか、はどうなんです?
うぜー粘着し寝
早めに答えてもらえませんか?
さもないと本当にあなたたちを無知だと見なしますよ。
見做せばええやん。見做したところで何か変わるとは思えないが。
↑冬将軍釣られまくり。
そもそも
>>204がいったい何の質問をしたといふのか。
日本語の喋れない奴は黙れ
質問です。
デフォルトスタイルシート言語の設定:
<meta http-equiv="Content-Style-Type" content="text/css">
をしなくても、タグ内のstyle属性の記述がIE6などのwebブラウザで有効なのは、
CSSの仕様ではなくブラウザの仕様によるものという理解は正しいですか?
>>211 書き方が悪かったせいか、思い違いなさってます。
仕様と実装を区別した上で、どっちの要因によるものかという質問の主旨です。
仕様書を見ますと、はっきりした記述が読み取れなかったので、どっちかなあと思ったんです。
IEやNNで使えるんだからそれでいいといえばそうですが。
とにかく
デフォルトスタイルシートの宣言なしでもタグ内でstyle属性使えることがあるのは事実ですよね。
厳格に学習していこうとする上でちょっと引っかかっただけです。
これテーブルの枠線が表示しなかったんですがどうしてですか?IE6です。
<html><head><title>a</title><style type="text/css">
table {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 400px;
border-width: 10px;
border-color: black;
}
div {
text-align: center;
}
</style></head><body><div><table><tr><td>a</td></tr></table></div></body></html>
>>214 「正かな遣い」で書いている人にいちいち反応するな。
218 :
昔の人:03/12/31 20:45 ID:???
>>215 枠線が表示“され”なかったのは、border-widthとborder-colorだけで
border-styleプロパティーを指定してないからではないでせうか。
初期値が「none」なんですね!勉強になりました。
ご丁寧にも文法の指摘までしていただいて。
221 :
215:03/12/31 21:04 ID:???
>>215 はいそうですね。初心者でした。
参考にします
222 :
215:03/12/31 21:05 ID:???
旧かな旧字使いはアポ!
↑あけまして、おめでたう。
アホばっかりだな!
文字の色の変え方を教えてください!
リンクは全部読みましたがわかりません!
旧字旧仮名遣い=ウヨ=木違い
>>226 ネタかな?
讀んでわからない人には、ここで説明してもわからないのではないかと思ふ。
質問です。
<div>でstyle="float:○○;"を使って、divの箱を左右に並べます。これ自体に問題はないのですが、
その中で<ol>を使ったリストがあるのですが、左と右で通し番号を付けたいのです。
1. ○○ 5. ○○
2. ○○ 6. ○○
3. ○○ 7. ○○
4. ○○ 8. ○○
と言った感じです。可能ですか?
(もしガイシュツだったらスマソ)
233 :
Name_Not_Found:04/01/03 05:05 ID:arsUX4ir
<div title="hogehoge">
<p><abbr title="Internet Explorer">IE</abbr> 5.5<br>
<kbd>Alt</kbd>キー</p>
</div>
簡略に書くとこのような状態なのですが、
abbr要素のスタイルが適用されません。
lintでもCSS検証でも問題なかったのですが、なぜなのでしょうか。
(読みこむCSSの指定をまちがえているわけでもありません)
ブラウザはIE5.5です。
ttp://www.remus.dti.ne.jp/~a-satomi/nikki/ ここでは反映されて表示されるのですが・・・。
少々わかりにくい書き方になったので訂正。
abbr要素だけは、通常のテキストと同様に表示されてしまいます。
いじっている途中のものを書くのもなんですが、
現在のスタイルはこんな状態になっています。
abbr {
cursor: help;
background-color: transparent;
font-style: normal;
border-width: 0px 0px 2px 0px;
border-style: dotted;
border-color: #333366;
}
>233
abbr要素はIEが非対応じゃなかったっけか。IE6でも。
マークアップとして不適当になるがacronym要素やspan要素で代用するしかなさげ。
>>233 そのサイトはJS使ってる。
JSをきってみ。
238 :
233:04/01/03 13:43 ID:???
いろいろ参考になりました。どうもありがとうございます。
IEの環境が早く整ってくれないことには、なかなか難しい問題ですね。
IEでないブラウザを使うような人のほとんどは
多少でもPCの知識を持っている人だと思われるので、
あまり<abbr>の恩恵がなさそうな気がします。
hr 要素の線の太さ(size)はCSSではどうやって変更するのですか?
>>240 デフォルトで線などないと思うんだけど。
>>242 なんとかできました。ありがとうございます。
そこのリンク思いっきりスルーしてました。次からは気をつけます。
244 :
230:04/01/03 15:55 ID:2EneXQof
>>231 ageですか。気をつけますー。
>>232 これでつ!でもOPだけってのは…
地道に普通に1. 2. って打ちますよ...(´З`)チェッ
ありがとうございました。
ここはスタイルシートの中身だけを取り扱うスレですか?
故あって、本文(BODY)の中でスタイルシートを定義したいのですが、
そんなことって許されるのでしょうか?
>>245 HTMLの話ではないかと。
ちなみにHTML4.01にあるのはstyle属性だけ。もしくはscript
list-item で
・△item
↑ここの隙間の長さを調整するのってどうやるんですか?
padding-left
>>249 liの中をdivでもpででも括って、それにmargin-leftでマイナス値、とか。
>>250 >>252 すいません、できればIEにも対応したいので…
>>251 試してみましたがダメでした(IE6)。
+長めの説
明文章
というのを綺麗に出力したいんですが、テーブル組まないと仕方ないですかね…
>>253 margin-leftでマイナス値、が駄目ならposition:relative;でleft:-1em;とか。
工夫しなさい。
255 :
Name_Not_Found:04/01/03 23:24 ID:9bXmXTAb
net shopやるに、strictでサイト作ろう
というのどうでしょか?PC初心者。
HPビルダーがいいとこ?
なぜにstrict?わからんす、すんまそん・・
わけわからん質問すな。strict HTMLスレッドへ行きなさい。
>>255
擬似クラスと擬似要素って名前がどうして分かれてるんですか?
要素とclassは別物だから。セレクタの優先度があるわけだし。
疑似クラス関連で質問です。今リンクをhoverでボックスハイライトで表示してるんだけれど
画像リンクがあったとして、カーソルをその画像に持っていくと下の方にうっすらとハイライト
が残ってしまうのです。画像リンク要素だけボックスハイライトを無効にする事って出来ます?
ボックスハイライトってナニ? 一般に通用する言葉で記述してくれないかな。
>>260 >画像リンク要素だけボックスハイライトを無効にする事って出来ます?
ボックスハイライトが何かは知らんが、FAQの
>>8を見れば解決する問題では。
>>261 通常ブラウザはリンクを表示する時は大抵アンダーラインで示すでしょ。それをa:hover疑似クラスを
使ってそのリンク表示をアンダーラインからリンク文字を別の色で覆う様に表示してるんだけれど、
<a herf="./hoge.html"><img src="hoge.jpg"></a>とした画像を使ったリンクがあったら、その画像
リンクの下の方にa:hoverがかかっているので画像(img要素)だけa:hoverを適用させない様にしたい
のでつ。border周りも弄ってみたけど駄目ですた。
説明が下手で申し訳ない_| ̄|○
リロードしたら答えが出てた
吊ってきます(´・ω・`)
説明がヘタって言うか・・・
脳内用語使いたがる人って、どうしてこうなんだろ
やっぱ駄目ですた・・・仕様書見てきます。お騒がせしますた_| ̄|○
>説明がヘタって言うか・・・
>脳内用語使いたがる人って、どうしてこうなんだろ
おーう、何とでも云ってくれ。ガンガン貶してくれ。他の人みたいに出来て当然な事が洩れには出来ないしな
>>263 >リンク表示をアンダーラインからリンク文字を別の色で覆う様に表示してるん
意味わからん。
具体的に、どんなスタイル指定をしたのか、CSSのソースを出してくれ。
でないと何をしようとして何で駄目だったのか見えないから、助言できない。
>>266
a:hover img の場合だけ、
a:hover が適用されないようにするという意味かな?
hover状態になっても、画像だけは
アンダーラインをつけたくないということでしょ。
余計なことをたくさん書いているから、肝心なことが伝わっていない。
いや、そもそも
a:hover img なんてものがあれば
自分も使ってみたいとは思うのだが・・・。
そういうのは無理なのかな。
過去に試したことがあるけれど、思い通りにはならなかった。
270 :
Name_Not_Found:04/01/04 04:45 ID:/bU6QBQM
<div class="aaaaa">
で囲った中のpとかaにだけ、囲われていないpやaと別のスタイルを適用したい場合、
.aaaaa p{ }とか
.aaaaa a{ }
とかって書けばいいんですか?
試してみればいいんじゃないですか?
>>266 > 他の人みたいに出来て当然な事が洩れには出来ないしな
出来ない、ってことと、自作の用語を使うことには関係が見受けられないんだけど。
>>266 ボックスハイライト→背景色のことかと解釈してみたが(もしかしたら文字色かもしれないが)、
それは単に藻前さんがハイライトとして使用しているというだけのこと。
表現方法わからなければ、
a:hoverにbackground-color(文字色ならcolor)を指定して…とかそのまんま書けばいいんだよ。
下手に言い換えようとするから他人に伝わらない。
子要素がimgの時のみa:hoverでの指定を適用したくないなら、classを使うとかしたら?
img:hover
>>274 他の人みたいに日本語を上手に使う事が出来ないので
>>277 なんなら英語で書いても良いよ。
語学力の問題ではなく、論理的に伝えたいことを伝える能力に欠如していることに気がつけ。
a:hover img {background-color: transparent !important}
266じゃないけど、a:hover img{〜}でうまく出来ないな。
画像の下にテキストに付けた色が数pxぐらいはみ出る。
これはブラウザ依存なのかな?
>279だけど、ソースさらす。なんかまずい?
<style type="text/css">
<!--
body{color:#000; background-color:#fff}
a:link {text-decoration:none;color:#000;background-color:#ccc;}
a.visited{text-decoration:none;color:#000;background-color:#ccc;}
a:hover{color:#fff;background-color:#f00;}
a:active{color:#fff;background-color:#00f;}
a:link img{text-decoration:none;color:#000;background-color:#ccc;}
a:visited img{text-decoration:none;color:#000;background-color:#ccc;}
a:hover img{color:#0f0;background-color:#0f0;}
a:active img{color:#fff;background-color:#00f;}
-->
</style>
</head>
<body>
<a href="x">画像だよ><img src="あーたら.jpg" alt="あーたら"></a>
</body>
border
>>280 そもそもaにボーダーが指定してあるので間に何が挟まってようが、
imgのボーダー消しても <a></a>間のボーダーは消えない。
もともと a imgにボーダーがかかってるわけではないので。
この質問頻出。
じゃ次スレはテンプレ追加でよろしく。
そんな殺生な・・・(・_・;)
280
>>282 > そもそもaにボーダーが指定してあるので
?
a の border-widthを0にすればいいってこと?、、、じゃないよな。。。
これって、消せるんすか?まじで。
ちなみに、
<body>
<a href="x">画像だよ><br>
<img src="あーたら.jpg" alt="あーたら"></a>
</body>
これで画像の下にはみ出るa:hoverの色は消えますけど、そういうことじゃないと思うんだな。。。
もしかして
>>286の言いたいのは、
>>280のソースで言うと、
hoverのとき画像の下に赤い部分があることを言いたいのかな?
inline-tableとかの実例載ったサイト教えて下さい
290 :
Name_Not_Found:04/01/05 09:49 ID:x3I3uJOw
テーブルの中の文字のサイズも一括で指定する方法はありますか?
どのようにすればいいのでしょうか。
ハァ…?
普段はどうやって指定しているのかを聞くのも怖いな
292 :
Name_Not_Found:04/01/05 11:04 ID:BTT/TPeg
CSSでlist-style-imageを使って箇条書きのマークを
自分でペイントで作ったgif画像にしようと思ったらちゃんと表示されませんでした(普通の黒丸になる)。
ところが、誰か他の人が作ったgif画像を指定したらちゃんと表示されました。
なぜでしょうか???
それはCSSの問題か・・・
>>290 table, th, td {font-size:100%;}
297 :
Name_Not_Found:04/01/05 13:07 ID:FQqSPchs
>>293自分もそう思いましたが今度は他のページでは正しく表示されていた画像を使ったら
やっぱり表示されなかったのです。
>>294URLはあっています。
なぜ?
ちなみにCSSは別ファイルにしてあって
ul {
list-style-image: url(list.gif)
}
list.gifはhtmlと同じディレクトリにあります。
もっと単純な部分でセミコロンが無いとかじゃね?
おい藻前ら!厨な質問だがCSSを外部ファイルで管理していて@ルールを記述してない香具師はいるかい?
文字コードを合わせててもやっぱ明示的に@charsetで指定した方がブラウザに優しいの?
教えて偉い人(・∀・)
302 :
300:04/01/05 15:30 ID:???
>>301 今までHTMLと外部CSSの文字コードをShift JISにしていて特に問題なかったし
いちいち@ルールを追加するのが面倒臭かったのもあるが、やっぱ追加した方が
いいのね。サンクスコ
286
>>287 そうっす。
>>289 > a:link imgにvertical-align:bottom;とでも指定すれば良いような。
> テキストのline-hightよりimgがでかけりゃ赤い部分は隠れるはず。
Mozillaでいけました。Safariはだめっす。IEは論外な状態です。
304 :
Name_Not_Found:04/01/05 21:16 ID:HzaXKBc2
303
>>306 > なんだIEってMacIEなのか。IE6ならちゃんと表示されるもの。
> 最初からOSとバージョンを明示してほしいね。
スマソ。こちらマカーOSX 10.2.6 でWinについてはわからないっす。
>289の方法で、画像の下のhoverの赤は、
Mozilla 1.2.1では、消える。
Safari 1.0(v85)、Opera 6.0で消えない。
IE 5.2では画像の下の赤が消えない上に、文字が緑になり文字背景の赤が画像の高さに沿って上に延びます。かなり変です。
>307の補足。
vertical-align:bottom;を、
a:link img、a:visited img、a:hover img、a:active img、全てに付けてみた。
そしたら、Mozilla 1.2.1、Safari 1.0(v85)、IE 5.2では、画像の下のhoverの赤が消えた。
Opera 6.0で消えない。
あ、、、a:link imgに付けるだけで>308と同じですね。
そして今更、>289を読み間違えてたことに気付いた。
_| ̄|○
311 :
Name_Not_Found:04/01/06 10:29 ID:rPfZ52To
批判を批判するのも自由、って言うか、お前らウザイ。xreaスレから出てくるな
xreaスレってどこ? あと、批判の批判ももちろん自由だが、批判を封じるのはよくない。
あー粘着ヴァカが住み着いちゃった
319 :
Name_Not_Found:04/01/07 11:32 ID:tH6uSX2A
div {float :left;}
div#none {clear : left;}
<body>
<h1>aaaa</h1>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
<div id="none">eee</div>
</body>
激しく適当だがこれで十分だろ。
あとはmarginとかやるよろし。
321 :
Name_Not_Found:04/01/07 11:51 ID:tH6uSX2A
できたあああぁぁぁ
ありがとうございました
>>320-321 駄目! floatさせる要素にはwidth指定が必須!
MacIEとかで表示が崩れるよ。
FAQにもあるんだから、見てよね。
あー、素で忘れてた
吊ってくる
324 :
Name_Not_Found:04/01/07 22:06 ID:z3dcz5XN
指定した場所だけをCSSを無効にしたいのですが、どのようにすればいいでしょうか?
>>324 そこだけクラス名与えてやって、そのクラスだけ「デフォのスタイル」を記述してやったらどうかね?
326 :
324:04/01/07 23:10 ID:???
>>325 初心者なんで、おっしゃってることを理解するのが難しいですが、そのヒントを元にネットで答えを探してみます。
ありがとうございました。
>>326 こんな感じ。
em{
font-size : 3em;
font-weight : normal;
}
.foo{
font-size : 1em;
font-weight : bold;
}
em要素は3emで表示。でも、クラス名fooのem要素は太字でレンダリング、みたいな。
>>326 id と class ぐらいはわからないの?
解らないのなら基本的なことを勉強すべし
330 :
324:04/01/08 00:14 ID:???
>>328 参考になります。
スタイルシートの基礎を勉強してきます。。
ありがとうございました。
331 :
324:04/01/08 00:36 ID:???
334 :
324:04/01/08 00:53 ID:???
助かりました。
335 :
289:04/01/08 01:32 ID:???
今更だが、補足。
WindowsのIE5.5/6(標準/互換)にて確認。
vertical-align:bottomを行で一番heightが高い要素に指定すると、
vertical-align:topを指定したようなレイアウトになってしまう。
詳細はバグ辞典スレに報告しとく。
>>307の問題(文字背景が画像の高さまで延びる)については、どうも
規格解釈の範囲内のような気もする。
http://www.y-adagio.com/public/standards/tr_css2/visudet.html#q22 での"リーディング"が行内ボックスの中と外どちらに挿入されるか
明確には定められてないみたいだし…
…って、原文を確認したら
> User agents center glyphs vertically in an inline box,
> adding half-leading on the top and bottom.
か?これ"挿入"より素直に"追加"と訳した方が適切な気がするなぁ。
だとすると、行内ボックスが拡張されるIEの実装は駄目っぽいかも。
336 :
289:04/01/08 03:02 ID:???
補足の補足。
>>280の例に限った話なら、bottomの代わりにtext-bottomで対応可能。
337 :
Name_Not_Found:04/01/08 22:59 ID:205CjgYs
1箇所だけaのhoverスタイルを変更したいのですが、どうしたら良いでしょうか?
340 :
337:04/01/08 23:43 ID:205CjgYs
>>340 a#mage:hover{hogehoge}
-----------
<a href="hoge" id="mage">変えたいところ</a>
何で341みたいなんが出てくるのかが解らない
343 :
Name_Not_Found:04/01/09 08:54 ID:uu1TycfK
すみません質問なんですけどよろしいですか?
http://internet.watch.impress.co.jp/ 例えばこういうページでリンクの色を変えて表示するために
a:link{color:#0000FF;}
a:visited{color:#800080;}
a:hover{color:#FF0000;}
ってやったんですけど、
左側の
■ ニュース
■ 特別企画
■ イベントレポート
■ リンク集
■ ダイジェストニュース
とかの色が変わんないんですよ。
それでちょっと調べてみたんですけど、タグに依存しないクラスっていうのになっていると思うんですが、
それをどうにかして上のが適応するようにできないですか?
345 :
Name_Not_Found:04/01/09 09:03 ID:uu1TycfK
ちなみにDonutpでCSS使ってます。
346 :
Name_Not_Found:04/01/09 09:05 ID:uu1TycfK
<STYLE type="text/css">
<!--
.indextext{ font-size: 9pt}
A { TEXT-DECORATION: none }
A:hover { TEXT-DECORATION: underline }
--></STYLE>
スタイルシートに関してど素人なんですが
たぶんこの部分が原因なんだろうなぁという所まではいったんですが。
なんとなく事情は解ったんだが、とにかくお前が今一体何をしようとしているかを
客観的に説明してくれ
ユーザースタイルシートがキーワードだ
348 :
Name_Not_Found:04/01/09 09:21 ID:uu1TycfK
http://internet.watch.impress.co.jp/ このページをユーザースタイルシートで
a:link{color:#0000FF;}
a:visited{color:#800080;}
a:hover{color:#FF0000;}
にしたんですけど。
■ ニュース
■ 特別企画
■ イベントレポート
■ リンク集
■ ダイジェストニュース
■ 〜2003年7月記事一覧
<!-- 今月のバックナンバー -->
<TR>
<TD valign="top" width="16" class="text"><FONT color="#000000" size="2" class="indextext">■</FONT></TD>
<TD class="text" width="144"><a href="
http://internet.watch.impress.co.jp/cda/news_backnumber/"><font color="#000000" size="2" class="indextext">ニュース</FONT></A></TD>
</TR>
<!-- /今月のバックナンバー -->
この部分が変わらないのでこの部分も変わるようにしたいということです。
無理です
classじゃなくて、<font>のせいです
文句はこんな不細工なhtml書いた本人に言ってください
350 :
Name_Not_Found:04/01/09 09:33 ID:uu1TycfK
<font color="#000000" size="2" class="indextext">ニュース</FONT>
この部分のせいで、
これにユーザースタイルシートを適応させる方法は無いということですか?
>348
あーと、擬似クラスと"{"の間に一つ以上の空白文字が無いと認識しないIE様のバグがあるので、
a:link {〜〜} 以下同
のようにするとよろしかろ。
んで、
font { color: inherit; font-size: inherit; }
で解決しないかな。試してないから判らんけど。
とりあえず説明すると
ユーザースタイルシートで<a>の色を変更したが、直後に<font>で指定した色を上塗りされている
んだよ
font.indextext{color:#0000FF;}
を追加しとけ、擬似クラスは効かんが。
354 :
Name_Not_Found:04/01/09 09:53 ID:uu1TycfK
>>353 それだと訪問済みのリンクでも#0000FFこの色のままですよね?
だから擬似クラス効かんと言うただろが
解らん言葉があったらちょっとは調べろ
最終的にはそのサイト全部ローカルに保存してソース書き直したら
思い通りの表示がされるようになるわ
もしくは管理人にメールでも出せ、もっとまともなHTML書けってな
356 :
Name_Not_Found:04/01/09 10:00 ID:uu1TycfK
ども
357 :
Name_Not_Found:04/01/09 23:19 ID:CjU6QCnH
>>357 z-indexにマイナスの値を指定してるとかはないかね
>>357 >ネスケ
見たところ火の鳥ではIEと同じに表示されているが?
ネスケってN4のことじゃないよね。まさか。
と言うか、また人のサイトの話か
361 :
357:04/01/10 00:08 ID:xoFjF0/W
>>359 Netscape 7.1で、インストール後のデフォ設定で確認しましたが
widthとpadding、top、leftが無視された状態で表示されました。
362 :
359:04/01/10 00:34 ID:???
あ、ごめん。画像と言うのを勘違いしてた。確かに火の鳥では表示が違うわな。
363 :
359:04/01/10 00:47 ID:???
どうやら、ソースを見るとCSS部分に全角スペーつが紛れ込んでるね。
それを削除するとちゃんと重なって表示されるよ。(微妙な違いはあるけど)
MozillaやOperaはその辺厳密だから。
結局は作者のミスということで。
364 :
359:04/01/10 00:48 ID:???
>全角スペーつが→全角スペースが
_| ̄|○
365 :
357:04/01/10 00:54 ID:xoFjF0/W
きょうは、CSSでレイアウトの調整をやってて、もうCSSのバカ!と叫びたくなりました。
テーブルに流れちゃいそうです。
あと、質問で恐縮ですが、
CSSとスタイルって使い分けて使う言葉なんでしょうか?
アホな質問だったらごめんなさい。
>>366 CSS以前にHTMLが馬鹿なんじゃないか?
368 :
Name_Not_Found:04/01/10 01:43 ID:Y+6UwXZJ
テーブルのセルとセルの間隔をピタッとやりたいのですが、スタイルシートですか?
369 :
Name_Not_Found:04/01/10 01:46 ID:F7F8NJzc
1
2
3
4
となっているブロック要素を
1 2
3 4
としたいのですが、どうすればいいのでしょうか?
>>369 フロートで段組だな。
1,2,3,4にfloat:left;
3にclear:left;
幅の指定忘れんなよ
371 :
369:04/01/10 02:13 ID:???
>>370 4が右にいかなくて悩んでました(つд`)
モーレツに感謝します!
ありがd
文章中のアルファベットにのみ違うフォントを設定したいんだけど、
CSSで可能ですか?アルファベットの部分をspanとかで囲わないと無理?
>>372 font-family:英語フォント名,'日本語フォント名';
でいけると思う。
ちなみに日本語のフォント名は''で囲まないといけません。
それじゃぁ、アルファベットにだけMS明朝を指定したい時はどうするんだっ!
って言おうとしたけど質問者が納得したようなのでそれで
>>375 確かに。日本語も英語も用意されている場合には、
どうしたら良いんだろうか。
まあ、どうしようもなさそうだが。
>>372 lang[en]というセレクタがあるぜ。
IEが実装してないけどな。
>377
それって例えば<p lang="en"></p>の範囲でしか効かないんじゃ?
<p>日本語とEnglishの混じった文章</p>で指定しても意図通りに効くの?
>>378 正しい構文を書いてたら必然的に
<p>日本語と<span lang="en">English</span>の混じった文章</p>
になるだろ。おまいは日本語とEnglishの混じった文章なのに言語指定していないのか?
<html lang="ja">とやってれば、Englishという文字列すら「日本語です」と宣言してることになるんだぞ。
>>378 <p lang="ja">日本語<span lang="en">English</span>日本語</p>
>>380 (´-`).。oO(html要素のlang指定はどうなってるんだろう……
英語どうこうではなくて、アルファベットの話だと思うんだが。
383 :
379:04/01/10 11:26 ID:???
>>382 なるほど。薄々そんな気がしてきてたところだったんだ。
>>378 ごめん。lang指定をする必要がない通常の英字文字列には適応されない。
なんでつっかかる書き方しちゃったんだろ。ほんとごめんね。
日本人って「アルファベット=ラテン文字」と思ってる香具師が多いね。
アルファベットってのは広義には、ひとつひとつの文字が原則としてひとつの音素をあらわす表音文字の体系の総称のことを指すんだけど。例えばヘブライ文字はラテン文字ではないけれど、アルファベットであるわけだが。
「アルファベット=英語で用いる文字」と思ってる香具師も多いだろうな。
386 :
378:04/01/10 11:59 ID:???
いや漏れもEnglishじゃなくてAlphabetと書けば良かったなと思ってたゴメン(´Д`;)
答えありがとう
多少面倒でもemなりで括る方が良いかな。
良く考えたらフォントを変えたい→注目を引きたいって事だし
> 良く考えたらフォントを変えたい→注目を引きたいって事だし
誰もそんなこと言ってないけど。
>>387 言ってなくてもそういうことになるだろうなぁ。「英語だけ違うフォントに」は強調でしょ。
だったら、
em lang[en]{
font-weight : normal;
font-family : ○○;
}
といった感じが適切かな。
>>388 MS Word のように、スタイルに日本語フォントと英字フォントを
指定できて、スタイルを設定した範囲に自動で適用されるような
イメージもあるかもしれない。
それだと強調ではなく文章の見栄え(≒視認性)の問題。
391 :
390:04/01/10 12:47 ID:???
補足。
日本語フォントと英字フォント
→日本語用フォントと英字用フォント
392 :
372:04/01/10 12:54 ID:???
> 言ってなくてもそういうことになるだろうなぁ。
> 「英語だけ違うフォントに」は強調でしょ。
>>388はとんだ道化師だな。
>>381 (´-`).。oO(日本語と英語しか言語を知らないのかな……
ああいや、注目を引きたいってのは漏れの場合の話ね
何度も舌足らずで混乱させてしまって申し訳無い(´Д`;)
日光浴でもしてきまつ…
>>396 バグだろ。なら無視だ無視。
IEのことなんかいちいち気にせんで良し。
駄洒落カヨ
>395
違う言語があるからこそ、「何語使ってる人を対象にレクチャーしてんの?」と言ってるんだよ。
存在してないと思ってたらhtml要素のlang属性を気にしたりすまい。
もしかして、「どっちかが重複してる」と突っ込んだと思われてるのかもしれないけれど、それなら納得だな。
>390
>
>>388 >
> MS Word のように、スタイルに日本語フォントと英字フォントを
> 指定できて、スタイルを設定した範囲に自動で適用されるような
> イメージもあるかもしれない。
>
> それだと強調ではなく文章の見栄え(≒視認性)の問題。
>392
> 別に強調したかった訳では在りません(w
強調の意味を調べてから発言してね。
>393
>
>>388はとんだ道化師だな。
気が早いね。白痴か?
肉まん
豚まんだろ
別に何まんでもいいよ(w
一言しか書けない人は多分なんにも理解できてないから「多数に見える方」に賛同してるだけだろうな。
ふふ
412 :
400:04/01/10 16:47 ID:???
>>403 ども、調べが足りませんでしたね…スイマセン
参考リンクの欄の解説にSTD2やRFC 1700等の言葉があったので、見つけてはGoogleをしていましたが
探し方悪かったですね
Wingdingsなんて使っちゃだめ
Windows以外の環境の事も考えろよ。
>>413 生成内容はurl()関数で画像を埋め込むこともできます。
>413
そのページ、ネスケで正常に表示されないとか言ってくるけど
ネスケは正しくてIEが間違ってるんだけどなぁ
418 :
Name_Not_Found:04/01/10 18:53 ID:57mcAI2b
>>417 そうそう…ネスケ=○ OP=○ IE=逝ってよし
(ことcontentに関しては)
何とかせいよゲイシ
421 :
413:04/01/10 20:44 ID:???
ご教授ありがとうございます
実際、まぁ、そうなのですが…
画像を使った場合、色とか変更かけにくいのもそうですが
何より拡大縮小の融通が利かないので、ユーザー側の文字サイズの変更に付いていけません
SVGとか使えればよいのでしょうが、これもMozillaの対応を暫く待つ状態なので
今やるなら記号文字だと感じているのです
HTMLに直接書き込む人は、装飾用にガンガン特殊記号を使っているわけで、せめて
h2 {
content:"&hearts";
}
とかするとハートマークが出ないかな…とかやってみれば、ガーンな結末になってしまうわけで…
気持ちだけでも分かっていただければ…
422 :
413:04/01/10 20:47 ID:???
あ、記号が変換表示されて、ハートマーク出ていますが
content"♥"
です、2chでも使えるのですね、新発見でちょっと感動です
ハートマークなら使えるぞ。
h2:before {
content: "\2665";
}
424 :
413:04/01/10 22:06 ID:???
>>423 もしかしてコレは…、私のノータリンと言うことでファイナルアンサーでしょうか…
今、検証してみてちょっと感動しています
ありがとうございました
他にも使えるコード無いか漁ってきます
425 :
Name_Not_Found:04/01/10 22:36 ID:hGiNNDcD
すみません質問です
dtにfloat:leftを設定してddを横に並べたりするとき、
dt{width:10em;}だったら、floatするddはmargin-left:10em;とか
付けなければいけないのでしょうか?marginをつけないと、floatするddが
dtの領域に食い込むのです。
┌───┰━┯━━━┓
│ dt ┃ │ dd . ┃
└───┸━┷━━━┛
わかりづらいですがこんなことになってます。
IEではなりませんがmozillaでは食い込みます。これは回避できないでしょうか?
-----
<dl>
<dt style="float:left;width:5em;border:1px solid red;">aa</dt>
<dd style="width:5em;border:1px solid blue;">bb</dd>
</dl>
>>427 つまり、floatする要素にはmarginが必要ということでいいのでしょうか?
>>428 そういうこと。むしろ食い込むようにレイアウトできるのがfloatの役割。
>>429-430 わかりました、marginつけるようにします。
説明どうもありがとうございました。
>>425 dtにclear : left;
ddにfloat : left;
を追加してやればいけるよ。
434 :
432:04/01/11 02:00 ID:???
あ、うそついちゃった。ごめん。
435 :
432:04/01/11 02:04 ID:???
ごめん。うそじゃなかった。
dd自体をfloartしてやることで、領域が干渉しあわないボックスが生成されるはず。
なぜベストを尽くさないのか
437 :
432:04/01/11 02:30 ID:???
438 :
Name_Not_Found:04/01/11 02:33 ID:djWYaAuk
多分CSSだと思うので質問させてください。
http://www.macromedia.com/jp/ マクロメディアのサイトで、製品やカスタマーサービスにマウスを乗せると色が変わります。
画像ではないようなのですが、このようにするのはどうすればいいのでしょうか?
板違いだったらすみません。
よろしくお願いします。
>>438の解説サイトで:hover疑似クラスについて学習しよう。
442 :
Name_Not_Found:04/01/11 08:08 ID:s9tXhxwE
443 :
Name_Not_Found:04/01/11 08:12 ID:s9tXhxwE
あと<p></p>を利用した際
下に一定の空間ができるのも
調整できませんか?
445 :
442:04/01/11 09:37 ID:s9tXhxwE
リンク先読んでも解決できなかったのですが・・・・・
じゃぁ産まれてきた事を後悔しながら味噌汁飲んで窒息死しろ
447 :
442:04/01/11 09:56 ID:s9tXhxwE
ちょっとぐらいヒントくれてもいいのに。
やっぱWEB関連は閉鎖的な人が多いよな。
友達できないぞ♪
はいはい逆切れ厨は放置で
449 :
442:04/01/11 09:59 ID:s9tXhxwE
ヒントだけでもください。
おながいします。
>>447 何をどう試して何がわからないか書かなきゃアドバイスしようもない。
そっけない返答がつくのは質問者側に問題がある場合がほとんど。
他人のせいにするのは簡単だが、それではいつまで経っても進歩がない。
451 :
442:04/01/11 10:02 ID:s9tXhxwE
あ、すいません。
質問の仕方が悪かったということですかよくわかりました。
すいません。
良かったですね、じゃぁ次の質問どうぞ
454 :
442:04/01/11 10:06 ID:s9tXhxwE
<ul>
<li></li>
</ul>
このタグや定義リストを使用して表をすると
題名
−−−−−−
−−−−−−
−−−−−−
このように必ずリスト部分の左側にスペース空くのですが
このスペースの幅をなくす、もしくは調整するには
どのような方法が適切なのでしょうか?
455 :
442:04/01/11 10:06 ID:s9tXhxwE
>>452 煽るだけならこのスレに必要ないですよ。
まあ馬鹿な質問者もいらんがな・・・
460 :
442:04/01/11 10:11 ID:s9tXhxwE
余計な煽りはスレの浪費なのでやめてください。
荒らしとして報告しますよ?
釣りだな
463 :
442:04/01/11 10:14 ID:s9tXhxwE
釣りかどうかは質問にお答えいただければ
わかるはずです。
464 :
442:04/01/11 10:17 ID:s9tXhxwE
あ、もしかして定義ファイルを例として
dd{margin : 3px;}
という風にすればいいんでしょうか?
一応質問に対する回答を書いていたんだが、
書き込んだ瞬間「釣れた」と言われたんじゃかなわないので
書き込むの止めました。
釣れたw
467 :
442:04/01/11 10:20 ID:s9tXhxwE
釣れたとかしょうもないこと絶対いいません。
お願いします教えてください。
じゃぁ次の質問どうぞ
<ul>
<li></li>
</ul>
このタグや定義リストを使用して表をすると
題名
−−−−−−
−−−−−−
−−−−−−
このように必ずリスト部分の左側にスペース空くのですが
このスペースの幅をなくす、もしくは調整するには
どのような方法が適切なのでしょうか?
ID:s9tXhxwE
>>442, 443, 445, 447, 449, 451, 454, 455, 460, 463, 464, 467
あなたは規定の書き込み数を超えて書き込みをしています。
もうこれ以上質問レスをしても答えることはありません。
どうしても解決したい問題であれば、
>>4でリストやmargin、paddingなどを勉強してください
471 :
442:04/01/11 10:34 ID:s9tXhxwE
わかりました。
ありがとうございました。
権威に弱いな
皆さんhref属性のあるアンカーテキストの色は何色にしてますか?
今色々試してるんだけれど、閲覧者とって優しい色(読みやすい色)ってどんなのだろう?
色の選択って結構難しいのね
迷ったらデフォルト。青に下線が一番わかりやすい。
>>473
黒地に青いリンクとかは止めて欲しいけどな。
>>473 未リンク色をリンク済み色より目立つようにしてる。
背景が白とかの場合は未リンクの文字色の方を濃くするとか。
あと下線は消さないでほしいな
未リンク……? 「訪問済み(visited)」のことか。
a:linkなのに未リンクとはこれ如何に。
俺は下線消してる。
それでリンクだって訪問者にもはっきりわかるの?
>>479
メニューとかの、明らかにリンクってところは、下線消すこともあるな。
文章中とかは消さないようにしてる。
482 :
479:04/01/11 14:34 ID:???
リンクの文字色は変えてる。リンク以外で文字色は変えていない。
まぁそれ以前に………訪問者ひとりもいないから……大丈夫さ。
下線が消されてても、いざとなったらCSSOFFにすればわかるしな。
>479
下線付いてないと、うっかりクリックしちゃったりしてウザいのでやめれ
>481
できる限り下線消すのはやめれ
下線が嫌いな人はUAの機能で消すはず。
サイト作成者側がそこを変更するのは閲覧者にとっては
迷惑なことが多い。
>>485 ユーザサイドスタイルシートとか使えばいいのにな。
そのうちなんでもUAで(略って議論になりそうだな。
ここはCSS質問スレであって、アクセッシビリティすれ出はありませんが何か?
>>488 空手道場は倫理を教える場ではないが、「悪用しちゃダメ」と教えるぞ。
ここが無責任に教えっぱなしのスレだと思い込んでるお前が教えっぱなしにしてれば済む話だ。
ほんま例え話好きだよな
誰か質問しろよ
いがみあいはやめたまえ。まったく…。
CSSでフレームの境界線消すことはできますか?
CSSを使わずとも出来る事を、何故CSSでやろうとする?
フレームやめろというレスが付く予感↓
>>500 フレームセットDTD使ってたら問題ないだろ。
無知なくせに発言するなよ鬱陶しい。
505 :
500:04/01/11 23:19 ID:???
>>503 framesetDTD宣言した上でフレーム使ってますが何か?
506 :
Name_Not_Found:04/01/11 23:22 ID:s9tXhxwE
>>504 <frameset cols="*,*" frameborder="0" border="0">
で枠線消したのですが4.01の形式では使用は薦められません
といわれますた。
>>505 だから問題ない、っつってんの。白痴か?
>>506 lintの結果をまんまコピペして。該当部分ね。
そんなにカリカリするなよ
<frameset cols="230,*" title="パチうぇぶの分割比率">
<frame src="menu.html" name="menu" frameborder="0" title="パチうぇぶメニューページ">
<frame src="main.html" name="main" title="パチうぇぶのメインページ">
<noframes>
あ、frameborderのみの指定にすればいけました。
参考書にはframeborderとborder両方指定するように
とかいてたんですがframeborderの指定のみで大丈夫なんですかね?
512 :
511:04/01/11 23:44 ID:???
でもやっぱり境界線消えないですわ・・・・・・・
514 :
511:04/01/11 23:57 ID:???
>>513 そうですね。
でも、結果的にボーダー消えてないので・・・・・・・
515 :
511:04/01/12 00:01 ID:UCJzdsB5
・・・・・すいません!!!
入れる場所間違えてました、消えました。
参考書のborder="0"も入れろというのは結局
なんだったのでしょうか?・・・・・・
意味ないのかな?
フレーム使ってないのであやふやな記憶ですまんが、
NNとIEでは境界線を消すのに有効な属性が異なると思ったよ。
borderはNNのみで有効な属性かと。(IEで見てもわからない)
なんにしてもCSSじゃないから厳密にはスレ違いだわな(オレは構わんけど)
517 :
442:04/01/12 00:15 ID:???
すいませんでした。
勘違い甚だしいですね。
以後気をつけます。
>>516 あ〜、そうなのですか。
それをしちゃうと採点ソフトに指摘されちゃうということは
どの道つかえないですよね。
ありがとうございました。
>>516 禿胴
フレームなどの表示はブラウザに依存する「ブラウザの仕様」です。
>>518 そういう問題じゃなくて、「HTMLの問題」だから「CSSのスレ」ではスレ違い、って話だろ。
HTMLとかCSSの本ってロクな本ないからあまり信用しない方がいいぞ
492 名前:Name_Not_Found[sage] 投稿日:04/01/11 21:42 ID:???
誰か質問しろよ
494 名前:Name_Not_Found[sage] 投稿日:04/01/11 21:53 ID:???
>>492 お前が質問すればいいだろ
495 名前:Name_Not_Found[sage] 投稿日:04/01/11 21:56 ID:???
>>494 なんだとコラ
お前は黙ってろよ
お前ら、仲いいな。
俺だけは信用してくれ
524 :
Name_Not_Found:04/01/12 03:43 ID:UCJzdsB5
>>524 <div><img src="table.gif"></div>
あと、ネスケ6とかOpera6とかも気にするなら
.menu_table { margin:auto; }
を追加する。
526 :
524:04/01/12 07:02 ID:???
おお!!すごい、ありがとうございます。
これはどういう仕組みでこうなるのかもしよければ
後学のために教えていただけませんか?
自分で調べて学ぼうって気はないのかよ・・・
528 :
525:04/01/12 07:23 ID:???
す、すいません。
自分で原因調べてみます。
本当にありがとうございました。
なあなあ、ちと気になったんだが、
本当は「すいません」じゃなくて
「すみません」が正しいんだよな?
心底どうでもいい。
“済みません”が正解。
>>532 すいません
>(連語)
>〔「すみません」の転〕⇒すみません
三省堂提供「大辞林 第二版」より
正解と言い切れるもんじゃないね。
は?
535 :
山瀬:04/01/12 09:45 ID:???
すびばせん
連語て何だ?
よく分からんが、辞書に載ってるなら、
“済みません”が転じて“すいません”になったとは言え、
“すいません”も日本語として認められているということか?
すんまそんは?
いい加減板違い
>>536 > “すいません”も日本語として認められているということか?
そゆことだね。
CSS厨はほんと粘着でスレ違い板違いの議論が好きなんだね
>>540 CSSと無関係な話をしてるんだからCSS厨とは呼べないだろ。白痴か?
誰か質問しろよ
おまいら
ほんと柔軟性ないな。WWWスレ全般きもいマニュアル厨だらけ
お前らのセックスも何かのマニュアル通りなんだろうな。 あはは きもっ
>>546 俺の最初のマニュアルは週刊宝石でした。
君達そろそろ気づけよ
君達は一冊の仕様書に基づいてやってるから行きつく先は皆同じ、ただ微妙な違いをつつき合ってるだけなんだよね。くだらねーよ
Webなんて見れればよし。ビルダーで作ろうがソースが適当でも重くても人気があるサイトは人が集まる
CSSでデザインしたからって100万HITするわけじゃし、それならテーブルで作っても同じ。
何の為にWeb作ってんのかな?
結局、君達はどうでもいい事で時間つかってるだけなんだよね
ここに来て自分に必要な事だけ抜いていってる人の方がよっぽど賢いよ。
※ 負け犬はよそへ ※
a {
border-style : solid;
border-color : #f00;
}
a:link {
border : 0;
margin : 1px;
}
a:visited {
border : 0;
margin : 1px;
}
a:hover {
border : 1px;
margin : 0;
}
a:action {
border : 1px;
margin : 0;
}
このCSSに対して、
<p>
<a href="#">例示アンカー</a>
</p>
を置いて、この上にマウスポインタを置くと、
リンクの位置がずれるのは既出のバグだと思うんですが、
これの対処法が見つかりません。どうしたらいいのでしょうか
バグと言うか、記述どうりの動作だと思うが
ズレるのが嫌ならmarginとborderの値を全部0にすれば良い
>>554 Hover時に回りをボーダーで囲んで、
それ以外は標準リンクスタイル、てことがしたいんですが・・・
諦めろ、って事ですかね
ま、しゃーないか
marginでなくpaddingを使えば解決する。
>>555 a { border-style : solid; border-width : 1px;}
a:link { border-color: transparent; }
a:visited { border-color: transparent; }
a:hover { border-color: red; }
a:active { border-color: red; }
558 :
Name_Not_Found:04/01/12 18:02 ID:WRlFOPlP
アドバイスお願いします。
1.「トップ」「リンク」「自己紹介」…というようにリンク先を横並びに表示
2.リンク先を横並びにして、背景色をリンク先ごとに替える
3.背景色の幅を統一する
4.一列に並んだリンク先をまとめて画面中央に表示
を作りたいと思っています。
.toplink{margin-left:auto;margin-right:auto;margin-bottom:5px;width:100%;}
.top{float:left;background-color:#99FF99;width:6em}
.link{float:left;background-color:#CCFFFF;width:6em}
.shoukai {float:left;background-color:#CC99FF;width:6em}
<div class="toplink">
<div class="top"><a href="./top.html">top</a></div>
<div class="link"><a href="./link.html">リンク</a></div>
<div class="shoukai"><a href="./shoukai.html">自己紹介</a></div>
</div>
としてみました。1〜3までは希望通りの表示になったのですが、
4.が表示できません。
一列まとめてセンタリングするにはどのようにしたらいいのでしょうか。
お前にとってdivは何だ、言ってみろ
>>558 >.toplink{margin-left:auto;margin-right:auto;margin-bottom:5px;width:100%;}
を
.toplink{margin-left:auto;margin-right:auto;margin-bottom:5px;width:18em;}
煮汁!
>>556 同じ動作しかしませんでした
>>557 IEだと(ネスケ等他UA未確認)borderのTransparent指定は#000になってしまうんです
レスありがとうございます。
ここで解決しなければ無理、と心得ているので、
大人しく引っ込みます。
まぁいたしかたないのでtext-decoration : overline underline;
でこらえておきます。
>>561 アホか、a:linkのボーダー色とbodyの背景色を揃えたらそれで良いだけだろ
563 :
558:04/01/12 18:16 ID:???
18emにしたら中央にできました!ありがとうございました。
この18は指定したwidht*指定した個数なんですね。
自分の判る範囲で考えてやったことなんですが、>558に
書いたような記述のしかたって間違っているんでしょうか?
TABLE { empty-cells: show; }
を試しても空白セルの枠線が表示されないんですが
どうしてなんでしょうか?(IE6)
>>567 たんなるバグじゃね?
tableまわりのCSSはIE、NNともにバグが多いからテンプレサイトで調べた方がいいと思う。
>>567 IEは empty-cells 非対応です。
空セルを
<td> </td>
とするか、これじゃあ構造を表してないと思うなら、
<td><span style="display: none">(なし)</span> </td>
などとしよう。
>>570 うわぁ、2ch は実体参照がそのままになるのか。じゃあ、
<td> </td>
と書くと見えるのかな?
>>562 「全てのアンカーの背景色が必ずしも一定でない」状況です。
Transparentを試した理由はそこにあります。
>>566 >>556,
>>561 どうやらだめっぽいので諦めました。
仕様と言うことで・・・・
ありがとうございました
>572
(´д`)
a {
margin : 1px; /*←ここ*/
border-style : solid;
border-color : #f00;
}
これで出来るだろが。
全然読んで無いのバレバレ。勝手に仕様にするな。
自ら創意工夫を行おうと言う気が一切無いものがCSSを使いこなすのは難しい
>>553 動的な疑似クラスによってスタイルが変化しても、
ボックスの幅(box-width)が変動しないように、
マージンやパディングを調整すればよいのだが、
そこまで頭が回らないものなのかと思った。
「リンクの位置がずれる」という現象からどうして
『なぜそうなるのか』を自分で考察できないのか。
“UA のバグ”なのか“仕様”なのか“自分のミス”なのか
碌に調べもせず考察もせず『何々ができません』と質問すれば、
答えがかえって来ると思っている初心者の態度には反吐が出る。
もっと頭を使って考えろ。調べろ。仕様書よめ。文法チェックしろ。<初心者
>>575 > “UA のバグ”なのか“仕様”なのか“自分のミス”なのか
> 碌に調べもせず考察もせず『何々ができません』と質問すれば、
碌に調べもせず考察もせず『CSS2の仕様がクソ』『IEの実装がクソ』とかいうやつも多いよな。
※ 議論はよそで ※
578 :
Name_Not_Found:04/01/13 15:43 ID:/vM4CVUh
ネスケ4.xでCSSを読み込ませない方法として
media指定のバグを利用するというのがありますが
CSSファイルをルートじゃなくCSSフォルダに入れて
それを相対パスの指定では読み込まれないバグを利用するってのもありですか?
他のブラウザで何か不具合とか出ます?
相対パスでも読むだろう? ネスケ4
>>573 はぁ?
a {
padding : 1px;
}
a:hover{
padding : 0px;
border : 1px solid #f00;
}
hover時のborder-widthプロパティ値+paddingプロパティ値 = 通常時のpaddingプロパティ値
になればいいわけだろ。
>580
文中の"padding"を全部"margin"に変えても全く問題無いのだが。
元の>553がmarginだったからmarginにしただけ。
もうちょっと考えてくれな。
583 :
567:04/01/13 16:48 ID:???
584 :
578:04/01/13 18:07 ID:???
いままでリンクに下線をつけていなかったのですが、
>473からを読んで、borderをつけてみることにしました。
a:link {
color: blue;
text-decoration: none;
border-width: 0px 0px 1px 0px;
border-style: dashed;
border-color: blue;
}
a:visited {
color: red;
text-decoration: none;
border-width: 0px 0px 1px 0px;
border-style: dashed;
border-color: red;
}
Mozilla Firebird 0.7 で表示させたとき、
a:visited の color が a:link の color になってしまいます。
border-color も同様なのですが、これはバグなのでしょうか?
なお、IE5.5では正常に表示されました。
>553 a:action → a:active
>>585 > text-decoration: none;
> border-width: 0px 0px 1px 0px;
質問とは関係ないが、この指定の仕方の意味が知りたい。
>>585 意味って言うか、書き方じゃないの。個人の。
>585
586がものすごくヒントくれてる
CSSをも一度きちんと理解、そしてチェック
>>585 コピペして試してみたところ、 Mozilla Firebird 0.6.1 では正常に表示されていました。
バグなのかどうか、僕ではなんとも言えません。
>>588 >>586はなぜ text-decoration ではなくて border を用いて下線を引いているのかについて尋ねているだけの様な。
僕がヒントに気付かない無知な人なだけかもしれませんが(´Д⊂
>>585 Mozilla Firebird 0.7でみたけど、ちゃんと表示されてるぞ?
訪問済みのリンクでテストとかしてないだろうな。
592 :
585:04/01/13 20:20 ID:???
text-decoration では破線が使えないので、
border を使ってみました。
こういう使い方は strict ではないのだろうかと
疑問には思っているのですが、
まだいろいろテストしているところなので
text-decoration に変更するかもしれません。
ローカルの .html (自分で書いたもの)を
IE と Firebird で開いたとき、前述の結果になりました。
lint や CSS 検証でも、とくに問題はありませんでした。
* {-moz-box-sizing: border-box;}
これだけは警告がでましたが・・・。
ttp://www.fromdfj.net/html/border2.html
>>592 >>591さんによれば 0.7 でも正常に表示されたようですし、
CSS中の、
>>585でない箇所の記述に問題がある (意図に反する指定をしている) としか思えません。
>こういう使い方は strict ではないのだろうかと
>疑問には思っているのですが、
要はリンクがリンクであるという事が閲覧者に伝わればいいわけですから、
下線を引くのためにどちらの方法を用いても構わないと思います。
CSSにstrictもへったくれもないと思った。
猫も杓子もstrictだな
適切なマークアップについて解説するページは無いでしょうか?
div厨に一直線なので、ここら辺でブレーキかけようかと・・・。
>>596 (=´Д`=)そのままdiv厨にナローヨ
なっちまえば後は楽ダーヨ
599 :
Name_Not_Found:04/01/14 01:03 ID:63aF9EvD
HTMLのヴァリッド検査ツールで、満点みたいなのとると
ヴァリッド!てバナーみたいな画像が出現するサイトありましたが、
CSSのはどこ? FAQとか関連リンクとかみたけど、画像が出てくるサイトが紹介されてない・・・
601 :
Name_Not_Found:04/01/14 04:35 ID:bpHmIeFM
ちょい質問ですが、みんさんWindowsのIE6でフォントサイズが小を
サイトの本文サイズとしている場合、cssで .font12 { font-size: small; }
と割り当てますか?それとも割り当てませんか?
と言うのも割り当てないとそのブラウザ環境のフォントサイズで表示されますが
出来るだけスタイルを統一させたいと考えた場合、指定した方がいいのかどうか迷ってます。
今まではピクセル指定でフォントサイズを固定していたのですが
ユーザビリティ的にそれをするのはいささか問題あるかと思いまして。
>>601 本文の文字サイズはできるだけ指定しない、が正解だろう。
603 :
Name_Not_Found:04/01/14 05:39 ID:bpHmIeFM
>>602 なるほど。それはユーザーのOS、ブラウザ環境に依存するのを最優先とし
こちら側の意向(例えばどの環境でも同じように見えるなど)
を優先しないと言う考えですね。
なるほど。参考になります。ありがとうございました。
IEのemバグ回避のために
body { font-size: 100%; }
は書いといて損は無いかもしらん。
>>600 ありまとう。
どうやらCSSのURI指定で検査しないと、画像が出ないみたいね・・・
ヴァリッドをこれからも続けるぞーおー
>>601 多分老若男女、視力の強い人弱い人を考えると、
相対指定がいいのでゎ?
っと連投スマソ。
視力の弱い人はOSの設定で基本フォントを大きくしているか、
ブラウザの通常サイズのフォントを大きく設定しているかする
可能性が比較的高い。
だからWebページ側では本文のフォントサイズは変更されていない
(何も指定されていない)のが望ましい。それならその人にとって
一番見やすいサイズで表示されることになる。
私のように40代半ばになってくると、小さい文字が見づらくなります。
OSはもちろん大きいフォントにしていますが、フォントがpt指定のHTML(CSS)だと、見えない(読めない)ことが多々あります。
自分がCSSを書く場合(デザイン・レイアウト的にシビアな要求はないので)、フォントサイズは「%」で指定しています。
bodyが100%、h1が140%、h2が120%とか。
これであれば、IEの場合Ctrl+マウスホイールで大小が簡単に切り替えられます。
609 :
Name_Not_Found:04/01/14 12:32 ID:UaFbZJmZ
<head>
<style type="text/css"><!--
BODY
{margin-left:5px;
background-color:#efefef;
color:black;}-->
</style>
</head><body>
<div style="position:relative; width:45%;">
<form action="null" style="margin: 0px;" name="pulink">
<select onchange='parent.patches.location.href=this.options[this.selectedIndex].value' style="position:relative; " align="center">
<option>選択</option>
<option value="nullpo.html">ぬるぽ
</select>
</form>
<!--
<option value="patches/">
-->
<iframe marginheight="7px" marginwidth="5px" scrolling="auto" frameborder="1"
src="ReadMe.html" name="patches" width="100%" height="180" style="border: 1px thin black;" title=""></iframe></div>
</body>
上のソースのselectにあるalign="center"をrightにすると、
下のiframeにかぶります。centerだとかぶりません。
align="right"にして、どうすればiframeにかぶらなくなるんでしょうか。
>>606 フォント関係のスレはこの板にもよそのサイト関連のサイトの板でも語りつくされてるから一度探してみるといい。
絶対固定でそれでもなお「小さい」と思ったらCSS切ってさらにブラウザのフォントサイズをあげる、といった面倒なことを強いることになる、とは散々言われてる。
611 :
610:04/01/14 12:51 ID:???
>>609 端的に言うとiframeのwidth="100%"が原因かと。
ついでにいうと、select要素のalign属性はIE独自拡張ですがOK?
>>609 position:relative
を指定している目的は?
614 :
609:04/01/14 14:08 ID:UaFbZJmZ
どうもありがとうございます。
align>知りませんでした。外します。
> position:relative
divで囲み、selectをdiv内で右寄せする為です。
外がdiv、細い長方形がselect、その下がiframeです。
┌────────┐
│ ┌───┐│
│ └───┘│
│┌──────┐│
││ ..││
││ ..││
│└──────┘│
└────────┘
615 :
609:04/01/14 14:09 ID:UaFbZJmZ
divは画面の百パーセントで表示しません。
おおよそ画面の五十パーセントほどです
>>614=609
ああそういうことか。(てっきり、横並びに表示させようとしてるのかと思った。)
IEが拡張した(select要素の)align属性は、iframeのalignと似たようなもので、
縦方向の位置や、後に続く「テキストの回りこみ」を指定するものです。
(ただし値がcenterの場合は回り込みをせずに中央ぞろえになる。)
>>614のAAのように右揃えしたいなら、selectにfloat:right;、iframeにclear:right;、
とかかなあ。position:relativeは不要。
617 :
Name_Not_Found:04/01/14 14:59 ID:0ma6BJjP
何か難しい話をしているところ申し訳ありません。
初心者スレから誘導されて来ました。
凄い初心者な質問で申し訳ないんですが
文字<br><br>…<br><br>文字<br>…と、大量に<br>使って等間隔で文字を打った場合
IEとNNでは文字を表示する間隔が違うのですが
それを防ぐにはどうしたらいいでしょうか?
初心者スレでは「改行はそんな風にしちゃ駄目」と言われました。
どうしたらいいでしょか?
<br>連打で行間空ける厨は死んでください。
619 :
618:04/01/14 15:00 ID:???
遅かったか・・・・_| ̄|○
>617
あなたはCSSでなんとかできそうにないので、透明GIFでも用意して、想定したピクセル数の
空きをとったらいいのではないかと思う。
CSSでなんとかする気があるなら、
>>4をドゾー。
622 :
609:04/01/14 15:07 ID:UaFbZJmZ
>>616 それぞれ、スタイルを指定したら出来ました。
ありがとうございました。
>>617 隣接セレクタかな。
空けたい直前ブロックレベル要素にclass名(仮にfoo)を与えて、次のブロックレベル要素(仮にP要素)で。
.foo + p { margin-top : 990em;}
こんな感じ。
> 990em
って、おい(w
625 :
617:04/01/14 16:57 ID:0ma6BJjP
626 :
585:04/01/14 19:24 ID:???
>593 了解いたしました。
もっとよく調べてみることにします。
どうもありがとうございました。
あと、あまり strict に拘らないようにもしようと思います。
strictにはこだわっても良いが、俺strictにはこだわらなくても良いと思う
strictでもtranditionalでも何でも
markupがvalidならそれでいい
letter-spacing についてなんだけど、指定して確認したら、空いてる間隔が
IE6 < NN7 = Opera7
になってんだよね、明らかに。
これってどうしようもないかな?
指定してるのサイトタイトルだけなんで、いっそ半角スペースでやっちまおうかとも思ったけど、
ソース汚くなるし、音声読み上げブラウザだとマズいことになるらしいし。
原因はわからないけど
うまく解決できなかったらIE未対応の + とか >をうまく使って
IEとNN(Opera)それぞれに別のスタイルを指定して回避してみたらいかが?
何の単位を使って指定したか書いてくれないとなんとも…
em? emはIEで入れ子バグがあったような。
pxで指定しても違うならバグ辞典に報告に行ってみては。
632 :
629:04/01/14 22:08 ID:???
633 :
629:04/01/14 22:11 ID:???
いや、ピクセルでいくことにした。別に閲覧に支障でないし
お騒がせしました。
>633
ユーザ側でフォントサイズ変更している場合も考慮しれ
>>634 文字そのものじゃないから別にいいんじゃね?
<p class="hoge"></hoge>で囲まれた文字列の
一文字目の文字の色を青にしたいのですが、
そのような指定をcssでできるのでしょうか?
<font>タグで指定するしか無いのでしょうか?
よろしくお願いします。
:first-letter 擬似要素ってIE5.5以降で使えるってことでOKなんかなぁ?
5.0では駄目だったような記憶があるんだが。
>>636 なんでp開始タグをhoge終了タグで括るんだ?
ちなみに、
p[hoge]:first-letter
かな。
:first-letter , :first-line擬似要素は
WinIE => 5.5
MacIE => 5.x
NN => 6.2
以上で対応してるはず
640 :
638:04/01/15 00:19 ID:???
補足。
MACだとfirst-letter適応の一文字目が2バイト文字の場合バケる。
>>640 げげ、そいつは初めて知った。
そんなのホヮスト・レターじゃないだろ…
>>641 MACを意識するなら英字が出だしの文字列にしなきゃいけないけど、
英字が出だし、って「1.〜」とかQ&Aの「Q.〜」とか、「Link」とかそういう見出しとかくらいしか思いつかん。
lang[en]がIE対応してくれりゃなぁ。
エンコードにユニコード使うと遅くなるよね。
例えば本文中で
<div class="bigbox"><div class="smallbox"><p>テキスト</p></div><div>
と書いてから別途、CSSで
div.bigbox {width:80%;}
div.smallbox{width:50%;}
と指定するとMacIEではsmallboxはbigboxの幅に対して50%の幅となるのですが、
WinIEではsmallboxはbodyに対して50%の幅になるみたいなのです
%表示を使ってWidthを指定する場合、MacとWinでの見た目を統一することは無理なのでしょうか?
>>645 そうなの?
あちきのWinIE5.5と4.01では、smallboxはbigboxの幅に対して50%の幅になってるけど?
647 :
645:04/01/15 10:22 ID:???
>>617 CSSで段組作ってみたらレイアウトがMacとWinで違っていたので
てっきりwidthの解釈が違うものとばっかり思ったんですが・・・
ちなみに当方はIE6で確認しました。
648 :
645:04/01/15 10:25 ID:???
649 :
645:04/01/15 10:57 ID:???
前の質問はこっちの間違いでした
自分のサイトのトップページを段組にしてみたかったので
本文で
<div class="bigbox">
<div class="leftbox"><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p></div>
<div class="rightbox"><p>テキスト</p><p>テキスト</p><p>テキスト</p><p>テキスト</p></div>
<div>
CSSで
.bigbox {margin-left:3em;margin-right:3em;}
.leftbox {width:50%;float:left;}
.rightbox {width:50%;margin-left:50%;}
P {border:1px solid black;white-space:nowrap;}
とした場合、MacIEではleftboxとrightboxの幅が同じ段組が出来るのですが、
WinIEではrightboxの幅がleftboxと同じにならないんです。
650 :
Name_Not_Found:04/01/15 11:04 ID:KfOGa9oO
質問です。CSS初心者(2日目)なんで変なこと言ってたらごめんなさい。
質問1
http://www.fotolog.net/fotocats のソース見たんですが、
てっきりフレームで3つ(左、中、右)に分けると思ったんですが、CSSって記述が無いみたいなんです。
って事は、CSSじゃ無い別のスタイルシートで分けてるんですかね?
質問2 CSSで上記の様なレイアウトにしするのは、FRAMESET要素で定義するんですか?
651 :
Name_Not_Found:04/01/15 11:17 ID:FxsUJ13J
・トップのページ
・ギャラリーのページ
・リンクのページ
・掲示板のページ
各々のページの<body>を
<body id="top">
<body id="gal">
<body id="link">
<body id="board">
とするのは変ですかね?
なんで上記のようにしたいかというと、各々のページに<p>を使っているんですよ。
そんでページごとに<p>のスタイルを変えたいんですよ。
そうゆう場合は
<p id="top">
・・・・
とかにした方が良いのですかね。
回答1 CSSと呼ばれるスタイルシートも、CSSじゃない別のスタイルシートも
一切使われていない典型的なテーブルレイアウト。
回答2
>>6参照。
653 :
Name_Not_Found:04/01/15 11:46 ID:FxsUJ13J
655 :
Name_Not_Found:04/01/15 12:05 ID:KfOGa9oO
>>652 即レス有難うございます。勉強し直しますハイ!
>>651 全然問題ないと思う。
オレなんか <body class="hoge">とか平気でやってるよw
bodyは1個しかないし、Scriptからのアクセスを考えるとidの方がいいかも。。。
657 :
645:04/01/15 16:14 ID:???
>>651 多少、ファイル数が多くなるけど、複数のCSSに分けて記述しておいて
ページごとに読み込ませるCSSを変えるという手もあるよ。
IEでid="top"とすると、
window.topと被るからお勧めできない。
>>651 全く問題ない。むしろスマート。
<p id="..."> といちいち書く方がダサい。
っていうかそれHTMLの書き方の問題であって
CSSの質問じゃねーよ
CSSでタブを書こうと思って以下のように書きました。
// HTML
<ul>
<li>Tab1</li>
<li class="selected">Tab2</li>
</ul>
// CSS
ul {
color:#000;
background-color:#fff;
border-bottom:solid 1px #000;
}
li {
display:inline;
border:solid 1px #000;
}
li.selected {
border-bottom-color:#fff;
}
IE6SP1では
_| ̄|_| ̄|_
 ̄ ̄ ̄  ̄
このようになったのですがMozillaFirebirdだと
_| ̄|_| ̄|_
 ̄ ̄ ̄ ̄ ̄
こんな感じになります。
どうすればどちらのブラウザでもIE6SP1のように表示できますでしょうか?
また、CSS的にはどちらが正しいのでしょうか?
662 :
660:04/01/16 03:07 ID:???
>>661 えぇ、そこも参照したんですがそこだとIEでもFBでも意図する通りに見えるんです。
じゃあそのCSSパクればいいんですが、px指定してるのが気持ち悪くて…。
>>662 やってみればいいじゃん
pxも色々自分なりに変えてさ
聞く前にやってみな
>>662 >>660の方針でできるか試してみた。
※ulを「<ul class="tab">」とクラスを追加した。
※便宜のため適当に背景色を追加した。
* {
font-size:1em;
margin:0; padding:0;
}
ul {
color:#000;
background-color:ddd;
border-bottom:solid 1px #000;
margin:1em 0 1em 3em; padding:0;
}
/*WinIEよけに属性値セレクタにしてみた*/
ul[class="tab"] {line-height:1em;}
li {
display:inline;
padding:0 0.1em;
margin-right:0.2em;
border:solid 1px #000;
background-color:#eee;
}
li.selected {
border-bottom-color:#fff;
}
----
一応、IE6とFirebird0.7とOpera7で似たような表示にはなるみたいだけど…
665 :
Name_Not_Found:04/01/16 22:27 ID:lFfhflg3
テキスト入力<input type="text">で、スタイルシートを使うことで、
入力できなくなるようにすることができたと記憶してるんですが、どなたかご存知ないですか?
>>665 disabledやreadonlyといったinputの属性じゃなくて?
>>665 IEの独自拡張でime-modeというプロパティがあるけど、そのことかな?
668 :
Name_Not_Found:04/01/16 22:56 ID:lFfhflg3
うひゃーreadonlyでした。
勘違いでした。
>666
>667
どうもありがとうございました。
669 :
660:04/01/16 23:39 ID:???
>>664 ありがとうございます。
IEのCSSバグを使って篩い分けする方法ですね。
バグじゃあないんだがな…
671 :
Name_Not_Found:04/01/17 01:24 ID:cK8f3ARe
body にwidth 80%の指定してtableで
<tr><td> floatした画像+右に回りこんだ文字列をmarqeeで動かす</td></tr>
としたときに、NN7.1ではテーブルがwidth 80%からはみ出てしまいます。
何か他にやり方ありますか?
>>671 俺が文盲なのもあるが、まず日本語の意味が理解できん。
だらだら文章で説明するよりソースをだしてくれるとありがたいな。
あと、marqeeってお前勘弁してくださいよ。
673 :
671:04/01/17 02:43 ID:cK8f3ARe
>>673 末期ガンなぐらい悪いところが多いので、1からソースを書き直してみろ・・・(´д`;)
tableのセンタリングをしたいようにみえるが、どうか?
tableのセンタリング方法はテンプレにあるから目を通すべし。
>>673 >marqeeはどうしても押して欲しいリンクがあるもので;;;
あほ?
Linkがmarqeeしてたらクリックしにくくてたまらない。
先ず間違いなくだれも押さないだろう。
>>673 marqeeがリンクになってるって、レス読み返すまで気が付かなかったよ。いや、マジで。
・・・と、それぐらい役に立たない機能。
どーーーーーーーーーーーしても、誰に何を言われようが閲覧者の事なんざ関係なく文字をうごかしたいならJSでやれ。
>>673 Strictに書き直してぇ(;´Д`)
>>673 ここまでで突っ込まれてる話をあえて無視して言うが、
marqeeタグ閉じてないよ。使用の是非以前に。
____________
||_(((((((((_ ) || ||
|| _ 《 _ | .|| ||
||(_//_)-(_//_)-|) ¶| ||
|| 厶、 | || ||
|| |||||||||||| / || ||
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
そりゃマーシー
<marquee style="position:absolute;width:12em"
direction="right"><br>
_(((((((((_ )<br>
_ 《 _ |<br>
(_//_)-(_//_)-|)<br>
厶、 |<br>
|||||||||||| /</marquee>
<div style="position:absolute">
____________<br>
|| || ||<br>
|| || ||<br>
|| ¶| ||<br>
|| || ||<br>
|| || ||<br>
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄</div>
marqeeはどうしても押して欲しいリンクがあるもので;;; 伝説
でもなんだかんだいってmozillaもOperaもmarquee対応してるんだよな。
中華人民共和国のユーザの要望がかなり強いとかで。
みなさん、どれくらいの比率でCSSでレイアウトしてます?
全てのレイアウトでCSSを使われている会社の方いらっしゃいますか?
わたしは、テーブルが主体で、補助的にCSSを使っています。
(当たり前なんですが、非推奨タグは避けCSSにしています。)
参考までに聞かせていただけませんか?
688 :
671:04/01/17 14:51 ID:???
>>675 >>5を参考にdivでテーブルのセンタリング
(+IE向けにCSSでtext-align:justify;を指定)
したらテーブルがはみ出すのは直りました。
どうもです。
>>680 typoです。すいません。
#うp板に広告を貼っても異様にクリック率が低いので、
#苦肉の策で考えたんですが、
#marqueeは評判が悪いようなので採用は見送ります;;;
#CSSとは関係のない方向に話がいってスレ汚しゴメンナサイ。
>うp板に広告を貼っても異様にクリック率が低いので、
('`)
広告をクリックしてもらいたいのか。今時クリックするやつなんていうのか?
UOのほうで無理やりクリックさせる時とか以外、クリックしようとする奴いないだろ。
なんにしろ、「クリックしてね」とか書かないほうがいい。逆効果だから。
>687
うちは100%とCSS。
ドリキャスでも見れる、とお客さんにも評判がよいです。
テーブルレイアウトなし、CSSでデザイン、代替スタイルシートも用意している。
・・・・IEでは代替スタイルシートに対応していないわけだが・・・・
>>691 プルダウンメニューとやらをつけるしかないのか、あの。
CSSとは物理的なモノです。
それより先に論理的なモノを理解するのが先決です。
マルチカラム?段組み?あたりで手間取ってます。
単刀直入に申し上げると
罫線を引く感覚でCSSをデザインできるソフトはありませんか。
どなたかご存知でしたらお願いします。
>>694 そんな意味不明な日本語のソフトはありません。
段組を組みたいならテンプレよみましょう。
壁紙の位置の指定なのですが、%指定とright centerとではどちらが好ましいのでしょうか。
訂正
right centerなどによる指定
>>694 要するに、お絵かきソフトみたいな感じで絵を描くと
その通りのデザインにCSSを吐き出してくれるソフトはあるかって事か?
ネェヨ
>>699 もしあったとしても、ビルダーのどこでも配置とか、
フロントページ以上のものすごいソースを吐き出してくれそう。
質問です
試行錯誤してまでCSSにこだわるメリットとは何でしょうか?
ページ表示が速いらしいが実際どれくらいのものなのでしょうか?
netscape4. は結局無視の方向なのですか?
>701
メリットは端から挙げると数え切れないが…
「構造と見た目を分離出来る→保守・変更が容易になる」が第一のメリットかな。
全てのHTMLの<body background="hoge">を修正するよりCSSの一行を修正する方が圧倒的に楽。
レンダリングの早さは…変わるのか?
ソースに冗長な記述がなくなる分ロードは多少早くはなると思う。
NN4は…お察し下さい。
時代の変遷と共に古い物は使われなくなるものです。
返答ありがとうございます。もう1つ質問させてください
TABLE+CSSは駄目的な書き込みをよく見るのですが、そんなに駄目なのでしょうか?
テーブルの本来の使い方ではないとはわかっているのですが、段組等はTABLEの方が組みやすいですよね?
それをテーブル無しで作ろうとしているのは、ただのこだわりなのですか?
>>703 >段組等はTABLEの方が組みやすいですよね?
私はそっちの方が面倒だと思うなあ。
だから、テーブルレイアウトしている人って何故レガシーマークアップに固執してるのかと思うよ。
そんな人もいるって事で。
>>703 やりたければテーブルレイアウトでも何でもどうぞ。
ココはCSS質問スレだからCSSで出来ることはCSSでやれると言うのが筋ってもんだろ。
次の質問ドゾー
>>703 こだわりっていうか、表の使い方として違ってるだろ。テーブルレイアウトってのは。
そっちが間違ってるのに正しい使い方を拘りといわれてもな。
正しく使いたいという“拘り”ちうことでは?
>>704 同意。
>>704 こんなにバグが多い現状でもそうなんだ・・・最近Web始めてCSSしか知らない人じゃないですよね?ははは
>>705 そうですね。失礼しました
>>706 では世界中間違ったWebばかりですね。何故なんでしょう?
釣りイラネ。
>>702 外部スタイルシートが全ページ共通、とかなら、一度読み込んだあとは早くなるね(まぁちょっとだけど)
テーブルは本来の用途と違うだけじゃなく、音声読み上げブラウザ等で弊害がで安い
マジレスしちゃったけど、結局
>>708は釣り士なのか……
世界中間違ったWebばかりなのです。理由はきちんと理解していない人が多いからです。
ま、俺も去年はテーブル使ってたけどナー
>>710 CSSのみだとネスケ4.7とかでまともに表示できないじゃん
てかCSSのみなんて趣味でやるもんだろ
Web製作会社見てればわかるだろ。
おれが見たとき変じゃなきゃいいよ
さて、ココはCSS質問スレなのだが。
次の質問どぞー。
NN4には@importでCSSを適用させないようにすりゃいいだろ
HTMLをしっかり書いておけばデザインが適用されなくても大丈夫
商用サイトでそんなもん通用しねーよ
CSSのfloatプロパティなんか知ってる奴が多くないんだろ。
>>715 >商用サイトでそんなもん通用しねーよ
なぜ商用サイトの話が出てくるんだ?
テーブルレイアウトだろうが何だろうが、やりたければ勝手にどうぞ。
ここはCSS【質問】スレだ。議論はよそでやれ。よそで。
>>715 通用させられない、
蔵を納得させられない、
自分の技量の無さと実績の無さを
えらそうに語るな。
議論は他所で
質問も他所で
ここで質問する前に本買うとか、WEBで関連文書読んでから
質問しなさい。
あまりにも最近レベルが低すぎ
そうか馬鹿が多いのか(w
釣り堀ではありません
>>722 ここには釣る程のもではない、セルビンで十分
それでは次の質問どうぞ
hr {
width: 100%;
height: 10px;
color: #000;
}
このような罫線をひいてみたのですが、Mozilla Firebird 0.7では
ボタンを押したような線が表示されてしまいました。
color: #000; を取り除いてみるとIE5.5でも同様の表示になったのですが、
Firebirdは罫線のcolorに対応していないのでしょうか?
> では世界中間違ったWebばかりですね。何故なんでしょう?
ポイ捨てが横行すりゃそれも正しい行為だと言う勢いだな。
730 :
726:04/01/19 02:01 ID:???
>727-728 どうもありがとうございます。解決しました。
borderを使うという方法も考えましたが、
今回はとりあえず<hr>のままでいってみます。
恒久的なURIなど夢のまた夢。
734 :
Name_Not_Found:04/01/19 12:34 ID:yYfChCEL
<table>
<caption>table1</caption>
...
</table>
<table>
<caption>table2</caption>
...
</table>
表示されたときにtable2のキャプションとtable1の間を空けたいのですが、
CSSでどのように指定すればいいのでしょうか?
736 :
734:04/01/19 13:50 ID:yYfChCEL
tableにmarginを設定するとIEだと空いて、Mozillaだと空かない。
captionにmarginを設定するとIEだと空かなくて、Mozillaだと空く。
どちらが正しいのかは知らないけど、同じ書き方はできないでしょうか?
じゃ、中とって padding
738 :
734:04/01/19 14:52 ID:yYfChCEL
captionにpaddingを設定したら、IEとMozillaで同じ表示になりました。
ありがとうございます > 737
>>734 おそらく Mozilla の方が正しいだろう。
Macromediaのサイトのように、boxの角に丸い画像を貼り付けるのは、どうしたらよいのでしょうか?
imgタグに背景画像、背景色等を組み合わせてみるのですが、どうもうまくいきません。
おそらく他の考え方で成立するのでしょうが、アイデアがでません…
>>743 Macromediaのサイトのソース見てわからないようであれば諦めましょう。
テーブルででもやったらどうですか?
>>743 上下それぞれの「フタ」になる画像をあらかじめ用意しておいて、
<div style="background: url(ue.gif);"> </div>
<div>本文</div>
<div style="background: url(sita.gif);">&> </div>
とまぁなんでも良いので本文の上下のブロックの背景に「フタ」の画像を設定すれば良い
微調整は自分でやんな
746 :
743:04/01/20 15:07 ID:???
>>745 回答、ありがとうございます。
boxを%で指定しています。pxでboxのwidthをきっちり固定しているのなら、
>>745の回答できちんと対応できるんですが…。
>>744 説明不足でしたね
boxは%で指定しているので、px固定だったら、きっちりできます。
指摘される以前から、IEはboxの解釈がおかしいので、しかたなく
tableで対応させてはいるんですが。
透過gigでbodyの背景色を出したいので、box内での背景色を
影響させずにするには…、と考えているところです。
質問させてください。
MacIEのバックスラッシュハックの事ですが、
コメントを{}の中に入れてもバックスラッシュハックは機能するのでしょうか?
例えば、
hoge {
color: #000000;
background-color: #ffffff;/*ハック開始\*/
border: solid 1px #000000;/*ハック終了*/
}
この様な事もできるのでしょうか?
また、1ファイルの中で、何回も使用できるのでしょうか?
もう一つ、バックスラッシュは、BackSpaceの左のキーと、「ろ」のキーと
どちらでも大丈夫でしょうか?
当方Windows環境しかないため、確認が取れません。
よろしくお願いします。
>>746 とりあえずマイクロメディアは横幅決め打ちなのだ
749 :
747:04/01/20 16:29 ID:eLtUpxue
ごめんなさい。
一回だけageます。
>>747 その例で大丈夫。
MacIE5でborderが無視されるようになる。
{}の外・内のどちらでも、また併用でも可で、回数の制限もないはず。
\と\は記述してる文字コードのほうで書けばいい。
751 :
747:04/01/20 17:16 ID:eLtUpxue
>>750 丁寧な受け答え、ありがとうございます。
助かりました。
:before と :after がまともに動作すればらくだよね。
漏れは js で前後に蓋と底になるためだけの要素を生成してます。
CSSでHTMLのvalignタグと同じ働きのものってありますか?
ページの中央にコンテンツを表示させたいんですが、vertical-alignを使っても上手くいきません。
CSSバグ辞典スレッドの対象かもしれませんが、勘違いしているかもしれませので質問させて頂きます。
MozillaFirebird0.7(20031007)を使っているのですが、
<p><img src="hoge.png" width="x" hright="x" alt="hoge" /></p>
として、
p object{margin:0px; padding:0px;}
p img{border:1px solid black;}
とするとwidth/heightとも、x-2(50なら48)として算出・表示されてしまいます。
IE6.0ではちゃんとxとして表示されたのですが、どちらが正しいのでしょうか?
あ、CSSには
* {box-sizing : border-box;}
* {-moz-box-sizing : border-box;}を指定しています。
関係ないとは思いますけど・・
あ、やっぱりなんか勘違いしてましたか。
勉強しに逝ってきます
>>756 関係ありまくりだ( ゚Д゚)ヴォケ!!
760 :
Name_Not_Found:04/01/20 23:35 ID:oCiMVtb0
テーブルのスタイルシートで
マウスをおくと色がかわるものを探しています。
ぐぐりましたが発見できず。。
厨なあたしですが、良かったらおしえてください
761 :
760:04/01/20 23:36 ID:???
あげてしまってごめんなさい
回線切って首吊ってきます
>>761 質問でageるのはいいんだがな。
質問内容がわけわからん。
763 :
760:04/01/21 00:04 ID:???
>>762 ΣΣ(o_o)ごめんなさい
えっと、テーブルが4つぐらい並んでるじゃないですが
税所は赤なのにマウスをおくと色が変わって白になったりするんです
スタイルシートだったようなきがするんですけどもしかして違うかもです
違ってからごめんなさい;
>>760 ひょっとして、セルにカーソルをのせたら、変化するとかいうこと?
td {
background-color:#ddd;
color:#111;
}
td:hover {
background-color:#eee;
color:#000;
}
ただし、当然MSWinIEは、a要素以外の:hoverには非対応。
どうしてもしたいっていうなら、JSか。
766 :
764:04/01/21 00:13 ID:???
>>763 あなたが、IEで見てたのなら、javascriptだったのかもしれない。
javascriptだったらスレ違いなのでスクリプトの質問スレへどうぞ。
767 :
760:04/01/21 00:16 ID:???
>>766 そうかもしれません。IEだったので…
>>764さんのを入れてもなりませんでした。
あっちのスレにいってきます(o^◇^o)誘導ありがとうですっ
769 :
760:04/01/21 00:40 ID:???
>>760 >マウスをおくと色がかわるものを探しています。
ここは探し物のスレではありません。
>>770 もう誘導済みなんだから、いいじゃねぇかよ。
ネチネチして気持ち悪いな。
MacIE5でtableにたいして、border-collapse: collapse; も border-spacing: 0px; も無視されるわけだが、CSSで表のセルの間隔を詰める方法って他にない?
<table cellspacing="0">と出来れば良いのだが、相手が某サービスの某モジュールなので、タグには手も足も出なくて困ってる。
773 :
Name_Not_Found:04/01/21 02:29 ID:TMb9LOEb
>>773 HTML&CSSソースをここに記すこと。使用ブラウザとそのヴァージョンも。
775 :
Name_Not_Found:04/01/21 03:50 ID:TMb9LOEb
>>772 table{border-style:none}
th,td{border:1px #000 solid}
ではどうだろう。試してないけど。
775のソースとやらが衝撃的だったので今日一日はトイレから出ないことにする
>>776 無理ですた。
tableのボーダーは表の周りのボーダーだし、th,tdのborderやmarginを調節してもセルの間隔は変わらないんだよねぇ。
MacIEの困ったちゃん。
>>775 だからソースは「ここに」記せって。いちいち圧縮するな、見るの面倒臭い。
780 :
Name_Not_Found:04/01/21 12:43 ID:++dQIGAQ
---------------------------------------------------------------
<h3>其の一</h3>
<img src="./img/1.jpg" width="120" height="120" alt="米" />
<p>みんな米を食べようぜ</p>
<h3>其の二</h3>
<img src="./img/2.jpg" width="120" height="120" alt="酒" />
<p>酒飲もうぜ</p>
<h3>其の三</h3>
<img src="./img/3.jpg" width="120" height="120" alt="魚" />
<p>酒魚うまいぜ</p>
---------------------------------------------------------------
img {
float : left;
}
h3 {
clear : left;
margin : 1em 0em 0em 0em;
}
p {
margin : 0em;
}
---------------------------------------------------------------
ネスケとかモジラで見るとimgとh3の間にスペースができません。
うえのでいうと、「米の画像」と「其の二」の間、「酒の画像」と「其の三」の間に1em分の空きをつくろうとしたいのです。
どうしたらよいのでしょうか?
>>780 imgはインライン要素だから、<p>か、<div>の中に入れておかないと・・・・
783 :
780:04/01/21 13:32 ID:8eWu3+yf
ああ、ちゃんとはいってます。
<div>
<h3>其の一</h3>
<img src="./img/1.jpg" width="120" height="120" alt="米" />
<p>みんな米を食べようぜ</p>
<h3>其の二</h3>
<img src="./img/2.jpg" width="120" height="120" alt="酒" />
<p>酒飲もうぜ</p>
<h3>其の三</h3>
<img src="./img/3.jpg" width="120" height="120" alt="魚" />
<p>酒魚うまいぜ</p>
</div>
オペラとIEではコチラの都合どおりなんですが・・・
>>780 Mozilla が正しい実装です。'clear: left' の効果は:
>要素のボーダー上辺が、ソース文書内でそれ以前に出現するあらゆる左フロートの外下辺より下であるように、要素が生成するボックスの上マージンを十分大きくする。
従ってh3要素の上マージンの指定は、ボーダー上辺を揃えるために無視されます。
提示された例の場合、h3要素を 'margin: 0' にして、
img要素に 'margin-bottom: 1em' を指定すると意図通りになると思います。
785 :
775:04/01/21 15:11 ID:TMb9LOEb
>>779 以前ソースをスレに張ったら「ここに張るな。どっかに上げろ」と言われまして・・。
申し訳ありませんでした。それと、凄く長いソースなので問題部分だけを張ります。
<table width="780" height="200" border="0" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td width="200"><img src="image/**.jpg" width="200" height="200"></td>
<td width="580" background="image/**.gif"><div class="a">
<div align="left"><img src="image/**.jpg" width="12" height="12">04.18-あいうえおかきくけこさしすせそ<br>
04.18-あいうえおかきくけこさしすせそ
</div>
</div> </td>
</tr>
</table>
>>772 最終手段で DOM でなんとかするとか。
スレ違いではあるが…
window.onload = function()
{
var tables = document.getElementsByTagName('table');
for (var i=0; i<tables.length; i++)
tables[i].cellSpacing = 0;
}
初心者向けのcssの本ってあります?
解説付きの本が好きです
>>785 なんだかひどいHTMLだが、で、CSSソースは? どんなスタイル指定したかがわからんよ。
>>787 残念ながら初心者向けの良い書籍、ウェブサイトは余りありません。
私も書籍を買ったことがありますが、多くは残念な思いを致しました。
まず HTML をちゃんと理解してから CSS を学びはじめてください。
というかスレ違いです。優れた本を訊くスレではありません。
とりあえず 2ch Books 辺りを参照してください。
http://www.1point.jp/~book_2ch/web/
791 :
京阪沿線マソ ◆0atqBUamHk :04/01/21 22:32 ID:I+5xZyzO
793 :
京阪沿線マソ ◆0atqBUamHk :04/01/21 22:43 ID:I+5xZyzO
>>792 テーブル、画像のマージンを0にしたのですが
直らないのですが・・・・・・
794 :
Name_Not_Found:04/01/21 22:47 ID:K09p6yvu
すみません、教えてください。
画像の枠指定をしているのですが、それをjpgのみに適用しgifには適用させないように
したいのですが、どう指定していいのか分かりません。
よろしくお願いします。
>>794 拡張子だけで判別させるなんて無理。imgにclassを振るべし。
>>790 どこの馬の骨が書いたかわからないような解説サイトなんて信用できん。
無料だからこそ余計に信用できない。
高い本こそ良い本に決まっている。
いままで何人かの初心者と接する機会がありましたが、
このように考える人がむしろ多いかと。
だとしたら、どこの馬の骨が教えたか分からない本なんて買えないよな
>>793 ならばチト強引だがmarginにマイナス値でも設定すれば?
どうしてもピッタリくっつけたいならね。
IE以外のブラウザでも確認して見るとよいよ。
799 :
京阪沿線マソ ◆0atqBUamHk :04/01/21 23:03 ID:I+5xZyzO
>>798 ちょっと他のブラウザでも調べてみます・・・・・
マイナスは最終手段にして。
画像のサイズ指定したとたんこうなるのは何でだろう・・・・・・
>>786 Javascriptはじかれちゃった(´・ω・`)ショボーン。
<script>って書くと>script<ってエンコードされちゃうの。
はてなダイアリーの困ったちゃん。
>>797 本は一応著者の名前が出てるし。
出版社の名前も影響するだろうし。
仕様書の存在を知らないアホが書いた紙クズでも
本になってれば人は信用して買っていく。
内容では無くて価格に価値を求める人が多いんだよ。
そう思う方がわかりやすいからね。現状とは別問題で。
803 :
794:04/01/21 23:26 ID:???
>>795 ありがとうございます。
どおりでどう検索しても出てこないハズですね。
失礼しました。
>>786,800
(´ι _` ) Scriptもしょぼいがスレ違い
805 :
↑:04/01/21 23:27 ID:???
誤:どおりで
正:どうり(道理)で
806 :
800:04/01/21 23:43 ID:???
>>800 >>script<
ぬを、&gt;と&lt;を反対に書いてしまった。しかもちゃんとデコードされちゃってるし。
さすがに<script>が>script<には成りません(´・ω・`)ショボーン。
>>804 うん。ごめんね。おわびにちんこあげる( ・ω・)ノ――――――――ω
807 :
775:04/01/22 00:13 ID:DQC9cjEt
>>788 よろしければ
>>775にうpしてありますので、それを参照していただけますでしょうか?
長くて改行エラーが出てしまいました。
要点を記せないのかねえ。
/*コメントアウト*/で絞り込んで実験すれば、どれが原因かわかるはず。
>>799 vertical-align:bottom;
にしてみ。IEでできる下の隙間はそれでとれる。
他のブラウザでは関係ないけど。
811 :
775:04/01/22 14:24 ID:DQC9cjEt
どなたもわかりませんでしょうか?
812 :
Name_Not_Found:04/01/22 14:32 ID:NfyQIhL3
画像(その先にリンク有)を2枚並べたい時(横でも縦でも)、どうすればよいのでしょう。
HTML時代は、テーブル作ってその中に画像を組み込んでいたのですが、
CSSではこういうテーブルの遣い方はヨシとはされていないのですよね?
余りに初歩的な質問だったらならばごめんなさい。探し方が悪いのか
本も持っているのだけれど何だか載ってないし、色々なサイトも見たけど
見付からない(涙)。
よろしくお願いいたします。
>>812 意味がよく分からない。普通に書けば並ぶと思うんですが。
横に並べる <img><img>
縦に並べる <img><br><img>
>>812 あと「CSSでは」じゃなくて「HTMLでは」です。
816 :
Name_Not_Found:04/01/22 14:41 ID:NfyQIhL3
>>813 あ。そうなんですけど、普通に書いただけだと、例えばウィンドウを
大きくすれば2つ目の画像は1つの画像の横に、逆に小さくすれば1つ目の画像の下に
2つ目の画像が来てしまいますよね。そうではなく、いつでも横に2つなり縦2つなり
画像が並ぶようにしたいのです。
言葉が足りなくてごめんなさい。
>>811 ソースがアレでショボーンとする。
ともかく、line―heightは効いてると思うのですが、何が問題か良くわかりません。
ひょっとして、12×12ピクセルの画像の配置?
818 :
Name_Not_Found:04/01/22 14:45 ID:GFu/Z4oR
すいません。初心者すれでしつもんしましたが、
こちらのほうが適切かと思い再度質問させて下さい。
ながれをむししてたらごめんなさい
発言番号622
はじめまして。この板は初めてきました
MAC OS Xで、operaでスタイルシートでフォント指定したのですが
うまくいきません。mozilla、IEではうまくいきました。
日本語を等幅フォントで表示したいのです。よろしくお願いいたします
発言番号625
OSAKAの指定は一等幅が優先されるようなので
font-family:OSAKA;を指定しました。
monospace指定はnetscapeの古い4.xで化けるので避けました
特に、osakaにこだわりがあるのではないです、
等幅で表示したいのです
IEはデフォルト表示が等幅だったので、問題なしで、
mozillaではちゃんとosaka一等幅で表示されました。
>>818 >IEはデフォルト表示が等幅だったので
ユーザ側で自由にデフォルトフォントを設定できるのだが。
ユーザ設定が自分の環境と同じになっているとは限らない罠。
>monospace指定はnetscapeの古い4.xで化けるので避けました
要するに「MacOS以外の環境なんて知りません」ってことか。
Windows には普通、Osakaフォントは無いから等幅にならない罠。
823 :
818:04/01/22 15:15 ID:GFu/Z4oR
あ、わかりにくくてすみません
マックOSXでのはなしです。
ウィンドウズの方のスタイルシートはmonospaceで
していしています。
824 :
818:04/01/22 15:19 ID:GFu/Z4oR
うぃんどうずは、IEでもオペラでも
ちゃんと等幅になってることをかくにんしました
というか font-family:OSAKA; では等幅にならんだろう。
そもそも “Osaka” と記述しないと Osaka にもならないし。
等幅にしたいなら font-family: "Osaka−等幅"; だろう。
826 :
818:04/01/22 15:25 ID:GFu/Z4oR
連続カキコすみません。
>>821 ありがとうございます。でもこのURLで紹介されてるのは
winですよね。
824につけくわえて、Winのモジラもだいじょうぶでした。
>>820のURL参考になりました。どうもありがとうございます!
827 :
818:04/01/22 15:27 ID:GFu/Z4oR
>>825 ご指摘有り難うございます。
Osakaの表記については書き込む時に間違えて大文字でうってしまいました。
というか Opera の[ページスタイル]の設定は確認したのか。
829 :
812:04/01/22 15:58 ID:???
画像2つ並べるには?です。ちょっと色々分からなくなって来たので
また出直します。ご指摘ありがとうざいます。そうですよね。
何だか鬱になって来た・・・ダメソ
830 :
818:04/01/22 15:59 ID:GFu/Z4oR
>>828 ありがとうございます!ユーザーモードにチェックが入っていました!!!
はずしたら、オオサカフォントの表示になりました!!!
色々な指定を試してみたのですが、IEやモジラにくらべて
行間や字間や行末約物が狭めみたいですね。
tableタグ使わないでdivで左にナビ、右にメインを表示するのってどうなんですか?
外国で主流っぽいけど、それのどこがいいんですか?
ちょっくら、釣りのエサ買ってくるわ。
833 :
775:04/01/22 16:34 ID:DQC9cjEt
>>817 ソースに関しては、あまりにも長すぎるのでうpしようと思ったのですが
「面倒だから、いちいちうpするな」と言われましたので、一部分だけ張りました。
12×12の画像は普通に横に置いているだけなのですが、行間に影響してしまいます。
>>819 申し訳ないです。
>>809さんは私へのレスだと思っていませんでした。
早速試してみようと思います。
>>833 頭悪いのかな……。
ソースは全部でなく要点だけ記せばいい話でしょ。
わざわざ解凍の必要なzipファイルでよそのサーバーにアップしたのなんて大抵見る気しませんよ。
CSSソースだって、無駄な改行無くせば、充分ここにさらせる量でないの?
・問題の切り分けが下手
・表現能力が低い
・流れが読めない
・自分の文章の客観視ができない
・要領悪い
たいていセットになっているから話が進まない罠。
836 :
818:04/01/22 17:02 ID:GFu/Z4oR
>>812さん
<nobr><img><img></nobr>
でどうですか??
>>836 おい、貴様、ここがCSSスレッドとしっての狼藉か。
自働改行禁止はCSSなら white-space:nowrap; だろが。
初歩だよ、初歩。
838 :
818:04/01/22 17:07 ID:GFu/Z4oR
>>837 あ、ありがとうございます。
べんきょうになりました
うえのほうでhtmlでみんなアドバイスしてたのでついつられました!!
責任をとって切腹せよ
840 :
775:04/01/22 17:17 ID:???
>>834 >ソースは全部でなく要点だけ記せばいい話でしょ
うーん・・・既に要点だけ張ってあるのですが(w
まだわからんのか。要点だけ“ここに”記せ。
>>840
842 :
818:04/01/22 17:31 ID:GFu/Z4oR
>>838 >うえのほうでhtmlでみんなアドバイスしてたのでついつられました!!
それにしても、よりによって非推奨要素の<nobr>なんぞを持ち出すところがなんともはや。
知らないことに口を出してはいかんよ。
>>840 >>788・
>>808
844 :
775:04/01/22 17:49 ID:???
788 :Name_Not_Found :04/01/21 19:50 ID:???
>>785 なんだかひどいHTMLだが、で、CSSソースは? どんなスタイル指定したかがわからんよ。
847 :
775:04/01/22 17:53 ID:???
>>847 834 :Name_Not_Found :04/01/22 16:41 ID:???
>>833 わざわざ解凍の必要なzipファイルでよそのサーバーにアップしたのなんて大抵見る気しませんよ。
CSSソースだって、無駄な改行無くせば、充分ここにさらせる量でないの?
850 :
775:04/01/22 17:57 ID:???
>>775は文章が読めない人みたいだから、結局、解決策を教示してやっても無駄なのでは。
>>850 「<dl class="example">」がどうかしたのか?(笑)
ぐだぐだ言ってないで落とせばいいだろ。
アホか。
HTMLソース
>>785 CSSソース
td { letter-spacing: 0.2em; line-height: 15pt; font-size: 10pt; }
A:link { color:black }
A:visited { color:black }
A:active { color:black }
A{ text-decoration:none }
A:hover { text-decoration:underline; }
A { line-height: 20pt; }
.a { font-size : 10pt; padding: 10px; }
素晴らしいソースだな。
特にa要素周りが。
>>853 わざわざ落として解凍してそれか。
ついでに「回答」もしてやれよ。
なんちゃって!!!!!!!!!
856 :
818:04/01/22 18:40 ID:GFu/Z4oR
>>843 ごめんなさい。これからきをつけます。
でも、べんきょうになりました。ありがとうございます!
>>846 >>855他
デジャブ合戦?
アホを相手にするのもなかなか骨が折れるという見本
>>853 俺もa要素周りは同じ感じなんだがもしかして俺も糞ですか?
まぁcolorが全部同じblackってとこは意味わかんないが。
香ばしいな
おまえら、質問はなんだったのか、もはや覚えていやがりませんよね。
漏れもです。
>>853 何をしたいの?
何をいいたいの?
...
要するに、最低限のhtmlどころか、最低限の日本語による論理的な
コミュニケーションが取れない方はお引取りください、ってこった。だと思う。
リンクには下線引いてくれよ頼む
>>775 落としたソースで
>>773の状況が再現出来なかったんで、
やりたい事と現状が理解できないんだけどさ。
line-height:15ptとしてるけど、
これを30ptや50ptにしても行間は変化無しなんですか?
微妙でも変化するなら適用はされてるとおもうんだけど。
字間を空けるために、letter-spacingを1pxで指定すると、
改行の1行分が詰まってしまうのは仕様ですか?
1行あけたところ→空きなし
2行あけたところ→1行分の空き
字間も空けつつ、行送りは元のままでっていうのは無理かな。
ちょっと小難しいこと聞きますが、普段リンクの下部に点線を表示させておいて
マウスオーバーで背景色を出すということは可能ですか?
点線:青色
マウスオーバー:点線を表示させたまま背景色を薄青で表示(その他の線は出さない)
IEでリンクを押した瞬間に出る黒い点線も出したくないです。
実現可能かわかりませんが、よろしくお願いいたします。
866がムカツク
>>864 「改行」っていうのは、連続brタグのことなのかよ。
漏れは改行というと CR か LF しか思い浮かばないんだけど。
ってか、連続<br>は「行送り」ではないだろう。line-height≒行送り。
<br><br> ってダサい。CSSの前にHTMLを理解しろよって感じ。
>866
>点線:青色
a に border
>マウスオーバー:点線を表示させたまま背景色を薄青で表示(その他の線は出さない)
a:hover に background-color と text-decoration
>IEでリンクを押した瞬間に出る黒い点線も出したくないです。
WindowsIEではCSSではムリ(のはず)
871 :
866:04/01/22 23:26 ID:???
>>868 うお、何か気に触ること言ってしまったのでしたらゴメンなさい(;´Д`)
>>869 今時<br><br>がダサいって奴も珍しいな。それは一昔前の話だろ。
873 :
866:04/01/22 23:29 ID:???
>>870 borderだと破線が出なかったんです。
小難しいとか書かれてたのが小馬鹿にされたみたいで気に障っちゃったんだろ
厨がいるねえ・・・冬休みまだ終わってなかったっけ。
IE5.5以降だと
<a href="#" hidefocus>ほげ</a>
でリンク周りの点線が出ないんだなぁ。
標準でないのが気に入らんっちゅうなら
<a href="#" onmousedown="this.hideFocus=true">ほげ</a>
か。どっちにしてもCSSの話じゃないな。
>>871 可能かどうかは、仕様書やリファレンスを読めば解かるだろ。
少しは自分で調べたり、学習したり、試しなさいよ。
何か疑問に思ったら、その度に人に訊くのですか貴方は。
自分で何の努力もせず、答えだけを要求するという怠慢な態度が許せん。
いや、夏休みかもしれないぞ。
きっと毎日が夏休みなんだろ。
ゴールデンウィークかもしれないぞ
>>873 これでどうだ
border-bottum:1px dotted blue
bottumたん(;´Д`)ハァハァ
885 :
883:04/01/22 23:56 ID:???
すまん,漏れが悪かった
border-bottom:1px dotted blue
今時<br><br>のが珍しい気がするが……
つーか破線ってdashedのことじゃないのか。ケツにセミコロンもないし。
↑ネタは余所でやってくれ
残念ながら<br><br>のような糞htmlのが圧倒的に多いけどね。
それがダサイ事には変わりないが。つーか、スレ違い。
889 :
866:04/01/23 00:22 ID:???
>>874 何かよくわかりませんがスミマセンでした。
>>877 win+IEでは無理というお話でしたので、その点についてはあきらめます。
>>878 自分で試してみて、どうにも破線が出なかったのでお聞きしたんです。
疑問に思ったのですが、どう検索すればよいのやらという感じでした。
>>883 ありがとうございます。早速試してみます。
>>889 試してみますじゃなくて、できたorできなかったの方がいいと思うYO!
っつーか<br><br>のサイトって多いだろ。俺もよく使うんだが
それ以外の指定方法でオススメってあるのか?
>>893 スレタイをよく読め。
<style type="text/css">
<!--
div.test { margin-bottom : 2em ; }
-->
</style>
</head>
<body>
<div class="test">
<p>テスト用カキコテスト用カキコテスト用カキコ</p>
</div>
<p>テスト用カキコテスト用カキコテスト用カキコ</div>
</body>
例えばこれで2行分空けたとする。でも3行空けたい。1行しか空けたくない。
こんな場合はいちいちclassを作んないと駄目。わかるか?
<br>に勝るものがないだろ。
895 :
894:04/01/23 00:55 ID:???
しかも「単純な改行」に関しては<br>以外ない。4文字で済むタグに
勝るものがあれば教えてくれ。俺は無いと断言できる。
>>894 >でも3行空けたい。1行しか空けたくない。
見栄えだな。
>>895 文字数でCSSが推奨されてるわけじゃない。つまらんからカエレ。
要するに、根本的に、htmlもxhtmlもCSSも分かっていない、ということか。
「h1は文字を大きくするタグ」、とか思って、そこから脱却できないクチか
それと五十歩百歩の香具師。
>>899 しかも「単純な文字巨大化」に関しては<h1>以外ない。4文字で済むタグに
勝るものがあれば教えてくれ。俺は無いと断言できる。
>>899 「h1」って文字を大きくするタグじゃないんですか?
>>901 ごめん。気の利いたボケが思いつかない。
>>902 知らなかった。俺見出しの為の大きくするタグだとばっかり・・
894がpについてmarginを設けたいのにわざわざ外にdivを作っているのとか
そもそもタグの対応がへんちくりんとか、誰も突っ込んであげないのね。
>>903 > 知らなかった。俺見出しの為の大きくするタグだとばっかり・・
>見出しの為の
正解
>大きくする
それは結果論
>>904 この程度の知識か、と思った段階でそいつの書くソースには興味がなくなるから見てない。
( ・∀・ )! div厨ってコレか!?
正確にはこうか
<style type="text/css">
<!--
div.test { margin-bottom : 2em ; }
-->
</style>
</head>
<body>
<div class="test">
<p>テスト用カキコテスト用カキコテスト用カキコ</p>
<p>テスト用カキコテスト用カキコテスト用カキコ</div>
</body>
それはマジボケっすか
間違えた。こうだった(w
<style type="text/css">
<!--
div.test { margin-bottom : 2em ; }
-->
</style>
</head>
<body>
<div class="test">
<p>テスト用カキコテスト用カキコテスト用カキコ</p>
</div>
<p>テスト用カキコテスト用カキコテスト用カキコ</p>
</body>
<style type="text/css">
<!--
.test { margin-bottom : 2em ; }
-->
</style>
</head>
<body>
<p class="test">テスト用カキコテスト用カキコテスト用カキコ</p>
<p>テスト用カキコテスト用カキコテスト用カキコ</p>
</body>
こうだろ
>909
>911
頼むから教える側には来ないでね。
<p>属性にclassが指定出来たなんて、生まれて初めて知ったよΣ(゚д゚lll)
ちょっと待ってくれ!ということは、ここの住人は「行間を空ける」はもとより
「通常の改行」すら<br>を使わないってことか!?
>>914 汎用属性って知ってますか?
はい、もう一回。汎用属性。
>>915 発言で改行するときくらいかな。
それすらも気持ち悪い、って人もいるけど、ここまでが俺の許容範囲。
>>914がdiv厨の理由なのかも知れないとオモタ
ネタレスとかマジでいらないっす。
本気で初心者なら
>>4とか回ってくれ。
>914
class指定はbody以下のほとんどの要素にできるぞい
ていうか
>>4らへんのサイト回って勉強しれ
はい。正直告白しますが、たった今までdiv厨でした・・。
じゃあ例えば
>>912のソースを利用したとして
<p class="test">テスト用カキコテスト用カキコテスト用カキコ</p>
この部分の「テスト用カキコ」をある程度のところで改行したい場合
みんなはいったい何を使って改行するの?<p>タグ使っちゃったら
class指定が影響出る。かといって<br>は使わない。
俺には難しすぎる・・。誰か回答よろ
>>921 > この部分の「テスト用カキコ」をある程度のところで改行したい場合
いや、そもそも「改行したい」と思わないんだ。
改行はブラウザ任せ。
見辛い、ってのが原因で改行したいのならインデント入れるし。
なんで改行の話で<p>タグ新たに入れるとかいう話が出て来るんだよ。
マジレスしちまうと、pか親要素で左右にマージンとって、あとは自動改行
にまかせるのが基本。強制改行は本人の環境では「ほどよい」かもしれないが
超高解像度や低解像度な環境では程よくならない。ていうか、>4のサイト回れって。
>>922 なるほどなるほど。根本的な考えが違うわけですな。
>>4のリンク周って最初から勉強しなおします。
その前にこれだけ答えて欲しいんですが
改行をブラウザ任せだと、例えば文の頭に「っ」や「、」「。」がきたりする場合もありますよね?
そういうのって気になったりしませんか?
あと、その回避方法のインデントについてだけ教えていただけませんか?
>>924 禁則文字、って最初に来なくない?試してないけど。
body{
margin : 0 5%;
}
とか。
左右に隙間を与えりゃ見やすくなるでしょ。
ちと便乗質問
例えば箇条書きの場合は<br>なしでどう表現する?
>>926 初心者スレ池
ul要素がなんで存在してると思ってるんだ。
便乗質問とかいって、100%同一人物だろ。極端にレベルが低すぎるぞ
箇条書きならリスト項目使えよ。つうかいい加減
>>4に逝ってくれ。
>>926 箇条書きはリストだから ul または ol を使う
どうしても、CSSでやるなら
--
span.dialogue:after { content:"\A";}
--
<p>すると、戸を開けた先には老人がいて、<span class="dialogue">「回れ右」</span>といった。</p>
--
でよいのでしょうか。
#対応ブラウザあるか知らないけど。
>>928 便乗、って「俺も」って意味と「質問したついでに」という意味と解釈できるから、別人を装ってる、というわけでもなかろう、と。
スマソ。欲張って質問したせいで別人装うってる感じになってしまいました。
聞きたかったのは「cssでどう表現するのか?」という意味でした。
>>925 >>930 ありがとん
で、このまま1000まで行くわけ?
>>932 CSSは正しいHTMLに適応させるべきだから、HTMLから勉強しなおした方がいいと思う。
>>932 >>4を100回読んで来い。
でもul使うと勝手に出る■とかがウザい。css使ってわざわざ画像にするのも面倒だしなぁ。
「>>」使いたいときなんかが困る。
>936
ulのリストマーカーがウザいならCSSで消せよ
俺も
>>4を100回読むの刑かよ・・。っつーか消せるのかよw
>>939 list-style-type : none;
942 :
940:04/01/23 02:03 ID:???
>>939 あ、追記ね。
list-style-image : url(li.gif);
画像も使える。サイズは12*12くらいならOKだっけか。
<br>の使い方に関して気になる事があるけど、タグの話はスレ違いよね。
>>943 strictHTMLスレこいよ。相手してやるぜ。
なんだこのスレの状態は _| ̄|○
無知な人間ばかりじゃないか _| ̄|○
ここにいる香具師らは/.Jで中途半端な知識をひけらかしてうだうだ言ってる輩と同じ匂いがするな。
なんかこう言う時代が来たのかなぁ、って感じ
スレのレベルが極端に下がってんな…_| ̄|○
強制ID激しくキボンヌ
そういう次元じゃないと思うぞ。
基本のキだし
というか...
初心者に理解できるように説明してないからだろうな(w
初心者スレじゃないしなぁ
だが、初心者スレでCSSの質問をすると
ここに回されるのは事実だ。
規格書の和訳見れる人いる?
初心者が口にする紋切り型FAQ。
「〜はできますか?」
仕様書やリファレンスを読んでください。
「〜ができません」
できなくて当たり前だったり。
「〜のサイトみたいに」
人の真似をして楽しいですか。
「これってバグですか?」
仕様書やバグ辞典を読めば解かります。
「質問の仕方が悪かったようですね」
レトリックを身に付けてください。
「初心者なんで」
何時まで初心者でいるつもりですか。
「できました!」
おめでとうございます。
「ひと通り調べました」
ほとんどの場合は嘘。
「よくわかりません」
まったくの思考停止状態。
「わかりました」
本当にわかっていますか?
>>961 お前さんは、そのうちどんな質問に対しても
「テンプレのリンク周れば解る」とか言い出しそうだな。
963 :
Name_Not_Found:04/01/23 16:01 ID:YfdWu/1G
________
| |
| 画像1 | aaaaaaa
| | aaaaaaa
|_______|
_________
| 画像2 |
| |
|________|
という事をしたいのですが、2点ほど出来ずに頭抱えています。
1つはテキスト(画像1の隣にくるaaaaの部分)なんですが、
テキスト部が画像1に対して中央に来るようにしたいため、画像1に
vertical-align:middleを指定、そして回り込み指定もしているので
同様に画像1にfloat:leftを指定しています。が、vertical-align=middleが
効きません。middleに限らず何も効いていないようです。floatとvertical-align
を2つ同時に使用する事は出来ないのでしょうか。尚、画像1はimg width/height
を使用しています。
もう1つは、white-space:nowrapを画像2に指定しているのですが、
windowが大きくなると画像2がテキスト部の下に表示されてしまいます。
因みに画像1/テキストの次に<br>を入れて画像2を入れています。
>>961さんの仰る事はごもっともだと思います。自分を鑑みてみても
正にその通り・・・自分でも鬱入ってしまっている位です・・・
964 :
963:04/01/23 16:03 ID:???
あぁ、画像ズレちゃっていますがもちろんキッシリ□画像の隣にテキストです。
念のため。
floatとvertical-alignはその性質上相容れるものではない
BRで改行させてレイアウトを取っているようだが、当然正しい使い方ではない
今はたまたま思い通りに見えているだけ
解決策は色々あるが、具体的なソースを見ないとあまり適切は指示は出来ない
imgにdisplay:blockを指定したり色々試してみてね
画像1を float した段階で、画像1は通常フローから切り離され
単独で浮動ボックスを形成するので、もはや画像1とは別のボックスと
化したテキスト部分には vertical-align が効かないってことじゃないかな。
2点目は↓こういう話だと思うんだけど
┌───┐
│ │aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
│画像1 │aaaa<br>
│ │┌───┐
└───┘│ │
│画像2 │
│ │
└───┘
画像2に対して white-space:nowrap は意味がないでしょ。
やるなら、画像2を <div> か何かで囲んで、それに対して
clear: left を指定する。画像2を単に display: block しただけでは
この状態は解消されないと思う。
>>963 とにかくHTMLソースを出して下さい。
vertical-alignはテキスト、即ちインライン要素に対して効かせるもの、ブロックレベル要素の垂直位置は動かせません。
>>693 テキストはpadding-topかmargin-topで高さを調節してやればいいんじゃない?
画像のサイズはあらかじめわかっているわけだし、何px指定すればテキストが
中央あたりにくるかは予想できるだろうし。
clear: leftってデフォルトで左に寄ってしまう仕様を解除するというタグですよね?
それ使うとどこに行ってしまうのでしょうか?
>>969 clearはfloatを解除するプロパティーです。(タグに非ず)
知らないことが出てきたら
>>4を見て勉強しませう。
>それ使うとどこに行ってしまうのでしょうか?
訊く前に、自分で試したのかな。
>>970 他のスレなんかもとっくにリンク切れになってるからほっとけば?
ならば他のスレッドもリンク切れを直しませう。
おつ。
( ;´Д`)うめぇぇぇぇぇぇぇー!
梅&梅
梅('ж')すっぺぇ〜
980 :
Name_Not_Found:04/01/24 18:08 ID:DZE2R2zM
このように書いて外部cssとしてhtmlに呼び出して背景画像を特定の位置に表示させた場合に、フレームページにて、スクロールさせると、内容がグチャグチャにひきづられたようになります。
解決策や、原因わかるかたお願いします。WinXP+IE6.0です
#main {
background-image:url(../images/main.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 240px 221px;
}
>980
なんでbackgroundプロパティで纏めて指定しないんだ?
それはともかく、漏れが試した中では再現しなかったのでソースの要点と、
IEでだけなるのかMozillaやOperaでもなるのか
追記してくれるとありがたい。
埋め。
埋め炉!!!
楳
小梅ちゃん
986 :
Name_Not_Found:
{position:absolute; bottom:0px; left:0px;}
で左下に画像を配置してみたんですが、IE6、Mac版IE5.17、ネットスケープ7(Mac、Win両方)等で確認すると、どのブラウザでも何故か下に10ピクセル程度の隙間ができてしまい困ってます。BODYにmargin、padding共に0px指定してます。
IE6以外では{position:fixed}にすると解決するんですが、IE6ではfixedを認識してくれないようで、ムチャクチャになってしまいます(さすがにIE6を無視することもできません)。
何かいい方法ないでしょうか。