5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

CSS初心者スレッド=7th=

1 :Name_Not_Found:2009/08/29(土) 15:30:27 ID:???
CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。

※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。

《関連スレ》
Webサイト制作初心者用質問スレ Part 212
http://pc11.2ch.net/test/read.cgi/hp/1249471196/

《前スレ》
CSS初心者スレッド=6th=
http://pc11.2ch.net/test/read.cgi/hp/1234355194/

《過去スレ》
CSS初心者スレッド=5th=
http://pc11.2ch.net/test/read.cgi/hp/1228900036/
CSS初心者スレッド=4th=
http://pc11.2ch.net/test/read.cgi/hp/1218200382/
CSS初心者スレッド=3rd=
http://pc11.2ch.net/test/read.cgi/hp/1212198165/
CSS初心者スレッド=2nd=
http://pc11.2ch.net/test/read.cgi/hp/1207202319/
CSS初心者スレッド=1st=
http://pc11.2ch.net/test/read.cgi/hp/1193327030/

2 :Name_Not_Found:2009/08/29(土) 15:31:36 ID:???
【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが?
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
 http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width(height)は、要素の内容領域の幅(高さ)を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
 http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
参考「IEとNNのBOXの計測方法の違いについて」
 http://www.fromdfj.net/html/border2.html

Q2: tableなどブロック要素をセンタリングするには? text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記(特に5.)をご覧ください。
1.'text-align'に関する考察
 http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
 http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
 http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.Tableのセンタリング
 http://members.jcom.home.ne.jp/jintrick/Personal/css_miss_table.html
5.ブロックレベル要素をセンタリングする方法
 http://www.mozilla.gr.jp/standards/webtips0004.html

3 :Name_Not_Found:2009/08/29(土) 15:32:42 ID:???
【FAQ】
Q3: CSSで段組するには?
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
 http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
 http://web.archive.org/web/20031005195659/http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラムデザインの実現
 http://web.archive.org/web/20040603063133/http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
スタイルシートでマルチカラム・デザインを実現する方法
 http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
 http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
試驗場 - 段組(position版)
 http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
段組れいあうとてすと (floatによる段組の例)
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと(Netscape4でも崩れない段組みの実例)
 http://web.archive.org/web/20041001014138/http://homepage3.nifty.com/fores/
リストを用いたレイアウト
 http://css.maxdesign.com.au/index.htm

4 :Name_Not_Found:2009/08/29(土) 15:33:43 ID:7QWVTNNj
【FAQ】
Q4: なんかフロートの表示が崩れるみたいなんですけど?
A4: まずclear忘れがないかを確認してください。
floatさせる要素にはwidth指定が必須(img要素以外)。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
またfloat:left;で回り込むのはテキスト(imgを含む)だけです。ブロック自体を横並びにするには、後続要素にも“float:left;”なり“margin-left:(浮動要素のwidth);”なりを指定する必要があります。WinIEの間違った実装で誤解が多いので注意。
 http://cssbug.at.infoseek.co.jp/detail/winie/b054.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
 http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
 http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
 http://cssbug.at.infoseek.co.jp/detail/winie/b053.html

Q5: CSSで擬似フレームってどうやるの?
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
 http://web.archive.org/web/20040221221340/http://kobit.info/tips/overflow.html
 http://web.archive.org/web/20040215182735/http://kobit.info/files/frame.html
overflowを用いた擬似フレーム
 http://www.fromdfj.net/html/overflow.html
レイアウトサンプル 擬似フレーム
 http://www.rju666.com/web/layout/imitate_frames.html

Q6:画面中央に配置するにはどうすれば?
A6:左右(水平方向)のセンタリングはA2に既出。垂直には色々な方法があります。
 「スタイルシート 縦中央(垂直中央)」参照のこと。
 http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。

Q7:背景画像を二つ指定するにはどうするか。
A7:CSS2.1ではbackground-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。
 もしくはCSS3を待ちませう。

5 :Name_Not_Found:2009/08/29(土) 15:34:56 ID:???
【FAQ】
Q8.dt・ddを横並びにしたいのですが。(会話文など)
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
 http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03

Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか?
a:link img, a:visited img, a:hover img {border:none;}
NN4は http://cssbug.at.infoseek.co.jp/detail/nn4x/b022.html 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. http://cssbug.at.infoseek.co.jp/detail/winie/b040.html

Q10: リンクを新しいウィンドウで開かせるにはどうしたら?
A10: CSSではできません。target属性かJavaScriptでやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がW3Cの方針です。

Q11. height:100%;としても高さが100%になりません。
A11. heightを%単位で指定するためには親要素の高さを明示的に指定する必要があります。下記サイトを参照のこと。
「height: n%;の正しい仕様」
 http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

Q12: いままでHTMLでやってた××をCSSでやるにはどうすればいい?
A12: 下記をご覧あれ。テーブル・レイアウトは段組のFAQ(A3)を見なさい。
「いままでの HTML との対照」
 http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
HTML でのレイアウト指定の、 CSS での指定との対応表
 http://deztec.sakura.ne.jp/x/01/tips/page/p0037.html

6 :Name_Not_Found:2009/08/29(土) 15:36:00 ID:???
【参考】
 IEの position:absolute; のバグを利用した擬似フレーム

----------------------------------------------------------------

*IEの position:absolute; のバグを利用した擬似フレーム

1.標準モードにする
2.body {height:100%; overflow:auto;}
3.fixしたいブロックを position: absolute; で指定

以下に示すようなハックを用いることにより、全ブラウザへの対応も可。

/* 全ブラウザに適用 */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}

/* IE6 のみ読み込む */
* html #menu {position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}

《実現例》
CSS frame emulation
http://www.stunicholls.myby.co.uk/menu/background2.html

7 :Name_Not_Found:2009/08/29(土) 15:58:28 ID:???
【初心者向けの解説】
正しい知識を得たい人の爲のCSS2リファレンス
 http://hp.vector.co.jp/authors/VA022006/css/

【構文チェック】
W3C Markup Validation Service
 http://validator.w3.org/
W3C CSS Validation Service
 http://jigsaw.w3.org/css-validator/

【ブラウザのバグリスト】
CSSバグリスト@CSSバグ辞典スレッド
 http://cssbug.at.infoseek.co.jp/

【仕様書】
CSS 2.1 Specification
 http://www.w3.org/TR/CSS21

8 :Name_Not_Found:2009/08/29(土) 16:00:21 ID:???
こんなもんだっけ?
FQAちょいと昔のだから修正有ったらよろしく

9 :Name_Not_Found:2009/08/30(日) 22:57:26 ID:???
>>7
正しい知識を得たい人の爲のCSS2リファレンス
 http://hp.vector.co.jp/authors/VA022006/css/

これプロパティ抜けまくりじゃん
w3cのプロパティ一覧見てきたけど印刷関係のプロパティとかあちこち抜けがありすぎて初心者の解説にはならないと思う



10 :Name_Not_Found:2009/09/04(金) 15:42:17 ID:0FoR9oB5
a;hoverで背景色を指定した場合、
一部の箇所だけ背景色を無効にすることって出来ないでしょうか?

例えば
<div id="sidebar">
<a href="menu.html">MENU</a>
</div>

上記のsidebar内のaタグには背景色がつかないようにするとか

11 :Name_Not_Found:2009/09/04(金) 16:23:29 ID:???
>>10
■解決策
hoverを適応させる箇所を限定して記述
<div id="back_color"><a href="menu.html">MENU</a></div><!-- 適用させる -->
<div id="back_none"><a href="menu.html">MENU</a></div><!-- 適用させない -->

#back_color a:hover {#ff0000;}
#back_none {}


12 :Name_Not_Found:2009/09/04(金) 16:24:15 ID:???
CSS間違えた

#back_color a:hover {background:#ff0000;}

13 :Name_Not_Found:2009/09/04(金) 20:52:25 ID:???
>>9
初心者は印刷用プロパティなんか使わんから安心しろ

>>10
IDとかCLASSとか調べれ

14 :Name_Not_Found:2009/09/04(金) 20:54:31 ID:???
初心者が使わないとしても、ここに書いてある事がすべて正しいと思って鵜呑みにする奴らはどうすんの?

15 :Name_Not_Found:2009/09/04(金) 21:40:52 ID:???
間違ってることが書いてあるなら作者に指摘してこい
抜けはそこの場合わざとだからほっとけ

16 :Name_Not_Found:2009/09/04(金) 21:55:04 ID:???
さすがに間違いもあるのに「正しい知識を・・・」とか笑っちまうよ

17 :Name_Not_Found:2009/09/04(金) 22:16:55 ID:???
ここで指摘してないでメールしろ、うぜえ
スレチも理解できない奴が居座る方が笑えるわ

18 :Name_Not_Found:2009/09/04(金) 22:22:51 ID:???
テンプレで載ってるんだからスレチでもない件

19 :Name_Not_Found:2009/09/04(金) 22:40:15 ID:???
もうスレチ野郎に構うなよ、これいつもの奴だろ

20 :Name_Not_Found:2009/09/04(金) 23:26:30 ID:???
騒ぎを収めたい人は作者ですかね

21 :Name_Not_Found:2009/09/06(日) 02:05:40 ID:5xbHHxvS
すみません。助けてください><

1) 画面が小さくなった時に横スクロールさせたい。
div#topmenu{
position:fixed;
bottom:0;
vertical-align:bottom;
margin:0 auto;
overflow:hidden;
width:1105px;
height:332px;
display:block;
}
div#topmenu ul{
margin:0 auto;
overflow:hidden;
position:relative;
top:-120px;
}
div#topmenu ul li{
float:left;
position:relative;
}

としたメニューが入っているのですが、(この後更にli内でa要素指定でロールオーバーしていますが、多分関係ないので割愛します)
このメニュー部分全体を
窓が小さくなったときに横スクロールさせることって可能でしょうか?
現状画面を小さくすると、左端がぶつかったらそのまま消えてしまいます。
(おそらくoverflow:hidden;をかけているからだと思いますが、かけないと通常時から縦スクロールバーが出てしまいます。)

すみません、改行エラーひっかかったので続きます。

22 :21:2009/09/06(日) 02:06:23 ID:5xbHHxvS
2)下記のCSSテクニック
http://scuderia-web.com/tips/xhtml_css/equal_box_heights.php
の、「ソース(高さ画面いっぱい)」を設定したとき、
IE7で見るとものすごい長さのスクロールバーが出てしまいます。
これは回避できないでしょうか?
出来ない場合、似たような表示にさせるにはどうすればいいでしょうか?


書き込み初めてなので、いろいろ至らない点があったらすみません。
改行エラーで書き込めなかったため、ソースも読みにくくてすみません。
もう少し詳しくCSS・XHTML出した方が良ければ持ってきます。
どうぞよろしくお願いいたします><

23 :Name_Not_Found:2009/09/06(日) 02:25:11 ID:???
詳しくはいらんから出る最小単位のHTMLとCSS出せ

24 :Name_Not_Found:2009/09/06(日) 03:12:52 ID:???
出る=出せる ってことでOKでしょうか?

1)HTML
<div id="topmenu">
<ul>
<li id="topmenu01"><a href="">link01</a></li>
<li id="topmenu02"><a href="">link02</a></li>
<li id="topmenu03"><a href="">link03</a></li>
<li id="topmenu04"><a href="">link04</a></li>
<li id="topmenu05"><a href="">link05</a></li>
</ul>
</div>

CSS
>>21に載せたもの(改行の関係で割愛させてください)

続きます

25 :Name_Not_Found:2009/09/06(日) 03:13:42 ID:???
2)HTML
<div id="catwrapper" class="cl">
<div id="catsidemenu" class="cl">
<div id="catSidePhotoBg">
<div id="catSidePhoto">
<span>サイドバー写真</span>
</div>
</div>
<ul>
<li><a href="menu01">menu01</a></li>
<li><a href="menu02">menu02</a></li>
<li><a href="menu03">menu03</a></li>
<li><a href="menu04">menu04</a></li>
<li><a href="menu05">menu05</a></li>
</ul>
</div>
<div id="catbody">

</div>
</div>

続きます

26 :Name_Not_Found:2009/09/06(日) 03:14:23 ID:???
2)CSS-1
div#catwrapper{
background:#e6e6e4;
overflow: hidden !important;
overflow: visible;
min-height: 100%;
height: auto !important;
height: 100%;
width:1004px;
z-index:-100;
}
div#catwrapper div#catSidePhotoBg ,
div#catwrapper div#catsidemenu{
float:left;
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
padding-bottom: 0;
margin-bottom: 0;
overflow:hidden;
height: 100%;
}
div#catsidemenu{
height: 100%;
width: 400px;
}
div#catsidemenu div#catSidePhoto{
display:block;
width:217px;
height:800px;
overflow:hidden;
}
続きます

27 :Name_Not_Found:2009/09/06(日) 03:15:23 ID:???
div#catsidemenu ul ,
div#catsidemenu ul li{

}
div#catSidePhotoBg{
background:url(images/sidebarbg.png) repeat-y;
width:257px;
height:100%;
display:block;
position:relative;
z-index:150;
overflow:hidden;
float:left;
text-align:left;
}
div#catbody{
width:auto;
padding:90px 0 0;
margin:0 0 0 420px;
height:100%;
text-align:left;
}
.cl {
display: inline-block;
}
.cl:after {
content: "";
display: block;
clear: both;
}

以上です。ちょっとデザインの図解描いてきます。

28 :21:2009/09/06(日) 03:33:36 ID:???
>>24-27=21 です。すみません

デザイン図解
http://firestorage.jp/download/5c328a13fd96e1d2918993d50b329e9921aca7d5

このcatsidemenuとcatbodyを画面の高さいっぱいにしたいんです。
FFもあまりに大きな画面で見るとうまくいってないようです・・・(catsidePhotoの高さ800pxに依存?)

29 :Name_Not_Found:2009/09/06(日) 12:27:38 ID:???
最小単位・・・

30 :21:2009/09/06(日) 15:25:10 ID:???
うっかり影響する場所がないとも限らないので
該当部分抜き出しで書きました。
オメヨゴシすいません><

31 :Name_Not_Found:2009/09/06(日) 20:22:26 ID:???
影響しないところまで自分で切り分けてから出すんだよ
まさか切り分けまで他人にしろって言ってるのか?

32 :21:2009/09/06(日) 20:39:37 ID:???
ほぼ影響する範囲内の記述を抜き出したつもりですが・・・
もしいらないものが混じっていたらすみません。

33 :Name_Not_Found:2009/09/07(月) 15:04:33 ID:???
あまりに初歩的で申し訳ないんですが、教えてください。
CSSファイルを外部から読み込んだhtmlファイルで、ある数文字だけ赤字にしたい
時はどうするんですか。
もしかして、外部のCSSにたとえば「redletters」とかを定義してhtmlファイルに

ふつうの黒字で
<div class="redletters">
ここは赤字
</div>
です。

なんて風に書くんですか。
ここだけインラインで色を指定なんて古典的な非推奨な?ことやりませんよね。

よろしくご教示ください。おねがいします。

34 :Name_Not_Found:2009/09/07(月) 16:34:49 ID:???
>>33
私は<span class="point"></span>などとして囲んでいますよ。
もちろん色指定は外部CSSです。

色などで指定するより、何故色を変えるか・その変えた意味に合わせたクラス名にしておくと、
後々「やっぱりオレンジにしよう」とかなったときに便利です。

35 :Name_Not_Found:2009/09/07(月) 17:28:20 ID:???
>>33
それ、CSSじゃなくてHTMLの質問ですね。

今回は「文字を赤くしたい」ということだけど、
「なぜ赤くしたいのか」をよく考えてみて下さい。

周りの単語等の中で「強調したい」なら、

 ふつうの黒字で<em style="color: #f00;">ここは赤字</em>です。

とします。「リンクを貼るから赤くしたい」なら、

 ふつうの黒字で<a href="url" style="color: #f00;">ここは赤字</a>です。

です。>>34は例にspan要素を使っていますが、
spanは他に該当する要素がないときに泣く泣く使う要素です。
まず、構造化するときに適切な要素があるかどうかを考えましょう。

クラス名については>>34に激しく同意。

36 :33:2009/09/07(月) 18:12:41 ID:???
>>34-35
大変詳しく教えていただきありがとうございます。
クラス名は意味でつけるといいんですね。
取り急ぎお礼申し上げます。

37 :33:2009/09/07(月) 21:25:43 ID:???
>>33です。
>>34-35で回答をいただいて考えてみたのですが、
(1) 外部CSSをリンクしておけば50ページのサイトでもCSSを修正するだけで全てに反映して変更が容易である。
(2) しかし、例外としてn箇所だけ見た目を変えたい場合は…?

(1)は分かるんですが、(2)の場合でも(1)を実現するために、htmlファイルから徹底的に固有の色などを
括りだすべきなのか(下記ソース)、html中にインライン記法?で変更してしまうのがよいかが分かりません。
臨機応変というのが答えかもしれませんが、基本的な考えというのがよく分かりません。
お考えを教えていただければ助かります。

例外変更数nが大きくなるようなら構成練り直しということとは思いますが、
よろしくお願いします。長文すみません。

-----------------------
.remark_words{
color:#f00;
}
.remark_paragraph{
color:#00f;
}
-----------------------
…黒字の文章
<p>
段落(他の段落と共通の見た目)
</p>
<div class="remark_paragraph"><p>
段落(ここだけ青色を変えたい)
</p></div>
黒字の文章
<span class="remark_words">ここだけ赤字</span>
黒字の文章…

38 :Name_Not_Found:2009/09/08(火) 00:19:40 ID:???
<p>タグ間の行間を詰めるにはどうすれば良いのでしょうか?
具体的には,

<div><p>aaaaaaa aaaaa aa</p><p>bbbbbbbbbbbbbb b bb</p><p>cccc cccc ccccc</p></div>

とあった場合に,aaa..とbb..とccc.の間の行間を 0 にしたいです.下記のように指定したのですが行間が空いてしまいます.
(border は確認用)

p {
margine: 0px;
padding: 0px;
line-height: 0%;
border: solid 1px #C2C2C2;
}

どこか見落としがあると思うのですが,教えていただけないでしょうか?

39 :Name_Not_Found:2009/09/08(火) 09:40:44 ID:???
>>37
複数の外部CSSに分けることだってできる
結局は全体を見て決めるしかない

>>38
> <p>タグ間の行間を詰めるにはどうすれば良いのでしょうか?
タグとタグの間?行間を調整できるテキストエディタをどうぞ

> margine: 0px;
スペルミス

40 :Name_Not_Found:2009/09/08(火) 15:25:26 ID:???
>>38
>line-height: 0%;
いらないのでは?

41 :33=37:2009/09/08(火) 21:41:06 ID:???
> >>37
> 複数の外部CSSに分けることだってできる
> 結局は全体を見て決めるしかない
>
経験者の方の言葉を聞けてよかったです。
これから経験を積んで行きたいと思います。

ありがとうございました。

42 :Name_Not_Found:2009/09/09(水) 10:48:17 ID:???
CSSはレンタルホムペ使う場合は作成してあるのでしょうか?

mono spaceを使っています。

43 :Name_Not_Found:2009/09/09(水) 13:08:06 ID:???
>>42
普通は自分で作るものだから置かないが、
「テンプレート」をサイト制作用に用意してあるサーバーなら、
そのテンプレートをダウンロードする形で取り込めるかもしれない

そのレン鯖は知らないので、サポート等を読んでくだしあ

44 :Name_Not_Found:2009/09/09(水) 18:17:20 ID:???


このブログテンプレートで、日付(01/10 Tue 2006)と記事の本文のスペースを空けるには
CSSのどこをいじればいいのでしょうか?
ttp://karma7.blog.shinobi.jp/Entry/29/

これがファイルです。
ttp://www.dotup.org/uploda/www.dotup.org122359.zip.html

45 :Name_Not_Found:2009/09/09(水) 22:01:57 ID:???
>>43
ありがとうございます

46 :Name_Not_Found:2009/09/10(木) 00:47:13 ID:???
>>44
ひでえ、そこFxだとそのサイト自体CSSが表示されねえwww
悪いこと言わないからそんなとこの使うな

47 :Name_Not_Found:2009/09/10(木) 09:18:48 ID:???
>>46
普通に表示されてます

48 :Name_Not_Found:2009/09/10(木) 13:46:17 ID:???
こっちでも普通に表示されないな
FireBugでも「この要素にはスタイルのルールがありません。」になってるわ

49 :Name_Not_Found:2009/09/10(木) 18:18:22 ID:???
>>46=>>48

50 :Name_Not_Found:2009/09/10(木) 21:30:53 ID:???
むしろ作者が来てるんじゃないか、この流れw

51 :Name_Not_Found:2009/09/10(木) 22:56:35 ID:???
普通に見えるな
見えない人はブラウザ再インストールするとかウイルスチェックといった初歩的なことをしたらいい

52 :Name_Not_Found:2009/09/10(木) 23:14:28 ID:???
そのサイトのCSSだけ表示させないウィルスがあるとしたら凄いなw

53 :Name_Not_Found:2009/09/10(木) 23:19:29 ID:???
ていうかhref="http://karma7.blog.shinobi.jp/css/"のせいじゃね?
昔CSSファイルを装ってアタックする手口であったから
そこんとこのセキュリティ関係をFxとOperaは強くして
明確にCSSと確認できない場合は無視してたような気がする
DirectoryIndexの設定と噛み合ってないんじゃないか

54 :Name_Not_Found:2009/09/10(木) 23:39:30 ID:???
見えないって言ってる奴自演きめえよ

55 :Name_Not_Found:2009/09/11(金) 00:14:49 ID:???
うわー

56 :Name_Not_Found:2009/09/11(金) 04:55:34 ID:???
>>54には、このスレ頭で某サイトを叩いてた奴と同じスメルを感じる。

57 :Name_Not_Found:2009/09/11(金) 11:05:14 ID:???
>>54
一応言っておくと俺は見えないと言ったわけではなくて
見えないんだとしたらこれこれこういう理由じゃないか、と言ってるだけだからな

58 :Name_Not_Found:2009/09/14(月) 18:40:56 ID:GHCfWm8d
p.class1 というクラスを定義しました。
この定義とそっくり同じだけど、背景色の定義だけを変えた p.class1_sel というクラスを定義したいです。
この場合、p.class1 と背景色以外同じ記述を p.class1_sel でもしないといけないでしょうか。
できれば p.class1_sel では p.class1 からの差分だけを記述したいです。

やりたいことは JavaScript で、マウスポインタの下にある p のスタイルを class1_sel にして色を変えたいのです。

ちなみに、他にも p.class2 とか p.class3 なんかもあって、それらでも同じことをやりたくて、それぞれ _sel 付きのクラスを定義したいです。


59 :Name_Not_Found:2009/09/14(月) 19:56:02 ID:???
クラスを2つ指定すりゃいいじゃないか

どうでもいいけどその程度のことにJS使わなくても・・・

60 :58:2009/09/14(月) 21:24:42 ID:???
>>59
クラスを2つ指定って??
<p class="class1 class1_sel"> みたいな?
で、class1_sel には差分だけを定義する感じですか?
class1 にも背景色は定義してあるんですが、別の背景色を定義した class1_sel と一緒にクラスを指定したら、どっちの背景色になるんでしょうか?
後ろに書いた方ですか?

って、おれのやりたいことってJS 使わなくてもできるんですか???


61 :Name_Not_Found:2009/09/15(火) 02:53:09 ID:???
「p.class1_sel では p.class1 からの差分だけを記述」って書いてあるのに
差分じゃなくて被ってる部分あるのかよwww
前半は全部yes、まあ先に書いた方の優先度が高くなってれば先に書いた方になる可能性もあるが

後半のは:hoverでできるだろ

62 :Name_Not_Found:2009/09/15(火) 11:45:18 ID:???
>>60
>class1_sel には差分だけを定義する感じですか?
それでもOK
複数のclass指定の仕方も合ってる

>どっちの背景色になるんでしょうか?後ろに書いた方ですか?
詳細度が同じなら後ろに書いたほう
「CSS 詳細度」でググってくだしあ

>おれのやりたいことってJS 使わなくてもできるんですか???
>>61の言うとおりJavaScriptではなく :hover でいいが、
IE6が使えない(a要素を除く)ので、IE6向けに両方やるのも有り

63 :Name_Not_Found:2009/09/15(火) 16:43:51 ID:GZqjI6jH
a { 〜 }
a:hover { 〜 }
のように書いて、マウスが乗ったときに色かえたりできますけど、これを
<a style="〜">のように<head></head>に書かないでやることはできますか?

64 :Name_Not_Found:2009/09/16(水) 08:18:26 ID:???
>>63
マルチ乙

65 :Name_Not_Found:2009/09/16(水) 12:07:59 ID:???
>>63
マルチ視ね

66 :Name_Not_Found:2009/09/16(水) 16:07:05 ID:???
>>63
外部ファイルってことかな。できるよ。
初歩の初歩だから検索すればごまんと出てくるよ

67 :Name_Not_Found:2009/09/17(木) 17:38:14 ID:???
・英単語でも日本語でも折り返ししない (white-space:nowrap;)
・テーブルの幅を固定する (width指定)
・幅からあふれても伸ばさない。はみ出た分は消えてよし(overflow:hidden;?)
これって並立可能?
どうやっても幅が広がってしまう
要はどうやっても大きさ固定なテーブルを作りたいだけなんだが。

68 :Name_Not_Found:2009/09/17(木) 17:40:28 ID:???
並列もなにもどこか被ってる箇所があるのかね僕ちゃん

69 :Name_Not_Found:2009/09/17(木) 18:41:14 ID:???
>>68
やってみた?
俺やってみたけど素直に書いたら広がりやがる

70 :Name_Not_Found:2009/09/17(木) 19:06:59 ID:???
>>69
日本語でおk
並立可能かどうかの質問してただろお前
誰も固定できるかどうかアドバイスしてねえよ

71 :69:2009/09/17(木) 20:07:42 ID:???
>>70
文亡乙ww
俺質問者じゃねーしw
全文読んでやれよwwww

>>67
他のプロパティ設定してもうまくいかんから、文字切り捨てる位しかできないんじゃね?


72 :Name_Not_Found:2009/09/17(木) 20:12:42 ID:???
>>67=>>69=>>71自演乙
IEのみ固定ならできるけどね
Firefoxの場合はスクリプトで対応しないといけないけどな
まあ自演する人のために教えたくはありませんので





さて次の質問どうぞ

73 :Name_Not_Found:2009/09/17(木) 21:18:16 ID:???
>>69とは別人だよ!
もしよろしければ教えていただけないでしょうか?


>>69
氏ねよキチガイカス


74 :Name_Not_Found:2009/09/17(木) 22:28:51 ID:6RuUd6eC
質問させてください

font-familyプロパティで、MS Pゴシックなどのフォント名の前に@を付けると
縦書きになるのですが、これが縦書きになるのは
@MS Pゴシックという縦書き用のフォントがあるからなのでしょうか
もしくはIEやOSサイドで縦書き化しているのでしょうか

宜しくお願いいたします

75 :Name_Not_Found:2009/09/17(木) 22:42:29 ID:???
いやそれはPC板のフォントスレ行きなよ

76 :Name_Not_Found:2009/09/24(木) 19:50:14 ID:Ij3I45VG
FireFoxの質問です。
背景画像があり、且つそれを見せたいので、左右のマージン・パッティングはdivでやり、
文字が見えなくならないようspanのバックグラウンドカラーで以下のようにCSSを組んだところ、
手持ちのIE,Operaは正常だったのですが、FireFoxの文字背景色が出たり出なかったりします。
div/spanに別属性(フォントサイズ)入れてみたりして、片方が干渉されてないわけではないみたいなのですが…。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<style type=text/css>
div.log{margin:0em 1.5em 0.5em 2em;
padding:0.3em 0;}
span.log{background-color:#00ffff;}
</style>
</head><body>
<h3>大見出しテキスト</h3>
<div class="log"><span class="log">
<h4>小見出し<br>
</h4>ここの背景色が表示されない(問題)<br>
<h4>小見出し見出し<br>
</h4>こっちは問題なし<br>
</span></div></body></html>

宜しくお願いします。

77 :Name_Not_Found:2009/09/24(木) 20:41:18 ID:???
>>74
そもそもhtmlが間違ってるんでどんな動作しても文句は言えない
インライン要素の中にブロック要素は入れるな

78 :Name_Not_Found:2009/09/24(木) 20:42:20 ID:???
>>77>>76

79 :Name_Not_Found:2009/09/24(木) 21:02:58 ID:???
>>77
あー、やっぱり面倒くさがらずhをspanから出さなきゃだめですか…。
出力ソフトの関係でこういうのになってしまったんですが
手打ちしか解決方法が無さそうですね。
諦めます。

80 :Name_Not_Found:2009/09/25(金) 02:23:19 ID:???
出力ソフトのせいにすんな

81 :Name_Not_Found:2009/09/25(金) 08:43:33 ID:???
FireFoxじゃなくてFirefox
省略するときはFFじゃなくてFx

ソフトのせいにするのはどうかと思うが、
何使ったらそんな破綻したソースになるのか

82 :Name_Not_Found:2009/09/25(金) 12:23:49 ID:???
多くて申し訳無いんだけど教えて欲しいっす。

1、margin: 0pxみたいに値が0の場合ってpxは省略して0で大丈夫?どっちが正しいのかわからなくて。

2、marginを指定したらその後にpaddingも一応0で指定したほうがいい?

3、a:linkとvisited,hover,activeってまとめて指定する方法はある?

83 :Name_Not_Found:2009/09/25(金) 12:39:51 ID:???
1.0なんだからpxなんてしなくてもいいだろ
2.marginとpaddingの違いから勉強して濃いよかす
3.a:link,a:visited,a:hover,a:active{color:#ff0000;}

84 :Name_Not_Found:2009/09/25(金) 12:42:59 ID:???
>>83
ありがとー。
1さ、色々なサイトを見るとわざわざ0pxって書いてるとこ多いよ?
だから正しい記述の仕方がそっちなのかなって思ったんだけど

2はpaddingを指定しないなら書かないでいいのか、それとも一応0で指定しとくかって質問
marginなんかは0と指定無しじゃ結果違う事もあるじゃん

85 :Name_Not_Found:2009/09/25(金) 13:13:48 ID:???
>>82
1.pxはなくてもいいけど、他の数値で忘れないように付ける癖を付けておく
2.そんなのはやりたいことによる、marginだけいらなくてpaddingが必要な事例だって山ほどある
3.aだけで全部を包括してる

86 :Name_Not_Found:2009/09/25(金) 15:19:49 ID:???
>>85
ありがとう。
1は0以外は必須ってことね。
2はその都度判断してみるよ。
3はa:linkのみ指定すればその他3個は書かなくても同じ値が適用されるって事?

87 :Name_Not_Found:2009/09/25(金) 18:50:27 ID:SVy5ql2f
質問させてください。

■■■  ■■■  ■■■
■■■  ■■■  ■■■
説明文  説明文  説明文

■■■  ■■■  ■■■
■■■  ■■■  ■■■
説明文  説明文  説明文

こんなレイアウトにしたいんですが
tableを使わずに作るにはどうすれば良いのでしょうか?
(■6個で一枚の画像、説明文は画像の解説です)


88 :Name_Not_Found:2009/09/25(金) 19:11:13 ID:???
教えてクンの貴様に素敵な検索キーワードを教えてしんぜよう

その1 「css 3カラム」

その2 「css float left」

89 :Name_Not_Found:2009/09/25(金) 19:24:40 ID:???
ありがとうございました。
なるほど、【縦に2つ】×3って考えればいいんですね。

90 :Name_Not_Found:2009/09/25(金) 19:40:50 ID:???
<div id="setumei1">説明文</div>
<div id="setumei2">説明文</div>
<div id="setumei3">説明文</div>
<div id="setumei4">説明文</div>
<div id="setumei5">説明文</div>
<div id="setumei6">説明文</div>

91 :Name_Not_Found:2009/09/25(金) 23:48:33 ID:???
>>86
aだけって書いてあるのに、なんで:linkをつけたがる?

92 :Name_Not_Found:2009/09/26(土) 05:35:27 ID:???
CSSで以下のように設定して
a:link {
color: #333333;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #333333;
}

htmlで
<a href="#hoge">
詳細はこちらl<br />
<img src="xxx.jpg" /></a>

とすると、画像にも上記CSSの border-bottom が出てしまいます。

画像にだけ border-bottom を出させない方法はありますでしょうか?
お願いします。

93 :Name_Not_Found:2009/09/26(土) 08:15:30 ID:???
xxx.css
xxxのところって何て名前が普通ですか?

94 :Name_Not_Found:2009/09/26(土) 10:13:21 ID:???
>>92
a img {ボーバーボドムの設定}

95 :Name_Not_Found:2009/09/26(土) 10:26:22 ID:???
>>92はマルチ


96 :Name_Not_Found:2009/09/26(土) 10:54:47 ID:???
>>93
css内容によって変わる

97 :Name_Not_Found:2009/09/26(土) 11:52:47 ID:???
>>93
style.css
main.css
html.css
color.css
border.css
table.css

98 :Name_Not_Found:2009/09/26(土) 12:56:28 ID:???
それは平均取ったらそれ以上に分けすぎw

99 :Name_Not_Found:2009/09/26(土) 13:00:36 ID:???
bokuno_daijina_css.css

100 :Name_Not_Found:2009/09/26(土) 13:01:18 ID:???
俺はハック使うときはメインのCSSの後に最後に読ませてる

style.css
hack.css

101 :Name_Not_Found:2009/09/26(土) 14:02:22 ID:???
先輩が作成したサイトの更新してたら
mein.cssだた

102 :Name_Not_Found:2009/09/26(土) 14:52:13 ID:???
a要素てインラインですよね?
インラインにはボーダーなんかないと思っていたんですがあるんですか?

103 :Name_Not_Found:2009/09/26(土) 15:29:13 ID:???
>>102
なんでないと思っていたの?

104 :Name_Not_Found:2009/09/26(土) 15:47:52 ID:???
あるだろカス

105 :Name_Not_Found:2009/09/26(土) 16:19:47 ID:???
すみません、どうぞ教えてください。

テーブル内にインラインフレームを設置し、
各メニューをクリックするとそのインラインフレーム内に新しいページが表示されるようにしています。
テーブル背景に背景画像を設定して、インラインフレーム自体の枠線はナシです。

Macのfirefox・safariと、Winのfirefoxではデザインが意図通りに出るのですが、
WinのIE(チェックは7のみ)で見ると、
テーブルの背景画像は表示されないし、
インラインフレームに枠線(影?)が出てしまいます。

IEでも他と同じ表示にする方法を教えてください!
お願いします。

106 :Name_Not_Found:2009/09/26(土) 19:27:36 ID:???
>>103
ボックスモデルって言葉をたまに聞くので、てっきり……
調べてみたら、padding・marginもインラインでもあるんですね……ずっと勘違いしていたので驚きました

107 :Name_Not_Found:2009/09/26(土) 22:11:50 ID:???
>>100
普通はそうだろ・・・

>>105
全部作ってやる馬鹿はいないと思います

108 :Name_Not_Found:2009/09/26(土) 22:16:14 ID:???
>>107
ハックを最後に読ませるのが普通なの?

109 :Name_Not_Found:2009/09/26(土) 23:39:47 ID:???
ハックだけでなく、局所的なものは優先度を考えて後ろに回すと思うよ

110 :Name_Not_Found:2009/09/27(日) 00:16:34 ID:???
>>105
いくら悪名高いIEといっても
背景が表示されないとか意図しない枠線がでるとか
htmlとcssが汚すぎるんじゃないかね

111 :105:2009/09/27(日) 01:49:53 ID:???
>>107
全部作れって意味じゃないですw
例えば noshade って入れたらいいよ〜、とか、そんな簡単な解決があるのかもと
想像してました。

>>110
うーん、htmlもcssもものすごくシンプルだし、
変な空白は開けないようにしてるんですが...。
ソース載せていいですか?

112 :105:2009/09/27(日) 01:55:17 ID:???
載せちゃいます><

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>--</title>
</head>

<body>
<div align="center">
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="sub.html" target="contents"><img src="images/title.jpg" width="800" height="85" border="0"></a></td></tr>
<tr background="images/sub_back.jpg">
<td align="center"><br><br>
<iframe src="sub.html" name="contents" width="550" height="450" style="border:none"></iframe>
<br><br><br></td></tr>
<tr>
<td><img src="images/copyright.jpg" width="800" height="31"></td></tr>
</table>
</div>
</body>
</html>

113 :Name_Not_Found:2009/09/27(日) 04:08:21 ID:???
>>112
テーブル背景の方はCSSじゃないから無視するとして
インラインフレームも予期せぬボーダーが出ているわけではない
というか回答もCSSじゃないんだがどーしろと
frameborderでググれ

114 :Name_Not_Found:2009/09/27(日) 06:57:54 ID:???
>回答もCSSじゃないんだがどーしろと
www

115 :Name_Not_Found:2009/09/27(日) 10:22:47 ID:TrPy3+BC
質問させていただきます。

background-colorやborderを設定したdivのなかに、
float: left;を設定したブロック要素(divとかulとか)を入れると、
親のdivの背景や境界線が消えてしまうのですが、どうすれば避けられますか?

116 :Name_Not_Found:2009/09/27(日) 12:41:28 ID:???
それは仕様
ややこしいことがわからないなら、フロートしてないブロック要素も尻に一つ入れておけ

117 :Name_Not_Found:2009/09/27(日) 15:05:36 ID:???
>>112
ieはtrのbackgroundに対応していないようだよ

118 :Name_Not_Found:2009/09/27(日) 15:16:49 ID:???
>>115
http://www.w3.org/TR/CSS2/visuren.html#floats
流れからはみ出たら、ない物として続く要素で詰める、みたいな事が書いてある

119 :Name_Not_Found:2009/09/27(日) 15:23:17 ID:TrPy3+BC
>>116
ありがとうございます。
ただ、諸事情でちょっと今回は不格好になってはいけないのです。

>>118
フロートの特性なのですね。
外出しなければならないので、帰ってきたらちゃんと読みます。ありがとうございます。

120 :Name_Not_Found:2009/09/27(日) 16:11:16 ID:???
不格好って・・・どんだけ馬鹿だ

121 :Name_Not_Found:2009/09/27(日) 17:04:43 ID:S0RSLLpp
ブログのフリーのパーツの欄に、チームの勝敗を表示しよう思ったのですがclassの指定が上手くいきません。

<style type="text/css">

Td {
padding: 1px 5px;
}

Td.1 {
padding: 1px 1px;
}

</style>

<table>
<Tr>
<Td align="left">10/4</Td>
<Td class="1" align="right">vs</Td>
<Td>相手チーム名</Td>
<Td><a href="試合結果サイト" target="_blank">3-1</a></Td>
<Td>勝</Td>
</Tr>
<Tr>
<Td align="left">10/7</Td>
<Td class="1" align="right">@</Td>
<Td>相手チーム名</Td>
<Td><a href="試合結果サイト" target="_blank">0-1</a></Td>
<Td>負</Td>
</Tr>

見た目的に、ホームかアウェイか分かる「vs」や「@」と「相手チーム名」の間だけ狭くしたいのですが・・・
ご教授お願いします。

122 :Name_Not_Found:2009/09/27(日) 17:49:59 ID:???
>>121
クラス名の先頭文字はa-zで

123 :Name_Not_Found:2009/09/27(日) 19:23:20 ID:S0RSLLpp
>>122
回答ありがとうございます!
数字を直したのですが・・・ 等間隔のままです・・・

どこがいけないのでしょうか

124 :Name_Not_Found:2009/09/27(日) 19:32:53 ID:S0RSLLpp
すいません、試行錯誤いろいろしているうちに無事出来ました!



125 :Name_Not_Found:2009/09/27(日) 19:43:40 ID:K+Maxh9o
>>124
どうやって修正したか書いてかないのか?

126 :105:2009/09/27(日) 19:49:02 ID:???
>>113
インラインフレームってCSSじゃなかったんですね!
すみません失礼いたしました(;´Д`)

>>117
なんてこった!
テーブル組み直してリデザインします・・・。

127 :Name_Not_Found:2009/09/27(日) 20:17:19 ID:???
えっと、いや、borderでも線出そうと思えば出せるんだが・・・
まあいいか・・・

128 :105:2009/09/27(日) 20:55:36 ID:???
>>127
出したいデザインでは、真ん中のtrの枠線の縦方向にだけ線を出したいんです。
一部だけ出すのが出来なかったので、背景画像でやっちゃったって感じです。
仕方ないのでセル増やしてボーダー部分を作ります><

129 :Name_Not_Found:2009/09/27(日) 21:05:39 ID:???
>>128
iframeが入ってるtdに背景はればいいじゃん

130 :Name_Not_Found:2009/09/27(日) 21:34:59 ID:???
>>128
(゚д゚)
とりあえず幾つか参考サイトを…

・ごく簡単なHTMLの説明
  http://www.kanzaki.com/docs/htminfo
・PC Tips
  http://members.jcom.home.ne.jp/pctips/
・脱初心者をめざす人のためのホームページ作成講座
  http://az-store.nrym.org/archive/mynotes/lecture/

初心者かすれから引っ張ってきただけだが

131 :Name_Not_Found:2009/09/27(日) 21:35:45 ID:???
>背景画像でやっちゃったって感じです
背景画像は提示されてないんだから俺らにわかるはずないってのwww

132 :Name_Not_Found:2009/09/27(日) 22:07:16 ID:S0RSLLpp
>>125
<style type="text/css">
Td {
padding: 0.5px 0.5px;
}

Td.a {
padding: 0.5px 10px 0.5px 0.5px;
}

Td.b {
padding: 0.5px 10px;
}
</style>

<table>
<Tr>
<Td class="a" align="left">日付</Td>
<Td align="right">vs</Td>
<Td>相手チーム名</Td>
<Td class="b"><a href="試合結果サイト" target="_blank">得点</a></Td>
<Td>勝</Td>
</Tr>
<Tr>
<Td class="a" align="left">日付</Td>
<Td align="right">@</Td>
<Td>相手チーム名</Td>
<Td class="b"><a href="試合結果サイト" target="_blank">得点</a></Td>
<Td>負</Td>
</Tr>

これで上手くいきました!

133 :Name_Not_Found:2009/09/27(日) 22:14:14 ID:???
すいません、cssのところはこれです

<style type="text/css">

Td {
padding: 0.5px 0.5px;
}

Td.a {
padding: 0.5px 8px 0.5px 0.5px;
}

Td.b {
padding: 0.5px 4px 0.5px 10px;
}

</style>

134 :105:2009/09/27(日) 23:52:01 ID:???
できました!!!
>>113
ありがとうございます、frameborderで線が消えました!!

>>129
ほんとありがとうございます、背景画像が出ました!!

CSSじゃない上に初心者もいいところですみません、
でもできましたやったーヽ(・∀・)ノ ワーイ
ありがとうございますーヽ(・∀・)ノ ワーイ

135 :Name_Not_Found:2009/09/28(月) 18:13:14 ID:???
トップ、レフト、ライト、ボトムのカラムがあって
さらにこのレフトに、トップ、レフト、ライト、ボトムのカラムが挿入されてる場合に、
idやclassのネーミングはどうしたらいいのか悩みます。
仮にオブジェクト指向なら気にすることなくそれぞれtop,leftと命名できると思いますが、
cssの場合、一番上のレフト内がhogeというコンテンツだとしたら、
同じトップでもスタイルを区別したいとき
hogeTopやらhoge_topやらにしないといけないですよね。
hogeはまだ短いし、topも位置名なので短くてすむのですが
これが機能を指名してまじめにそのまま記述となると長いもので・・半角五文字×5+アンダーバー
くらいの長さになってしまいます・・

大手サイトのcssを見てみたのですが長くなりそうなものは、
頭文字をとって命名してるのもありました。
編集時には長い名前のままで、更新時に一括変換しているのかな、
とも思いました。

実際のところ、長い名前はなんとなく悪いんだろうなとは思うのですが
15文字くらいのものが多いという状況です。
もちろん訪問人数にもよると思うのですが、
長いといっても許容範囲はどれくらいなんでしょうか?
もしくはみなさんは、長くなりそうな名前をどのように管理しているのでしょうか
よい方法ありましたらアドバイスおねがいします。

136 :Name_Not_Found:2009/09/28(月) 19:16:58 ID:???
ちょっとまって、よく分からなくなった。
今、上にあるからtopって名前や、左にあるからleftって名前をつけるのはオブジェクト指向なの?

137 :Name_Not_Found:2009/09/28(月) 20:43:24 ID:???
>>136
すいませんわかりにくかったですね
オブジェクト指向の下りもこちらも説明できるほど良く理解してないのに
使ってしまったので、もう一回質問しなおしてみます。

画像で申し訳ないのですがこんな感じです。
http://terls.com/mono/src/terls%5B12695%5D.png
これだと、Topのclass名もtopのclass名も短くてすむのですが、

http://terls.com/mono/src/terls%5B12694%5D.png
の場合だと、jsなどで作ったコンテンツを、Leftに
独自に命名したhoge_hoge_hogeコンテンツとして追加した場合に、
常に下位の要素のclassにhoge_hoge_hoge_をつけなければ?
と悩んでしまったのです。

class="abc"だけでもいいと考えたのですが
やはり被ってしまうことを考えると、
hoge_hoge_hogeも抜かせないし、この長い命名のままでも
いいのかな、と。その尺がどの程度なのかを知りたいです。
hhh_abcというのが理想的なのですがこの数が増えると
瞬時にコードを見て判断するにはどう管理していいのかとも思いました。

で、現状は、.cssのコメントアウトにhoge_hoge_hoge、以下実際のコードはhhh_○○○
で対処しています。ただ、これだと.js側からclassを追加して見た場合と、
.cssから見た場合とでは.js側に予備知識がいるのではと悩んでいます。

138 :Name_Not_Found:2009/09/28(月) 20:51:10 ID:???
>>137
スタイルを変えることもあるんだからleftやrightではなく
内容でその内容に沿った命名をしろ
普通のプログラムだってUIで右にあるからrightにするなんて馬鹿なことはないだろ

139 :Name_Not_Found:2009/09/28(月) 21:11:02 ID:???
>>138
137の1枚目の画像は、場所がわかりやすいようにtopやleftを表記しました。
例えば、
2枚目の画像でいうghi機能に
hoge_hoge_hogeコンテンツの背景色を変える機能
があった場合、
hoge_hoge_hoge_change_color_background
dfe機能の場所に
hoge_hoge_hogeコンテンツの特定の場所aの色を変える機能
があった場合、
hoge_hoge_hoge_change_color_a

これは一例なのですが、仮にhoge_hoge_hogeと似たような
背景、aの場所の色を変えるボタン機能を持つ
hoge_hoge_hoge2コンテンツが追加された場合には
_background、_aという部分が被ってしまうので、
hoge_hoge_hoge2_background・・
、という問題にあたったのです。

140 :Name_Not_Found:2009/09/28(月) 21:13:11 ID:???
訂正
>hoge_hoge_hoge2_background・・
hoge_hoge_hoge2_change_color_background

141 :136:2009/09/28(月) 21:13:23 ID:???
>>137
>>138が言ってる通り

「リモコン」に、「リビングの小さいテーブルの上のリモコン」て名前を付ける必要は無いよ。
「ダイニングの大きいテーブルの上」に移動した時どうするの?って理由で。

「リビング」の「小さいテーブル」の「上」の「リモコン」て指定するのがcssのcかと。

142 :Name_Not_Found:2009/09/28(月) 21:15:49 ID:???
>>139
つーかclassは被るためというか同じ属性のものを纏めるために存在するんだよ
被っちゃいけない一意の名前はidにしろ

143 :Name_Not_Found:2009/09/28(月) 21:27:45 ID:???
>>141
はい、まさにその通りです。
当初は、二枚目の画像でいう、jsで追加した「hoge_hoge_hogeコンテンツ」(リビング)の
「def」(リモコン)とclass='def'として指定していたのですが、
>>139でいう似たような機能を持ったコンテンツ
hoge〜2が(例えばRightに)追加された場合
「def」としてしまうとjsのコンテンツなので
leftにも影響を与えてしまったのです。
そこで、def1やdef2とするのか、
そもそも推奨されていない、hoge〜_defやhoge〜2_defとしてするのか
ということです。
これならhoge_hoge_hogeコンテンツ(リビング)の上のdef(リモコン)
と、2位なのでまだ現実的かな、と。

144 :Name_Not_Found:2009/09/28(月) 21:31:39 ID:???
>>142
idはjs側(のみ)で使うようにしているので、
例えば設定としてidをjs側で追加すれば、
エレメントをオブジェクトとして扱う場合に
融通が利くのです。

145 :Name_Not_Found:2009/09/28(月) 22:10:27 ID:???
なんだろう、jsの使い方を変えないとどうにもならない気がする

146 :135:2009/09/28(月) 22:27:51 ID:???
今環境が整っておらず、試せないのですが
例えば、これ用に要素を不変の要素を追加して
<div id="hoge1">
 <div class="def" />
</div>

<div id="hoge2">
 <div class="def" />
</div>

としてcssで
#hoge1 .def{}
#hoge2 .def{}
としても、js側やクロスブラウザで不具合がなければ
(根本的に○○○○リモコンみたいな長い名前が必修のものは仕方ないにしても)
ベース名的なものには、もしかしたら対処できるかもしれません。
ありがとうございました。

147 :Name_Not_Found:2009/09/28(月) 23:37:37 ID:???
質問いいでしょうか
本文
<span>あい</span>うえお
CSS
body{background-color:#ffffff;}
span{color: #ffffff;}
これをfirefoxやIEで見るとあいの部分が白で見えなくなるのですが
Opera10で見ると白くならずあいうえお全て表示されてしまいます

基本的なことなのかもしれませんがなかなかできず困っています
アドバイスいただけないでしょうか。よろしくお願いします

148 :Name_Not_Found:2009/09/28(月) 23:40:57 ID:???
>>147
いや?ならないけど

149 :Name_Not_Found:2009/09/28(月) 23:56:50 ID:???
>>148
Operaの設定いじってしまったのかもしれません
自分の所だけならいいんです
ありがとうございました

150 :Name_Not_Found:2009/09/29(火) 02:11:04 ID:???
他のCSSと競合してるんじゃないの
ホントにそれだけのソースでなるのか?

151 :Name_Not_Found:2009/09/29(火) 03:26:11 ID:???
他のブラウザでならないから競合は考えづらくないかね

152 :Name_Not_Found:2009/09/29(火) 03:35:09 ID:/I6xACvn
IE6の line-heightについて質問です。(IE7/8, Firefoxは期待どおり表示されます)
12枚の写真を display: block と float: leftで 上6枚、下6枚並べて表示させてます。
マウスが来るとhoverで明度の上げた写真に切り替わるよう設定しています。
画像ファイルは12枚分横に並べて連結、さらにhover用に下段に明度を上げたものを連結
上段に12枚、下段に明度を上げた12枚の写真を一つの画像ファイルにまとめています。
一枚一枚の写真の下部を余白にしてコメントを入れたいのですが、
IE7/8, Firefoxでは line-height: 300px;程度で期待通りの位置に表示されるのですが、
IE6ですと 文字は期待通りの位置に来るのですが、枠ごと広がってしまい
hover中でもないのに明度を上げた写真までもが表示されてしまいます。
IE6でも期待通りに表示させる回避策はありますでしょうか?

153 :152:2009/09/29(火) 03:42:51 ID:/I6xACvn
CSSのソース抜粋です。宜しくお願いいたします。
.ph {
width: 675px;
padding: 5px;
float: left;
}
.ph li {
float: left;
width: 100px;
height: 153px;
list-style-type: none;
}
.ph a {
display: block;
width: 100px;
height: 153px;
background: #FFFFFF url(img/photo.jpg) no-repeat top left;
text-align: center;
line-height: 287px;      <--- IE6だとNG、IE7/8, Firefoxは問題なし
text-decoration: none;
color: #000000;
}
.pNavi01 a       { background-position:       0      0;}
.pNavi01 a:hover { background-position:       0 -153px;}
.pNavi02 a       { background-position:  -100px      0;}
.pNavi02 a:hover { background-position:  -100px -153px;}
〜snip〜
.pNavi12 a       { background-position: -1100px      0;}
.pNavi12 a:hover { background-position: -1100px -153px;}

154 :Name_Not_Found:2009/09/29(火) 03:57:31 ID:???
>>153
ハックしろ

155 :Name_Not_Found:2009/09/29(火) 12:03:00 ID:B+dgqX5O
CSSの質問です

#test {
color:#ff0000;
}

このときcolorの部分ははプロパティって呼び方で合ってますでしょうか?
では#testの部分と#ff0000の部分は何と呼ぶのでしょうか?

156 :Name_Not_Found:2009/09/29(火) 12:50:21 ID:???
>>155
ttp://az-store.nrym.org/archive/mynotes/lecture/html-css/css1-1

157 :Name_Not_Found:2009/09/29(火) 13:05:39 ID:B+dgqX5O
>>156
セレクタ、プロパティ、値って呼ぶのですね
ありがとうございました

158 :Name_Not_Found:2009/09/29(火) 18:26:51 ID:???
IEだと
background-image: url();
background: url() ;
のどっちでもURLいれればリピートする背景画像表示されるんですが、GoogleChromeだとリピートしません
どう表記すればちゃんと縦、横にリピートする画像表示できるんでしょうか?

159 :Name_Not_Found:2009/09/29(火) 18:58:12 ID:???
なんでrepeat設定しないの?

160 :Name_Not_Found:2009/09/29(火) 19:12:20 ID:???
repeatが初期設定だからだろ

161 :Name_Not_Found:2009/09/29(火) 19:29:21 ID:???
>>160
なにいってんのお前そんなことをいってねえよバカ
chromeではbackground-repeat設定しないとダメっつってんだろ
頭悪い初心者回答者は黙ってろ

162 :158:2009/09/29(火) 19:45:57 ID:???
>>159、160、161
ご回答ありがとうございました。
不思議と自己解決しました。
なんでか解らないんだけど、特定のDivタグの中の背景画像が繰り返さなかったみたいです。
別のDivタグにbackground: url() ; でURL指定したら普通にリピートしました。
不思議でしょうがない・・・

163 :Name_Not_Found:2009/09/29(火) 19:46:26 ID:???
>chromeではbackground-repeat設定しないとダメっつってんだろ

本気か?


164 :Name_Not_Found:2009/09/29(火) 19:59:27 ID:???
自身があるのなら恐れず最後まで言ってあげましょう。
自身がないのなら黙っておきましょう。

165 :Name_Not_Found:2009/09/29(火) 20:11:04 ID:???
>>163
初心者乙

166 :Name_Not_Found:2009/09/29(火) 20:12:44 ID:???
>>162
不思議ではありません
あなたのコーディングがおかしいんです
再現できるコードを出さないのは解決する気がないのですよね

167 :Name_Not_Found:2009/09/29(火) 20:27:45 ID:???
>>165
あたまだいじょうぶか?

168 :Name_Not_Found:2009/09/29(火) 21:42:37 ID:???
>>161
うわー

169 :Name_Not_Found:2009/09/30(水) 14:12:06 ID:???
CSS だけで rel="nofollow" と同じことができるのですか?

170 :Name_Not_Found:2009/09/30(水) 14:13:27 ID:???
できるわけねえだろks

171 :Name_Not_Found:2009/09/30(水) 14:49:11 ID:???
>>169
cssだけだったらそうなるんじゃない

172 :Name_Not_Found:2009/10/01(木) 19:39:39 ID:???
<div style="width:50px;height:50px;" />

のwidthが0〜25pxの範囲はbackground-colorが青、
widthが26〜50pxの範囲はbackground-colorを赤
にしたいのですがどう記述すればよろしいでしょうか。

173 :Name_Not_Found:2009/10/01(木) 20:39:17 ID:???
>>172
小さい部分に画像を使って背景色を別に設定

174 :Name_Not_Found:2009/10/01(木) 20:55:24 ID:???
>>173
やはりイメージが必要になってきますかね・・
このdivを4つ、8つと分けたいときにその区間でそれぞれ背景色をかえれたらなぁと。
ありがとうございました

175 :Name_Not_Found:2009/10/01(木) 22:10:08 ID:DxiOXj0X
CSS2とCSS2.1はプロパティは同じですか?
2.1は何が拡張されたのでしょうか?

176 :Name_Not_Found:2009/10/01(木) 22:18:06 ID:???
拡張というか削られたというか
どうぞ自分で見比べてみんさい
2)
http://hp.vector.co.jp/authors/VA022006/css/propindex.html
2.1)
http://hp.vector.co.jp/authors/VA022006/css/css21_propindex.html

177 :Name_Not_Found:2009/10/01(木) 22:34:33 ID:DxiOXj0X
>>176
w3cのほう見てます
海外サイト見るとcss2にはmarksとsizeとpageが含まれているのですが
w3cでcss2からこの3は消されてました
http://www.w3.org/TR/CSS2/propidx.html

これはw3cがcss2を更新したって事でしょうか?

178 :Name_Not_Found:2009/10/01(木) 22:36:00 ID:???
訂正
>w3cでcss2からこの3は消されてました



w3cでcss2からこれら3つのプロパティは消されてました

179 :Name_Not_Found:2009/10/01(木) 23:43:04 ID:???
>>176
そんなんサイト見てたらあきまへんよ〜


180 :Name_Not_Found:2009/10/02(金) 10:59:57 ID:???
>>177
http://www.w3.org/TR/CSS21/changes.html

181 :Name_Not_Found:2009/10/02(金) 12:09:48 ID:???
つーか更新日時見るとCSS2(2.1じゃないよ)自体も更新されてないか?

182 :Name_Not_Found:2009/10/02(金) 16:44:51 ID:???
どこの更新日時のこと?
2009.9.8のは2.1のerrata修正みたいだけど

183 :Name_Not_Found:2009/10/02(金) 19:15:49 ID:XfsBi1Yb
http://celeb373.blog88.fc2.com/blog-entry-15.html
において、タイトルが2行になった時に、2行目が赤い枠に入りきらないので
赤い枠の縦幅を広げたいです。

いろいろやりましたが、タイトル文字が下に移動したりはするけど、
赤い枠の高さは広がりません。
どうすればいいでしょうか、

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

184 :Name_Not_Found:2009/10/02(金) 21:05:42 ID:???
.entry_title_bgのno-repeatはずせば?

185 :Name_Not_Found:2009/10/02(金) 23:16:58 ID:???
>>182
eratta修正ってなに?

186 :Name_Not_Found:2009/10/03(土) 19:11:22 ID:gAVqahmI
spanである部分だけ文字色変える設定して、
IE8で表示すると最初のうちはちゃんと適用されてたのに
何故か急にspanじゃなくてデフォルト指定色にしかならなくなりました
ちなみにchromeではちゃんとspanの指定色になるので入力間違いとかではないです
何故途中からこうなってしまったのでしょうか?

187 :Name_Not_Found:2009/10/03(土) 20:00:48 ID:???
so-netブログをホームページビルダー13で記事投稿しているんですが
CSSでレイアウト変更するみたいでline-heightで指定した高さが
画像有りと無しの場合で指定される高さがそれぞれ違って
文字が被ってしまいます。

解決策などはありましたら教えていただけないでしょうか?

188 :Name_Not_Found:2009/10/03(土) 21:03:48 ID:???
>>186
ソースプリーズ

189 :Name_Not_Found:2009/10/03(土) 21:23:29 ID:???
ソースプリーズ(笑)

190 :Name_Not_Found:2009/10/03(土) 21:35:51 ID:???
お願いします

<html><head><style type="text/css">

<!-- メニューの箱です -->
.menu li{margin: 8px 0px 0px 0px; width: 80px; float: left; list-style-type: none;}

<!-- 全体の色指定 -->
a:link{color: black; text-decoration: none;}
a:visited{color: black; text-decoration: none;}

<!-- メニューの色指定 -->
.menu a:hover{color: grey; text-decoration: none;}

<!-- 現在いるページの色指定 -->
.onmenu a:link{color: red; text-decoration: none;}
.onmenu a:hover{color: red; text-decoration: none;}

</style></head>

<body>
<div class="menu"><ul>
<li><span class="onmenu"><a href="1.html">いち</a></span></li>
<li><a href="2.html">にい</a></li>
<li><a href="3.html" >さん</a></li>
<li><a href="4.html">よん</a></li>
</body></html>

191 :Name_Not_Found:2009/10/03(土) 21:38:39 ID:???
ちなみに自分で検証したら↑はちゃんと表示されました。
でも元のファイルはやっぱり表示されません
結局、IE8だと不安定だってことなんでしょうか
もっと他にいいソースの描き方ってありますか?
ジャバスクリプトは使いたくありません

192 :Name_Not_Found:2009/10/03(土) 22:27:55 ID:???
>>191
そのソースは、元のうまく色が付かないhtmlのをコピペしたやつなの?

193 :Name_Not_Found:2009/10/03(土) 23:05:01 ID:???
他にもいっぱいあるのでこの部分だけコピペしました。
また開いてみたら今度はhoverだけ適用されてました
あと他のボックスの中に作ったリンクで別に色指定したやつはやっぱり適用されてません
(これもchromeではちゃんと適用されてる)
IEの問題としても、IE使ってる人がほとんどだしなぁ

194 :Name_Not_Found:2009/10/04(日) 10:59:37 ID:???
css3の原文読んでるけど早くいじりたいぜ

195 :Name_Not_Found:2009/10/05(月) 02:14:09 ID:???
>>193
そのソースを使ってるなら、閉じタグなかったりしてるのが影響してんじゃないの?

196 :Name_Not_Found:2009/10/05(月) 09:24:40 ID:???
<!-- HTMLのコメント -->

/* CSSのコメント */

197 :Name_Not_Found:2009/10/06(火) 06:47:29 ID:j8h8TpQj
ボタンの背景だけ用意して、その上に任意のテキストを載せてボタンを作りたいのですが
テキストがうまい具合に縦横センタリング出来ません
どうすればいいですか?

198 :Name_Not_Found:2009/10/06(火) 06:55:02 ID:???
まず自分がやったところまで書けよ

199 :Name_Not_Found:2009/10/06(火) 08:26:27 ID:???
こうしました!

.button {
text-align: centre;
}

200 :Name_Not_Found:2009/10/06(火) 10:18:45 ID:WOMADlDj
セントレ!

201 :Name_Not_Found:2009/10/06(火) 10:24:41 ID:???
どうでもいいがclass名に button は感心しない

202 :197:2009/10/06(火) 12:11:35 ID:j8h8TpQj
.btn {
display: block;
text-align: center;
background-image:url(btn_back.gif);
height: 27px;
width: 156px;
font-weight: bold;
color: #FFFFFF;
font-size: 14px;
}

<span class=btn>hoge</span>

こうしました。横にはセンタリングできるのですが・・

203 :Name_Not_Found:2009/10/06(火) 12:37:51 ID:???
cssのコーディング規約って決めてますか?

204 :Name_Not_Found:2009/10/06(火) 14:04:33 ID:???
>>203
なにそれ?
例えばどうゆうこと?

205 :Name_Not_Found:2009/10/06(火) 14:22:13 ID:???
たとえばですけどmozilla公式サイトののcssファイルを見てください

206 :Name_Not_Found:2009/10/06(火) 14:34:23 ID:???
みてくださいって面倒くせーな
なんでアドレス貼らないの?

207 :Name_Not_Found:2009/10/06(火) 15:33:20 ID:???
誰も答えてやんないという

208 :Name_Not_Found:2009/10/06(火) 16:04:25 ID:???
MozillaのCSSのアドレスも知らない奴がここ見てるのが違和感ありまくり

209 :Name_Not_Found:2009/10/06(火) 17:40:00 ID:???
>>208
そういう事では無いと思うお

210 :Name_Not_Found:2009/10/06(火) 18:23:12 ID:???
どういういみなの

211 :Name_Not_Found:2009/10/06(火) 19:32:52 ID:???
気のいい人戻ってきてくれないかな・・・

212 :Name_Not_Found:2009/10/06(火) 19:58:18 ID:???
>>206
CSSの勉強してればMozillaのCSSは有名だよ
ブログとかでもよく取り上げられてるんだから
そんなのも知らないのかお前

213 :Name_Not_Found:2009/10/06(火) 20:06:26 ID:???
>>212
勉強終わってるから知らない

なんでみなさん知ってるようなのに答えてあげんの?

214 :Name_Not_Found:2009/10/06(火) 20:10:11 ID:???
みてきたけど、これがどうしたの?

215 :Name_Not_Found:2009/10/06(火) 21:06:46 ID:???
あのcss見て何も意味が分からないのは素人レベル

216 :Name_Not_Found:2009/10/06(火) 21:12:36 ID:???
ホームページをCSSを入れて再構成してみました
http://aradsenki001.web.fc2.com/
他のパソコンで見ると上のように画像が2重になり、ずれてしまいます
携帯でもずれてしまいます


http://dl3.getuploader.com/g/9%7Ckawaisosu/5/kari.jpg
自分でみると普通に映ってしまうんです。
何がおかしいのでしょうか?


217 :Name_Not_Found:2009/10/06(火) 21:13:42 ID:???
あのcssって、ここ(http://mozilla.jp/)のcssだろ?
何がすごいのかわからん

218 :Name_Not_Found:2009/10/06(火) 21:15:51 ID:???
>>216
htmlにいろいろエラーがあるんで
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
ここでチェックしてから修正、cssはそれから。

219 :Name_Not_Found:2009/10/06(火) 21:33:03 ID:???
>>217
すごいかどうかじゃないだろ?

220 :Name_Not_Found:2009/10/06(火) 21:49:21 ID:???
>>219
とにかくさ、訳知り顔のレスはたくさんもらったけど
誰も何も説明しようとしないのはどうゆうことよ

>>203のcssのコーディング規約って決めてますか?
に、規約ってなんぞ?と質問してんのにmozilla公式のcssみろって言うし
mozillaの公式サイトだって何個もあるだろ
質問しててその資料となるもんを提示しないとかおかしいでしょ

俺はパスするので、俺にレスしてたやつ、誰か>>203に答えてやってくれ

221 :Name_Not_Found:2009/10/06(火) 21:51:55 ID:???
w3cの勧告でやれよ
mozillaなんぞサードパーティ

222 :Name_Not_Found:2009/10/06(火) 21:52:19 ID:???
>>202
まだ解決してないなら
heightと同じ値のline-heightを追加してみてはどうだろうか

223 :Name_Not_Found:2009/10/06(火) 22:39:52 ID:???
>>218
ありがとうございます
直りました!
こんな方法で直るとは思いませんでした

224 :Name_Not_Found:2009/10/06(火) 23:09:34 ID:???
>>220=質問者乙


225 :Name_Not_Found:2009/10/06(火) 23:20:39 ID:???
>>220
mozilla.jpは支部だしwww
本家行くだろ普通

226 :Name_Not_Found:2009/10/06(火) 23:23:22 ID:???
ttp://www.mozilla.org/css/base/content.css

227 :219:2009/10/07(水) 00:15:08 ID:???
>>220
規約の一例として参考になるんじゃないかという事に
たいして Mozilla の公式サイトでも見れば?っていう
書き込みに「何がすごいの」はピントずれてんじゃね?
っていうレスだったわけだが?

228 :Name_Not_Found:2009/10/07(水) 00:17:09 ID:???
みんな知ってるってすごいね

229 :Name_Not_Found:2009/10/07(水) 00:20:46 ID:???
何だただの嵐野郎か。まじめに答えて損した
ケッ

230 :Name_Not_Found:2009/10/07(水) 02:19:21 ID:???
質問です
safariにヒラギノ明朝 Pro W6を効かせるfont-familyの指定方法を教えてください
"ヒラギノ明朝 Pro W6"だとスルーで"Hiragino Mincho Pro"だと細くなります

231 :Name_Not_Found:2009/10/07(水) 05:09:42 ID:???
>>230
「もうパンツはかない」でググれ
冗談ではなく

232 :Name_Not_Found:2009/10/07(水) 05:30:59 ID:???
>>231
ありがと、無理なのか><

<blockquote>
Safari では漢字が入ったフォントファミリー名は認識しませんし、
ウェイトの指定をのぞいてフォントファミリー名だけを指定する必要があります。
逆に、PostScript名を解釈するのはSafariだけのようです。
</blockquote>

233 :Name_Not_Found:2009/10/07(水) 06:22:30 ID:???
いやだから「HiraKakuPro-W6」でいいってことでは

234 :232:2009/10/07(水) 06:31:00 ID:???
>>233
やってみるとわかるけど
"HiraMinPro-W6"も"HiraMinProN-W6"も効かないんだよ
W6部分はウエイトの指定だからかな?


235 :Name_Not_Found:2009/10/07(水) 08:17:14 ID:???
>>234
そこのサイトは下のCSSで実際にそのブラウザでキャプチャ撮ってるんだぞ
そいつができてるのにお前ができないのは単にお前の間違いだろ

236 :Name_Not_Found:2009/10/07(水) 17:50:59 ID:???
.top{
position:absolute;
width: 1020px;
height: 135px;
top: 15px;
left: 80px;
background-image: url(../img/top10.jpg);
}
.menu{
position:relative;
width: 200px;
height: 480px;
top: 152px;
left: 80px;
background-image: url(../img/menu.png);
}
.main{
position: fixed;
width: 818px;
height: 480px;
left: 282px;
top: 153px;
background-image: url(../img/seria02.jpg);
}

cssなんですが
http://aradsenki001.web.fc2.com/
mainがものすごくずれてしまいます。間違ってますでしょうか?

237 :Name_Not_Found:2009/10/07(水) 19:38:19 ID:???

何度もごめんなさい
http://aradsenki001.web.fc2.com/
このページが


http://dl8.getuploader.com/g/9%7Ckawaisosu/7/PIC87.tmp.jpg
↑のように表示されますか?


自分では
このように映ってしまうんです
http://dl1.getuploader.com/g/9%7Ckawaisosu/6/mudai.gif

238 :Name_Not_Found:2009/10/07(水) 21:01:48 ID:???
ie testerを使えば、異なるIEの表示をチェックできるようになるぞ


239 :Name_Not_Found:2009/10/07(水) 21:14:23 ID:???
>>237
position:fixed使ってんだから当然
そもそも本文にfixedなんか使うな、見切れるわ

240 :Name_Not_Found:2009/10/07(水) 22:48:29 ID:???
>>239
absolute,relativeを使うと
top,bottomの効果が表れず上にいかないんです。
fixedならなぜかtop,botomでちゃんと移動するので、良い位置に動かせるんです

241 :Name_Not_Found:2009/10/07(水) 22:54:16 ID:???
>>237
ブラウザのサイズが、みんな自分と同じだと思わないほうがいいよ。
高さ変更してみなよ

242 :Name_Not_Found:2009/10/07(水) 22:55:09 ID:???
>>240
background:url(aaaa) no-repeat right bottom;

243 :Name_Not_Found:2009/10/08(木) 02:27:08 ID:???
>>240
それは何か間違えてるだけ
lintとかValidation Service使え

>>242
お前はずれてる

244 :Name_Not_Found:2009/10/08(木) 03:00:25 ID:???
中途半端にレイアウトでtable使うなら
全部tableでレイアウトしてもよいのではないかね

245 :Name_Not_Found:2009/10/08(木) 06:41:34 ID:???
>>243
チェッカーで検索したんですが
http://jigsaw.w3.org/css-validator/validator
エラーはありませんって出ます

>>244
テーブルってずれたりしないですか?
自身がないので手を出しませんでした

246 :Name_Not_Found:2009/10/08(木) 07:01:18 ID:???
>>245
ごめん、結局どうゆうレイアウトにしたいのかがわからないからアドバイスも出来ないんだよね。
表示がこうなりますか?だけじゃん。

247 :Name_Not_Found:2009/10/08(木) 09:22:31 ID:???
>>245
いやお前今はabsoluteに変えてるじゃん

248 :Name_Not_Found:2009/10/08(木) 14:30:21 ID:???
理由はわからないんですが
>>247
.main{
position: absolute;
width: 818px;
height: 480px;
left: 282px;
top: 153px;
background-image: url(../img/seria02.jpg);
}

>>236
.topの↑の位置にスクリプトを移動したら反映されるようになったんです
なぜ位置を移動しただけで効果が表れるようになったのか説明できる人いませんか?

249 :Name_Not_Found:2009/10/08(木) 14:35:15 ID:u4COq3tH
解説を見ると::beforeみたいに : が二つついてるのを見かけますが
実際に書くときは :beforeという風に : は一つだけ書くので合ってますか?

250 :Name_Not_Found:2009/10/08(木) 16:28:59 ID:???
box内だけリンクタグで
変更する事は可能ですか?


251 :Name_Not_Found:2009/10/08(木) 17:40:05 ID:???
>>249
CSS2と3勧告のselectorの項を

>>250
日本語でおk

252 :251:2009/10/08(木) 17:59:59 ID:???
>>249
ごめん、真面目に読んだらCSS3だけで十分だった

Selectors Level 3
http://www.w3.org/TR/2009/WD-css3-selectors-20090310/#pseudo-elements

邦訳どっかに出てるから邦訳欲しかったらググってくだしあ

253 :Name_Not_Found:2009/10/08(木) 18:06:56 ID:???
リンクタグを押すと
boxの中身だけリンクページで変更させたいのです。

説明不足ですまんが、誰か伝わる人はおらんだろうか

254 :Name_Not_Found:2009/10/08(木) 18:16:58 ID:???
>>253
説明不足?
いやいや違います
何から何まで言葉がオーダーメイド過ぎで伝わらないんだと思うよ

255 :Name_Not_Found:2009/10/08(木) 19:21:23 ID:???
すみません
css ページ内リンク box

で1時間近くググっても出てこないのでお願いします><
昔自分で作ってた時できた経験があるので

ここから
http://dl7.getuploader.com/g/9%7Ckawaisosu/8/image01.jpg
このように一部だけ変える
http://dl1.getuploader.com/g/9%7Ckawaisosu/9/image02.jpg
簡単に言うと一部だけ変えれば、読み込む要領も手間もかからないと思ったので
クリックしたら一部だけ白い部分を他のページで読み込みたいです

ごめんなさいすごく分かり難いかもです


256 :Name_Not_Found:2009/10/08(木) 19:46:03 ID:???
何度もごめんなさい

http://css-eblog.com/eblog_sample/0803/paging/#no11
↑のサイトの様に、クリックしたらパカパカ変わるやつです。
これってひょっとしたらjavascriptですか?
たぶん昔やってたのはiframeだったかもしれません

257 :Name_Not_Found:2009/10/08(木) 20:27:30 ID:???
ショッピングカートのようにみえますが
全部htmlで作ってあるんですか?

258 :Name_Not_Found:2009/10/08(木) 20:36:21 ID:???
php、データーベースで作ります
学校の授業で作るので

それよりもcssのリンク内ページをはやああく

259 :Name_Not_Found:2009/10/08(木) 20:51:17 ID:???
そのページのタイトルが「Javascriptサンプル」ってなってるのに何言ってるんだコイツ

260 :Name_Not_Found:2009/10/08(木) 20:58:44 ID:???
>>258
じゃあphpでカテゴリーだけ書き出しなよ…

261 :Name_Not_Found:2009/10/08(木) 21:42:01 ID:???
>>260
どゆいみ?

262 :Name_Not_Found:2009/10/08(木) 22:45:43 ID:???
宿題は人に聞いてちゃ駄目なんだよ坊や

263 :Name_Not_Found:2009/10/08(木) 22:49:13 ID:???
>>261
どうゆう意味って…
データベースからphpを使ってデータを取り出して、それを表示してんだよね?

264 :Name_Not_Found:2009/10/08(木) 22:55:51 ID:???
そんな高度なことしてると思うのか?
もしやってたとしても、それ全部やり方教えてくださいってなるぞ、放置しろよ

265 :263:2009/10/08(木) 23:07:20 ID:???
はい、ごめんなさい

266 :Name_Not_Found:2009/10/09(金) 00:12:02 ID:???
so-netブログを使っていてCSSでいろいろいじれるんですが
記事内に画像を含む時にline-heightを適用させたいのですが
どうすればよろしいでしょうか?
例) 文章
   画像
   文章 
 
といった形で文章に画像が混ざっているというよりページ内に画像が混ざっている感じです。
記事内に画像が入ると指定している行間より行間が高くなってしまいます。

267 :Name_Not_Found:2009/10/09(金) 00:35:10 ID:???
下の行が正しい動作なんだが
何をどうしたいのかがさっぱりわからん

268 :Name_Not_Found:2009/10/09(金) 00:43:51 ID:???
>>267 すみません。
記事内に画像が入っているときに行間を丁度いいぐらいに狭く指定すると
文章だけで記事を書いたときに文字が被ってしまう
というのを解決したいんですが・・・

269 :Name_Not_Found:2009/10/09(金) 00:45:16 ID:???
line-heightをpxで指定してるんなら、実数値や%に変更する

270 :Name_Not_Found:2009/10/09(金) 01:08:49 ID:???
>>269 実数値や%で指定しているんですがやっぱり広さが変わってしまいます

271 :Name_Not_Found:2009/10/09(金) 01:12:08 ID:???
いや変わらなきゃ被るんだろ?

272 :Name_Not_Found:2009/10/09(金) 01:28:01 ID:???
>>271 
画像有りのページをみて80%で指定すると
画像なしのページでは被ってしまう。 
といった具合で
画像ありの記事と画像なしのページでの行間を統一したいんです。

273 :Name_Not_Found:2009/10/09(金) 01:34:36 ID:???
あたりまえだろ、100%以上にしなきゃ被る

274 :Name_Not_Found:2009/10/09(金) 01:40:04 ID:???
>>273 なるほど ありがとうございました。
   わざわざどうもすみませんです

275 :Name_Not_Found:2009/10/10(土) 08:10:51 ID:???
containが上下にぴったりくるようにしたいです。
下のでは上下に隙間ができてしまいます。
どうすればよいのでしょうか?

body {
background: #000;
}
#contain {
width: 600px;
height: 100%;
background: #fff;
}

<body>
<div id="contain">test</div>
</body>

276 :Name_Not_Found:2009/10/10(土) 08:20:19 ID:???
すいません
margin:0;を入れたらできました。
お騒がせしました。

277 :Name_Not_Found:2009/10/10(土) 11:17:06 ID:???
>>276
DOCTYPE宣言はちゃんと書いておいたほうがいいと思うぞ

278 :Name_Not_Found:2009/10/10(土) 12:01:56 ID:Dtr419Pz
テーブルのボーダーをCSSで自由に指定するにはどうやればいいですか?
たとえば、縦線を二重線、横線を実線と点線を交互に、とかやりたいのですが

279 :Name_Not_Found:2009/10/10(土) 12:38:55 ID:???
>>278
tdやthやtableにborderを自由に指定してください

280 :Name_Not_Found:2009/10/10(土) 13:03:02 ID:Dtr419Pz
そういわれましても・・
思うにこのわかりにくさは、線は要素と要素の間にあるものだから
どこに所属するのかが分からないという哲学的な問題に起因するんです。
国境はどこの国のものかを問うようなものです
あるtdの左ボーダーにドットを指定し、その右側のtdの右ボーダーにダブルを指定したとしたら
設定が矛盾しあって何が起こるのです?

281 :Name_Not_Found:2009/10/10(土) 13:24:01 ID:???
>>280
そういわれましても・・っていわれても・・・
あなたがあなたの好きなところに好きに線を引くしかないでしょう?

国境とか哲学とか意味わかんないこといってないでw3cみてみなよ
http://www.w3.org/TR/1998/REC-CSS2-19980512/box.html#box-dimensions

282 :Name_Not_Found:2009/10/10(土) 13:42:17 ID:???
>>280
border-collapse:collapse;


283 :Name_Not_Found:2009/10/11(日) 10:35:07 ID:???
>>280
何で自分で試さないの?金かかるわけでもないのに

284 :Name_Not_Found:2009/10/11(日) 15:59:00 ID:???
W3c原理主義者ほど
うざいものはない

285 :Name_Not_Found:2009/10/11(日) 16:27:26 ID:???
>>284
いきなり脈略もないことを言い出すヤツってうざいヨネー

286 :Name_Not_Found:2009/10/11(日) 16:50:58 ID:???
こういう素人がスレを汚すことが激しくウザイ件

284 名前:Name_Not_Found[sage] 投稿日:2009/10/11(日) 15:59:00 ID:???
W3c原理主義者ほど
うざいものはない

285 名前:Name_Not_Found[sage] 投稿日:2009/10/11(日) 16:27:26 ID:???
>>284
いきなり脈略もないことを言い出すヤツってうざいヨネー


287 :Name_Not_Found:2009/10/12(月) 01:11:15 ID:???
最近初心者板でやたら「素人」と使いたがるやつがいるな

288 :Name_Not_Found:2009/10/12(月) 08:08:15 ID:???
それスレの主だぜ。手を出すな、穢れるぞ。

289 :Name_Not_Found:2009/10/14(水) 00:49:50 ID:???
W3Cの資料くらい全部読んだよなあおまえ
標準Webくらいきっちりできるようになれよなあ



だっせえww
プププププププププププププww

290 :Name_Not_Found:2009/10/14(水) 09:59:09 ID:???
floatってあんまし使わないほうがいいってのまじ?

291 :Name_Not_Found:2009/10/14(水) 11:30:35 ID:???
マジレスすると場合による

292 :Name_Not_Found:2009/10/14(水) 13:01:36 ID:???
289が華麗にスルーした2人

293 :Name_Not_Found:2009/10/15(木) 13:17:54 ID:AGZKIcZz
h_age

294 :Name_Not_Found:2009/10/15(木) 14:37:06 ID:???
>>289をアンチW3Cクンと命名しよう

295 :Name_Not_Found:2009/10/15(木) 16:58:19 ID:???
>>294
いやいやいやいやスルーしろってばさ

296 :Name_Not_Fou:2009/10/15(木) 17:35:04 ID:???
質問があります。優しいおじさまお願いします。

ブログのサイトの画像部分をフラッシュに変えようと思い
background: #ffdddd url(http:○○.jpg)
のからHTTP以降を
http://blog-imgs-26.fc2.com○○.swf
に変えてみたのですが、、真っ白です。

HTTP以降を削除して新しいフラッシュ分を貼り付けだだけですが
画像見えないです。

どうすればいいのでしょうか?

ご指導お願いします。

BY 18歳ぴちぴち女

297 :Name_Not_Fou:2009/10/15(木) 17:41:45 ID:DrxEWQvn
お願いします。あげ。

298 :Name_Not_Found:2009/10/15(木) 18:37:49 ID:???
>>296
どこ住み?
彼氏いる?

299 :Name_Not_Found:2009/10/16(金) 07:04:05 ID:???
>>269
flashは無理

300 :Name_Not_Found:2009/10/16(金) 07:58:04 ID:???
2...269?

301 :Name_Not_Found:2009/10/16(金) 09:50:37 ID:beR6ckhk
一つだけ質問があります。
XHTMLじゃなくてHTMLなんですけど
オンマウスすると写真の画像がパッと光るというか明るくなるというのをやってみたいのですが
cssを使ってできるもんなんでしょうか?
詳しい方で暇な方がいたら教えてください。

302 :Name_Not_Found:2009/10/16(金) 09:54:01 ID:???
ロールオーバーの話なら可能
CSS ロールオーバーでググれ

303 :Name_Not_Found:2009/10/16(金) 21:50:13 ID:???
質問です。
ググりまくったのですが解決に至らなくて困っております。

position:absolute
にした時、<div>などに指定したbackgroundが反映されず、
消えてしまう現象に悩まされております。

中にネストした<div>や他のタグ(<table>なども)に
position:absoluteを指定すると、それを包括しているタグに
指定したbackgroundも消えてしまいます。

CSS超初心者なのでとても初歩的な質問だったら大変申し訳ありませんが
親切な方、いらっしゃったら教えてくださると嬉しいです。
よろしくお願いいたします。

304 :Name_Not_Found:2009/10/16(金) 23:16:33 ID:???
ググり方が良くないんだな
css background 表示しない
でググってみて該当なかったら、もう一回ソース貼って質問して

305 :Name_Not_Found:2009/10/16(金) 23:44:18 ID:???
>>304
ググりなおしてみます。
ありがとうございます。

306 :Name_Not_Found:2009/10/19(月) 20:41:15 ID:???
<dt class="a">
  <div class="b">
  </div>
</dt>
とhtmlに書いているんですが
この場合divタグのクラスからdtタグのクラスを指定するにはどのようなセレクタを使えばいいのでしょうか?



307 :Name_Not_Found:2009/10/19(月) 20:57:53 ID:???
継承するプロパティはするし、しないプロパティはしない
無理矢理継承しないのもさせたいんならinherit

308 :Name_Not_Found:2009/10/19(月) 21:24:19 ID:???
ブハっw

309 :Name_Not_Found:2009/10/19(月) 23:29:46 ID:???
>>306
.a dt {}


310 :Name_Not_Found:2009/10/19(月) 23:53:48 ID:???
>>309
えーとつまり言いたいことは
div.b * dt.a{}のように
セレクタを利用してどうにか解決したいんですが・・・
子要素から親要素への指定は無理なんでしょうか・・・?

311 :309:2009/10/20(火) 00:00:08 ID:???
javascript使えるならdomでできます

312 :Name_Not_Found:2009/10/20(火) 00:24:36 ID:???
設計がおかしい

313 :Name_Not_Found:2009/10/20(火) 10:13:14 ID:???
採点してもらってから鯉

314 :Name_Not_Found:2009/10/20(火) 10:43:50 ID:???
> 子要素から親要素への指定
無理

315 :Name_Not_Found:2009/10/20(火) 10:46:18 ID:???
ちょ、子→親かよ
>>307は忘れてくれ、そしてずっと眠ってくれ

316 :Name_Not_Found:2009/10/20(火) 21:08:18 ID:???
>>307
カスケードしないプロパティってなにがある?

317 :Name_Not_Found:2009/10/20(火) 21:19:50 ID:???
そういう書き方すればいいだけ

318 :Name_Not_Found:2009/10/20(火) 22:15:55 ID:???
>>316
山ほどあるんだが
background-colorとかpositionとか

319 :Name_Not_Fou:2009/10/20(火) 22:22:30 ID:dkyYwmGX
質問です。無料FC2ブログを自分のホムペにビルトイン(埋め込み)したいのですが

httpをどのように加工したらいいのでしょうか?

320 :Name_Not_Found:2009/10/20(火) 22:39:25 ID:???
スレチです

321 :Name_Not_Fou:2009/10/20(火) 22:49:11 ID:dkyYwmGX
>>319 移動してきます。マルチじゃないです。

322 :Name_Not_Found:2009/10/22(木) 01:46:29 ID:mwUK+EbG
テーブルのtdの奇数列と偶数列を色違いにしたいのですが、
一つ一つclassを指定するとソースが煩雑になります
いい方法があれば教えて下さい

323 :Name_Not_Found:2009/10/22(木) 01:50:41 ID:???
テーブル 列 色違い css でググれ

324 :Name_Not_Found:2009/10/23(金) 08:46:39 ID:???
nth-childはまだか・・・

325 :Name_Not_Found:2009/10/27(火) 19:33:17 ID:???
cssで特定の文字を消すことはできますか?
たとえば

あいうえお
   うえお

のような感じで

326 :Name_Not_Found:2009/10/28(水) 15:20:19 ID:???
>>325
display:none

327 :Name_Not_Found:2009/10/28(水) 15:21:24 ID:???
<p><span class="kesimasu>あい</span>うえお</p>

#kesimasu {display:none}

328 :Name_Not_Found:2009/10/28(水) 16:33:21 ID:???
>>326-327
説明不足でした
htmlを一切弄らない方向で

329 :Name_Not_Found:2009/10/28(水) 16:37:58 ID:???
出ました必殺の説明不足視ね

330 :Name_Not_Found:2009/10/28(水) 16:38:51 ID:???
>>325
javascriptスレ池視ねks
答えなければよかった

331 :Name_Not_Found:2009/10/28(水) 20:56:30 ID:???
CSSに↓こうかいて
a:hover.other {color: #FF0000;text-decoration:none;}

HTMLに↓こう書いてもオンマウス時に赤色に変わらないです…
<p><a href="link1.html" class="other">リンク1</a></p>
<p><a href="link2.html" class="other">リンク2</a></p>


何か記述ミスしてますでしょうか?
IDは2回つかっちゃだめってことでclassにしたのですが…

332 :331:2009/10/28(水) 21:18:26 ID:???
すみません!CSSが少し多い記述になっちゃいましたが解決しました!
スレ汚しスミマセンでした

333 :Name_Not_Found:2009/10/31(土) 16:32:53 ID:???
兄弟隣接セレクタって
弟要素から兄要素への指定はできないの?

334 :Name_Not_Found:2009/11/01(日) 20:25:37 ID:9rX2Qn4V
「CSS初心者スレッド」という文章があって、「CSS初心者」の部分にだけ背景画像を設定したい場合、
どうすればいいでしょうか?
インラインのままだと背景が表示できないですし、ブロックにすると改行されてしまいますし。
なお「CSS初心者」の部分はページ中に複数あってそれぞれ文字数が変わってくるという前提です。

「CSS初心者」にAタグをつけて、Aタグに背景画像を設定するとできるのですが、
それを<span>等でやりたいです。
Aタグのデフォルトの状態がわかればできそうなのですが、自分にはわかりませんでした。
よろしくお願いします。

335 :Name_Not_Found:2009/11/02(月) 05:07:15 ID:???
意味がよくわからんけどdivでやれ


336 :Name_Not_Found:2009/11/02(月) 06:13:53 ID:???
spanとかdivとかtableとか、縦横幅を決めたときデフォルトで背景が透明というか何も無いっぽい感じだと思うのですが
そうじゃない有名どころのブラウザってありますでしょうか?
例えば、
<div id="d1" style="width:100px;height:100px;background-color:#ababab;">
<div id="d2" style="width:50px;height:50px;" />
</div>
とあったときに、d1の背景(#ababab)が全部見えてくれる場合が多いと思いますが、
それが一般的なのか、というところに疑問をもちました。

337 :Name_Not_Found:2009/11/02(月) 06:20:43 ID:???
>>336
一般的というかwidth+height+background-color指定したらその通り表示されるよ?
どういうふうにしたいの?
デフォルトの背景したい場合はbodyなりhtmlなりの背景の色を指定すればいいよ。

338 :Name_Not_Found:2009/11/02(月) 06:25:02 ID:???
>>334
>「CSS初心者スレッド」という文章があって、「CSS初心者」の部分にだけ背景画像を設定したい場合、
>どうすればいいでしょうか?

あとこれだったら多分「CSS初心者」っていうとこだけ文章込みの画像にするとか?背景じゃなくて。

339 :Name_Not_Found:2009/11/02(月) 08:15:36 ID:???
>>337
例えば、
<div id="d1" style="width:100px;height:100px;background-color:#ababab;">
<div id="d2" style="width:50px;height:50px;" />
</div>
のとき、d2にbackground-color:#000000;
を指定すると、d1の100px×100pxの背景が
d2の50px×50pxの背景(#000000)によって、その部分だけ見えなく(黒色に)なってしまいます。

そこで>>336でかいたように、d2を何も指定しなかった場合(ここではbackground-colorを指定しなかった場合)、
d1の背景(#ababab)が全て、見えるのか、何かしらの理由で、見えなくなってしまうのか
というところです。
ようは、
背景指定してあるbodyに背景指定のないdiv要素を一つ重ね合わせるときと、
(上の例では、)背景指定のあるdivに背景指定のないdiv要素を一つ重ねあわせるとき、
これらが背景の面で同じ様に作用してくれるか、
一般的にこの面でクロスブラウザを考える必要はあるか、
ということです。

340 :Name_Not_Found:2009/11/02(月) 08:30:38 ID:???
えーとブラウザごとの挙動は詳しくしらんので他の人に補完してもらうとして
そういう時はz-indexでどの順番で重ねるか指定すればいいんじゃない?

341 :Name_Not_Found:2009/11/02(月) 09:36:31 ID:???
background-colorの初期値はtransparent

342 :Name_Not_Found:2009/11/02(月) 09:44:43 ID:???
>>334
>インラインのままだと背景が表示できない
勘違い

343 :Name_Not_Found:2009/11/07(土) 04:41:05 ID:6Puk5E3r
写真や絵の上に文字を置くときに
text-shadowが便利で使ってるんですけど、ieでは使えませんよね?

・ieで似たことができるcssの方法はありますか?(ie6以上対応きぼん)
または
・多少違う見え方でもいいので、cssを使ってieで写真等の上に文字を置くのに便利な方法はありませんか?

#文字列は、映画のポスターみたいに真ん中に割と大きく置く予定です

344 :Name_Not_Found:2009/11/07(土) 07:06:55 ID:???
↑#の部分ちょっと補足です

background-color:#000とかで下敷きを作ってもいいのですが、
上で書いたとおり真ん中に、割と大きく文字を置いているレイアウトなので
そうすると塗りつぶされた部分は下の絵が完全に見えなくなってしまうので避けたいです。
下敷きの黒い帯が横たわるのもいまいち格好悪いですし・・・
というわけでよろしくです。

345 :Name_Not_Found:2009/11/07(土) 08:55:22 ID:???
position やらで位置を指定して、その下に数pxずらした色違いの文字を予め置くとかあるけど、醜い方法。

346 :343:2009/11/08(日) 01:45:06 ID:???
>>345
d
やってみましたが、やはりあんまり見栄えが良くないですね・・・・
メッシュ状の透明gifとか下敷きにもしてみたんですがなんか今一でした
他の方法考えてみますorz

347 ::2009/11/08(日) 16:35:37 ID:mpQFrkZu
<select>の<option>に個別に設定したスタイルシート(色変え等は)はブラウザ依存なのでしょうか?
SH903iのiモードフルブラウザでは正常に動作したものの
SH-06Aのiモードフルブラウザでは効きません

ブラウザ依存なら対象方法としてはJavaScript/onChangeで<select>ごとスタイルシートを変えるくらいしかないでしょうか?


348 :Name_Not_Found:2009/11/09(月) 13:39:23 ID:???
>>346
ちなみに、写真や絵の上に、置くのは、デバイス文字か?
それとも書き出した画像かな?
画像なのであれば、iepngfixでググれ。そしたら自分がやりたかったことにたどり着く。

349 :Name_Not_Found:2009/11/10(火) 00:38:42 ID:???
文字車道はまだ使えないよね実際のところ
ロゴならpngだろうね

350 :343:2009/11/10(火) 04:13:09 ID:???
>>348-349
わざわざd
可変文字列(インフォメーションとして使ってるんで内容・色・大きさが結構変わる)なんで、
文字を画像にするのはきついんですよね・・・
どうもでした〜

351 :Name_Not_Found:2009/11/10(火) 07:05:19 ID:???
IEのときだけ、dlが右側にはみ出るのはなぜ?
長文になると改行しても横スクロールバーが出ます・・・

<div>
<dl>
<dt>あああ</dt>
<dd>あああ</dd>
</dl>
</div>

352 :Name_Not_Found:2009/11/10(火) 09:08:54 ID:???
ここでいいか分かんないけど、教えてください><

ttp://www.dotup.org/uploda/www.dotup.org348118.jpg.html
上記画像を見てもらうとわかるとおり、IEでテーブルを組んだとき
テキストボックスにsizeを指定すると、なぜかレイアウトが崩れます。

CSSが原因ではないかもしれないですが、ご教授いただけたら幸いです。

353 :Name_Not_Found:2009/11/10(火) 09:09:42 ID:???
margin-left


354 :352:2009/11/10(火) 09:51:27 ID:???
>>353
ご教授ありがとうございます。
・・・・・が、よくわかりませんorz
margin-leftをどの部分に適応すればいいのでしょうか・・・。

355 :Name_Not_Found:2009/11/10(火) 12:20:48 ID:???
>>353>>351宛てだと思うぞ

356 :352:2009/11/10(火) 14:09:20 ID:???
>>355
ご教授ありがとうございます。 (^^;

357 :Name_Not_Found:2009/11/11(水) 00:51:56 ID:???
<div>てすとてすと<br />てすとてすと<br /></div>
とあるあるときにdivのwidt、heightそれぞれ指定しなくても
テキストのある範囲に幅に合わせてくれますが
これは仕様なのでしょうか、それともブラウザに依存しているのでしょうか

358 :Name_Not_Found:2009/11/12(木) 15:56:01 ID:/pfdOLPA
<div style="margin:5px;">a</div>
<div style="margin:5px;">b</div>

このように書くと、

┌─┐
│ a│
└─┘
┌─┐
│ b│
└─┘
のようにdiv要素が並びますが、aとbの間の隙間が5pxになります。
marginはどちらも5pxにしているので、aの底辺の5pxとbの上辺の5pxが合計されて
10pxの隙間が出来る気がするのですが、なぜ5pxなのでしょうか。

359 :Name_Not_Found:2009/11/12(木) 19:11:10 ID:???
上下の隣接するmarginは相殺が発生するのがCSSの仕様
解説サイトを探して調べてみてください

360 :Name_Not_Found:2009/11/12(木) 21:26:46 ID:/pfdOLPA
相殺するんですか
初めて知りました
ありがとうございます

361 :Name_Not_Found:2009/11/13(金) 13:23:23 ID:nN++1svv
liタグを使って
・あああああああ
ああああ
といった表示をしたいのですが
・あああああああ
ああああ
となってしまいます

何かやり方ありませんか?

362 :Name_Not_Found:2009/11/13(金) 14:33:07 ID:oox5/boO
何がだめなのか。

363 :Name_Not_Found:2009/11/13(金) 16:07:20 ID:???
>>361
前者と後者の違いがまったくわからないんだが、

list-style-position−スタイルシートリファレンス
ttp://www.htmq.com/style/list-style-position.shtml

こういうことなのではないかとエスパー回答してみる

364 :Name_Not_Found:2009/11/13(金) 17:43:38 ID:6Eu/tgl7
画像検索apiを使って
ttp://sokkuri.net/alike/%E9%97%98%E7%89%99/%E9%9A%86%E3%81%AE%E9%B6%B4
上記のサイトのように画像一覧を表示させる方法を教えてください。
初めての質問なので板違いだったらすみません。
よろしくお願いします。

365 :Name_Not_Found:2009/11/13(金) 18:36:31 ID:???
>>363
おお、エスパー回答の通りです
ありがとうございました

366 :Name_Not_Found:2009/11/13(金) 21:18:47 ID:5nWc7khW
ゾンビから逃げて最終的にはヘリで逃走するミッション鯖を探してるのですがわかりません。
どなたかIPを教えて頂けたらうれしいです。

367 :Name_Not_Found:2009/11/14(土) 01:57:09 ID:???
>>366
192.168.0.1だよ。

368 :Name_Not_Found:2009/11/14(土) 03:16:03 ID:98Z1MpYI
>>367 本当にありがとうございます

369 :Name_Not_Found:2009/11/14(土) 18:09:51 ID:AGVd2sio
なんかOperaでやると変になる

370 :Name_Not_Found:2009/11/14(土) 19:11:08 ID:???
<div>
 <div style="float:left;">ああ</div>
</div>
<div>いい</div>

だと "ああ" と "いい" の間で改行されないの?

371 :Name_Not_Found:2009/11/14(土) 19:21:00 ID:UVdwJxnN
質問です。

<h1 id="x"><a href 〜>あいう</a></h1>の文字カラーの指定を
「a」の指定よりも「h1」の指定を優先させるためには、
どうすれば良いのでしょうか

372 :Name_Not_Found:2009/11/14(土) 20:03:51 ID:98Z1MpYI
>>367 鯖がありません…

373 :Name_Not_Found:2009/11/14(土) 21:17:12 ID:???
>>372
じゃあ 127.0.0.1 で。

374 :Name_Not_Found:2009/11/14(土) 21:20:18 ID:???
くだらね死ねよ

375 :Name_Not_Found:2009/11/14(土) 22:35:28 ID:???
いまだにディブ房なんているのかw

376 :Name_Not_Found:2009/11/14(土) 22:37:23 ID:???
div=「」
何の意味もない
CSSのCはカズケーディング
少しは本買って勉強しろ
いじってればどうにかなるなんてレベルはもう卒業してね

377 :Name_Not_Found:2009/11/14(土) 22:59:29 ID:JMG8jQQR
<span class="entry"></span>で囲った文字列が大量にあるのですが、
これらにmarginをつけることは出来ないでしょうか。
inline要素はmarginなど指定できなかったと思いますが、
何かいい方法はないでしょうか。
外部ファイルからCSSを読んでいるので、
.entry {
****
}
の部分を1箇所直せば全てに適用できます。
ご回答お待ちしております。

378 :Name_Not_Found:2009/11/14(土) 23:31:59 ID:???
カズケーディングwwwww
少しは本買って勉強したら?

379 :Name_Not_Found:2009/11/15(日) 01:08:00 ID:???
これは恥ずかしい。

380 :Name_Not_Found:2009/11/15(日) 01:38:34 ID:???
>>377
左右の margin ならそのままで。
上下の margin なら

display: inline-block;

でいけんじゃ?

381 :Name_Not_Found:2009/11/15(日) 02:46:00 ID:+d3O3rv1
ゾンビできました。
しかし試合してる最中いきなり切断されます。
何故でしょうか

382 :Name_Not_Found:2009/11/15(日) 12:53:01 ID:???
>>370
エスパー回答
clearしたら

>>371
#x a { color: ... }

で十分

>>377
> inline要素はmarginなど指定できなかったと思いますが、

本当にそうか?試してみた?

>>381
いい加減板違いは帰れ

383 :Name_Not_Found:2009/11/15(日) 14:18:50 ID:???
CSSとhtmlは分ryアウトラインを先に作ry
愛正解みたいなのにしたいならご自由に

384 :Name_Not_Found:2009/11/15(日) 14:34:05 ID:YS4RzEXO
>>382
横は出来ましたが立てのmarginはだめでした

385 :Name_Not_Found:2009/11/15(日) 14:44:59 ID:???
>>384
line-heightじゃ駄目なの

386 ::2009/11/15(日) 19:47:30 ID:h37y1MK9
すみません
どうか>>347にお答えいただけませんか?

387 :Name_Not_Found:2009/11/15(日) 23:59:05 ID:YS4RzEXO
>>385
ああ、その手がありましたか!!
複数行になっている部分の行間がちょっと気になりますが、とりあえず出来ました。
ありがとうございます。

388 :Name_Not_Found:2009/11/16(月) 01:28:56 ID:???
ケータイCSSはものすごい制限あるよ

389 ::2009/11/16(月) 07:31:01 ID:???
PCでもブラウザ依存なのでしょうか?
対象法はJavaScriptくらいですか?

390 :Name_Not_Found:2009/11/16(月) 22:36:05 ID:yyQ+6g7M

<div>○</div>


○の部分に、無料レンタルサービスの「RSSフィード取得ツール」を埋め込んでいます。
時々このサービスのサーバーが重くなって表示されなくなります(ずっとロードの状態になる)。
すると、この<div>○</div>以降に書いてあるものもすべて表示がされなくなってしまいます。
そこで、<div>○</div>の部分は最後にロードするようにしたいのですが、このようなことは可能でしょうか。


391 :Name_Not_Found:2009/11/16(月) 23:25:02 ID:???
HTML 内で一番下に書けばいいんじゃね。

392 :Name_Not_Found:2009/11/17(火) 17:40:58 ID:ROGjbCwz
>>391
そうすると表示位置も下になってしまいます

393 :Name_Not_Found:2009/11/17(火) 18:00:20 ID:???
そもそも何でCSSの質問スレで聞くの

394 :Name_Not_Found:2009/11/18(水) 18:33:45 ID:???
画像をテーブルの下敷きにしようとして以下のようにしました。
chromeでは見えないのですが、ie6、狐3.5.5で見るとhoge1とhoge2の間に
テーブルの枠らしき線が水平方向に入ってしまいます。
線を消す方法を教えてくらさい!

<table styel="background-image: url(hoge.jpg);border-color:transparent;border-collapse:collapse;">
<tr><td>hoge1</td></tr>
<tr><td>hoge2</td></tr>
</table>

395 :Name_Not_Found:2009/11/21(土) 10:33:48 ID:???
>>392
ヒント position


396 :Name_Not_Found:2009/11/21(土) 10:37:46 ID:tbYtZSx+
w3cのcss3に関する記述のトップページってどこにありますか?
以前見てたのですが久しぶりにアクセスしたらデザインが変わっててわからなくなりました

397 :Name_Not_Found:2009/11/21(土) 11:02:10 ID:tbYtZSx+
すいません見つかりました

398 :Name_Not_Found:2009/11/21(土) 11:23:12 ID:90JTidUS
CSS3の大部分はワーキングドラフトなのに早漏のようにCSS3講座を開講してるサイトってなんなんですか?

399 :Name_Not_Found:2009/11/21(土) 15:09:39 ID:???
サイトでうだうだ言われるということは、
先行実装しているブラウザはどうなるわけ

400 :Name_Not_Found:2009/11/22(日) 21:32:58 ID:???
li img:before{
content:attr(alt);
disply:block;
color:red;
}
としても firefox で表示されないのは 何で?

401 :Name_Not_Found:2009/11/23(月) 13:27:28 ID:???
印刷時に文章をLaTeXのように2カラムにする方法を探しています。
印刷環境によって、改ページする位置は変わるので、
コンテンツ側に、改ページタグを付けたくはありません。


402 :Name_Not_Found:2009/11/23(月) 16:12:17 ID:???
-moz-column-count:2; column-count:2;

403 :Name_Not_Found:2009/11/23(月) 18:35:33 ID:???
ttp://fukia.6.ql.bz/
このサイトを作っているのですが、IE6で確認すると、ナビゲーションボタンの周りに隙間が出来てしまいます。
どうしたら修正できるかどなたか教えていただけませんか?

404 :Name_Not_Found:2009/11/23(月) 23:14:12 ID:???
エレガント(笑)じゃないが良ければ。
上書きしないで、追加で入れてくれ。

* html body #navi li{
float: left;
width: 160px;
height: 55px;
margin: 0px 0px 0px 0px;
padding:0px;
line-height:0;
position:relative;
top:-3px;
}

* html body #shadow{
background:url(images/img_shadow.jpg) no-repeat;
width:800px;
clear:both;
height:12px;
position:relative;
top:-3px;
}

* html body #middle{
width:800px;
background-image:url(images/img_middle.jpg);
background-repeat:repeat-y;
float:left;
height:auto;
position:relative;
top:-9px;
}

405 :Name_Not_Found:2009/11/24(火) 13:48:19 ID:???
>>403
http://pc11.2ch.net/test/read.cgi/hp/1257361206/200


406 :403:2009/11/24(火) 19:05:40 ID:vECGgEQG
>>405
ありがとうございます。全部見て試したんですが、知識不足なためか思った通りになりませんでした;

>>404
わざわざ書いてくださりありがとうございます。ばっちり決まりました!


407 :Name_Not_Found:2009/11/27(金) 13:04:27 ID:???
font-familyに関して質問です
値に日本語のフォントを指定するときは"や'で囲むのを見ますが
英語のフォントも"や'で囲んで指定しても大丈夫ですか?

p.sample3 {font-family: "Impact,Charcoal"; }

408 :Name_Not_Found:2009/11/27(金) 13:30:56 ID:???
予想の斜め上を行くなお前は

409 :401:2009/11/27(金) 23:54:35 ID:???
>>402
css3はチェックしてなかった。
ありがとう。

410 :Name_Not_Found:2009/11/28(土) 21:16:53 ID:???
質問があります。

親要素のボックスからはみ出すボックスがフロートの下に置かれる - CSSバグリスト
http://css-bug.jp/win/ie/ver6/0418/


<div style="width:200px; border:2px dashed red;">
<div style="float:left; width:100px; border:2px solid blue;">float</div>
<div style="margin-left:110px; width:100px; border:2px solid green;">後続</div>
</div>

これの回避策はないものでしょうか?

上記例では下のdivにwidth:100px; 指定を80pxなどにしても、”後続”の文字がaaaaaaaだったり、
折り返しの効かないもの(折り返すと不都合がでるもの)などの場合、どうしてもIE8だと
下側に回りこんでしまいます。

うまく2カラムレイアウトする方法はありませんか?

IE8でも再現しました。Firefoxだと右側にはみ出るので、これはこれでレイアウトは崩れずOKです。
IEをなんとかしたい・・・

411 :Name_Not_Found:2009/11/28(土) 21:23:34 ID:???
>>410
3つめのdivにfloat入れてないからじゃないの

412 :410:2009/11/28(土) 22:25:15 ID:???
>>411
ありがとうございます。

float:left;
border:2px solid green;
width: 80px;

のように3つ目に入れてみたのですが、長い文字があるとやはり駄目でした。

その場合、
white-space: pre-wrap;
word-wrap: break-word;

を付加して改行させてやることで対応できました。

しかし、この方法の場合、最初のdivがFirefoxでは何故かペッちゃんこになってしまいます。
その中のdivはちゃんと表示されるのですが・・・。
これはどうしたものでしょう?

413 :410:2009/11/28(土) 22:35:16 ID:???
>>410
の3つ目のままでやる場合は、

margin-left:110px;
border:2px solid green;

width: auto;
_width:100%;
overflow: auto;

white-space: pre-wrap;
word-wrap: break-word;

を指定すると、うまくいったような感じになりました。

ただ、こちらの方法だと、中に複雑なブロックがあった場合に(tableの中にpre等)
同様にpreなどに、

white-space: pre-wrap;
word-wrap: break-word;

を仕込むのですが、折り返されず、スクロールバーがでてしまいます。
その対処として、スクロールバーがでないように以下のようにしたのですが、

overflow: hidden;

すると今度は、折り返されもせず画面はじで途切れてしまいます。

このレスの不都合に関しては、最低限のコードが再現できたら、また質問させてください。

414 :410:2009/11/29(日) 08:44:10 ID:???
連投すいません。

>>414の方法の場合で解決する場合(floatを使わず、margin-leftを使う)ですが、
問題があるのは、<table>の中身が横に長い場合で、
どのブラウザでも<table>はoverflow: auto;やoverflow: scroll;が使えないようでしたので、

<div class="scroll-block" style="overflow: auto;">
 :
</div>

で囲んでやることで<table>そのものをはみ出る場合はスクロールさせることができるようになりました。
一応 >>410の件は大体解決した、ということでお願いいたします。

お手数お掛けいたしました。ありがとうございました!

415 :Name_Not_Found:2009/11/29(日) 21:04:34 ID:???
全てのサイトの背景色だけを常に書き換えるようなユーザースタイルシートって無いですか?

416 :Name_Not_Found:2009/11/30(月) 14:32:17 ID:???
・具体的にどう置き換えるのか
・前景色と同じ又は近い色だと困らないのか

body { background-color: #000 !important; }

417 :Name_Not_Found:2009/11/30(月) 15:06:25 ID:???
CSSのセレクタである要素のテキストを指定することは
でいないでしょうか?

<div class="test">
aaa
</div>

.test text{
color: white;
}

よろしくお願いします。

418 :Name_Not_Found:2009/11/30(月) 18:23:01 ID:???
>416
自分的に目に優しい色に変えて使ってます。
マジありがとう!


419 :Name_Not_Found:2009/11/30(月) 18:38:33 ID:???
>>417
「テキストを指定」の意味がわからない

.test { color: white; }

これでテキストの文字色変わるよね
何が不十分なのか

420 :Name_Not_Found:2009/11/30(月) 20:45:11 ID:???
>>417
JSでいうtextContentみたいなものを指定したいってことかな?
だったら残念だけど、CSSではそのようなものは用意されていないよ

421 :Name_Not_Found:2009/12/01(火) 17:56:32 ID:mGdGVGu8
背景画像指定の方法について教えてください。

ヘッダー部分とフッター部分にそれぞれ背景画像を配置したいと思っています。
フッター部分は画面サイズに合わせて自動的に最下部に表示されるようにしたいです。
背景を2枚配置する方法を調べてみたのですが、うまくできません。

http://www.7key.jp/hp/_body/16.html

htmlとbodyにそれぞれ配置とあったのでやってみました。
html{
background-color: #fef9db;
background-image : url(images/all_bg_top.jpg);
background-position : top;
background-repeat: repeat-x;
}

BODY {
background-image : url(images/all_bg_bot.jpg);
background-repeat: repeat-x;
background-position : bottom;

margin : 0;
padding : 0;
}
すると、BODY側の背景画像だけが表示され、html側の背景画像が表示されません。
でも、BODY側の背景指定3行を削除すると、html側の背景画像が表示されます。(画像位置等は合っている)
どうにかして上下に背景を表示させたいのですが…


422 :Name_Not_Found:2009/12/01(火) 18:10:41 ID:dE5V0m36
<span class="test">TEST</span>
.test { display:none; }

htmlと外部cssを別けていますspanの内容を見えなくしたいのですがCSSが反映されません
外部cssへのパスは問題ありません(他のセレクタとプロパティは効いてます)


以下のように書くと見えなくなるのを確認しています
<span class="test" style="display:none">TEST</span>


spanに外部スタイルシートからdisplay:noneを適用させるにはどうしたらよろしいでしょうか?
どなたかご教示お願い致します

423 :Name_Not_Found:2009/12/01(火) 18:25:48 ID:dE5V0m36
自己解決しました
gechoエンジンをいじってたのが原因でした

424 :Name_Not_Found:2009/12/04(金) 12:21:02 ID:???
span.18px-center{
font-size: 18px;
font:bold;
text-align:center;
}

これを、やったんですが、IE7で表示したら
センタリングされなくて、ダメでした。
そういうもんなんでしょうかね?

425 :Name_Not_Found:2009/12/04(金) 12:55:17 ID:???
当然だろ。

426 :424:2009/12/04(金) 13:06:11 ID:???
じゃあ、やっぱりXHTMLの方で
<div align="center">とかですか?

427 :Name_Not_Found:2009/12/04(金) 14:32:16 ID:???
それでいいならいいんじゃない?

428 :424:2009/12/04(金) 17:16:34 ID:???
CSSの方で、これも制御出来たらいいのにって思ったもので('ε`)
でも、別にそんなこだわるもんでもないですね。
先に進みます、ありがとうございます(^_^ )

429 :Name_Not_Found:2009/12/04(金) 17:20:14 ID:???
そしてまた糞サイトが一つ増えるのであった

430 :Name_Not_Found:2009/12/04(金) 17:25:43 ID:???
>>429
あ?オイ!!なんだとこら!!!タコこら!!! タコこら!!!だったら教えろや!!!
    ___ ∨
    /    \       ___
  /ノし   u;  \   ;/(>)^ ヽ\;
  | ⌒        ) ;/  (_  (<) \;    /くっ、糞さ・・・い・・と・・・がぁ・・・・
  |   、       );/   /rェヾ__)⌒:::  ヾ; <  ふえ・・・・・・る・・・・の・・・・
  |  ^       | i   `⌒´-'´  u;  ノ;;  \ だ・・・った・・・・ぐるじい!!!
  |          | \ヽ 、  ,     /;      
  |  ;j        |/ \-^^n ∠   ヾ、      
  \       / ! 、 / ̄~ノ __/ i;      
  /      ⌒ヽ ヽ二)  /(⌒    ノ       


431 :Name_Not_Found:2009/12/04(金) 17:36:31 ID:078XY/C3
/*** comments name ***/

.ajaxcom li .ajaxcom_name {
margin: 0 0.3em 0 0;
font-weight: bold;
}

/*** comments comment ***/

.ajaxcom li .ajaxcom_content {
color: #002f00;
margin: 0 0.8em 0 5;
font-size: 15;
}
.ajaxcom li .ajaxcom_content a {
color: #000000;
text-decoration: none;
}
.ajaxcom li .ajaxcom_content a:hover {
color: #000000;
text-decoration: underline;
}

この/*** comments name ***/ 改行 /*** comments comment ***/といったように表示したいのですが、
どうすれば良いでしょうか?宜しくお願いしますm(_ _)m

432 :Name_Not_Found:2009/12/04(金) 18:52:16 ID:???
意味がわからない。

433 :Name_Not_Found:2009/12/04(金) 22:11:39 ID:???
>>428
marginでやれ
あとはググって

>>431
意味がわからない

434 :Name_Not_Found:2009/12/05(土) 01:35:29 ID:???
>>433
ピコーンってキタ!   ¥
ありがとうございますv(^_^ )

435 :Name_Not_Found:2009/12/05(土) 16:17:17 ID:???
>431
/*** comments name ***/ <br> /*** comments comment ***/

436 :Name_Not_Found:2009/12/05(土) 16:36:36 ID:???
.side{

line-height:18px;
padding-left:13px;
margin-bottom:5px;
text-align:left;
}
このsideだけを編集して、
<div class="side"><a href="xxx">testes</a></div>
として、リンクをリスト表示したいのですができますか?

仕様上、side内にliやulを使えないので困ってます。

437 :Name_Not_Found:2009/12/05(土) 16:52:46 ID:???
.list{
display: list-item;
}

<div class="side">
<span class="list"><a href="xxx">testes1</a></span>
<span class="list"><a href="xxx">testes2</a></span>
<span class="list"><a href="xxx">testes3</a></span>
</div>

これでダメか?

438 :Name_Not_Found:2009/12/06(日) 10:15:29 ID:???
>>437
そうするなら、わざわざ span など書かずに
.side a{
display: list-item;
}
じゃ、いかんのか?

439 :Name_Not_Found:2009/12/09(水) 00:27:53 ID:TaJGIhNn
すまん
ttp://www.pentatoys.com/vote2/posts/view/7/?guid=ON


「Q.」の2文字まで:first-letter
が効いているのか誰かおしえてくれ。
眠れん。

440 :Name_Not_Found:2009/12/09(水) 07:55:17 ID:???
first-letterはその名の通り最初の文字だけ

441 :Name_Not_Found:2009/12/09(水) 08:08:03 ID:n+l7yKuM
Mozilla Firefox 3.5.5、Internet Explorer 8.0だと2文字まで:first-letterが効いてるようにみえるな

442 :Name_Not_Found:2009/12/09(水) 11:26:50 ID:???
>>439
:first-letterって何に使うの?

443 :Name_Not_Found:2009/12/09(水) 19:55:29 ID:???
ドロップキャップ

>>439
CSSの擬似要素のところ読んできたら眠れるんじゃない

444 :439:2009/12/10(木) 00:15:40 ID:???
>>441
フガーッ。そういうことか。
ブラウザの仕様なら仕方あるまい。

>>443
見たけど。。。

「:first-letter 疑似要素の場合、一文字目に引用符などの区切り文字が来た場合は、二文字目も含むものと規定されています。」

これ違うよね。


445 :Name_Not_Found:2009/12/10(木) 09:36:06 ID:???
>>444
-----
Some languages may have specific rules about how to treat certain letter combinations. In Dutch, for example, if the letter combination "ij" appears at the beginning of a word, both letters should be considered within the :first-letter pseudo-element.
-----

これに該当する可能性もあるのでは

446 :439:2009/12/13(日) 00:32:42 ID:???
>>445
なるほど。業務では使わない方がいいね。
あとブラウザ依存もあるし。

thanks

447 :Name_Not_Found:2009/12/14(月) 13:56:37 ID:wA109Kob
marginセレクタってマイナスの数字を記述しても大丈夫なんだっけ?
一応マイナス方向に反映されてるみたいだけど・・・。

たとえば、自分なんか、はてなダイアリーでスタイルシートちょいちょいいじるんだけど、

div.hatena-body {
margin : 0 -20px 0 -20px;
}


みたいな感じ。
どっかのサイトでマイナスはできないことはないけど、オヌヌメしないみたいなことを、
見たような見てないような気がしたので。

448 :Name_Not_Found:2009/12/14(月) 14:24:35 ID:???
>>447
おすすめされてなくても、ブラウザできちんと解釈されればいいのでは。
自分は仕事で普通に使ってます。
floatでうまく配置ができない時とか、marginでのマイナス設定が便利

449 :Name_Not_Found:2009/12/15(火) 00:10:18 ID:???
仕様に悩んだら仕様を読むべし

-----
Negative values for margin properties are allowed, but there may be implementation-specific limits.
-----

http://www.w3.org/TR/CSS2/box.html#margin-properties

なお、paddingの場合はダメと書いてあるのでpaddingも見てくだしあ

450 :Name_Not_Found:2009/12/16(水) 11:08:04 ID:???
>>447
可能だし別に悪い使い方ではない
ただ実装としてはIE系でマイナスマージン+他プロパティと組み合わせてると
酷い崩れ方をすることが多いから気を付けろ

451 :Name_Not_Found:2009/12/25(金) 00:54:21 ID:hrnsQvlU
FireFoxってScrollBarの設定も出来ないんだよな
クソだ

452 :Name_Not_Found:2009/12/25(金) 02:28:32 ID:???
君もWEB製作に関わる人間の端くれならIEは捨て給え

みっともない

453 :Name_Not_Found:2009/12/25(金) 05:37:31 ID:???
> FireFox

454 :Name_Not_Found:2009/12/25(金) 08:43:19 ID:???
> ScrollBarの設定

をCSSでするのがクソだよ

455 :Name_Not_Found:2009/12/25(金) 09:31:24 ID:SCljO+tR
はじめまして。お尋ねします。
下のような構造(JimdoというCMS?が吐き出すメニューです)の場合に
ドロップダウンメニューにする方法がありましたらお教えください。

<ul id="mainNav1">
<li><a href="/">Page 1</a></li>
<li><a href="/page-2/">Page 2</a></li>
<li>
<ul id="mainNav2">
<li><a href="/page-2/subpage-1/">Subpage 1</a></li>
<li><a href="/page-2/subpage-2/">Subpage 2</a></li>
</ul>
</li>
<li><a href="/page-3/">Page 3</a></li>
</ul>

https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/
によると、<ul#1><li><ul#2><li>のような構造の場合はできるのですが、
<ul#1><li></li><ul#2><li>...といったん区切られてしまった場合は
どうしていいものか分からないもので、ご教示いただければありがたいです。

456 :Name_Not_Found:2009/12/25(金) 11:08:38 ID:???
> <ul#1><li></li><ul#2><li>

それだと(X)HTMLとして不正だしょ

> <ul#1><li><ul#2><li>のような構造の場合はできる

ならそのソースでもできる
終了タグが省略されてたって文書構造は同じ

457 :Name_Not_Found:2009/12/25(金) 11:41:13 ID:???
>>455

ttp://onehackoranother.com/projects/jquery/droppy/

458 :Name_Not_Found:2009/12/26(土) 06:27:24 ID:???
.htaccessの
SetEnvIf REFERER "" Lilith
Order Deny,Allow
Deny from all
Allow from env=Lilith
で自分のHP以外の画像直リンクを禁止しています
しかしcssの
background-image:url("****.gif");

とかcssで表記している画像は自分のHPからでも画像が表示できなくなってしまうのですが
これは何かcssの方で設定をいじる必要があるんでしょうか?

.htaccessの質問よりだと思いますが、.htaccess関連のスレが無かったのでこちらで質問してみました

459 :Name_Not_Found:2009/12/26(土) 20:53:24 ID:???
スレチもいいところ

460 :Name_Not_Found:2009/12/27(日) 06:57:27 ID:???
背景黒にしたら既存の文字が黒なので見にくい
レンタルwikiの黒背景にした部分だけ白文字とオレンジにしたいのですがどうしたらいいですか?

ここより質問にふさわしいスレがあったら誘導お願いします

461 :Name_Not_Found:2009/12/28(月) 09:00:31 ID:???
>>458
スレ一覧から検索くらいしてくれ

.htaccess質問コーナー Part8
http://pc11.2ch.net/test/read.cgi/hp/1234182826/

>>460
黒背景にはどうやってしてるの
そこに前景色を変える処理も入れればいいのでは

462 :Name_Not_Found:2010/01/01(金) 19:52:03 ID:???
CSSでサイト構築する上で
htmlの頭から終わりまで全部「container」等で
ヘッダー、本文、フッター
をくるんでしまうとフッター部分のHTMLを読み込むまで、
ブラウザによるレンダリングが遅くなる?のですが、この場合、遅くならないようにするには
どのように対処すればいいのでしょうか?
もしかしてスレチ?

463 :Name_Not_Found:2010/01/03(日) 23:59:58 ID:???
「container」等で
ヘッダー、本文、フッター
をくるまない

464 :Name_Not_Found:2010/01/04(月) 00:48:02 ID:???
ABCの3つのブロックがそれぞれ縦に並んでいる状況で
真ん中のBだけdisplayをblockとnoneで切り替えようとしていて
blockに指定した時、Cのブロックもつられて下に動いてしまいますが
Cのブロックの重なるようにBを表示させたい場合はどうすればいいでしょうか?
position:absolute+javascriptで座標取得は今回できれば使いたくないです。

465 :Name_Not_Found:2010/01/04(月) 00:57:10 ID:???
そうですか。
じゃあ、使わないでやればいいんじゃないですか?

466 :Name_Not_Found:2010/01/04(月) 03:22:47 ID:???
>>465
雑魚がしゃしゃりでんなよw

467 :Name_Not_Found:2010/01/04(月) 18:19:35 ID:eamPBX99
http://hypernews.2chblog.jp/
上記のサイトのようにリンクの設定を,マウスを乗せると背景色が変わるようにしたいのですが・・・
どうすればいいのでしょうか?超初歩的な質問ですみません。
よろしければ↓のCSSを使って説明してください。

a:link { color: #000000; text-decoration:none;} /* 通常 */
a:active { color: #660066; text-decoration:blink;} /*実行中*/
a:visited { color: #660066; text-decoration:none;} /*訪問済*/
a:hover { color: #000000; text-decoration:blink;} /*マウス*/

468 :Name_Not_Found:2010/01/04(月) 18:47:09 ID:???
>>467
background

469 :Name_Not_Found:2010/01/04(月) 19:04:58 ID:???
>>467
firebugあたりでCSSのソース見てみたら?

470 :Name_Not_Found:2010/01/04(月) 19:13:08 ID:???
>>468->>469アドバイスありがとうございます。
firebagなんて便利なアドオンがあったのですね。
CSS開いてみます。

471 :Name_Not_Found:2010/01/10(日) 10:08:08 ID:???
いきなりですみません
今、HPの文字サイズを指定するのは、emとかが流行なんですかね?
emを単位にして文字サイズを指定した方がいいもんですかね?

472 :Name_Not_Found:2010/01/10(日) 11:50:52 ID:???
あれはいいものだ

473 :Name_Not_Found:2010/01/10(日) 12:38:20 ID:???
>>471
今は指定しないのが流行
解像度の違いが半端なく大きくなってるから
色んな環境に耐えられるようにするためには何も指定しないほうがいい

474 :Name_Not_Found:2010/01/10(日) 13:05:08 ID:???
>>473
>今は指定しないのが流行
嘘教えんなよ

475 :Name_Not_Found:2010/01/10(日) 20:47:12 ID:???
そうだな流行じゃないな
昔からの常識だな

476 :Name_Not_Found:2010/01/10(日) 20:57:19 ID:???
それは推奨であって流行ではないと思うけど
サイズ指定していない大手サイトを見てみたいもんだ

477 :Name_Not_Found:2010/01/11(月) 00:10:39 ID:???
君が良く見てる障害者用のページはそうなってるかもね

478 :Name_Not_Found:2010/01/11(月) 06:56:25 ID:???
大手サイトという言い方がもうなんというか

479 :Name_Not_Found:2010/01/11(月) 08:07:19 ID:???
大手というとテキストサイトのフォントいじりを思い出す
あれほどスレ違いなサイトもないな

480 :Name_Not_Found:2010/01/11(月) 12:51:09 ID:???
俺も大手サイトっていうけどなー。
他に言い方あったっけ?

481 :Name_Not_Found:2010/01/11(月) 14:22:20 ID:???
メジャーサイト?

482 :Name_Not_Found:2010/01/11(月) 14:43:44 ID:???
大手と言ってもいろいろあるからなぁ

483 :Name_Not_Found:2010/01/11(月) 15:53:09 ID:???
管理人の手が大きいだけとか

484 :Name_Not_Found:2010/01/11(月) 16:32:02 ID:???
これまでテーブルレイアウト一辺倒でやってきて、CSSレイアウトはさっぱり分かりません。
すでに出来上がったレイアウトを修正する(しかもなんか無理やり)事はできますが、
一から自分でCSSレイアウトでページを作成する勉強をしたいと思っています。
参考にするのにオススメの書籍などありますでしょうか。レイアウトの概念や
記述の仕方などさっぱりなので、そこから丁寧に説明してくれる本を探しているのですが
近所の本屋ではホームページ作成関係の書籍自体があまりなく、アマゾンなどで
注文しようと思っているのですが…。

485 :Name_Not_Found:2010/01/11(月) 19:07:46 ID:GtptSuwe
<br style="clear:both;" />

↑これを使ってフロートを解除したんですが、IE6&8(7は未確認)だと1行分の改行スペースが
発生するのにfirefox3・opera9では改行スペースはできません。

これを統一方法はないでしょうか?
できればIEの改行スペースを小さくする方法があれば大変ありがたいです。

486 :Name_Not_Found:2010/01/11(月) 21:10:22 ID:???
clearfix使えばいいじゃん

487 :Name_Not_Found:2010/01/12(火) 00:40:41 ID:???
>>484
本はぶっちゃけやめたほうがいいよ
初心者向けだったら
ttp://az-store.nrym.org/archive/mynotes/lecture/
ここらへんが優しい
正しく詳しくなら
ttp://hp.vector.co.jp/authors/VA022006/css/
HTML→CSSへの移行なら
ttp://deztec.jp/lecture/rn/index.html
ここらへん

>>485
そもそもブロック要素でないものにclearはナシなんで違反物がどうなろうと知ったこっちゃない
ブロック要素を使ってclearしろ

488 :Name_Not_Found:2010/01/12(火) 01:20:55 ID:Bp9FGRI4
firefoxとchromeでcssの挙動が違ったときってありますか?


489 :Name_Not_Found:2010/01/12(火) 07:53:29 ID:???
>>488
そらもー、いっぱいあるよ

490 :Name_Not_Found:2010/01/12(火) 08:46:43 ID:???
cssを編集しても、結果が反映されないことがあります。
たとえばbackground-colorを変えて、その後、何度もセーブを繰り返してたら
突然反映されたり。どうしてでしょう?

491 :Name_Not_Found:2010/01/12(火) 08:52:48 ID:JxgA5Zy/
私のVISTAパソコンだとフォント(メイリオ?)が、XPより一回り大きいんですが、これはで仕様でしょうか?

皆さんはXP用とVISTA用でCSSのフォントサイズを変えていますか?
皆さんの対応策を教えて下さい。

492 :Name_Not_Found:2010/01/12(火) 08:56:27 ID:???
>>490
キャッシュ

>>491
仕様。特に対策してないしする必要もない

493 :Name_Not_Found:2010/01/12(火) 12:34:50 ID:???
>>491
フォントサイズ指定すんなでおk

494 :484:2010/01/12(火) 21:39:00 ID:???
>>487
ありがとうございます!
お教えいただいたサイトを参考にしながら勉強していきたいと思います!

495 :Name_Not_Found:2010/01/16(土) 03:59:24 ID:???
cssのフォント指定がIEだけに反映されることってありますか。

別にcssファイルを作りリンクで繋げていますが、フォント指定80%だけが火狐とoperaで反映されません。
ez-HTMLのレビューとIEだと文字サイズも反映されています。
スクロールバーの指定はIE以外でも反映されているのでファイル自体が認識されていないわけではないようです。

body,td{ font-size:80%;}
を含むファイルを
<link REL="stylesheet" type="text/css" HREF="filename.css">
で繋げています。

496 :Name_Not_Found:2010/01/16(土) 19:58:00 ID:???
IEは適当なhtmlでもそれなりに反映してくれるからな
ieしか適用されないっていうと大体そんな場合だろ

497 :Name_Not_Found:2010/01/16(土) 23:07:59 ID:???
ありますよ

498 :Name_Not_Found:2010/01/17(日) 01:20:49 ID:???
>>495
IEでもフォントの大きさを無視する設定にすれば無視します
つーか全部指定すんな豆字厨

499 :Name_Not_Found:2010/01/17(日) 08:35:53 ID:???
>>495です。
このフォント設定をはずすことも考えながらcssを書き直してみます。
みなさまどうもありがとうございました

500 :Name_Not_Found:2010/01/18(月) 14:07:32 ID:???
cssを指定するのに
class="hoge"という属性をつけますが
class=""というのは規約とかに違反してますか?

501 :Name_Not_Found:2010/01/18(月) 15:16:29 ID:???
はい

502 :Name_Not_Found:2010/01/18(月) 15:21:39 ID:???
>>501
マジですかorz

503 :Name_Not_Found:2010/01/18(月) 20:25:02 ID:???
classを空にしたい状況って何?

504 :Name_Not_Found:2010/01/18(月) 20:30:32 ID:???
phpとかで
<div class="<?php hoge ?>"
とかしたいなーと

505 :Name_Not_Found:2010/01/18(月) 21:12:46 ID:???
classつけなきゃいいだけじゃないの

506 :Name_Not_Found:2010/01/18(月) 21:22:39 ID:???
まあ
<div <?php hoge ?>>
みたくしちゃえばいいんですけどね

507 :Name_Not_Found:2010/01/18(月) 22:25:59 ID:???

<div class="<?php echo ($a) ? 'hoge' : 'hoge2' ?>">


508 :Name_Not_Found:2010/01/18(月) 22:44:52 ID:???
解釈の順番っておもしろいよね

509 :Name_Not_Found:2010/01/23(土) 02:16:24 ID:???
http://imepita.jp/20100123/077010
リストを横並びにしたとき、ネスケの6で画像周囲に1ピクセルずつ余白があいてしまいます。
ネスケ9・FireFoxでは下にのみ2ピクセル余白が…。どうしてこのようになってしまうのでしょうか。
どのように直すべきか、どなたかご教授願います。

CSSは下記のように書いています。
div#mainMenu {
 width: 800px;
 height: 40px ;
 background-color: #FFCCFF ;
 margin:0 ;
}

div#mainMenu ul li {
width:200px;
display: table-cell;
*display: inline;
*zoom: 1;
}

HTMLは
<div id="mainMenu">
<ul>
<li><img src="image/bnr_creature02-a02.gif" width="200" height="40" border="0" alt="ぶう" /></li>
<li><img src="image/bnr_creature02-a01.gif" width="200" height="40" border="0" alt="わん" /></li>
<li><img src="image/bnr_creature02-a04.gif" width="200" height="40" border="0" alt="ぱた" /></li>
<li><img src="image/bnr_creature02-a03.gif" width="200" height="40" border="0" alt="にゃあ" /></li></ul>
</div>

510 :Name_Not_Found:2010/01/23(土) 10:17:52 ID:???
HTMLの改行を取り敢えずなくしてみ

511 :Name_Not_Found:2010/01/23(土) 10:49:47 ID:???
>>510
すみません、駄目でした…。

512 :Name_Not_Found:2010/01/23(土) 12:55:22 ID:???
ネスケのほうは知らないが、divのマージンを他の場所で殺してあると仮定したら
別にそのソースコピっても下に余白なんてできなかった
何か別の場所で間違えてるんだろう

513 :Name_Not_Found:2010/01/23(土) 13:56:18 ID:???
>>512
下の余白はheight指定をしたら消えました。
結局ネスケ6での空白が埋まらなかったので、
float:left;とwidthを指定することで解消しました。
ありがとうございました。

514 :Name_Not_Found:2010/01/23(土) 18:00:15 ID:???
ネスケ6なんか無視しろ

515 :Name_Not_Found:2010/01/23(土) 18:32:27 ID:???
ネスケ6はCSS2.0だから充分現役
単にまだ間違えてるだけだろ

516 :Name_Not_Found:2010/01/24(日) 18:15:03 ID:???
サポートもされないし、不具合も解消されないブラウザが現役とな

517 :Name_Not_Found:2010/01/24(日) 20:51:16 ID:???
誰もブラウザか現役と言ってない件

518 :Name_Not_Found:2010/01/25(月) 03:52:33 ID:???
>>515が言ってるとおもうけどw

主語がネスケ6で述語が現役だし
もしかしてネスケ知らないわけ・・・?

519 :Name_Not_Found:2010/01/25(月) 09:34:00 ID:???
ちょっとまて
>>517をよーく見て欲しい
>ブラウザ"か"現役
つまりORである

520 :Name_Not_Found:2010/01/25(月) 11:50:50 ID:???
ネスケ6もどうでもいいし現役云々もどうでもいい

521 :Name_Not_Found:2010/01/25(月) 12:25:24 ID:???
>>518
読解力ないな

522 :Name_Not_Found:2010/01/25(月) 13:54:54 ID:???
515日本語よくわから無い
許して

523 :Name_Not_Found:2010/01/25(月) 20:45:40 ID:???
自己紹介乙

524 :Name_Not_Found:2010/01/25(月) 22:35:32 ID:???
IE7・8でdiv要素のmax-widthがきちんと表示されません
ググったらDOCTYPE宣言を入れないと駄目と書いてあったのですが、すでに↓を記述済みでした

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

またmetaタグでのレンダリングモード指定は行っていません
(試しにやってみましたが駄目でした)
max-widthの数値がem指定なのがよくないのかと、pxで試してみましたがこちらも駄目でした
火狐・opera・safari・chromeでは全てきちんと表示されているのですが
どうしたらIEでもmax-widthが意図通りに表示されるか教えてください

525 :Name_Not_Found:2010/01/25(月) 22:52:02 ID:???
むしろどうしたらできくなるのかと

526 :Name_Not_Found:2010/01/25(月) 22:55:44 ID:???
display:table-cellだとしたら仕様

527 :524:2010/01/25(月) 23:05:24 ID:???
>525
#contents {text-align:center;}
#text {
max-width:45em;
width:80%;
line-height:150%;
margin:20px auto;
text-align:left;
}

とスタイルシートを記述して

<body>
<div id="contents">
<div id="text">
本文
</div>
</div>
</body>

という状況なのですが、なぜできていないのか自分でも分かりません

528 :524:2010/01/25(月) 23:21:44 ID:???
すみません、自己解決しました
ローカルファイルは互換モードで表示されるんですねorz

529 :Name_Not_Found:2010/01/26(火) 12:45:19 ID:???
>ローカルファイルは互換モードで表示されるんですね
・・・・・・・・・・・・・え?

530 :Name_Not_Found:2010/01/27(水) 01:16:14 ID:???
>>528
え?どういうこと?

531 :Name_Not_Found:2010/01/27(水) 22:37:50 ID:???
WinXPのFIrefox全般で以下のような不具合に悩まされています。

<select name="hoge" size="1" >
<option label="hoge" value="1">hoge</option>
<option label="hoge2" value="2">hoge2</option>
</select>

上記のようなHTMLでセレクトを選ぶ際に、下のほうの線(プルダウンした際の枠です)が途中で切れてしまいます。
MacのFFやその他のブラウザでは再現できません。

さらになぜかH1に対してmarginを与えると治ります。
絶対配置などは使っていないため、上下関係がおかしいという可能性はないと思います。

何か似たようなバグの報告は聞いたことありますか?

532 :Name_Not_Found:2010/01/27(水) 22:43:42 ID:???
>>531
size="1" は何のため?

533 :531:2010/01/27(水) 22:49:48 ID:???
>>532
念のためでしたw 消しても解決しません...。
ちなみにバンダイのフォームですが、
ttps://soudan.bandai.co.jp/soudan/inq_fs_input.php

ここの最後の「続柄」のプルダウンも同じように下が切れていました。
他のサイトもちょこちょこあるようです。

534 :Name_Not_Found:2010/01/27(水) 23:13:13 ID:???
ctrl + 0 押して見

535 :Name_Not_Found:2010/01/29(金) 15:25:45 ID:???
>>531
ならん。お前の環境がおかしいだけだろうからスレチ

536 :Name_Not_Found:2010/01/29(金) 20:33:58 ID:???
>>533
確かに、Win版のFirefoxだけ下の線が消えるな。
WinのIE、Safari、Opera、MacのFirefox、Safari、Operaだと消えてない。
しかも、プルダウンボックスを上に展開した場合は上の線が消えてないし。
こりゃあ、Firefox側の問題じゃないかなぁ。

537 :Name_Not_Found:2010/01/29(金) 23:02:42 ID:???
最新Win版Fxでならない
フォントの大きさでどうにかなるタイプのじゃないか

538 :Name_Not_Found:2010/01/30(土) 18:24:20 ID:???
ブラウザで文字拡大したら線出たから多分そうだと思う
ちなみにWin/Fx3.5だけど消えてる

539 :Name_Not_Found:2010/01/31(日) 05:16:52 ID:???
だからctrl + 0押せよ

540 :Name_Not_Found:2010/01/31(日) 12:27:46 ID:???
つかスレチ

541 :Name_Not_Found:2010/02/02(火) 04:26:24 ID:???
>>535
政治思想と物乞いの区別が付かないのが、チョウセンヒトモドキ

542 :Name_Not_Found:2010/02/04(木) 00:42:59 ID:rA7HyTsK
質問です
横並びのリストを3つごとに折り返す様にするにはどうすればいいでしょうか?

1.○○○○○ 2.○○○○○ 3.○○○○○
4.○○○○○ 5.○○○○○ 6.○○○○○

543 :Name_Not_Found:2010/02/04(木) 01:18:57 ID:???
3つづつ区切ればいいのです。

544 :Name_Not_Found:2010/02/04(木) 01:23:29 ID:rA7HyTsK
初心者スレッドというのは初心者が回答するスレッドと言うことですか、分かりました。

545 :Name_Not_Found:2010/02/04(木) 02:55:16 ID:???
まず服を脱ぎます

546 :Name_Not_Found:2010/02/04(木) 03:01:25 ID:rA7HyTsK
>>545
パンツもですか?

547 :Name_Not_Found:2010/02/04(木) 08:16:59 ID:synZfc34
>>542
JavaScriptとかじゃだめなの?
CSSでやるなら配列がソース上どうリストになってるかによると思う
それだけじゃエスパー回答しかできない
俺も初心者だけどなw

548 :Name_Not_Found:2010/02/04(木) 13:20:53 ID:???
tableを使えばいいのです。

549 :Name_Not_Found:2010/02/04(木) 14:38:42 ID:???
ol要素の幅を決めてli要素はfloatなりで浮動化でいいんでない
IE6は知らん

550 :Name_Not_Found:2010/02/04(木) 19:34:50 ID:???
CSSって、結構たのしい ^_^

551 :Name_Not_Found:2010/02/04(木) 21:55:48 ID:rA7HyTsK
>>549
出来ましたありがとうございました


552 :Name_Not_Found:2010/02/05(金) 17:33:51 ID:???
div#left {width:50%;
float:left;
border:1px solid black;}

div#right {width:30%;
border:1px solid red;}

がfloatされません。なぜでしょうか?

553 :552:2010/02/05(金) 17:38:13 ID:???
<html>
<head>
<title>a</title>

<style type="text/css">
<!--

div#left {width:50%;
float:left;
border:1px solid black;}

div#right {width:30%;
border:1px solid red;}

-->
</style>
</head>

<body>
<div id="left">
left
</div>

<div id="right">
right
</div>
</body>
</html>

これでなぜならないのでしょうか?

554 :Name_Not_Found:2010/02/05(金) 18:03:16 ID:???
貴方の言う「floatされる」っていうのはどういう状態なの?
どうなれば貴方は満足で、現状どうなってて困ってるのさ?

というのは、俺の言葉や知識の範囲で言えば、
貴方のソースでfloatは「されている」ので。

555 :Name_Not_Found:2010/02/05(金) 18:19:44 ID:???
<div id="right">
right
</div>
を右側に持ってきたいんです。

556 :Name_Not_Found:2010/02/05(金) 18:45:28 ID:???
じゃあ<div id="right">にfloat:rightすればいいじゃん

557 :Name_Not_Found:2010/02/05(金) 20:23:28 ID:???
ボックス幅よりウィンドウ幅が大きいときは真ん中寄せして
ボックス幅よりウィンドウ幅が小さいときはウィンドウの左に揃えるには
どうしたらいい?

ボックス幅<ウィンドウ幅のとき
<-------ウィンドウ------->
|  |<----ボックス---->|  |

ボックス幅>ウィンドウ幅のとき
<--ウィンドウ-->
|---ボックス---|
↑ではなくて
↓こうしたい
<--ウィンドウ-->
||<----ボックス-|


558 :Name_Not_Found:2010/02/05(金) 21:44:48 ID:???
>>557
マージンで調節できひんの?

559 :Name_Not_Found:2010/02/05(金) 23:05:46 ID:???
>>557
margin:auto;

560 :Name_Not_Found:2010/02/05(金) 23:07:22 ID:???
>>557
センター配置する時のmargin auto値 | NICO News

http://nicoglass.jugem.jp/?eid=291461

561 :Name_Not_Found:2010/02/06(土) 21:02:09 ID:???
>552
知らんけど、幅が4px分足りないからじゃね?

562 :Name_Not_Found:2010/02/07(日) 21:18:56 ID:???
<div style="position:absolute; bottom:0;">として最下部に配置しようとすると、
div自身の幅が子孫の幅になってしまうようです、似たような事を解説している
サイトではwidth:100%としていますが、一部のブラウザで100%にするとスクロール
バーに領域を取られて、水平スクロールが出て見苦しい。
かといって、95%とか経験則で調整するのはダサいからイヤです。

position:absoluteで最下部に配置し、巾はposition:absoluteを指定しない時のように
ウィンドウ幅いっぱいにする方法は有りますか?

563 :Name_Not_Found:2010/02/07(日) 21:35:17 ID:???
互換モードにでもなってるんじゃないの

564 :562:2010/02/07(日) 22:03:20 ID:???
実際にやりたいのは↓こんなのです。
div#footerにwidth(100%とか)を設定すればウインドウ巾になります。
先ほど、一部のブラウザと書きましたが、100%ではIE8,Firefox,Operaともに
水平スクロールバーがでます。
div#footer {position:absolute; bottom:0;}を指定しなければもちろん出ません。
(が所望のウインドウ最下部への配置ができません)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1
/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div#footer {position:absolute; bottom:0;}
#footer { border-top: 1px solid;}
#footer p.left { float: left; }
#footer p.right { float: right;}
</style>
</head>
<body>
<div id="footer" >
<p class="left">
left
</p>
<p class="right">
right
</p>
</div>
</body>

</html>


565 :Name_Not_Found:2010/02/07(日) 22:43:53 ID:???
>>564
Opera使いですが全体のmarginとpaddingを0にすればスクロール出ませんでした

566 :562:2010/02/07(日) 23:19:07 ID:???
ありがとうございます。
html, body { margin:0; padding:0;}
div#footer {position:absolute; bottom:0; width:100%;}
で、opera, Firefox, IE8行けました。

567 :Name_Not_Found:2010/02/09(火) 18:20:46 ID:???
ホームページビルダー14を使っている超初心者なのですが
基本的な事としてフォントなどの変更はhtmlタグを使うのではなくスタイルシートで変更すれば良いという事ですか?

568 :Name_Not_Found:2010/02/09(火) 20:38:47 ID:???
そうしてください

569 :Name_Not_Found:2010/02/09(火) 22:52:19 ID:LQIGulbE
どなたかお願いします。
CSSでの2段組、右メニューで左枠(コンテンツ)が右枠より高さが長くなるとフッダーを突き抜けてしまいます。
その分 右枠の高さを調整すれば回避できますが、普通に右枠、左枠のどちらが長くなってもフッダーを突き抜けなくなる様にするにはどうすればいいでしょうか?

css
#container{width:900px;text-align:center;margin:0px auto;}
#header{width:900px;padding:10px 0px 15px 0px;text-align:left;}
#hidari{float:left;width:200px;text-align:left;padding-top:10px;}
#migi{float:right;width:690px;margin-left:10px;text-align:left;padding-top:10px;}
#footer{clear:left;width:900px;padding:15px 0px;text-align:left;}

html
<div id="container">
<div id="header">ヘッダー</div>
<div id="migi">右枠</div>
<div id="hidari">左枠</div>
<div id="footer">フッター</div>
</div>

570 :Name_Not_Found:2010/02/09(火) 23:01:34 ID:???
footerに
clear:both; (leftじゃなくて)

571 :Name_Not_Found:2010/02/10(水) 23:06:40 ID:H9XIqozq
>>570
ありがとうございました。

更に>>569の右枠に>>542を入れると右枠の下を突き抜けてしまいます。
解決策は有るでしょうか?

572 :Name_Not_Found:2010/02/11(木) 01:37:58 ID:???
幅指定

573 :Name_Not_Found:2010/02/11(木) 13:27:40 ID:1V+LpeUy
>>572
やはりそれしか方法はありませんか

テーブルの中にリストを入れることで突き抜けてしまう事は回避できたのですが、それだと今度は指定したリストマークが表示されなくなってしまいます。
立て幅を指定する以外にはありませんか....


574 :Name_Not_Found:2010/02/11(木) 14:09:17 ID:???
リスト項目をdivで囲んでみた?

575 :Name_Not_Found:2010/02/12(金) 01:28:13 ID:???
>>574
divで囲むことは既にやっています。

テーブルの中にリストを入れてリストマークはバックグラウンドで対応してみました。
どうやら「float: left」で横並びにしたものを三つ目で折り返すようにすること、2行目以降が突き出てしまうのは防げないようですね。

ありがとうございました。

576 :Name_Not_Found:2010/02/12(金) 01:44:30 ID:???
>>575
liに幅指定してないのかな?
同じ現象を起こせないんだけどね・・・

577 :Name_Not_Found:2010/02/12(金) 02:22:41 ID:???
>どうやら「float: left」で横並びにしたものを三つ目で折り返すようにすること、2行目以降が突き出てしまうのは防げないようですね。
防げるけど提示されたソース以外に問題がある

578 :Name_Not_Found:2010/02/13(土) 21:05:03 ID:???
バカには防げないでおk

579 :Name_Not_Found:2010/02/23(火) 13:26:20 ID:???
リストマークと文の間を狭めるのにはどうすればいいでしょう

● 文章
● 文章








580 :Name_Not_Found:2010/02/23(火) 13:38:39 ID:???
 

581 :Name_Not_Found:2010/02/23(火) 16:13:34 ID:???
>>579
liのmargin-left

582 :Name_Not_Found:2010/02/23(火) 19:31:06 ID:pugU+tbG
下記のように画像の右に文字列があった場合、
画像の下に文字列が回り込まないようにするには
どのようにstyleを指定すべきでしょうか?
文字列は左揃えにしようと考えています。

画像 文字列1
    文字列2
    文字列3

583 :582:2010/02/23(火) 19:54:52 ID:pugU+tbG
書き忘れましたが、文字列1,2,3は箇条書きではなく、
1つの文章の続きです。

584 :Name_Not_Found:2010/02/23(火) 20:04:24 ID:???
img #hoge{
float:left;
}

p #fuga{
display:block;
}

こんな感じかな

585 :582:2010/02/23(火) 20:33:58 ID:???
>>584
ありがとうございます。色々試してみます。

586 :Name_Not_Found:2010/02/23(火) 23:08:33 ID:???
divで囲った物をページの中央に表示させるにはどうすればいいでしょうか。

イメージ的にはこんな感じです。
<body>
<table border="0" width="100%" height="100%">
<tbody>
<tr>
<td valign="middle" align="center">
<table border="0" width="400" height="400" bgcolor="#75ff75">
<tbody>
<tr>
<td valign="top" align="left">コンテンツ</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>

587 :586:2010/02/23(火) 23:18:17 ID:n0aoVrL4
すいません、イメージがちょっと違ってしまいました
divで囲った物が縦横中央に表示させる様にしたいのですが、よろしくお願いします。

588 :Name_Not_Found:2010/02/23(火) 23:32:12 ID:Ku671qeE
<img>
<div>
みたいな並びで<img><div>の間にスペースが空いて表示される場合
どうすればスペースが消えますか?
<img><br><div>とか<img>と<div>の間を空けずにコーディングする以外で


589 :Name_Not_Found:2010/02/24(水) 00:10:21 ID:???
>>586
div {
position: relative;
top: 100px; /* 数値を調整 */
left: 100px; /* 数値を調整 */
}


>>588
img, div {
margin:0;
padding:0;
border:0;
}

590 :Name_Not_Found:2010/02/24(水) 03:51:17 ID:???
>>588
imgをブロック要素で囲う

591 :Name_Not_Found:2010/02/24(水) 20:30:40 ID:???
>>589
拡大で真ん中じゃなくならない?
>>586
divのサイズが決まっていれば簡単。
positionで50% 50%
marginで それぞれを半分にしてマイナスつける。ググれば詳しく出てくるよ。

592 :Name_Not_Found:2010/02/24(水) 21:08:04 ID:7PzZfjGu
http://tempnate.com/sozai_basic_imenu/basic_imenu_darkblue_log/
このテンプレートのような、メニューバーと背景を合わせるのはどうすればよいのでしょうか?

593 :Name_Not_Found:2010/02/24(水) 21:37:28 ID:???
>>592
マウス乗せたときに背景色が変わるのをやりたいのかな?

li a {
display:block;
}

li a:hover {
background:#ffffff;
}

594 :Name_Not_Found:2010/02/24(水) 21:45:42 ID:7PzZfjGu
>>593
そのテンプレートみたいにメニューバーと、壁紙(背景)を一直線上に表示させたいんです。
分かりにくくすみません。

595 :Name_Not_Found:2010/02/24(水) 21:55:23 ID:???
>>594
背景は真っ白だと思うんだが、
壁紙ってどれのことを言ってるの?

596 :Name_Not_Found:2010/02/25(木) 06:49:57 ID:???
>>595
ボタンの事じゃね?

div#menu ul{
text-align: center;
}

div#main li a{
background: #666666;
}

div#main li a:hover{
background: #FFFFFF;
}

とかどうよ?

597 :Name_Not_Found:2010/02/25(木) 06:52:06 ID:RRVWdTan
>>595
横メニュバーを両端までのばしたいんです
(背景とメニュバーの位置を合わしたい)

598 :Name_Not_Found:2010/02/25(木) 08:49:06 ID:???
>>597
一言言おう。説明がわかりづらい。
が、合ってるな。両端(ページの中央の情報が有る部分、以外の部分)に突き出ている青いバーは背景。
メニューバーの位置に合うように背景を作ってる。2200*1799のサイズで。

599 :Name_Not_Found:2010/02/25(木) 12:01:37 ID:/UGTahjh
属性セレクタで表内のcolspanしているセルの表示を変えようと
td[colspan]{
 vertical-align=top;
}
としたのですが、すべてのセルに適用されてしまいます。
属性セレクタにrowspanやcolspanは使えないのですか?

600 :Name_Not_Found:2010/02/25(木) 13:29:15 ID:???
超初心者な質問でもうしわけありませんが…

一般的な横並びナビゲーションバーを作ろうと思っています。
CSSを使ったナビゲーションバー作りの参考書やサイトを見てみますと、
背景画像の上にメニューの文字を表示させる、
メニューはリストで指定する、というものが一般的なようです。

メニューの文字も含んだ画像を並べた、リストを利用しない
ナビゲーションバーはやめたほうが良いのでしょうか?

601 :Name_Not_Found:2010/02/25(木) 13:34:39 ID:???
width:480px;height:320pxとした背景色付きのdivタグがあり、そのdivタグ外にwidth='600px'position:absoluteとした画像があります
その画像をleft/topでdivの位置までもっていっているのですがもちろん右が120pxほどはみ出て表示されてしまいます
ちなみにJavaScriptとの兼ね合いでdivのや画像のサイズは変えれず、画像はdivの外からもってくるしかありません
これをはみ出さなくする、もしくははみ出した部分を消す方法を教えていただけないでしょうか?


602 :Name_Not_Found:2010/02/25(木) 14:45:19 ID:???
>>600
htmlタグリファレンスを見れば分かると思うけれど、
ナビゲーションを表示するのにリストタグ以外に適切なタグが
現状(html5未満で)無いからリストタグを使っているんだよ。
やめた方がいいっていうか、リストタグを使わない方がおかしい。

603 :Name_Not_Found:2010/02/25(木) 14:50:51 ID:???
>>601
.waku { position: relative; }

<div class="waku">
背景付きdiv(width: 480px; height:320px;)
横に付けたい画像(position: absolute; top: 0; left: 0;)
</div>

604 :Name_Not_Found:2010/02/25(木) 16:52:54 ID:???
>>602
レスありがとうございます。
その「おかしい」というのは、「現状、リストタグを使わなければならない」のと
同義語ですか?

画像を並べてリンクをはってナビゲーションバーにする、というのは
間違っている、してはいけない、ということでしょうか?

605 :Name_Not_Found:2010/02/25(木) 17:23:41 ID:???
>>604
何らかの原因で画像が読み込まれなかった場合や
画像を表示しない設定の環境で
ナビゲーションが見えなくなってもいいのかい?

606 :Name_Not_Found:2010/02/25(木) 18:32:08 ID:???
>>605
ナビゲーション自体が見えなくなっても問題ない
サイトの作りである場合、別にリストを使ってナビゲーションバーを
つけなくてもいいということでしょうか?


607 :Name_Not_Found:2010/02/25(木) 19:09:07 ID:qpRB5MYO
またナビバーの質問で恐縮ですが、
幅800pxに固定したページで、ナビバーをつけたいと思っています。
項目は6つで、一つの項目につき130pxの幅が必要です。
計算上は、780pxになるので幅は足りるはずですが、何故か二段に
なってしまいます。これを解決するにはどうしたらいいでしょうか?

本来は
■■■■■■ こう表示したいのに、

■■■■■□ こうなってしまう感じです。


リンクはリストで作成、float:leftで横に並べています。

また、私の参考書では、一つ一つの項目の幅がすべて同じである
場合にどうしたらいいかしかのっていないのですが、項目の文字数にあわせて
幅を変化させるにはどうしたらよいかも教えていただけると幸いです。

608 :Name_Not_Found:2010/02/25(木) 19:23:21 ID:???
ボタンをテキスト表示するのは人間の為より検索エンジンの為じゃねえか?

609 :Name_Not_Found:2010/02/25(木) 19:56:44 ID:???
>>606
> ナビゲーション自体が見えなくなっても問題ない
> サイトの作りである場合

なら最初からナビゲーションを置かなくていいじゃん。
貴方は我々回答者に何て言ってほしいの?

>>607
ソースと環境を提示。

エスパー回答するならmarginとかpaddingとかborderの影響。
または描画モード。

> 項目の文字数にあわせて
> 幅を変化させるにはどうしたらよいかも教えていただけると幸いです。

しかも1列じゃなきゃ駄目なの?
リスト系の要素でやってるならli要素の幅を1つ1つ指定するとか。

610 :Name_Not_Found:2010/02/25(木) 20:09:55 ID:???
>>609
ありがとうございます。該当部分のソースはこんな感じです。
#navbar {
background-color:#660033;
width: 100%;
height: 30px;
}
#navbar ul {
margin:0;
padding:0;
list-style-type:none;
font-family: arial, halveltica, sans-serif;
font-size: 14px;
line-height:30px;
letter-spacing:1px;
}
#navbar li {
background-image:url(nav_bk1.gif);
float:left;
width:130px;
text-align:center;
margin:0;
padding:0;
border-right: solid 1px #ffffff
}

611 :607:2010/02/25(木) 20:14:54 ID:qpRB5MYO
すみません、610=607です。
環境は、私が動作を確認している環境ということでよろしいでしょうか?
Google Chromeです。
IE7ではきちんと表示されるようです…

612 :607:2010/02/25(木) 20:28:46 ID:qpRB5MYO
あ、610のほうは、場所を指定していなかったのですが
#navbar の中にposition:absolute; top:100px; をいれて
場所をしていして表示させてみたら、IE7でも表示が崩れました。
一列に全部リストの中身ははいっているのですが、なぜか
二列目ができてしまい、中身のないブロックが並んでしまいます。

■■■■■■
□□□□□   こんな感じです(白い四角はリストしたリンクのない、空ブロック)

しかも、二列目の途中までです。どこを直したらいいのかよろしくお願いします…

613 :Name_Not_Found:2010/02/26(金) 12:54:04 ID:???
下の図のようにテーブルにスクロールバーをつけました。
しかし、これだとtbodyに1行しかないときに1行が100pxに広がってしまいます。
1行のheightは文字数によって変わるので固定にしたくありません。
テーブルにスクロールバーをつけるときの見た目が良い方法はありませんか?
┌────────┬────────┐
| テーブルヘッダ1 | テーブルヘッダ2 |
├────────┼───────┬┤
|□□□□□□□  |■■■■■■■||
|                |              ||←テーブルヘッダは固定で
|                |              ||  tbody内のみ縦スクロール
|                |              ||
├────────┴───────┴┤
└─────────────────┘
 ↑テーブル幅がウィンドウに収まらないときに横スクロール
<div style="width:200px;overflow-x:scroll;">
 <table>
  <thead>
   <tr>
    <th>テーブルヘッダ1</th>
    <th>テーブルヘッダ2</th>
   </tr>
  </thead>
  <tbody style="height:100px;overflow-x:hidden;overflow-y:scroll;">
   <tr>
    <td>□□□□□□□</td>
    <td>■■■■■■■</td>
   </tr>
   ・・・・・・
  </tbody>
 </table>
</div>

614 :Name_Not_Found:2010/02/26(金) 13:57:12 ID:???
max-heightってtableじゃダメだっけ?
overflowって大きさを指定して初めて有効に使えるんじゃないのって思った。
というかtable使わない方がいい気がするけどなぁ

615 :Name_Not_Found:2010/02/26(金) 15:28:41 ID:???
ケータイなんでやりたいこと見えないんで応えられないが
テーブルセルにoverflowは色んなブラウザでバグが多いからやめとけ
とは言っとく

616 :Name_Not_Found:2010/02/27(土) 05:33:11 ID:???
p {
text-align:center;
font-size:90%;
margin:30px;
padding:0;
background:#f5f5f5;
border:1px solid #ccc;
}

こういうふうに、複数の指示を書くときに
正しい書き順ってありますか?

今は、先の要素を打ち消したりする間違いなどがない限り
ほとんど考えなしに付け足していく書き方をしているので
クラスごとに指示の順番がバラバラになることが多く
そろそろ綺麗に書けるようにしたいと思っています。

617 :Name_Not_Found:2010/02/27(土) 08:35:04 ID:???
>>616
正しい書き順が無いから自分で決めている人が多い。
css 書き順でぐぐって、他の人の書き順を参考にするのもいいかもね。

618 :Name_Not_Found:2010/02/27(土) 14:49:55 ID:???
自分の場合、全体レイアウトに密接に絡む指定である

float または clear
width
height
margin
padding
border

は、常時この順で書くことにしてます。他に影響が
及びにくい装飾系のスタイルはその下に、って感じ。


こういうフォーマット統一に加えて、積極的に
importとコメント使って可読性を上げてゆかないと、
そのCSSコーディング業務を人に引き継ぐときに
自分か相手かWebデザインのどれかが死ぬ。


619 :Name_Not_Found:2010/02/28(日) 20:36:02 ID:???
cssファイルって改行・タブ・半角スペース・全角スペースのうちどれが正式に無視(=どれだけつづいていても大丈夫)されるんでしょうか?
前半3つは入れても大丈夫だったんですが、ブラウザが解釈してくれてるのか仕様で大丈夫なのか分からないのです。
cssファイル スペースでぐぐっても見当違いノものしかヒットしなくて。


620 :m:2010/02/28(日) 21:06:06 ID:???
全角スペース以外は全部大丈夫です。W3CがCSSの基本文法を
定めた仕様書で、トークン化(字句解析)規則に関する項目:

http://www.w3.org/TR/CSS2/syndata.html#tokenization

を見ると、CSS文法における区切り子として使える文字集合が
「Token S」として定義されています。

The token S in the grammar above stands for white space.
Only the characters "space" (U+0020), "tab" (U+0009),
"line feed" (U+000A), "carriage return" (U+000D), and
"form feed" (U+000C) can occur in white space.
Other space-like characters, such as "em-space" (U+2003)
and "ideographic space" (U+3000), are never part of white space.

この「Token S」=white spaceに相当するのは、半角空白文字・
タブ・改行(LF, CR, FF)であり、他の「空白風の」文字
(日本語の全角空白文字もこれに含まれるでしょう)は
white spaceには妥当しない、と明記されています。
伝統的なプログラミング言語における「white space」の範囲と
同じですね。

なんにせよ、不安があればW3CのCSS Validatorでチェックして
みればよいとおもいます。あれをエラーなく通ってるのに
表示が崩れるようなら、それはブラウザ側に問題があるという
ことになります。

621 :Name_Not_Found:2010/02/28(日) 21:21:58 ID:???
mさんありがとうございます。
安心してスペースが使えます。

622 :Name_Not_Found:2010/03/01(月) 12:25:05 ID:???
>>616
リンクの疑似クラスだけ
記述順がある。

a:link
a:visited
a:hover
a:active


「未読>既読>乗せる>クリック」の順。
リンクは最初は未読が基本、
リンクに対するマウス動作は乗せてからクリック。

623 :Name_Not_Found:2010/03/05(金) 02:20:29 ID:???
>>622
勉強なりましたm(_ _)m

624 :Name_Not_Found:2010/03/06(土) 20:14:03 ID:???
Ulの●をLiの範囲内に入れる方法ってありますか?



625 :Name_Not_Found:2010/03/06(土) 20:36:33 ID:???
>>624
入れ子にすれば

626 :Name_Not_Found:2010/03/06(土) 20:50:20 ID:???
>>624
何言ってるかわかんない

627 :m:2010/03/06(土) 21:03:01 ID:???
>>624
> Ulの●をLiの範囲内に入れる方法ってありますか?

list-style-position: inside; という指定があるにはあります。
お好みの表示になってるかどうかわかりませんが。


628 :Name_Not_Found:2010/03/07(日) 01:30:11 ID:???
margin

629 :Name_Not_Found:2010/03/07(日) 19:58:03 ID:???
font-family:normal;
ってサイトを時々見るけど
どういう意味?

630 :m:2010/03/07(日) 20:58:54 ID:???
正規のジェネリック属性にはnormalは入っていないのですが、
実装によってserifと同値として認識するようですね。
少なくともFireFoxとSafariではそれっぽい感じです。


631 :Name_Not_Found:2010/03/07(日) 23:04:23 ID:???
>>630
ありがとう
Opera もそんな感じで、どうなってるんだろうと思った

serif より強めの感じがする
ua 側の css を当てる時も normal の方が効果があるようで

632 :Name_Not_Found:2010/03/12(金) 14:57:35 ID:kFF6fKt6
氏名を羅列する場合に氏名の途中ではなく「、」で改行できるようにしたい
ので氏名+「、」を囲って white-space:nowrap; としていたのですが、

たまに外国人などめちゃくちゃ長い名前の方がいてボックスをはみ出してし
まう場合があります。

最初にまず「、」が改行されるようにして、しょうがない場合は文字列の途中
でも改行していいといったCSSの書き方で良い方法はないでしょうか?
(IE8, Firefox, Chrome)

宜しくお願い致します。

633 :Name_Not_Found:2010/03/12(金) 15:08:02 ID:???
wbr

634 :Name_Not_Found:2010/03/12(金) 23:07:37 ID:???
×>>633
○&shy;

>>632
何も指定しなけりゃいいんじゃね?

635 :634:2010/03/12(金) 23:12:42 ID:???
勘違いごめんこ

636 :Name_Not_Found:2010/03/12(金) 23:22:43 ID:???
>>632
white-space:nowrap;

display:inline-block;

とかどう?

637 :Name_Not_Found:2010/03/14(日) 01:07:29 ID:???
>>632

まず名前を以下のリストにぶち込む
<ul>
<li><span>なまえほげ1</span></li>
<li><span>なまえほげ2</span></li>
<li><span>なまえほげ3</span></li>

</ul>

で、liにdisplay:inline;
spanにwhite-space:nowrap;


638 :Name_Not_Found:2010/03/16(火) 01:09:32 ID:xx+PnQ2Z
* {
margin: 0px;
padding: 0px;
}
body {
font-size: small;
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
line-height: 1.6em;
background-color: #000000;
text-align:center;
}

#container {
margin:10px auto;
width:800px;
text-align:left;
color: #000000;
background-color: #ffffff;
}

という感じで(ほかの細かいCSSは省略)ウェブショップのCSSを制作中なのですが、
firefoxやgooglechromeだとばっちりなんですが、なぜかIE系だと#containerのmargin:10pxが反映されません。
コンテナボックスの上下にちょっと空白がほしいので、どなたかわかる方がおりましたら回答お願い致します。

639 :Name_Not_Found:2010/03/16(火) 01:22:24 ID:???
すぐにためせるそーす

640 :Name_Not_Found:2010/03/16(火) 05:41:47 ID:???
bodyの直下ならbodyにpaddingすればよい、とにかく親要素に
containerのmarginもbodyのpaddingも意味は同じだ

641 :Name_Not_Found:2010/03/16(火) 07:53:32 ID:???
>>640
無事出来ました!本当にありがとうございました!!!!!!!
marginとpaddingは奥が深いですね・・・。
まだまだよくわかっておりません。

642 :Name_Not_Found:2010/03/18(木) 19:36:07 ID:dqpDX3Eo
http://air-life.info/weblog/wp-content/uploads/2009/11/fixedTable.html
↑のtableのヘッダとフッタの固定で、ヘッダ部を
@からAのように変更すると、表示がおかしくなってしまいます。

@変更前<元のソース>
<thead>
<tr>
<td width="18%">ID</td>
<td width="38%">名称</td>

<td width="28%">値段</td>
<td width="16%">在庫</td>
</tr>
</thead>



A変更後
<thead>
<tr>
<td width="18%" rowspan="2">ID</td>
<td width="38%" rowspan="2">名称</td>
<td width="28%">値段</td>
<td width="16%">在庫</td>
</tr>
<tr>
<td>値段2</td>
<td>在庫2</td>
</tr>
</thead>

原因と解決策をどなたか教えてくださいm(__)m

643 :Name_Not_Found:2010/03/18(木) 19:40:30 ID:???
css関係ないよねそれ

644 :Name_Not_Found:2010/03/19(金) 09:33:03 ID:n/0BCUXD
スレタイ読めない香具師は氏ね

645 :Name_Not_Found:2010/03/21(日) 01:41:28 ID:YHjMR1Zm
スタイルシートで擬似フレームを再現するというのがありますが
あれって動的にhtmlを出力するような場合に有効なんでしょうか?

静的なhtmlを表示させるのには向きません?

646 :Name_Not_Found:2010/03/21(日) 06:08:35 ID:???
なんでそう思ったの?

647 :Name_Not_Found:2010/03/21(日) 06:21:25 ID:YHjMR1Zm
>>646
なんとなく・・・

今勉強中でcssで擬似フレームを再現してるサンプルを見ると
動的にhtmlを作る際にcssと関連が付くようにするのは簡単だけど
静的だと雛形作ってそれをコピーするしかないのかなあ・・・と思って

648 :Name_Not_Found:2010/03/21(日) 13:09:43 ID:???
お前がそう思うならそうなんだろう

649 :m:2010/03/21(日) 13:41:54 ID:???
>>645
framesetでナビゲーションとコンテンツを分けるときには
1つのナビ用htmlと複数のコンテンツhtmlは自然に分離するけど
cssマルチカラムではナビ用のコードとコンテンツ用のコードが
1つのhtmlの中に繰り込まれて、ナビ部分を修正するときに
全部触らなきゃいけない…ということですよね。

対処法としては、一般的には:

1・ナビはserver side includeで読み込む(shtml>ssi による分離)
2・ナビはphpなどで読み込む(php>incによる分離)

のどちらかになるのではないでしょうか。何をstaticと呼ぶか
にもよりますが、1はただパーツを読むだけなので、「静的」の
範疇に入ると思います。

いま新規にページ作るとしたら、framesetにはいろいろと
問題があるので、上記2つのどちらかの手段でframesetを
回避したほうがいいと思います。たとえば検索エンジン経由で
末端コンテンツに到達したときにフレームが外れて
ナビゲーションが表示されないとか、SEO的にかなり不利とか、
印刷やモバイル環境などの多彩なメディアタイプに対する
応用性が低いとかですね。

650 :Name_Not_Found:2010/03/21(日) 13:53:09 ID:???
普通にブラウジングしてても、フレームは邪魔だけどな

別にメニューの内容ころころ変えないなら、>>649の設定が使えないサーバーでもいいと思う
あとプロジェクト管理ソフト使ってみるとか

651 :Name_Not_Found:2010/03/21(日) 15:12:30 ID:???
@ 300kbの画像をCSSに置いといて5ページで使い回す
A各80kbの画像を5ページでそれぞれ1枚ずつ表示させる
見る側にとってどっちのほうが望ましいでしょうか

652 :Name_Not_Found:2010/03/21(日) 15:16:08 ID:???
>CSSに置いといて
どういう表現だよw
googleは1の方式だな。
ほとんどの人が5ページすべて見るなら1でもいいんじゃね。保存する側としては厄介極まりないがw

653 :Name_Not_Found:2010/03/21(日) 15:40:42 ID:???
>>652
ありがとう、背景画像なので保存の問題はないと思う

654 :Name_Not_Found:2010/03/21(日) 21:34:57 ID:???
背景画像だろうと、保存したい奴は保存するだろうが!

655 :Name_Not_Found:2010/03/21(日) 22:30:32 ID:???
当サイトは右クリック禁止です^^

656 :Name_Not_Found:2010/03/21(日) 22:32:50 ID:YHjMR1Zm
完全に保存できなくするのは無理だよな

657 :Name_Not_Found:2010/03/21(日) 23:08:24 ID:???
俺の右クリックは誰にも邪魔はさせない

658 :Name_Not_Found:2010/03/21(日) 23:38:09 ID:IAWrqMxw
>>657
tmpフォルダ内に保存されるだろ

659 :Name_Not_Found:2010/03/22(月) 07:12:03 ID:???
質問です。

<div style="border-top: solid 1px #cccccc; border-bottom: solid 1px #cccccc; padding: 7px;">
 <div style="float: left; text-align: left;">文字</div>
 <div style="float: right; text-align: right;">文字</div>
</div>

こうすると線が文字と被ってしまうのです
float: 使うとその部分が無視されている感じになってしまいます。
どのようにしたらいいでしょうか?

660 :m:2010/03/22(月) 11:19:24 ID:???
>>659
floatされた要素の親ボックスは、高さを計算する時に
そのfloat要素を除外します。言い換えると、中身に
「floatされたボックス要素」しかないボックス要素は
高さがゼロになります。これはCSSデザインの最初の壁かも
しれませんので、いろいろなサイトを見て廻って
じっくり勉強してください。たとえばこれとか。

基礎編5 フロートの性質
http://www.geocities.jp/multi_column/float/05.html

とはいえ、マルチカラムデザインをCSSでやろうとすると
「中身全部がfloatされているボックス」というのは頻出します。
そういうときに発生する問題(たとえばborderやbackgroundを
中身を包含するように表示させたいのに、期待通りの表示に
ならない、とか)をお手軽に解決したい場合は、いわゆる
clearfixという手法を使うとよいかと思います。

clearfixでfloatを解除 | d-spica
http://blog.d-spica.com/entry/070307clearfix.html

661 :Name_Not_Found:2010/03/22(月) 11:30:45 ID:???
無視しないでとお願いする

662 :Name_Not_Found:2010/03/22(月) 11:34:52 ID:???
右クリック禁止を禁止している

663 :Name_Not_Found:2010/03/22(月) 14:10:01 ID:???
IEが滅びれば万事解決するってことでおk?

664 :659:2010/03/22(月) 21:47:32 ID:???
>>660
詳しくありがとうございます
大変参考になりました。

>>663
一応firefox3.6 で>>659みたいになります。

665 :Name_Not_Found:2010/03/23(火) 15:38:12 ID:???
IEってなんでこんな邪魔なブラウザになってしまったんだろうね

666 :Name_Not_Found:2010/03/23(火) 16:15:07 ID:???
IEって邪魔だよな、と思う人々によってまともなブラウザが作られるようになったから

667 :Name_Not_Found:2010/03/23(火) 16:16:24 ID:???
うむぅ
必要悪ということか
しかし、それにしても邪魔だ

668 :Name_Not_Found:2010/03/24(水) 10:12:51 ID:rRBiztpl
いや、必要悪はちょっと意味がずれてる希ガス

669 :Name_Not_Found:2010/03/24(水) 12:17:21 ID:???
負の遺産

670 :Name_Not_Found:2010/03/24(水) 13:01:42 ID:qlkj5SZG
見出しと文章、画像が複数組み合わさったページを作りたいのですが

<h1>見出し</h1>
<p><img src="01.jpg">文章01</p>
<p><img src="02.jpg">文章02</p>

として、外部cssファイルには
p{
font-size: 16px;
margin-bottom:16px;
}

としているのですが、
上記の様に画像も<p>要素で囲んだ場合、
1個めの<p>要素と2個目の<p>要素の間に空白ができません。
画像のサイズは縦200pxほどで、
文章は画像の縦px数に満たない長さの文章です。

画像をい入れずに
<h1>見出し</h1>
<p>文章01</p>
<p>文章02</p>

とした場合にはきちんと16px分の空白ができます。

どのようにしたら画像を入れた状態でもp要素同士の間に空白があくでしょうか?
<p>要素をそれぞれ<div>要素でmargin-bottomを指定して囲んであげなければいけないのでしょうか?

671 :670:2010/03/24(水) 13:07:45 ID:???
補足です。
以下のようなレイアウトにしたいのですが
(■全てで=01.jpg、□全てで=02.jpg)


見出し
■■■文章01
■■■
■■■

□□□文章02
□□□
□□□


以下の様になってしまいます。

見出し
■■■文章01
■■■
■■■
□□□文章02
□□□
□□□

672 :Name_Not_Found:2010/03/24(水) 13:36:15 ID:???
再現できるソースを貼っておくれ

673 :670:2010/03/24(水) 15:18:38 ID:???
htmlの記述


<h1>見出し</h1>
<p><img src="01.jpg" width="150" height="200" class="left" />文章01</p>
<p><img src="02.jpg" width="150" height="200" class="left" />文章02</p>


以下外部CSS

p{
font-size: 16px;
margin-bottom:16px;
clear:both;
}

img.left{
float:left;
}

該当しそうなソースは以上です。
どうやらfloatの入れ子となり、CSS2.0の仕様として
<p>要素のマージンが画像には効かないのですね。
調べるとclearfix等を使えと書いてありましたが、やはりみなさん
そのような特別な事をしてらっしゃるのでしょうか?

674 :Name_Not_Found:2010/03/24(水) 15:29:27 ID:???
答え出てるじゃん。

675 :m:2010/03/24(水) 17:29:25 ID:???
>>673
画像の縦サイズが本文流し込みの縦幅より長くなる可能性が
あるなら,レンダリングの安定のためにclearfixする人が
多いと思います。imgのmargin-bottomをつけてしまうと
今度は画像が包含ボックス(この場合はp)に納まる場合に
回り込んだ文字と画像の間に大きなマージンができてしまいますから。

異論はあるかもしれませんが,CSSのfloat属性は
clearfixと組み合わせることで,はじめて
視覚レイアウト要素として安定的に活用できる気がします。

676 :670:2010/03/25(木) 12:38:18 ID:???
>>674
>>675
なるほど、了解しました。
clearfixで対処することにします。
どうもありがとうございあmした。

677 :Name_Not_Found:2010/03/25(木) 18:15:44 ID:???
ページの横幅はどれくらいにするのがいいのでしょうか?

678 :Name_Not_Found:2010/03/25(木) 18:55:41 ID:???
単位にem使って可変

679 :Name_Not_Found:2010/03/25(木) 19:45:30 ID:???
>>679
横レスするが
どういたしまあmして ^^

680 :Name_Not_Found:2010/03/25(木) 20:51:25 ID:???
何が起きているんだ…!

681 :Name_Not_Found:2010/03/26(金) 00:19:39 ID:???
>>678
ダサ

682 :Name_Not_Found:2010/03/26(金) 01:36:58 ID:???
JScriptでウィンドウサイズやら何もかも完璧に固定してしまうのがCOOL!

683 :Name_Not_Found:2010/03/26(金) 20:32:41 ID:???
なんだかんだいって幅固定がほとんどだよな。
幅可変でもコンテンツ部分がびよーんと伸びるだけだったり。
リキッドレイアウトのきれいなサイトってある?

684 :Name_Not_Found:2010/03/26(金) 20:49:40 ID:???
画像満載のサイトなら難しいかもしれんね

685 :Name_Not_Found:2010/03/26(金) 21:02:18 ID:???
どっかで「まともなリキッドレイアウトはamazonだけだ!(キリッ」
という主張を読んだような気はする

686 :Name_Not_Found:2010/03/26(金) 21:08:22 ID:???
いちおう俺のサイトも(キリツ

687 :Name_Not_Found:2010/03/27(土) 01:06:12 ID:???
確かにamazonぐえらいだな

688 :Name_Not_Found:2010/03/27(土) 01:40:35 ID:???
amazonも>>683が言うところのコンテンツ部分がびよーんタイプか
リキッドレイアウトっていうのは全カラムが可変幅なのかな?
だとしたら例え存在したとしてもすげー見づらいと思うんだけど

689 :Name_Not_Found:2010/03/27(土) 01:44:04 ID:???
ネットショップとかwikiぐらいじゃね可変なんて。
それ以外はあまり向かないだろ

690 :Name_Not_Found:2010/03/27(土) 04:32:14 ID:???
w3c.おるぐ だな

691 :Name_Not_Found:2010/03/27(土) 08:56:55 ID:???
>>690
灯台下暗しとはこのことか…!

692 :Name_Not_Found:2010/03/27(土) 10:09:54 ID:???
全体がびょんびょんするのってこんなんか
http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm
でも実際のサイトではあまり見ないな。

693 :Name_Not_Found:2010/03/27(土) 10:13:54 ID:???
同じページで見つけた。
http://matthewjamestaylor.com/blog/floating-boxes-css-layout.htm
こういうのが真のwリキッドかな。
でも実際のサイトでは(ry

694 :Name_Not_Found:2010/03/27(土) 11:05:33 ID:???
ピクセル指定の部分だけ固定して他を拡大縮小しても崩れないってこと?

695 :Name_Not_Found:2010/03/27(土) 12:21:37 ID:???
アマゾンとかのネットショップなら商品項目を増やせるから横幅を広げてるのはわかるけど。
それ以外のサイトでリキッドにする利点てあるか?

696 :Name_Not_Found:2010/03/27(土) 12:24:50 ID:???
下手に横幅大きくとると情報が分散するからな

697 :Name_Not_Found:2010/03/28(日) 17:39:06 ID:???
http://www.webdesignerdepot.com/
このサイトのように上に大きい画像を背景として出す場合
一度にその大きさを指定しているのでしょうか?

698 :Name_Not_Found:2010/03/28(日) 17:44:00 ID:???
>>697
ソースみてみればいいんじゃね?
webの良さというか駄目さってcssとjsが丸見えなんだよね
ヘッダーのところにどこから取ってくるかかいてあるだろうし

699 :Name_Not_Found:2010/03/29(月) 16:12:03 ID:???
横幅が最大80pxの画像があります。横幅は70や55、80pxとバラバラなので
画像の方は拡大せずに、80px未満のものには余白をつけて80にして綺麗に表示したいのですが、どうしたらよいでしょうか?

700 :m:2010/03/29(月) 16:14:49 ID:???
jsを絡めないでやるとすると,
画像に全部でdivくくって
そっちをサイズ固定にするとか…?


701 :699:2010/03/29(月) 17:08:02 ID:???
>>700
ありがとうございます。
.thumb {
width:80px;
}


<div class="thumb"><img src="http://..." alt="..." /></div>

これでよいのでしょうか?

702 :Name_Not_Found:2010/03/29(月) 17:19:52 ID:???
試せばすぐわかるのになぜ試さない。
やり方違ってても結果が望みどおりならそれでいいじゃないか。バグとかなら別だが今回は違うし。

703 :699:2010/03/29(月) 17:47:50 ID:???
すいません。。
width:80pxでやると、画像が80pxに拡大されてしまいます。
ボックスを80pxにしたいのですが、どうすればよいでしょうか?

704 :Name_Not_Found:2010/03/29(月) 19:58:47 ID:???
。が二個あるから教えたくないな(・∀・ )ニヤニヤ

705 :699:2010/03/29(月) 20:12:34 ID:???
>>704
自己解決しました!
(・∀・ )ニヤニヤ

706 :Name_Not_Found:2010/03/29(月) 20:16:10 ID:???
。ごときギャーギャー騒ぐのはゆとり

707 :Name_Not_Found:2010/03/29(月) 20:38:53 ID:???
>>705
おれに教えてくれ(・∀・;)ニヤニヤ

708 :Name_Not_Found:2010/03/29(月) 21:00:56 ID:???
インラインフレームについて質問よいでしょうか

現在外に大枠を作って、その中で左と右にfloatで領域を作っている状況なのですが
左ではサイト内でのリンクを置いて
右ではインラインフレームで各種左のメニューから選んだページを表示する、ということがやりたいです

しかし、右の区域の指定はこんなのなのですが

<div class="right"> (.rightではfloatとwidthを指定しているだけです
  <iframe src="top.html" height="100%" width="100%" frameborder="1"></iframe>
</div>

height100%にしていれば、top.html内の文書が全て親のページにインラインで表示されるかと思っていたのですが
(外枠がtop.htmlの文章量に応じて上下に伸縮するイメージを持ってました)
勝手にスクロールバーが出てきてしまって、一度にtop.html内の情報を表示しきれません

説明がへたくそで分かりづらいとは思いますが
解決法を知っている方いらっしゃいましたら教えていただきたいです

709 :Name_Not_Found:2010/03/29(月) 21:07:54 ID:???
cssでどうにかなる問題じゃないと思うんだが。
height:100%は表示中の親窓の縦幅に合わせるだけだよ。
同じドメインならjsで自動であわせてくれるライブラリみたいなのがあった気がする。

710 :Name_Not_Found:2010/03/29(月) 21:16:53 ID:???
親窓には特に縦幅は指定していないのです
だから、勝手に伸縮するかと思っておりました

しかし今インラインフレームについて調べていましたが、なにか分かってきた気がします
iframeを使われているページを見るとどのページも同一の縦幅で
呼ばれる対象のページが表示されており
そもそもiframe側に縦幅の表示の制約があるような気がしました
iframeのことをもうちょい調べてみようと思います

よく調べもせず安直に質問しようとして申し訳ございません
ご迷惑おかけしました

711 :sage:2010/03/30(火) 00:49:41 ID:???
お尋ねします

3カラムをつくり、左のボックスの中に複数個ボックスを作りたいのですが
ビルダーだけを使って、CSSツールの設定手順を教えていただきたいです。

もしくは、ビルダーでその解説が載っているサイトがあれば教えてくらはい

712 :Name_Not_Found:2010/03/30(火) 01:25:50 ID:???
>>711
なんでブラしてんの?

713 :sage:2010/03/30(火) 01:53:36 ID:+4OT3g6R
ブラ?

714 :Name_Not_Found:2010/03/30(火) 05:54:25 ID:???
ノーブラ以外質問禁止と聞いて

715 :Name_Not_Found:2010/03/30(火) 06:49:20 ID:???
ぶら。じゃないよ!

716 :Name_Not_Found:2010/03/30(火) 17:31:03 ID:Ttt0iJus
cssで背景画像をこんな感じ↓でいくつも指定してるんですが、
.aaa
{
background-image:url(・・・・/aaa.gif);
}

.bbb
{
background-image:url(・・・・/aaa..gif);
}

たまに、background-image:url(・・・.gif);部分だけが、
ごっそり消えてしまいます。
なので、ページでもその背景画像が表示されなくなります。
自分でもこの部分を消した覚えはないんですが、原因は何か考えられますか?

717 :Name_Not_Found:2010/03/30(火) 17:53:52 ID:???
Cドライブ晒せ

718 :Name_Not_Found:2010/03/30(火) 18:45:53 ID:???
http://toaru.s4.xrea.com/
ブラウザとかOSで全然違う見え方になるが、これどうやって制御してんの?

719 :Name_Not_Found:2010/03/30(火) 20:02:13 ID:???
>>718
サーバー側で判断する方法もあるし、jsなんかでやれるだろうし
アクセスした段階で環境情報は駄々漏れだからねえ

720 :m:2010/03/31(水) 01:40:57 ID:???
>>718
> http://toaru.s4.xrea.com/
> ブラウザとかOSで全然違う見え方になるが、これどうやって制御してんの?

iPhoneだけはCSSのmedia type指定ですが、ほかは
http://toaru.s4.xrea.com/js/get_agt.js
でブラウザを判定して、それぞれ用のcssを
document.writeしているようです。
そのものずばりの部分はこんな感じでした。

<link href="./css/'+getOSType()+'_'+getBrowserName()+getBrowserVersion()+'.css" rel="stylesheet" type="text/css">



721 :Name_Not_Found:2010/03/31(水) 09:55:57 ID:???
>>716
たぶんIEだと思うが、要素に横幅指定してあげれ。(width:100%;とか)
ネガティブマージンやfloatしてる奴ならzoom:1;をつけてあげる。

詳しい解説は「CSS IE 背景が消える」でググればいろいろ出てくるからそっち見を参照。

722 :Name_Not_Found:2010/04/01(木) 23:57:51 ID:???
HTMLで
<h2>テスト</h2>
と書いて外部cssに
h2 {background-image:url("http://xxx-xxxx.com/image/xxx.jpg");}
と書いたのですが何度試してもh2要素の背景に画像を出すことができません
何かいい方法があれば教えていただけませんか?



723 :Name_Not_Found:2010/04/02(金) 00:05:17 ID:???
>>719
>>720
じゃあいちいちそのOS+ブラウザ用のCSSファイルを用意してるってことか。
大変すぎ。

724 :Name_Not_Found:2010/04/02(金) 04:08:48 ID:???
ブラウザ依存の記述をしなけりゃいいと思う
どうしてもってときはCSSハックでも使えば

725 :Name_Not_Found:2010/04/02(金) 14:23:25 ID:???
UAで判別とか前時代的
特別な理由がない限りは使いたくないね

726 :Name_Not_Found:2010/04/02(金) 16:46:58 ID:vBi252ng
ボックスを3つよこに並べたいです。
<div id="box-left">左のボックス</div>
<div id="box-center">中央のボックス</div>
<div id="box-right">右のボックス</div>

#box-left {
float:left;
}
#box-center {
float:right;
}
こうやると2つ並べることはできますが、3つの場合はどうしたらいいでしょうか?
たとえばleftとcenterを1つのボックスで囲って、それとrightを並べるとも考えましたが、綺麗な書き方はどのようなものでしょうか?


727 :Name_Not_Found:2010/04/02(金) 16:56:39 ID:???
全部leftにする

728 :Name_Not_Found:2010/04/02(金) 16:57:34 ID:???
あ全部 left にする場合はwidth 指定したほうがいい

729 :Name_Not_Found:2010/04/03(土) 11:09:41 ID:???
>>722
それ、そもそも外部CSSが読めてるのか?

730 :Name_Not_Found:2010/04/04(日) 14:54:58 ID:EmreoEvt
jqueryでul要素を使っているからか、jqueryのcss適用範囲でlistの入れ子が機能しません。
どうするべきでしょうか?

731 :Name_Not_Found:2010/04/04(日) 15:28:49 ID:???
日本語でおk

732 :Name_Not_Found:2010/04/04(日) 16:32:17 ID:???
リストの巣はul要素のcssであって、jqueryな作成楽しみの適用範囲でjqueryで機能しません。使用します。
私は何をするべきですか?

733 :Name_Not_Found:2010/04/04(日) 16:36:59 ID:???
どこの機械翻訳ですか?

734 :Name_Not_Found:2010/04/04(日) 19:09:36 ID:???
>私は何をするべきですか?
まず、服を脱ぎます

735 :Name_Not_Found:2010/04/04(日) 19:12:27 ID:???
次に窓を開けます。

736 :Name_Not_Found:2010/04/04(日) 20:28:24 ID:???
次に窓を窓から投げ捨てます

737 :Name_Not_Found:2010/04/07(水) 13:41:52 ID:tJuGx9cl
font-sizeはemや%指定が望ましいそうですが、
borderやpaddingもemで指定したほうがいいですか?
firefoxで確認して作っていて、ieで見たらborderの太さが違っていて、
px単位で指定するとfirefoxと同じに見えるのですが

738 :Name_Not_Found:2010/04/07(水) 15:04:05 ID:???
場合に依ると思う

739 :Name_Not_Found:2010/04/07(水) 20:35:40 ID:???
>>737
フォントサイズは指定しない方が好ましい
borderやpaddingは自分がしたいことによりけり
どんな作り方をしたって同じOS同じブラウザでだって環境によって異なるので
異なることを全体に組むことが好ましい

740 :Name_Not_Found:2010/04/07(水) 22:28:04 ID:0JQvsezv
なるほど、ありがとうございました

741 :Name_Not_Found:2010/04/07(水) 23:08:02 ID:???
>フォントサイズは指定しない方が好ましい

それは無い

742 :Name_Not_Found:2010/04/08(木) 02:02:36 ID:???
>フォントサイズは指定しない方が好ましい
それどこ情報よー

743 :Name_Not_Found:2010/04/08(木) 03:40:19 ID:???
>>741-742
さすがに恥ずかしいから

744 :Name_Not_Found:2010/04/08(木) 12:31:00 ID:???
>>743
フォントサイズ指定してない代表的なサイト挙げてから言えよw
2ちゃん以外でな。

745 :Name_Not_Found:2010/04/08(木) 12:49:04 ID:???
カレイケスレ池

746 :Name_Not_Found:2010/04/08(木) 14:10:15 ID:???
>>745
そのスレはもうないぞ
というか古い頭の奴らと話しても無駄

747 :Name_Not_Found:2010/04/08(木) 14:59:26 ID:???
>>745
おまえスベってるやん…

748 :Name_Not_Found:2010/04/08(木) 16:07:06 ID:???
フォントサイズ指定って普通するんじゃないの?
気になるんでしない派の人論理的に教えてちょ。

749 :Name_Not_Found:2010/04/08(木) 16:13:35 ID:???
font-sizeとfont-family区別できない子供が書いてるんじゃね?

750 :Name_Not_Found:2010/04/08(木) 17:03:25 ID:???
「普通する」というのをまず論理的に説明してもらおうか

751 :Name_Not_Found:2010/04/08(木) 17:17:42 ID:???
ユーザー側で文字サイズを変更し難いように font-size:16px; を常に指定するとかじゃない?

752 :Name_Not_Found:2010/04/08(木) 17:18:04 ID:???
俺もサイズ指定「普通する」と思ってるぞw
本文やh1~h6のサイズはブラウザまかせでおkとしても(俺的にはこれも嫌だが)
本文より小さい/大きい文字が必要なことって多くないか?

「しない方が好ましい」と思うのがなぜかは是非知りたい。

753 :Name_Not_Found:2010/04/08(木) 17:23:40 ID:???
しない方が好ましい と 普通する って正反対なのか?

それはともかく、デザインに凝ってない限り必須ってわけでもないと思うが
マークアップに従って、ブラウザがスタイルを設定していくわけだし

754 :Name_Not_Found:2010/04/08(木) 17:40:43 ID:???
h1や定義リストをブラウザお任せのサイトってどんなんだよw

初心者に対して「フォントサイズは指定しない方が好ましい」って教えるのはどうかと思うぞ。
せめてIE6なんぞでも変更しやすいようにpxなんぞでなく%でうんたらって書け。

755 :Name_Not_Found:2010/04/08(木) 17:49:15 ID:???
フォントサイズなんて上質の描画が出来るブラウザじゃないとあまり意味が無いわけだし
環境によって差異が生じたり
同じマークアップでもサイトによって意味の違いが生じてしまうのは問題、ということだろう

「出来ればしない方がいい」というレベルまではいかなくても「しない方が望ましい」になるわけで
フォントサイズって重要度の大小に使ってしまうことが多いと思うし
デザイン以外で使うことが駄目って意味じゃなかろうか

756 :Name_Not_Found:2010/04/08(木) 18:09:46 ID:???
>同じマークアップでもサイトによって意味の違いが生じてしまう
CSSのfont-size指定による文字の大小って検索エンジンの解釈に影響があったっけ。
俺の勉強不足ならすまん


757 :Name_Not_Found:2010/04/08(木) 18:37:25 ID:???
むしろhnは本文より大きめだったら好きに設定していいと思うが
本文で重要な部分はユーザのデフォルトにしてやったほうがいいだろう

758 :Name_Not_Found:2010/04/09(金) 00:52:24 ID:???
>フォントサイズは指定しない方が好ましい

つまりスキルが低くてクロスブラウザ対応できませんってことか?

759 :Name_Not_Found:2010/04/09(金) 01:37:03 ID:???
お前は何を言っているんだ

760 :Name_Not_Found:2010/04/09(金) 02:17:08 ID:???
>>755
>フォントサイズなんて上質の描画が出来るブラウザじゃないとあまり意味が無いわけだし

どんな酷いブラウザを使っているのかぜひ知りたいw

761 :Name_Not_Found:2010/04/09(金) 02:29:14 ID:???
Yahoo!やGoogle、MSN、Appleにadobeは、みんなフォントサイズ指定してる
糞サイトということですかそうですか。

762 :Name_Not_Found:2010/04/09(金) 03:53:32 ID:???
視覚障害者のお方ですか?
指定しないなら、実質16pxで読めと?

763 :Name_Not_Found:2010/04/09(金) 05:17:13 ID:???
フォントサイズは指定しない方が好ましいとか言ってる方は
バカでかいh1とか本文16px相当がいいらしいですな。何が好ましいんだか・・・w

764 :Name_Not_Found:2010/04/09(金) 09:39:05 ID:???
探せじゃなくて具体的にフォントサイズ指定していないサイトを見せてみなさい

個人でやっているようなオナニーサイトではなく、制作会社が企業やコンシューマーに向けて発信しているサイトで

海外でもいいぞ

765 :Name_Not_Found:2010/04/09(金) 09:40:20 ID:???
指定と固定を勘違いしてるんだろ

766 :Name_Not_Found:2010/04/09(金) 11:19:13 ID:???
>>762-763
ブラウザで自分の好みの大きさに変える方法を知らないのか?

767 :Name_Not_Found:2010/04/09(金) 14:32:07 ID:???
>>579
に対して
>>581だと
  ● 文章
  ● 文章

● 文章
● 文章
となり
●⇔文章
の間隔は変わらないんだけど
●と文章の間を狭めるにはどうすればよかたい?

768 :Name_Not_Found:2010/04/09(金) 14:39:43 ID:???
>>767
無理
背景画像でやりなされ
あと関係ないが>>581はmarginで話してるがpaddingで取ってるブラウザもあったはず

769 :Name_Not_Found:2010/04/09(金) 14:49:39 ID:cILtOFSW
float:leftってのは自分を左に寄せるって意味じゃないんだよん。
それが判らないと混乱するかもね。



770 :Name_Not_Found:2010/04/09(金) 15:23:35 ID:???
float:left・・・?

771 :Name_Not_Found:2010/04/09(金) 17:13:00 ID:???
>>766
「フォントサイズは指定しない方が好ましい」派ですか?
話にならんな・・・

772 :Name_Not_Found:2010/04/09(金) 17:20:22 ID:???
文字の重要度に使うべきじゃないって話がなんで、一切使ってない企業サイトを探せという話になるのかと
つか企業サイトで文法ミスしてないサイト自体まれだろう

773 :Name_Not_Found:2010/04/09(金) 17:55:22 ID:???
質問がきてまで続けてる奴らは出てけ

774 :Name_Not_Found:2010/04/09(金) 18:04:03 ID:???
>>768
のいうとおり背景が最も安全かと

>あと関係ないが>>581はmarginで話してるがpaddingで取ってるブラウザもあったはず
UAによってバラバラみたいなので 見た目重視なら背景画像ですな
印刷とか、画像無効時までも考慮すると最適な方法ではないのかもしれないが…

775 :Name_Not_Found:2010/04/09(金) 18:59:21 ID:???
>>774
後半は・・・全然違う話をしてるんだが・・・

776 :Name_Not_Found:2010/04/10(土) 01:31:12 ID:???
リストとかが横並びの時、それぞれの高さを統一したい
TABLEだとTDで要素が伸びるので、合わせられたけど

うまく合わせる方法ってありますか?(JSなど使わず)

777 :Name_Not_Found:2010/04/10(土) 02:58:19 ID:???
+-------------------+
|     上        |
+---+----------+----+
|   |        |   |
| 左 |   中    | 右 |   
|   |        |    |
|+---+---------+----+ 
|     下        |
+-------------------+
上記のような構成のサイトを作ろうと思います。現在は、次のような構成になっております。
HTML部
<div id="inbox">
  <div id="header">上</div>
  <div id="wrap"><div id="main">中</div><div id="left">左</div></div><!-- /wrap -->
  <div="right">右</div>
  <div="footer">下</div>
</div><!-- /inbox -->

CSS部
#inbox { width: 1000px}
#header { float:left width:1000; height:50px;}
#wrap { float:left; width:800px;}
#main { float:right;width:600px;}
#left { float:left;width:200px;}
#right { float:right;width:200px;}
#footer { float:right;width:1000px; height:50px;}
ただ、インクルードファイルの構成上、下記のように左→中の順に記述したいのですが
  <div id="left">左</div><div id="main">中</div>
位置を変えた途端にずれてしまいます。
どうしたら、うまくいきますか?参考になるサイトなどがありましたら、教えてください。

778 :Name_Not_Found:2010/04/10(土) 13:40:30 ID:???
>>777
どう崩れる?
ブラウザは?
左、中、右の順で記述するんなら#wrap必要なくね
全部float:left;で良いじゃん
あと関係ないけどheaderとfooterはfloatする必要ないでしょ

779 :Name_Not_Found:2010/04/10(土) 15:29:35 ID:???
>>777
オレも初心者なんだけど、フロートをクリアしてやんないとダメなんじゃなかったっけか?

780 :Name_Not_Found:2010/04/10(土) 16:20:41 ID:/O5ygqQL
>{ width: 1000px}

くっそうぜー

781 :Name_Not_Found:2010/04/10(土) 17:07:21 ID:???
ぢspぁy:いんぃね?

782 :Name_Not_Found:2010/04/10(土) 17:10:59 ID:???
なんでmarker-offset死んでしまったん?

783 :Name_Not_Found:2010/04/10(土) 18:29:45 ID:???
>>776
ttp://coliss.com/articles/build-websites/operation/css/558.html

784 :Name_Not_Found:2010/04/11(日) 18:14:37 ID:DYsGLz5z
>>777

>>769



785 :Name_Not_Found:2010/04/12(月) 10:34:33 ID:???
>>777
<div id="inbox">
<div id="header">上</div>
<div id="wrap">
<div id="left">左</div>
<div id="main">中</div>
<div id="right">右</div>
</div><!-- /wrap -->
<div id="footer">下</div>
</div><!-- /inbox -->

#inbox { width:1000px; background:#ffc; }
#header { height:50px; background:#fcf; }
#wrap { }
#left { float:left; width:200px; background:#cfc;}
#main { float:left; width:600px; background:#fcc; }
#right { float:left; width:200px; background:#ccf;}
#footer { clear:both; height:50px; background:#cff;}

786 :Name_Not_Found:2010/04/12(月) 10:53:08 ID:???
inboxてメール受信箱かよw

787 :Name_Not_Found:2010/04/12(月) 12:02:05 ID:OGuHePD1
ページのリンクで 1 2 3 4 5 などが四角く囲ってあるのをよく見ますが、あれのサンプルを載せてるとこご存じですか?

788 :Name_Not_Found:2010/04/12(月) 12:19:21 ID:???
サンプルなんざ必要ないほど基礎の基礎だぞ
ていうかそういうところ見つけたらソース見ればいいんでないかい
そのくらいパクっても誰もパクりとは言わないくらい基礎だから

789 :m:2010/04/12(月) 13:23:11 ID:???
>>787
いわゆるページネーション型のリンクのことですよね?
ふつうはhtmlはこう書いて,
<ul>
<li><a href="#">前へ</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">次へ</a></li>
</ul>
CSSはこんな感じかと…
li {
float: left;
width:auto;
margin-left: 10px;
list-style-type: none;}

li a {
display: block;
padding: 5px;
border: 2px solid #AA9999;}

li a:hover {
border: 2px solid #FF9999;
background: #FFCCCC;}

アクティブなページの表示や無効なリンク(1ページ目にいるときの
「前へ」など)には,動的にclassをつけたりa要素を抜いたりして
CSSで装飾することが多いと思います。

790 :Name_Not_Found:2010/04/12(月) 15:36:02 ID:???
>>789
こういうのってfloatを解除する必要ってないのでしょうか?

791 :Name_Not_Found:2010/04/12(月) 15:45:45 ID:???
 −  −  −  −  −  − 
|1||2||3||4||5||6|
 −  −  −  −  −  − 

792 :m:2010/04/12(月) 17:02:33 ID:???
>>790
> こういうのってfloatを解除する必要ってないのでしょうか?

はい,最後には何らかの方法でfloat解除しないとダメですね。
「後続要素でclear:both,包摂ulにもclearfix当てる」
とすればレンダリング的に安定かも。clearfixにより,
ulが高さ0ではなく,li内包分の高さを持つボックスになるので,
後続要素のmargin-topが正しく(というか,直感的な形で)
反映されます。

本題とは関係ないけど,こういうトライには以下が便利です。
ファイルを作ってコード書いてブラウザで開いて…という手間を
多少軽減できます。
http://cardumen.com/tools/css-tester.php
当然クロスブラウザじゃないですけど,ちょっとしたテストには
十分かと。って前似たようなこと書いたっけ?

793 :Name_Not_Found:2010/04/12(月) 18:10:08 ID:???
>>792
わかりやすい説明ありがとうございました
そのサイトは便利ですね

794 :Name_Not_Found:2010/04/13(火) 16:10:54 ID:???
行間を少し空けたいのですが
CSSって何がなんやらワカリマセン。。。
サイトも回ってみたんですが、、、


795 :Name_Not_Found:2010/04/13(火) 16:40:11 ID:leeQ5mW9

padding,margine,line-height,br,lf,crなんでもいいぞ


796 :Name_Not_Found:2010/04/13(火) 16:43:22 ID:???
>>794
基礎から勉強
ttp://az-store.nrym.org/archive/mynotes/lecture/
ttp://www.kanzaki.com/docs/htminfo
ttp://members.jcom.home.ne.jp/pctips/

797 :Name_Not_Found:2010/04/13(火) 17:48:44 ID:j+mDfmdN
昨日のページネーションのものです。
789さんサンクスです
789さんのを参考にしてリストではなくdivで囲ってるのですが、
hoverのときについて質問です。

padding:0 5px;
のdivの中にaタグを書いて、hoverのときは
バックラウンドカラーとボーダーカラーを変えるようにしたのですが、hoverしたときに変わるのが
数字の最小限の背景だけで、divの四角全体が変わるわけではありません。そして、動いてしまいます。
hoverで動かないで、背景色、ボーダーカラーをかえるにはどうしたらよいでしょうか?

798 :Name_Not_Found:2010/04/13(火) 18:33:13 ID:???
http://kuler.adobe.com/

このサイトで表示される配色は
どうやってカラーコードを取得すればいいんですか

いちいち画像キャプチャして解析ソフトにかけてるんですけど、
手軽にコピペできませんかね

799 :Name_Not_Found:2010/04/13(火) 19:03:42 ID:???
line-height
やってみましたら
何か出来ました!!
微妙な間隔が素晴らしい!
これからずっと使おう
ありがとうございました!!!

800 :Name_Not_Found:2010/04/13(火) 19:37:31 ID:???
>>798
ttp://soft.utopiat.net/soft/cspoit/index.html
こんなの?

801 :Name_Not_Found:2010/04/13(火) 19:57:27 ID:???
>>797
>>>796

802 :Name_Not_Found:2010/04/13(火) 21:53:09 ID:???
>>798
Firefoxを使ってるならColorZillaとかRainbowとか

803 :Name_Not_Found:2010/04/13(火) 22:02:41 ID:???
<style type="text/css">
〜〜
</style>
のようなhead内のstyle要素では指定せずに、
a:hoverをhtml内に書く事って可能ですか?
<a style="〜〜;" href="">xxx</a>
のようなインラインスタイル属性で。
書き方がわかりませんorz

804 :Name_Not_Found:2010/04/13(火) 23:22:01 ID:???
>>803
無理

805 :m:2010/04/14(水) 00:59:23 ID:???
>>797
> hoverで動かないで、背景色、ボーダーカラーをかえるにはどうしたらよいでしょうか?

実際のソースを見ないと何とも言えないところでもあるのですが、
CSSのhover要素のみでページネーションの番号矩形全体の
スタイル(背景やボーダーなど)を変化させたい場合は、

1・矩形全体をa要素で表現し、hoverでスタイルを上書きする
2・矩形divそのものに対してhoverでスタイルを上書きする

のどちらかが必要です。

1の場合は、単にa:hoverにスタイルを当てるだけでは、ご体験された
ようにインライン要素としての装飾しかされないので、まずa要素
自体にdisplay:blockを指定して、ブロック要素にしないといけません
>>789ではli aのところでそれをやっています)。

2の場合は、そういうことをしなくてもよくなりますが、
IE6ではa要素以外に対するhover疑似セレクタが無視されて
しまうので、csshover.htcなどでここを修正する必要があります。
またdiv内でのa要素の表示位置をpaddingで調整した場合などに
「矩形領域の内部にマウスをフォーカスして、それによって
背景も変化したが、a要素自体にはマウスが乗っていないため
クリックしても何も起こらなかった」というケースが発生し、
これはユーザビリティ的には好ましくありません。

上記を踏まえて、どちらがよいか判断してみてください。


806 :Name_Not_Found:2010/04/14(水) 01:29:57 ID:???
>>800
ソフト使わないでページ内に表示することとかってできないんですかね?

>>802
ColorZillaは普段使いまくってるんですが、
フラッシュとかの部分は解析できないですよね。

807 :Name_Not_Found:2010/04/14(水) 03:04:32 ID:???
>>806
>ColorZillaは普段使いまくってるんですが、
>フラッシュとかの部分は解析できないですよね。

適当なこと言ってごめん
さっき試してみたけどPixelZoomerなら色の抽出はできたよ(初期設定だとJavaになってるので入れてなければCanvasにすればおk)

808 :Name_Not_Found:2010/04/14(水) 14:52:42 ID:???
次のような上下2段に分けたサイトを作りたいと思っています。
・下の段の高さは200px固定(高さの決まったフラッシュを置くため固定値)
・上の段はなるべく大きく、中にheightを100%指定のものを置いても問題の無いように
・スクロールバーが出ないように

上の段をなるべく大きくスクロールが出ないようにできなかったので教えてください。

809 :Name_Not_Found:2010/04/14(水) 17:48:05 ID:???
body {
margin: 0;
padding: 0;
font:14px;
}

h2 {
margin: 0;
padding: 0.5em;
color: #ffffff;
background-color: #333333;
}

.sub {
padding: 0;
margin: 0;
border-left: 2px solid #333333;
list-style-type: none;
background-color: #ffffff;
}

.sub li {
margin: 0;
padding: 0 15px 0 15px;
border-right: 1px solid #333333;
float: left;
font-size: 85%;
}

ul要素の左に2pxのborderが表示されるはずなんですが全く反映されません
どこの書き方が悪いのでしょうか?

810 :Name_Not_Found:2010/04/14(水) 18:17:24 ID:???
質問の書き方

811 :Name_Not_Found:2010/04/14(水) 18:21:16 ID:???
>>809
間違っているわけではなく、書いたとおりになってるだけ
liが全部floatされているのでulには高さがなくなっている

812 :Name_Not_Found:2010/04/14(水) 19:20:40 ID:???
liを横並びにする書き講座をサイトで見たんですが間違ってたんですね
こういう場合はどう指定すれば横並びにしたうえにulの横にborderを出せるのでしょうか?


813 :Name_Not_Found:2010/04/14(水) 19:53:46 ID:???
だから間違ってないっつの、おまえの指定通り
基礎を勉強しろ
ttp://az-store.nrym.org/archive/mynotes/lecture/css21/position

814 :Name_Not_Found:2010/04/14(水) 21:32:58 ID:???
>>808
position:fixed;

815 :Name_Not_Found:2010/04/14(水) 21:37:02 ID:???
    /\        /\
    /:::::::ヽ____/::::::::ヽ、
   丿 ::.__  .:::::::::::::  __  ::::ヽ_       ,. 、       /   /
  / /。 ヽ_ヽv /: /。ヽ  ::::::ヽ    ,.〃´ヾ.、  /  /
 / / ̄ ̄√___丶  ̄ ̄\  ::::| / |l     ',  / /
 | .:::::::::: / / tーーー|ヽ     ..::::: ::|r'´  ||--‐r、 ',    ttp://az-store.nrym.org/archive/mynotes/lecture/css21/position ぽーーーーーーーーーーーーーーーーーー!
 | .:::::.  ..: |    |ヽ   .,..ィ'´     l',  '.j '.
 | :::    | |⊂ニヽ| |  'r '´         ',.r '´ !|  \



816 :m:2010/04/14(水) 21:47:36 ID:???
>>812
> liを横並びにする書き講座をサイトで見たんですが間違ってたんですね

>>811さんのご指摘通り,間違ってはいません。私も>>789
同じ方法を説明していますし,「liを横並びにする」という目的は
この方法で達成されています。ただし,【その親要素のulに
子要素のliと同じ縦幅がついていることを前提としてデザインを
当てる】場合はもう一工夫が必要になる,ということなのです。

> こういう場合はどう指定すれば横並びにしたうえにulの横にborderを出せるのでしょうか?

>>811さんの指摘通り,子要素であるliがすべてfloatされている
時は,その親要素であるulは高さが0になります。なぜかというと,
それがCSSボックスモデルとfloatスタイルの仕様だからです。
高さが0なので,左右にborderをつけても表示されません
(topかbottomにborderをつけた場合は,liの上に表示されます)。

子要素すべてがfloatされているul要素に対して子要素と同じ高さを
与える方法は,>>792に書いたように,包摂ulに対してclearfixを
当てるのが安定です。clearfixについてはぐぐってみるとよいでしょう。
いろいろ解説がありますし,clearfixについての解説を読むことで,
floatという指定をしたときに何が起きるのかという本質の理解にも
近づけると思います。

817 :Name_Not_Found:2010/04/14(水) 22:10:43 ID:???
clearfixを当てるのが安定です(笑)

ねーよ・・・

818 :Name_Not_Found:2010/04/14(水) 22:51:28 ID:???
>>814
できました。ありがとうございます。

819 :Name_Not_Found:2010/04/15(木) 12:30:09 ID:???
そもそも「当てるのが安定」って日本語としておかしいんだが

820 :Name_Not_Found:2010/04/15(木) 15:09:37 ID:???
clearfixっぽいことしないと
次は「後続要素の上マージンがうまく反映されませんが
どうしてですか!」みたいな話が絶対出るから…

821 :Name_Not_Found:2010/04/15(木) 15:41:46 ID:???
>>820
えーと、勉強中で答えるのにも熱心なのはいいけど
もうちょっと勉強してついでにスレの空気読むようにしてくれ
教えてちゃんと同じくらい教えたいちゃんも迷惑なんだ

822 :m:2010/04/15(木) 16:10:35 ID:???
>>817
clearfixはだめでしょうか?

>>819
言われて気がつきました。「○○を当てるのが安定」って
ゲーマーの物言いなんですね。今後改めます。

>>820
はい,そのつもりで書きました。

>>821
>>820さんは私とは別の方です。

823 :Name_Not_Found:2010/04/15(木) 16:15:50 ID:???
>>822
じゃあ
お 前 が 消 え ろ

824 :Name_Not_Found:2010/04/15(木) 16:21:50 ID:???
>>821=>>823
なんでそんなにイライラしてるの?
clearfixが嫌いなの?

825 :Name_Not_Found:2010/04/15(木) 19:29:31 ID:???
お前が嫌いなの

826 :Name_Not_Found:2010/04/15(木) 22:20:39 ID:???
えっ ? 身も心も捧げたのに・・・ ウウ・・・ウワァァァン ヽ(`Д´)ノ モウコネーヨ

827 :Name_Not_Found:2010/04/15(木) 22:43:57 ID:WAff+FVl
<div id="main">
<div id="a">aaa</div>
<div id="b">bbb</div>
<div id="c">ccc</div>
</div>


aaabbbccc
これをmainの中央に配置するにはどうしたらよいでしょうか。
float leftでそろえて、mainのtext-align:centerでいけるかと思ったのですがダメでした

828 :Name_Not_Found:2010/04/15(木) 23:03:54 ID:???
>>827
標準モードにして囲ってるブロックをmargin:auto

829 :Name_Not_Found:2010/04/16(金) 03:21:51 ID:???
>>827
>>828さんが簡にして要

text-alignは「そのブロックレベル要素の中にある
インライン要素の位置取り」を操作するプロパティなので
divなどには無効(この仕様を逸脱してるのがIEの互換モードということ)


830 :Name_Not_Found:2010/04/16(金) 08:43:41 ID:???
>>829
だからお前消えろタクト

831 :Name_Not_Found:2010/04/16(金) 08:47:55 ID:???
なんか1人ヘンなのが居着いちゃったな

832 :Name_Not_Found:2010/04/16(金) 09:20:50 ID:???
そいつは昔から居着いてる
初心者スレで追い出されてこっちに北

833 :Name_Not_Found:2010/04/16(金) 09:30:35 ID:???
あれは名前多すぎて訳わかんねw

834 :Name_Not_Found:2010/04/16(金) 11:06:35 ID:???
>>824
821だが823も825も知らんw

835 :Name_Not_Found:2010/04/16(金) 11:38:44 ID:???
タクトって何?

836 :Name_Not_Found:2010/04/16(金) 11:42:49 ID:???
Web大先生(笑)

837 :Name_Not_Found:2010/04/16(金) 13:32:26 ID:???
いつのまに「大」が

838 :Name_Not_Found:2010/04/16(金) 13:52:14 ID:???
中身が全部floatのときの処理
実務寄りの解決だと

・外側要素に高さをハードコードする
・clearfixを使う
・overflowを使う

のどれがいいんだろか

最後のが一番コードきれいだけど
操作や印刷絡みのトラブルが多い

839 :Name_Not_Found:2010/04/16(金) 14:11:19 ID:???
単にinline

840 :Name_Not_Found:2010/04/16(金) 17:27:29 ID:???
>>838
heightなしで次clear ≧ height決め打ち ≧ clearfix > overflow

3つめまでは状況に応じて。4つめは使わない。
htmlと違ってCSSはバリデーション通す意味は薄いよ。

841 :Name_Not_Found:2010/04/16(金) 17:51:39 ID:???
そもそもフロートさせてるのが間違いで>>839だと思うんだが

842 :Name_Not_Found:2010/04/16(金) 17:58:01 ID:???
タクトってまだいたんだww

843 :Name_Not_Found:2010/04/16(金) 20:08:03 ID:???
divを横に並べるって話だったからinlineじゃだめなんじゃないかな。

844 :Name_Not_Found:2010/04/16(金) 21:35:51 ID:???
中にブロック要素が入って無ければいいんじゃないの?
まあ用途によるよな

845 :Name_Not_Found:2010/04/16(金) 23:01:52 ID:???
inline-block

846 :Name_Not_Found:2010/04/16(金) 23:06:05 ID:???
>>543
お前質問がごっちゃになってるぞ

847 :Name_Not_Found:2010/04/17(土) 01:35:05 ID:???
同様用途でinline-block試してみたら
クロスブラウザ検証が泥沼化したことがある
あんまオススメしない


848 :Name_Not_Found:2010/04/17(土) 01:35:39 ID:???
>>843>>543がごっちゃになってね?

849 :Name_Not_Found:2010/04/17(土) 01:36:48 ID:???
>>847
マジレスするとdisplayのinlineをみんな言ってるんだと思うんだぜ
>>845以外

850 :Name_Not_Found:2010/04/17(土) 02:31:51 ID:???
IEはデフォでinline要素がinline-block要素だよね

851 :Name_Not_Found:2010/04/17(土) 03:28:27 ID:???
今更だが・・
Divの中にサイズ未定の画像を上下左右中央に配置することができなくてワロタ
なんでこんなことが出来ないんだろうね?
なんだか酷い仕様のように思えてきた

それと、ブラウザ間の非互換が多すぎて、イライラする
その点Flashはブラウザ間の互換性がかなり高いけど
Flashもこの先どうなるかわからんからな〜

非互換性ってやっぱ疲れる

852 :Name_Not_Found:2010/04/17(土) 04:47:02 ID:???
height固定、overflow:hidden指定したdiv要素に、
jQueryのprependで要素追加したらIE7だけはみ出てしまう。
何とかなりませんか… orz

853 :Name_Not_Found:2010/04/17(土) 12:07:43 ID:???
>>851
できなくていい
そんなことできたらお前のような無知が他のブラウザで見られないページを作るから

まあできるけど

>>852
JSスレだと思う

854 :Name_Not_Found:2010/04/17(土) 12:13:10 ID:???
>>851
line-height

855 :Name_Not_Found:2010/04/17(土) 12:32:13 ID:???
>>851
background-positionでいいじゃん

856 :Name_Not_Found:2010/04/18(日) 18:40:56 ID:7o4wXKm4
<span class="ichi"><span class="ni"><span class="san">あああ</span></span></span>

他との絡みでどうしても上みたいに3重のspanになっちゃったんだけど
これってまずい?

857 :Name_Not_Found:2010/04/18(日) 19:32:19 ID:???
まずいっつーよりそんなにしなくちゃならない状況が思いつかん
きっと何か間違ってる
そして何よりそれはHTMLの問題なのでスレ違いだ

858 :Name_Not_Found:2010/04/18(日) 20:01:00 ID:???
<span class="ichi ni san">

>>856
少しは勉強せい !

859 :Name_Not_Found:2010/04/18(日) 20:08:04 ID:???
classを3つ使うって問題ではなく構造としてなっちゃうってことじゃないのか

860 :Name_Not_Found:2010/04/18(日) 20:47:41 ID:???
positionを使ったりするときは、1つのspanにclassまとめるのが無理だから、構造としてだろうな。

861 :856:2010/04/18(日) 20:48:59 ID:???
みなさん ありがとう

PHP部分を軽くしようとしてCSSで対処すると
span3重になってしまうんだよね

取りあえず文法的には間違ってなくて安心した



862 :Name_Not_Found:2010/04/18(日) 22:54:18 ID:/+MUjQ25
<style type="text/css">
<!--
body{font-size:13px; line-height:100%;}

span.moji {font-size:47px;}
-->
</style></head>
<body>
<span class="moji">MY SITE</span><br>
Writing...

上のようにするとMY SITEと下の文字が重なってしまいます。
で、LINE-HEIGHTを取ると上手く行きます。これって何が悪いんですか?
やってる事は同じなはずですが・・・

863 :Name_Not_Found:2010/04/19(月) 03:41:05 ID:???
>これって何が悪いんですか?
>やってる事は同じなはずですが・・・
同じじゃなくね?

原因はbodyで
font-size: 13px
line-height: 100%
と指定しているから

親要素でfont-size 13px&line-height 100%にすると、line-heightの値はそれぞれを掛けた13pxになる

その値は子供にも継承されるので47pxの文字部分の行間も13pxになるため重なってしまう

line-height: 1
にしてはどうか

864 :Name_Not_Found:2010/04/19(月) 12:30:33 ID:???
>>861
駄目だと言われてるのに人の話を聞かない奴だな

865 :Name_Not_Found:2010/04/19(月) 17:54:40 ID:???
駄目なわけじゃないだろ。
文書構造としてスマートではないけど。

1つの要素に複数class指定でいけるならいいけど
背景を3つ使いたいとかの場合ならspan3重になったりするな。

その場合はjQueryでブラウザが読み込んだ時だけタグを追加してやる方法もある。

866 :Name_Not_Found:2010/04/19(月) 17:58:41 ID:???
それが駄目ってことだろ

つーか自分でまずい?と聞いてまずいと言われたのに問題なしとしてるそいつが駄目

867 :862:2010/04/19(月) 17:59:13 ID:???
>>863
回答ありがとうございます。それでやってみます。

868 :Name_Not_Found:2010/04/19(月) 20:17:50 ID:JCsnxvPE
http://wata04.blog21.fc2.com/
このサイト結構面白いこと書いてくれる

こういうメニューバーいいなぁ

869 :Name_Not_Found:2010/04/19(月) 20:38:46 ID:???
宣伝乙

870 :Name_Not_Found:2010/04/19(月) 21:04:14 ID:v+velj0i
>>868
宣伝するならもっと作り込んでからすればいいのに。
遅くてウザいメニューはいらない。



871 :Name_Not_Found:2010/04/19(月) 22:52:43 ID:???
なにこの色使いの悪いページ。

872 :Name_Not_Found:2010/04/20(火) 13:47:43 ID:???
意気込んで宣伝しに来た>>868涙目ww
くやしいのうwww

873 :Name_Not_Found:2010/04/20(火) 15:50:11 ID:???
作ってんの厨房じゃんwあんま叩くなwwwww

874 :Name_Not_Found:2010/04/20(火) 19:03:04 ID:???
仕方ない。これがこのスレの流れ。
いわゆる「様式美」というやつだ。

875 :Name_Not_Found:2010/04/20(火) 19:42:21 ID:???
>設置方法を書いてほしければコメください

確かに面白いことを書いてくれている

876 :Name_Not_Found:2010/04/20(火) 21:12:15 ID:???
少なくとも7レスは稼げたようだな

877 :Name_Not_Found:2010/04/20(火) 22:26:40 ID:???
>>876
お前も入れて8だな。

878 :Name_Not_Found:2010/04/21(水) 00:19:42 ID:???
10げっと

879 :Name_Not_Found:2010/04/21(水) 00:19:57 ID:c8aY/s0v
デカイタイトルは意味あるのか?メニューも見づらいし
氏ねばいいのに

880 :Name_Not_Found:2010/04/21(水) 00:49:24 ID:+ga4f3ZB
<div id="content"></div>
のなかに画像を表示させたらその下の
<div id="footer"></div>
の線が画像にかぶってしまうのですが画像のサイズって認識されないものですか?

881 :Name_Not_Found:2010/04/21(水) 13:23:31 ID:???
お前の書き方が間違ってるだけだろ

882 :Name_Not_Found:2010/04/21(水) 15:55:40 ID:???
もうちょい詳細なソース書けばわかるかもね。

883 :Name_Not_Found:2010/04/21(水) 20:25:49 ID:???
clearfix関連と勝手に予想

884 :Name_Not_Found:2010/04/21(水) 22:00:17 ID:???
同じ環境から同じスタイルの文字を見て違って見えることってありますか?

885 :Name_Not_Found:2010/04/21(水) 22:19:51 ID:???
urlあればurlはれ
ソースあるんならソースはれ

886 :Name_Not_Found:2010/04/21(水) 22:20:08 ID:???
  □
  □
■■■■■■■■
  □
  □
  □
  □

ちょっとわかりづらいかもしれませんが
□にnaviで■にトップタイトル入れてるサイトを作ってます
■□両方fixedで固定するとfixedされてないコンテンツが
ブラウザのサイズを変えるとコンテンツだけが移動するんです

これは全idを固定した方がいいんでしょうか?何かうまい作り方があれば教えてもらえないでしょうか?

887 :Name_Not_Found:2010/04/21(水) 22:24:56 ID:???
ちょっとじゃなくて何をやりたいんだか全然わからん
コンテンツは移動することを前提に組まなきゃ苦労するぞ

888 :880:2010/04/21(水) 22:27:52 ID:ZO96wO1K
HTML側
<div id="content">

<div class="pic">
<a href="画像" class="thickbox" rel="sample1"><img src="画像" /></a>
</div>
<div class="pic">
<a href="画像" class="thickbox" rel="sample1"><img src="画像" /></a>
</div>


</div>

<div id="footer">
<address>Copyright</address>
</div>


889 :880:2010/04/21(水) 22:31:26 ID:???
CSS設定
div.pic{
margin:10px;
padding:0;
float:left;
width:120px;
height:80px;
border:1px solid #cccccc;
}
div#content img{
width:120px;
height:80px;
}

div#footer{
background-image : url(線の画像);
background-repeat : repeat-x;
margin-top : 25px;
padding-top : 8px;
float : clear
;}

address{
font-size : 0.75em;
font-style: normal;
text-align : center
;}

です

890 :Name_Not_Found:2010/04/21(水) 22:33:43 ID:???
idもclassの中も書けよこいつは

891 :Name_Not_Found:2010/04/21(水) 23:31:27 ID:???
float : clear

clear:left

892 :Name_Not_Found:2010/04/21(水) 23:58:42 ID:???
div#contentのなかのfloatだから、その中でclearした方が安全だと思う
>>883のいうとおりclearfixとか

893 :Name_Not_Found:2010/04/22(木) 00:21:38 ID:???
>>892
footerの線がどうとか言ってるんだからclearfixなんて必要なく>>892だろw

894 :Name_Not_Found:2010/04/22(木) 17:18:13 ID:WJ5HTyLI
バカだ、、、限りなくバカだ、、、

895 :Name_Not_Found:2010/04/22(木) 21:08:22 ID:???
自己紹介しなくていいよ

896 :880:2010/04/22(木) 21:35:58 ID:UGdSMaKN
本当に何を言ってるのか良くわからないのですが

div#content{
width : 564px;
margin-left : auto;
margin-right : auto
;}

ここですか?

class="thickbox"



http://journal.mycom.co.jp/articles/2007/07/12/thickbox/index.html

見てやったので中身は良くわかりません
ごめんなさい

897 :Name_Not_Found:2010/04/22(木) 21:38:35 ID:???
>>896
ttp://az-store.nrym.org/archive/mynotes/lecture/css21/position

898 :Name_Not_Found:2010/04/22(木) 21:41:39 ID:???
ごめんなさい

解決しました

ありがとうございます。

899 :Name_Not_Found:2010/04/23(金) 07:22:13 ID:5yKqYI2h
◆こんな新CSSを実現せよ
スクロールバーを隠してホイールで使おう

body{scrollbar:hidden;}
body{scrollbar-x:hidden;}
body{scrollbar-y:hidden;}
body{scrollbar-width:10px;}
body{scrollbar-width-x:5px;}
body{scrollbar-width-y:5px;}

table{scrollbar-width-x:0px;}
span{scrollbar-width-y:0px;}


900 :Name_Not_Found:2010/04/23(金) 12:23:28 ID:???
スレチ

901 :Name_Not_Found:2010/04/23(金) 12:27:00 ID:???
マルチだからスルーしておけ
(X)HTML/CSS/Dreamweaverの質問に優しく答えるスレ6
http://pc11.2ch.net/test/read.cgi/hp/1266835969/583

902 :Name_Not_Found:2010/04/23(金) 15:20:51 ID:???
どうでもいいが「スレチ」と言った人に「スルーしろ」と言ってる方が構ってるように見える

903 :Name_Not_Found:2010/04/23(金) 15:37:21 ID:???
俺も同じことを思ったが暖かいしどうでもよくなった

904 :Name_Not_Found:2010/04/24(土) 00:08:56 ID:???
bodyで幅を指定しているのですがリストタグを使ったところ幅から飛び出して表示されてしまうのですが
これはどういうこと?

905 :Name_Not_Found:2010/04/24(土) 02:45:33 ID:MN2bAt6B
wrapで幅指定

906 :Name_Not_Found:2010/04/24(土) 04:04:13 ID:fjJFFQwR
画像に style="vertical-align: middle;"を指定すると
すぐ横のテキストリンクの下線(数字の部分のみ)がぐにゃっとなるのですが解決方法ありますか?

907 :Name_Not_Found:2010/04/24(土) 12:46:58 ID:???
>>904>>906
最小単位のソースを出せ

908 :Name_Not_Found:2010/04/24(土) 14:15:11 ID:???
IE9でopacity, rgbaが実装されるそうです。
<!--[if IE]>〜<[endif]-->や、24bitPNG画像を使わずに
IE6〜9、Firefox, Chrome, Safari, Operaで背景だけ透過させる方法を教えてください。

909 :Name_Not_Found:2010/04/24(土) 15:30:21 ID:???
CSSって細かな事やろうと思うと
互換性の問題とか出てくる事多いな
便利な部分も確かにあるけど、所詮Webレベル

しかも、基本的にデザイナーには向かず、技術者しか使えない事も多い

910 :Name_Not_Found:2010/04/24(土) 16:13:30 ID:???
>>908
IEは確か7から
他のはモダンブラウザと呼ばれるようになってから全部opacity入れてるわい

911 :Name_Not_Found:2010/04/25(日) 02:24:38 ID:???
htmlを書くときのルールなのですがdivなどで囲む場合は中のタグはスペースをいれないと駄目なのですか?

<div id="test">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>

上記のようにしないと駄目?

それともこれでもいい?
<div id="test">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>

912 :Name_Not_Found:2010/04/25(日) 02:41:08 ID:???
俺の目がおかしいのかとドキドキするじゃないか

913 :Name_Not_Found:2010/04/25(日) 02:46:26 ID:???
>>911
もしかして字下げのこと?
HTMLのそれは構造が見やすくなるというだけで必須ではないよ

914 :Name_Not_Found:2010/04/25(日) 02:50:26 ID:???
>>912
俺もびっくりした、全角にするべきだったわ

>>913
ありがとう

915 :Name_Not_Found:2010/04/25(日) 23:37:33 ID:???
フォームタグなのだけど送らせたいメールアドレスはどこに書けばいいのでしょうか?
入門書に付属していたhtmlとcssを丸々コピペしたのでわかりません。
フォームはできているので送信を押したらメールが送られるようにしたいです。

916 :Name_Not_Found:2010/04/25(日) 23:40:21 ID:???
すれち。あと勘違い。

917 :Name_Not_Found:2010/04/26(月) 00:25:05 ID:???
すまんそ、こっちはCSSのスレだね

918 :Name_Not_Found:2010/04/26(月) 12:09:44 ID:+7Fyq4A4
例えば

■■■■  ■■■■  ■■■■  ■■■■
■ A ■  ■ B ■  ■ C ■  ■ D ■
■■■■  ■■■■  ■■■■  ■■■■

という四つの異なった画像を並べて、それぞれの画像にそれぞれ違ったリンクを貼りたいのですが、スタイルシートを使う場合どうかいてよいかわかりません。
ご指南ください。



919 :Name_Not_Found:2010/04/26(月) 12:11:25 ID:+7Fyq4A4
すいません・・上の画像、崩れてしまいました・・orz
A.gif B.gif C.gif D.gif です。


920 :Name_Not_Found:2010/04/26(月) 12:18:06 ID:???
HTMLだけで書けるでしょ

921 :Name_Not_Found:2010/04/26(月) 12:50:03 ID:???
>>918
画像だけならインラインなんだから
そのまま並べて書けるだろ
リストでやりたいという場合ならfloat
ちなみにリンクについては単純にhtmlの問題で画像をaでくくればいい

922 :Name_Not_Found:2010/04/26(月) 17:02:58 ID:???
>>909,910
IE9の話が出る前は、単色の背景だけを透過させるなら

-css-
div {
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#BFFFFFFF, EndColorStr=#BFFFFFFF);
background-color: rgba(255,255,255,0.75);
}

-html-
<div>こんにちは</div>

で、ほぼ全てのブラウザで出来ているのですが、IE9の事も考えるとどうしたらいいものか分かりません。
やはりIcssファイルを分けるか、png画像を用意するしかないのでしょうか・・・。

923 :Name_Not_Found:2010/04/26(月) 17:33:17 ID:???
>>922
filterはCSSじゃないのでスレチ

924 :Name_Not_Found:2010/04/26(月) 17:44:34 ID:???
>>923
filterの質問ではありません

925 :Name_Not_Found:2010/04/26(月) 17:48:00 ID:???
じゃあ先行実装はスレチ

926 :Name_Not_Found:2010/04/26(月) 17:54:19 ID:???
でてないものは試しようないな。

927 :Name_Not_Found:2010/04/26(月) 17:55:01 ID:???
>>922
他のブラウザはopacity実装されてるって言われてるのに人の話を聞かない奴だな

928 :Name_Not_Found:2010/04/26(月) 18:00:20 ID:???
それも先行実装

929 :Name_Not_Found:2010/04/26(月) 18:38:09 ID:???
>>922
div {
background-image: url(http://www.uploda.tv/v/uptv0066274.png);
}

930 :Name_Not_Found:2010/04/26(月) 19:02:33 ID:???
>>926
確かにそうですね。
まだIE9でfilterとopacityやrgbaが重なるかも定かではないですし
流石に今のうちから対応しようというのは気が早すぎでしょうか。

>>927
出来ればコードを書いていただけないでしょうか。
opacityはそれ以下の要素全てを透過させてしまうと記憶しています。

>>929
ありがとうございます。
IE用外部CSSファイルやpngファイルは使いたくない、という前提は我侭でしょうか。

ちなみに、透過pngを利用した例でIE6互換にするには、IE6以下用の* htmlハックを利用し
background-image: none;を指定した上で、filter:AlphaImageLoaderやfilter:Gradient
あるいはbackground-colorとfilter:Alpha+下位要素全てに対してposition: relative;の記述が必要になりそうです。

931 :Name_Not_Found:2010/04/26(月) 19:14:29 ID:???
>>930
png無しだと無理

932 :Name_Not_Found:2010/04/26(月) 19:41:06 ID:???
>>930
お前のところにはIE6でJS切って行ってやるから安心しろ
手が出ないだろうwww

933 :Name_Not_Found:2010/04/26(月) 19:45:16 ID:???
* html

934 :Name_Not_Found:2010/04/26(月) 19:55:56 ID:???
CSSドロップダウンメニューでリンク先を開くと通常のHTMLが表示されるんだけど
メニューを残したままメニューの横にリンク先表示させるにはどうしたら良いんですか?
凄く基本的なことなのかもしれないが…
全然わからんのです


935 :Name_Not_Found:2010/04/26(月) 19:58:43 ID:???
>>934
リンク先のページにもメニューをコピペ

936 :Name_Not_Found:2010/04/26(月) 20:28:33 ID:???
>>935
即レスサンクス。
なるほどな。言われないとずっと気がつかなかったかも
フレームじゃないからターゲットで指定は出来ないから
それに変わる用語を探してた
有り難う御座います

937 :Name_Not_Found:2010/04/26(月) 22:35:44 ID:???
<input type="text"> な部分で、valueに指定したい値が長さがバラバラで10個くらいあるんですが、widthを動的に変える事はできますか?
widthをvalueの長さに合わせたいのです。

938 :Name_Not_Found:2010/04/26(月) 22:41:06 ID:???
emで駄目な話ならスレチ

939 :Name_Not_Found:2010/04/27(火) 18:24:33 ID:???
>937
できるよ

940 :Name_Not_Found:2010/05/02(日) 09:27:55 ID:???
<div style="width:100px;">
<table>
<tr>

<td>
<pre style="width:90%; overflow: scroll;">
00000000000000000000000000000000000000000000000000
</pre>
</td>

<td>
<pre style="width:90%; overflow: scroll;">
11111111111111111111111111111111111111111111111111
</pre>
</td>

</tr>
</table>
</div>

%指定だと横に要素全体が伸びてしまいます。
うまい方法はありませんでしょうか
px指定なら意図した表示になります。よろしくお願いします。


941 :Name_Not_Found:2010/05/02(日) 09:42:23 ID:???
px指定でいいやん

942 :Name_Not_Found:2010/05/02(日) 09:55:46 ID:???
テーブルレイアウトしてるのに
絶対指定を嫌う理由がわからない
意図した表示にこだわるならどんな方法でもいいんでしょ?

943 :Name_Not_Found:2010/05/02(日) 10:49:15 ID:???
tableにwidth指定してtable-layout:fixed;にしろよ

944 :Name_Not_Found:2010/05/02(日) 11:29:15 ID:???
>>941-943
ありがとうございます。
残念ながら意図する表示にはなりませんでした。

画像を表示する雛形の部分なのでサムネイル小かサムネイル中
を表示するかで大きさが動的に変わる部分なので%指定じゃないと駄目でした。

ですが%指定じゃどうやら無理っぽいので
px指定のCSSを画面毎にを吐かせるようにして無理やり解決しました。

CSS的には解決してないんですがね 何か悔しい


945 :Name_Not_Found:2010/05/02(日) 12:23:39 ID:???
>>943で出来るだろ
てか意図する表示ってやつを先に示せ

946 :Name_Not_Found:2010/05/02(日) 12:49:06 ID:4rbPEjaO
http://www.andye-shibuya.comをIEで見ると、ナビゲーションの一番右だけが
落ちますがなぜでしょうか?
よろしくお願いします。


947 :Name_Not_Found:2010/05/02(日) 13:49:53 ID:???
テーブルじゃなくて定義リストを使え
>>946
カラム落ちしてるだけだがCSS見ないと何とも


948 :Name_Not_Found:2010/05/02(日) 14:39:48 ID:???
>>945
ありがとうございます。すみませんマジで無理でした。
悩んでも、らちがあかないのでPHPで動的にCSSを可変させるようにしました。
>>947
本当はそうしたいのですが変数一つで<td></td>の横並び数を可変させる
仕様で書いてしまったのでテーブルになっています。





949 :Name_Not_Found:2010/05/02(日) 16:56:46 ID:4rbPEjaO
>>946 こんな感じです。
よろしくお願いします。HTML↓

<div id="header">
<div id="emotion-img">
<a href="#"><img src="#" width="250" height="250" alt=""/></a> 
</div>
<ul id="GlobalNavigation">
<li><a href="#/">HOME</a></li>
<li><a href="#">SHOPS</a></li>
<li><a href="#">SHOPPING</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">RECRUIT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>



950 :Name_Not_Found:2010/05/02(日) 16:58:06 ID:4rbPEjaO
>>946 こんな感じです。
よろしくお願いします。CSS@↓

#GlobalNavigation {display: inline;}

#GlobalNavigation li {
float:left;
padding:0;
text-align:center;
margin-top: 15px;
margin-bottom: 45px;
list-style-type: none;}




951 :Name_Not_Found:2010/05/02(日) 17:00:06 ID:4rbPEjaO
>>946 こんな感じです。
よろしくお願いします。CSSA↓

#GlobalNavigation li a {
background-image:url(http://www13.jimdo.com/usertemplates/224915/img/bg3.jpg);
text-decoration: none;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
color: #FFF;
color:#FFF;
text-decoration:none;
border-right:1px solid #FFF;
display: block;
width: 145px;
padding-top: 7px;
padding-bottom: 7px;}

#GlobalNavigation li a:hover,

#GlobalNavigation li a:focus,

#GlobalNavigation li a:active {
background-position:-150px 0;}

952 :Name_Not_Found:2010/05/02(日) 17:20:30 ID:???
最小単位の切り出しくらいしろよ

953 :Name_Not_Found:2010/05/02(日) 17:27:08 ID:???
div id="emotion-img"
のaタグの後ろに全角ブランクが入ってるのが影響してそうな気がしないでもないかもしれない

954 :Name_Not_Found:2010/05/02(日) 18:06:58 ID:???
>>949
それだと改行がないから再現しなくね?
表示がおかしくなってたのは

<li>
    <a href="#/">HOME</a>
</li>

になってたからじゃねーの?

955 :Name_Not_Found:2010/05/03(月) 01:23:22 ID:???
http://imepita.jp/20100503/043510
図の上のようにしたいのですが、IE8ではきちんとできるものの
IE6では下のようになってしまい、きちんと空白を開けることが出来ません。
原因はIE6のバグでwidthがpaddingを含んで計算されているせいだとは分かるのですが
どのようにCSSを修正すればIE8と同じように表示させられるのかが分かりません。
HTMLをいじらず、CSSの修正のみでIE8と同じようにIE6でも上下に10px、左右に20pxの余白を
表示させられる方法をどなたかお教え頂けますでしょうか。

HTMLは下記のように作成しています。

<div id="calendar">
<table border="0" cellspacing="0" cellpadding="0">
<caption class="calendarhead">2010年05月</caption>
<tr><th class="calendarday">日</th>
<th class="calendarday">月</th>
<th class="calendarday">火</th>
<th class="calendarday">水</th>
<th class="calendarday">木</th>
<th class="calendarday">金</th>
<th class="calendarday">土</th></tr>
<tr><td align="center" class="calendarday"></td>
<td align="center" class="calendarday"></td>
<td align="center" class="calendarday"></td>
<td align="center" class="calendarday"></td>
<td align="center" class="calendarday"></td>
<td align="center" class="calendarday"></td>
<td align="center" class="calendarday">1</td></tr>…(中略)…</table></div>


956 :955続き:2010/05/03(月) 01:24:23 ID:???
CSSは以下のように作成しています。

#calendar table {
padding: 10px 20px 10px 20px;
width: 190px;
color: #333333;
font-size: 90%;
line-height:1.3;
border-style: none solid solid solid;
border-width: 1px;
border-color: #FFA4A4;}

caption.calendarhead {
margin: 0px;
text-align:center;
padding: 5px 0px 0px 0px;
color: #ffffff;
font-size: 95%;
background-image:url(cal_head.gif);
background-color:#FFA4A40;}

th.calendarday {
color: #333333;
font-weight: bold;
font-size: 90%;}

.calendarday {
padding: 1px 1px 1px 0px;
color: #333333;
font-size: 90%;}

957 :Name_Not_Found:2010/05/03(月) 01:50:43 ID:???
つ 標準モード

958 :Name_Not_Found:2010/05/03(月) 04:15:36 ID:???
FC2ホームページ解析を使いたいのですが公式で「bodyの上に入れる」とあったのでbody直下のh1との間に
入れたのですがこれをdivタグを使って表示だけをaddressより下で表示するにはどうすればよいのでしょうか?
むしろ非表示にできますか?

【html側】

<body>
<div id="contents">
<div id"access">
<!-- [FC2 Analyzer] http://analysis.fc2.com/ -->
<script language="javascript" src="http://analyzer5.fc2.com/ana/processor.php?uid=xxxxxx" type="text/javascript"></script>
<noscript><div align="right"><img src="http://analyzer5.fc2.com/ana/icon.php?uid=xxxxxx&ref=&href=&wid=0&hei=0&col=0" /></div></noscript>
<div style="width:180px;display:inline;"><ol style="text-align:left;list-style-type:none;margin:3px;font-size:10pt;display:inline;"></ol></div>
<!-- [FC2 Analyzer] -->
</div>
<h1><a href="home.html">ほーむぺーじタイトル</a></h1>

959 :Name_Not_Found:2010/05/03(月) 09:36:52 ID:???
>addressより下で表示するにはどうすればよいのでしょうか?
addressってのはどこの部分だ?

基本的には、表示したい部分に貼ればおk
bodyの直下じゃなくても大丈夫。読み込まれる順番が変わるだけだから問題はない。
非表示にするのはおそらく規約違反だからやめとけ。

960 :Name_Not_Found:2010/05/03(月) 10:01:01 ID:???
広告って文法ミスだらけだよな〜

961 :Name_Not_Found:2010/05/03(月) 11:03:17 ID:???
>>959
解析タグが読み込まれる前別ページに飛ばれると正しい解析が出来ないので上部に貼れと書いて合ったので
addressは最下部に設置したのですがそれより下に表示したいです

962 :Name_Not_Found:2010/05/03(月) 11:18:57 ID:???
>>961
読み込みにそんな時間かかるような糞ページを作らなければ
最下部に設置したって構わない

963 :Name_Not_Found:2010/05/03(月) 11:24:15 ID:???
>>961
>>959はaddressが上記構文の何処に当たるのかを知りたいんだと思うんだが。
基本的にfc2のアクセス解析(アイコンタイプ)は上部に表示されるのが当たり前。
どうしてもってんなら、div内をいじってそのaddressとやらの部分から相対位置でやればいいんじゃないか。
やったこと無いから出来るかどうかはわからんけど。
どうしても何処かの下にアクセス解析用のタグをつけたいのなら≪ソーシャル解析タイプ≫を使えば問題無いけどさ。

タグ入れ部分の話をしているのなら、
自分はjavascript仕込んでるページ以外は最下部にタグ入れして正常に動いてる。

964 :Name_Not_Found:2010/05/03(月) 11:27:18 ID:2hsPDH9Z
>>962
本にSEOに合わせるためにフッターはhtmlの最下部にすると書いて合ったので

>>963
トン、相対位置でできるかちょっと調べて見ます

965 :Name_Not_Found:2010/05/03(月) 11:58:11 ID:2hsPDH9Z
試しにとdivで指定して絶対の下0ピクセルでできますた、これでいいのかな?

966 :Name_Not_Found:2010/05/04(火) 01:20:25 ID:???
いいよ (・∀・ )

967 :Name_Not_Found:2010/05/05(水) 15:23:31 ID:???
すいません、質問なのですが
下記サイトのようなテキストフォントは
CSSで何を指定しているのでしょうか?たまに見かけるのですが。
普通のゴシックと違いますよね。

ttp://www.hakubi.net/course/

968 :Name_Not_Found:2010/05/05(水) 16:00:29 ID:???
>>967
こっちでは普通のメイリオになってますが
ソース見ろよ
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",sans-serif;

969 :Name_Not_Found:2010/05/06(木) 02:56:05 ID:???
ヒラギノ入れてると醜くなるんだよな、その指定だと

970 :Name_Not_Found:2010/05/06(木) 09:18:43 ID:???
ヒラギノはSafariのレンダリングじゃないとまともに見れない

971 :Name_Not_Found:2010/05/06(木) 10:00:36 ID:???
Winの話ね…

972 :Name_Not_Found:2010/05/06(木) 15:41:11 ID:jAynGY46
サイドメニューのボックス(box0)の上(top)に、各ページへのメニュー(box1)を表示して、
下(bottom)に、プライバシーポリシーなど(box2)へのリンクを表示したいと
思っています。
高さが可変の場合、box1とbox2の間に空白を開けて、常にbox2の下辺が
box0の下辺と同じ位置にくるようにいるには、どうすれば良いのでしょうか?

よろしくお願いします。


973 :Name_Not_Found:2010/05/06(木) 18:01:47 ID:???
position:absolute;

974 :Web就活中の元新聞記者:2010/05/06(木) 20:39:53 ID:hInWW8ft
>>709
●外観
 タイトルとサマリーの文字寸ステップアップ比や行間を要再考
●読ませ方
 たとえば政党比較なら表形式で全く同条件に
 政治的主張があってもデータと主張は区別
 恣意性のないデータの列挙で主張に持ち込めたら及第点
●ヘッドライン
 「○○の件」ではなく「○○は××」の形が必要
●著作権
 自サイトの一部として他サイトへのリンクはWebでも違反
 本文もすべて引用元の出典が必要
 
マス板の領域になるが
保守思想だからといって保守媒体で採用されない
情報を収集整理して活用する能力が問われる
意見・調査結果・引用を区別できず書くのは
ネチズンとしても記者としても致命的
この板的には
H1〜H4などといったルールが
文章を書くうえでも良い先生になると思います

975 :Name_Not_Found:2010/05/06(木) 21:34:09 ID:???
>>972
文字が大きくて画面サイズが小さい人はどうするつもりよ
設計ミス

>>974
お帰りください

976 :Name_Not_Found:2010/05/08(土) 18:21:34 ID:???
h1タグと中にinputタグを含んだformタグを横に並べたいのですが、いい方法はありますか?

977 :Name_Not_Found:2010/05/08(土) 19:39:38 ID:???
まずどう書いてどう駄目なのかを示しましょう
手取り足取り教えてもらおうと思わず自分でやってみること推奨

978 :Name_Not_Found:2010/05/08(土) 19:43:11 ID:4Os/K8wS
h1タグの改行を解除するにはdisplay:inlineを使うといいと聞いたので、h1に適用させて
<h1>hogehoge</h1>
<form ....>
....
</form>

とやってみましたが、改行されてしまうようです><

979 :Name_Not_Found:2010/05/08(土) 20:06:17 ID:???
formもブロック要素なのでh1をinlineにするだけでは駄目です
inlineで横並びにするよりもfloatを使ったほうがこの場合良いと思いますよ

980 :Name_Not_Found:2010/05/08(土) 20:18:23 ID:???
中に、と書いてあるのは気のせいなんだろうか
formは基本的に中にブロック要素を必要とするから
<form><h1>ほげ<input /></h1></form>

981 :Name_Not_Found:2010/05/08(土) 20:27:41 ID:???
「h1タグ」と「中にinputタグを含んだformタグ」を

982 :Name_Not_Found:2010/05/08(土) 20:29:26 ID:UrvLIk6o
まあ、、、日本語が苦手でもcssには関係ないので



983 :Name_Not_Found:2010/05/08(土) 20:32:50 ID:???
英語は出来るってことかえ

984 :Name_Not_Found:2010/05/08(土) 21:17:34 ID:???
ごめん酔っぱらいの戯言だった

985 :Name_Not_Found:2010/05/09(日) 00:42:29 ID:???
リストを外枠の要素に対して左寄せで表示したいと思っています。

<ul>タグを使用しリスト表示を行っているのですがどうもブラウザによって要素内の
文字列を外側のブロックに対して左寄せにする為のCSSの指定が異なっている様なのですが
どのブラウザでもこれらを実現する事の出来る共通のCSSはありますか?
現在は、スタイルシートに次の@Aを同時に記述する事により実現していますが、
そもそもこの様な指定に問題があるのでは無いかと不安です。

@ padding-left:0px;  → FireFox 3.5.9 でOK
A margin-left:0px;   → Lunascape 6.0.3 でOK

<table>
<tr>
<td>
 <ul>
  <li>
    あいうえお
  </li>
 </ul>
</td>
</tr>
</table>


986 :Name_Not_Found:2010/05/09(日) 07:29:00 ID:???
>>985
問題なし
OK

987 :Name_Not_Found:2010/05/09(日) 10:04:55 ID:???
>>986
サンクス

988 :Name_Not_Found:2010/05/09(日) 10:16:00 ID:???
フッターの簡単なサイトマップみたいな部分に
liをfloat:left;で横並びにして表示してるんですが
このリスト全体を中央寄せにできません

フッダーのdivとその中のulをtext-align:center;にしてるんですが
左寄せにしたから打ち消しになってるんでしょうか?
解決法のご教示お願いします

989 :Name_Not_Found:2010/05/09(日) 11:36:02 ID:???
>>988
IEをアップグレードしたからとか?

990 :Name_Not_Found:2010/05/09(日) 12:25:26 ID:???
>>988
ならないのが普通、今までお前は自分の環境以外では中央寄せじゃない指定をしていただけ
ttp://hxxk.jp/2008/09/29/0118

991 :Name_Not_Found:2010/05/09(日) 14:26:57 ID:???
次スレは無しで良いのかね?

(X)HTML/CSS/Dreamweaverの質問に優しく答えるスレ6
http://pc11.2ch.net/test/read.cgi/hp/1266835969/

992 :Name_Not_Found:2010/05/09(日) 15:41:24 ID:???
立てたなら告知しなさい

次スレ
CSS初心者スレッド=8th=
http://pc11.2ch.net/test/read.cgi/hp/1273383771/

993 :Name_Not_Found:2010/05/09(日) 15:50:13 ID:???
>>989
Firefox使ってます。

>>990
ならないから、どうすればできるのですかと質問しているんですが・・・。
正しい指定の方法を教えていただけると助かります。

994 :Name_Not_Found:2010/05/09(日) 15:53:22 ID:???
>>992
たった今立て終わったんだよ
連騰規制に引っかかってテンプレも途中で止まってただけ

>>993
教えてもらったところに書いてあるじゃないか
リンクまで全部辿って行きなよ

995 :Name_Not_Found:2010/05/09(日) 16:15:44 ID:???
>>994
CSSの書き方がわからないのに
DOCTYPE宣言の問題について教えてもらっても何の役にも立たないと思いました。
質問の仕方が悪かったんですかね。

結局ググったらあっさり自己解決しました。
みなさんどうもありがとうございました。

996 :Name_Not_Found:2010/05/09(日) 16:23:53 ID:???
リンク辿ったところに普通にあったがナー

997 :Name_Not_Found:2010/05/09(日) 16:27:18 ID:???
それならリンク先を辿ったところのURLを貼ってやればいいだろw

998 :Name_Not_Found:2010/05/09(日) 16:29:16 ID:???
答えてもらってわからなかったからといって教え方が悪いと逆ギレw

999 :Name_Not_Found:2010/05/09(日) 16:34:56 ID:???
最近そういう奴多いな

1000 :Name_Not_Found:2010/05/09(日) 16:35:36 ID:???
1000ならCSS3対応ブラウザが席巻する

1001 :1001:Over 1000 Thread
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。

266 KB
★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.00 2017/10/04 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)