■■■■■ 質問のしかた ■■■■■
●基礎は解説サイト（→【解説など】>>3-4）で勉強してください。
●質問の前に【FAQ】（>>5-9）を参照して、既出の再掲を避けて下さい。
●【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
WinIEの場合は、[Ctrl+F]で検索できます。
●ブラウザによって対応していないプロパティーやバグがありますので、
解説サイト（→【関連リンク】）の対応表や「CSSバグリスト」に目を通しておきませう。
●土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
正当(valid)なHTMLを心がけて下さい。validator（>>2）でチェックできます。
初心者の疑問は大抵ここまでで解決します。
●OSやブラウザの種類とヴァージョンについては必ず明記してください。
特にNetscapeは、ver.4までと6以降でまったく別物です。
●「環境を書け」とか「ソースは？」と求められたら応じませう。
その方が回答が早く得られます。質問は具体的に。
【まとめサイト】 http://web2ch.s31.xrea.com/?CSS
【FAQ】 http://web2ch.s31.xrea.com/?CSSFAQ
【過去ログ】 http://web2ch.s31.xrea.com/?CSSLog
【関連リンク】 http://web2ch.s31.xrea.com/?CSSRelated
【前スレッド】 http://pc8.2ch.net/test/read.cgi/hp/1134048018/
関聯リンクは>>2-15 あたり
【関連スレ】【仕様書】【CSS検証】>>2
【解説など】>>3-4
【FAQ】>>5-9
CSS/DHTMLバグ辞典スレッド 第４版
http://pc8.2ch.net/test/read.cgi/hp/1078463560/l50
代替スタイルシートに萌え〜
http://pc8.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
http://pc8.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
http://pc8.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるデザインサイト 26
http://pc8.2ch.net/test/read.cgi/hp/1120837682/l50
【仕様書】
CSS1の仕様書の原文(英語)
http://www.w3.org/TR/REC-CSS1
CSS2の仕様書の原文(英語)
http://www.w3.org/TR/REC-CSS2
CSS1の仕様書の邦訳（日本規格協会訳／個人訳）
http://www.y-adagio.com/public/standards/css1/toc.htm
http://www.swlab.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html
CSS2の仕様書の邦訳（日本規格協会訳／個人訳）
http://www.y-adagio.com/public/standards/tr_css2/toc.html
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html
【CSS検証】
W3C CSS 検証サービス
http://jigsaw.w3.org/css-validator/
・ごく簡単なHTMLの説明
http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
http://www.zspc.com/stylesheets/
・ZSPC - CSS2対応状況ガイド
http://www.zspc.com/documents/css2/
・CSS1テストスイート
http://www.doraneko.org/css1test/
・ばけらの CSS リファレンス
http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・K@tsukun's PAGE! > CSS Reference
http://hp.vector.co.jp/authors/VA022006/css/index.html
・K@tsukun's PAGE! > 付録：CSS対応状況表
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS Laboratory対応表・一覧
http://is.vis.ne.jp/charts/index.xhtml
・ブラウザのHTML4/CSS対応度テスト
http://homepage1.nifty.com/emk/moz/browsertest.html
・CSSバグリスト＠CSSバグ辞典スレッド
http://cssbug.at.infoseek.co.jp/index.html
・Web標準化Tips（特に「HTML/CSSのよくある誤解・ミス」）
http://www.mozilla.gr.jp/standards/webtips/index.html
・ブラウザによる振り分け（JavaScriptを使用しない方法）
http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・Web Site 作成支援 - What is CSS?
http://www.nextindex.net/web/CSS/index.html
・Academic HTML::CSS2
http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・スタイルシート用語集
http://www.mitsue.co.jp/case/design/c_index.html
・IE で min-width を指定する方
http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html
・CSSでイケてるデザインサイトリンク集
http://ike.s33.xrea.com/
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
http://www.geocities.jp/cas_ike2/
・* CSS { イケてるスタイルを："作れ";} 発表所
http://web.archive.org/web/20030415121122/http://strict.jp/~sappari/2ch/css.php
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
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/
スタイルシートでマルチカラムデザインの実現
ttp://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でも崩れない段組みの実例）
ttp://web.archive.org/web/20041001014138/http://homepage3.nifty.com/fores/
リストを用いたレイアウト
http://css.maxdesign.com.au/index.htm
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:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。
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: ＣＳＳではできません。target属性かJavaScript?でやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がＷ３Ｃの方針です。
Q11. height:100%;としても高さが100%になりません。
A11. heightを%単位で指定するためには親要素の高さを明示的に指定する必要があります。下記サイトを参照のこと。
「height: n%;の正しい仕様」
http://www.mozilla.gr.jp/standards/webtips/webtips0032.html
Q12: いままでＨＴＭＬでやってた××をＣＳＳでやるにはどうすればいい？
A12: 下記をご覧あれ。テーブル・レイアウトは段組のＦＡＱ（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
＊IEの position:absolute; のバグを利用した擬似フレーム
１．標準モードにする
２．body {height:100%; overflow:auto;}
３．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
アンダーバー・ハックの方がいいか？
http://cssbug.at.infoseek.co.jp/detail/winie/b157.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:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。
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
おまいらまだCSSとかやってんの
はっきり言って時代おくれ
質問も回答も、激しくクドい感じでお願いしちゃうゼ？
http://pc8.2ch.net/test/read.cgi/hp/1137310503/l50
ルー大柴はよく英語を略すのか？
という文字列最後の３文字【.ed】が変な場所に現れます。
しかも、二重にです。
HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>001</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top">top</div>
<div id="main_wrap">
<div id="menu">menu</div><!--/#menu-->
<div id="main">main contents</div><!--/#main-->
<div id="bottom" align="right">CopyRight 2006 111 All Rights Reserved.</div>
</div>
</body>
</html>
div#top {
width:800px;
background-color:#ff0000;
}
div#main_wrap {
clear:both;
width:800px;
background-color:#cccccc;
}
div#menu {
float:left;
border:0px dashed #ffffff;
width:130px;
background-color:#00ff00;
padding:0px 0px 0px 10px;
}
div#main{
float:left;
width:660px;
}
div#bottom {
float:left;
clear:both;
width:800px;
color:#666666;
}
１、HTML宣言の後半部分のURLを消す
２、<!--/#menu--><!--/#main-->のコメントを消す
３、CSSでdiv#menuのpaddingをすべて0pxにする。
４、CSSでdiv#bottomのfloat:leftを消す
のどれかで解決できるんですが、決定的な理由がわかりません。
ただのバグというにはあまりにも解決方法が多すぎる気がするんですが・・・。
画期的な解決方法をご存知の方、いらっしゃいますか？
Mac OS9、Netscape7.02というドマイナーな環境ではこのままで正常に表示されるな。ｗ
win XPでも
Netscape4.8 Netscape6 Netscape7.1 Netscape8.0
Opera8.5 Firefox1.5
では正常です。
おかしいのはIE6.0だけ。
明らかにバグだとはわかるんですが、解決方法が多すぎるのでなんかスッキリしないんです。
またIEの不具合報告ですか
<dd>DD1</dd>
<dd>DD2</dd>
<dt>DT2</dt>
<dd>DD3</dd>
<dd>DD4</dd>
<dd>DD5</dd>
というのを
DT1 DD1 DD2
DT2 DD3 DD4 DD5
と並べて表示したいのですが
dt
float: left
clear: both
dd
float: left
だとWinIEで
DT1 DD1 DD2 DD3 DD4 DD5
DT2
となってしまいます。
どうやったら解決できますか
/* CSS・スタイルシート質問スレッド【51th】 */
http://pc8.2ch.net/test/read.cgi/hp/1137310503/l50
行くぞ彰ホームラン！センターオーバーホームラン！
弾丸ライナーだ！飛ばせ！運べ！彰！
俺が考えた歌詞ですよ！
弾丸ライナーだ！の後に「ヘイ！」とか「おい！」って掛け声を入れてスタンドでジャンプするの
とかいれると面白いかもしれない。
http://pc8.2ch.net/test/read.cgi/hp/1139885961/l50
メニュー中の日記は青、BBSは赤、といった感じにしたいのですけど。
どうぞよろしくお願いします。
もしかして不可能でしょうか・・・
スレタイわらた
CSSのfloatで以下のようなレイアウトは可能ですか？
「aaa…」は段落無しの連続した文章です。
aaaaaaaaa┌─┐
aaaaaaaaa│画│
aaaaaaaaa└─┘
┌─┐aaaaaaaaa
│画│aaaaaaaaa
└─┘aaaaa
クリアを忘れずに。
方法がありましたら教えてください。
なんでよりによってこのスレで質問する？
普通にwidthプロパティ。
ありがとうございます。
インライン要素にはwidthは使わない方がいいと書いてありました。
他には、tableにはwidthを指定できるので、
tdには比率が指定できればサイズが指定できると思ったのですが、
そのやり方は見つかりませんでした。
td要素はブロック要素ですが何か。
間違えていましたか。
ブロック、インラインの違いは、おおまかに
改行を伴うか伴わないかで覚えていました。
ただ、CSSチェッカーhttp://jigsaw.w3.org/css-validator/
でエラーが出るので、使ってはいけないのは同じだと思いました。
CSSチェックをしても、英語の変な文章が出てくるわけですね・・。
CSSバージョンがありましたら教えてください。
つーかこのスレで質問すんな。
http://pc10.2ch.net/test/read.cgi/hp/1171444150/
そういう症状の場合、letter-spacingが疑われますが、letter-spacingは使っていません。
ひとつひとつ検証してみたところ、 * { margin: 0, padding: 0, } で使っているmarginが原因のようです。
これは必要な要素なのでカットするわけにもいかないし、困っています…。
いままでも同じように設定しているのですが、何も問題はありませんでした。
何かアドバイスをしてくださる方がいれば、よろしくお願いします。
ちなみにmarginを1pxにしたら、若干行間があきました。
改行でできる隙間（＝マージン？）も0に、という解釈なのでしょうか。
釣りだと思うがマジレス。
・letter-spacingの意味を調べろ。
・CSSの基礎から勉強し直し。
<br>は空行を作るためのものではない。
そもそもの使い方が間違ってるからCSS勉強しなおせ。
2回以上改行する場面など無い。
<ul id="content" class="center">
という感じなんですが・・・
また文法的には正しいんでしょうか？
それの中の「要素」ってulだぞ？
多分idとclassの同時設定は、という意味だと思うが、可能。
ついでにclass複数も値を半角スペースで区切って可能。
ありがとうございます
<body>
<div id="container">
<h1>sss</h1>
<div id="navigation">
<p>aaaaaaa</p>
</div>
<div id="content">
<p>ccccccc</p>
</div>
</div>
</body>
これにcssで
body{text-align:center;}
h1{psition:absolute;}
#container{text-align:left;}
#navigation{float:left;
width:100%;}
#content{float:right;
width:20%;}
とxml宣言をしたため、中央ぞろえにtext-align:center;を使いました。
sssaaaa
cc
cc
cc
c
と表示されるのですが、ＩＥでは
aaaaaaa
sss cc
cc
cc
c
と開始位置がずれてしまいます。どうやって改善したらよろしいでしょうか？
釣り大流行らしいが、負けずにマジレス。
レイアウトと呼べる代物じゃないので、一から勉強して下さい。
webページにおいて実用性は一通りでは語れないはずですが？
そもそもあなたの予想しているものと違う場合だってあります。
問題の方は解決…ぽいことはできました。ありがとうございました。
あーざすｗｗｗｗｗ
すべて67の自演です。
／￣＼
| ＾o＾ |
＼＿／
土曜の夕方5時にクリック↓
http://studio.ameba.jp/
わかる人お願いしますm(_ _)m
table,td,tr {text-align:left;}
>>74
>>74
>>73
table * { text-align : left; }
http://vision.ameba.jp/watch.do?movie=238467
ｈｔｍｌソフトのプレビューでは、ちゃんと表示されるのですが
某ブログでは、色が変わらないのでｃｓｓでやってみようと
思っています。
[ テキスト ]
[ テキストテキストテキスト ]
上記のようにテキストの量によって自動で背景画像が可変するような
CSS指定をしたいのですが、これって可能でしょうか？
縦の可変はわかるのですが、横の可変がわかりません…
margin-top: 0;
と書いてあるところがほとんどなのですが
margin-top: 0px;
と書いても問題ないですか？
問題ないです
<body>
<div id="a">あ</div>
<div id="b">い</div>
</body>
■CSS中身
body {width: 400px; position: relative; margin-left: auto; margin-right: auto;}
#a {margin-top: 100px;}
#b {position: absolute; top: 70px; right: 0;}
これだと、「い」が「あ」から70px下の位置に表示されてしまいます
（IEだけは一番上から70pxの位置に表示される）
・「い」を、一番上から70pxの位置に表示したい
・「い」を、400pxで真ん中に寄せたBODYの右端に表示させたい
二つを満たすにはどうしたらいいんでしょうか？
お願いします
関係ないが、俺ボデーにいきなりwidthやらpositionって指定しない。
コンテナid作る。
<div id="main" class="index">
があったとして
div#main.index {
といった指定は通る？
そもそも文法的に正しいのかも気になる
IDとClassを同時に指定なんて滅多に無いから実用性は無いと思うが･･･
気になってググってみたけど見つけきれなかったんだ
その記述の必要性がなくない？
<div id="main">にして
各要素にclassを使うってので良いと思うが。
ってのを<div>で出来ませんか？
検索した結果<div align=left>では、できたのですが、
valign=bottomが出来ませんでした。
ちなみにHPとかで使うのではなくテーブルのセル内で左側表示と
右側の表示というので使うつもりです。
誰か詳細がわかりましたらよろしくおねがいします。m(_ _)m
http://hiro.pya.jp/soku.php
http://hiro.pya.jp/soku2.php
http://hiro.pya.jp/soku3.php
全然スタイルシートについて質問してないし
vertical-alignについて聞いてるのかと思ったら
左右とか言い出して意味不明だが、こういうことか？
<HTML>
左側表示したいセル: td class="left"
右側表示:したいセル td class="right"
<CSS>
td.left {text-align:left}
td.right {text-align:right}
コンテンツ領域内と外背景の間をグローのようなぼかし効果をしているサイトを見た事がありましたが
bodyタグに背景グラデーション画像を指定するとして、このグロー効果はどうやって付けているのでしょうか
グローの背景画像付ける為だけにコンテンツ領域全体を新たにdivで囲む事も考えましたが、必要の無い無駄div作るのもどうかと思って・・・
この方法以外に良い方法などあったら教えて頂けませんでしょうか
書き足りていませんでした、すみません
ここで聞くなよ。
取り合えず手本となるサイトがあるなら、ソース見れ。
あんたの説明から想像するに、div使う以外考えられないけどな。
ぐぐって色々調べ物をしていた時辿り着いたサイトなので、どういった検索で行けたのか覚えていないもので・・・
やっぱりdivが必要なら諦めようと思います、レスありがとうございました
border-spacing や border-collapse も使えないようですが、
セル間隔をなくすには、cellspacing属性を使うしかないないのでしょうか？
IE(Mac)に限らずpadding。
IE(Mac)なんて使ってる奴は希少。
うーん、paddingプロパティはcellpadding属性の代用にはなりますが
cellspacingとは異なりますよね？
それともMacIEではpaddingでセル間隔を調整できるのでしょうか？
当方ボックスモデルの理解はできているつもりですが
試す環境がないのでMacIEの仕様の詳細がわからないのです・・・。
border-spacingがその代用。
border-collapseがseparateのときのみ。
テンプレのQ12にあるだろが。
CSSの効く携帯ブラウザなら普通と一緒
DoCoMoから確認したところ反映されていなかったので困っています
やはり携帯対応タグはないんでしょうか？
CSS未対応の機種ではおそらく無理かと。
そうですか…
やはり携帯からみて下線を消したり見えなくする方法はなさそうですね
ありがとうございました
font: 70%/1.5em sans-serif;
この、"70%/1.5em" というのはどういう意味なんでしょうか？
教えて下さい。
１つのページにリストを表示して、複数のリストグループがあるとき、
１つは横並びのリスト、もう一つはたて並びのリストにしたいのですが、
float:leftで設定すると、<li>全部横並びになってしまうんですけど
どうすればいいでしょうか？
以上よろしくお願いします。
何の為にclassやidがあるのか考えよう。
何のためにCSS質問スレがあるのか考えよう。
http://news.ameba.jp/domestic/2007/12/9064.html
ちょwww
qq 'xxx';
でやればいいと気付いた。
子供セレクタって知ってるか？
いあ、ダブルクォーテーションのエスケープだけが問題だから。
ｿﾚさえクリアできれば、まぁって感じで。
gä
http://vision.ameba.jp/watch.do?movie=692032
どうにも、ならんくなるぞ。
http://www.siteup-system.com/
ただし画像などもともとwidth属性を持つ要素の場合は無くても可。
…ってことらしいんですが、
<div style="float:left;">
<img src="img.jpg">
</div>
<div style="float:left;">
<img src="img.jpg">
</div>
のように、フロート要素内に画像のみ、という場合でもやはり
（上記例の場合はdivに対して）width指定は必須？
CSS2.0はwidth必要、CSS2.1はCSS不必要。
divの最小幅は画像で引っかかって決まるだろうし。
おまえ・・・・
結局、CSS2.0では本来は必要だけど、ブラウザが
なんちゃって表示してくれる、って感じですね。
で、CSS2.1ならOK（autoで適宜解釈してくれる）ってことですね。
<p class="icon">ここに文字</p>と書いて
外部cssで画像を指定することは可能でしょうか？
「css 画像」でググったのですが、解決できなかったのでアドバイスいただけると嬉しいです。
もしアイコンみたいな小さい画像だとしたら、
背景画像で左上に表示して、あとは画像の大きさに合わせて
paddingとかtext-indentとかで中身をずらせばそれっぽくできる。
これに尽きるだろ、わざわざ CSS でするもんでもない
てか、手書きって、<p class="icon">も手書きじゃねぇか
方法はいくらだってある、あんたの言う手書きってのはメモ帳でって事かい
ならテキストエディタ使え
画像のファイル名を変えたら修正が大変だってかい
なら置換使え
他にも定型のコピー＆ペーストなり、扱いやすいファイル名に設定するだの、いろいろ出来ることがあるだろうに
この手間さえも省きたいんであれば”手書き”ってやつはやめときな、向いてないわキミには
例えばclassを使ってtableのth要素だけを指定したい場合どうすれば良いのでしょうか？
<html>
<body>
<table class="test">
<tr><th>あいうえお</th></tr>
<tr><td>かきくけこ</td></tr>
</body>
</hmlt>
color: pink;
}
color: red;
}
color: yellow;
}
「au、…」はHTMLの文字例です。背景はCSSで指定しています。
文字例をCSSでピクセル単位で動かすにはどうすればいいでしょうか?
その import.css には、
@import'style1.css';
@import'style2.css';
と、二つのスタイルシートファイルが更にインポートされるようにしてあります。
この style1.css と style2.css 両方に、
style1.css ： 文字の太さは通常の太さで、文字色は青にする。
style2.css ： 太文字にし、文字色は赤にする。
というような、異なる a 要素のスタイルが書いてある場合、
どちらの表示が優先されるのでしょうか？
また、 style2.css での記述を必ず優先させるためには、
!important を書くだけで平気でしょうか？
よろしくお願いします。
どちらが優先されているかがイマイチ分かりません…。
後からインポートした方(style2)の方が優先されるのでしょうか…？
PCは昔のことなんか振替んねぇんだよ
大柴の話をちゃんとしろよ
しっかり大柴のトークをトゥギャザーしようぜ
もはやそなたはルー語をマスターしてるな
幅が設定されるみたいなんだけど、これって仕様通り？
例えば
<table style="width:500px;border:3px solid #000;">
とかってした場合に、ボーダーを含めた幅が500pxになるみたいなんだけど。
（標準モードでも互換モードでも同じ）
仮に仕様通りの解釈だとして、どういう理屈になるのかな？
ｼｭｯ
ｼｭｯ ﾊ,,ﾊ ｼｭｯ
ﾊ,,ﾊ彡（ ﾟωﾟ ),ﾊ
（ ﾟωﾟ )彡ミ（ ﾟωﾟ ) お断りします
＿(__つ/￣￣￣/＿
＼/ /
<img src="hoge.png" width="100" height="100" style="position:absolute;top:250px;left:250px;">
</div>
画像の赤いエリアからはみ出しているところが隠れるようにしたいと思っています。
IE7だと上の書き方でできましたが、
Opera9だとはみ出している部分が表示されてしまいます。
Operaでも可能な方法を教えてください。
divのほうにも絶対座標を指定すればいいんですね。
<li>あああ</li>
<li>いいい</li>
</ol>
としたとき、数字と文字（あああ）の隙間が空くのですが、
これを詰める方法はないでしょうか？
IE対応？そんなゴミブラウザｼﾗﾈｰﾖ
ここはルー大柴スレだ
返品して貰えますかね？
で印刷時の改行位置をやってるんだが、
印刷プレビューしてみると、divで指定しているブロックの区切りの間がものすごい開いて、
改行ポイントまで一つのdivブロックを押し下げるって状態になってる。
ようするに、ある区間、真白な部分ができている状態。
これってどうすればいい？
『3日で作るPHPアプリケーション』秦崇・遠藤諭 アスキー
という薄っぺらい本です。
PHPについての本ですが、なぜかCSSについても数頁ふれていて、そこでこの間違いが。
単なる誤植ではなく、著者が根本的に勘違いしてるんだと思われまする。
そこのまちがいくらいじゃ返品はできないでしょ
指摘すれば図書券500円くれるかもよ
間違っています。
以上。
↓次どうぞ
<head>
<style type="text/css">
h2{
background-image:url(nav_bk.gif);
float:left;}
</style>
</head>
<body>
<h2>MMENU</h2>
<h2>MMENU</h2>
<h2>MMENU</h2>
<h2>MMENU</h2>
<h2>MMENU</h2>
</body>
って試しに書いたら
http://www2.uploda.org/uporg1359650.png
みたいに左のだけ上にズレルのは何故
聞いてばっかりですまないがコレってどういう理屈？
一応、UAによってmargin,paddingの解釈は違うので最初に全部殺しておくが吉
bodyでwidthを指定すればできると思いましたが背景画像だけは全体に広がってしまいます。
a) box作ってそれに背景指定
b) 画像を表示したい幅または高さに加工し、repeat方向をyまたはx指定
これはJavaScriptかな？
そういうのはCSSを諦めてtableを使ってみたりしてるのかい。
折角、ぶらさげた金玉を皆に紹介しないでどうする。
それすらしたくない程に金玉が恥ずかしい存在なら
引きちぎってしまえ！！
それとは別に特定の場所から特定の場所までの色を別の色に指定する方法はありますか？
前にサーバーが極端に重いときに読み切れなかったりしたんだけど。
ずらずらと長い1つのCSSファイルか、
部分部分に分けた5つぐらいのCSSファイルか
どっちがいいんだろうね
('(ﾟ∀ﾟ∩_ 僕をどこかのスレに送って！
／ヽ 〈／＼ お別れの時にはお土産を持たせてね！
／|￣￣￣|.＼／
| ﾓﾂ煮 |／
￣￣￣
現在の所持品：新聞、∈(･ω･)∋ﾀﾞﾑｰ、ゆうパック、ダム穴、NCSA Mosaic
8kbで重いんか？
土産：糞IE
行き先：http://society6.2ch.net/test/read.cgi/kokusai/1196906218/
cssだけで10kbいったりすると、長くなったかもと思う。
一回読み込めばいいから気にならんけど。
cssにした一番のメリットは転送量だったが、少しでも軽くしたい。
50はさすがに個別ファイル化したほうが見やすいが、
idとnameによって一つのファイルに詰め込めるから詰め込んでいるが、
こりゃちょっとやりすぎだな。テーブルだとさらに増えそうだ。
どの程度のclassとidを使用するかによって、
最終的な量が決定するわけだ。
シンプルでidもclassも指定しなければ問題はないけど、
段組とかやりまくっていると、結構な量になるね。
こう移ると見た。
CSS段組も飽きると質素な、ほとんど文法のみのhtmlになるのかな。
歴史的な系譜としては、
シンプル→テーブル→CSS
だよ。
発端は紙媒体のデザインをwebで表現したいことなんだから。
デザイン的には悪くないんだけど
カッチリやればやるほど融通が利かなくなるな
文字サイズを最大にしたら崩れたり、cssでキッチリサイズ指定するから
IE7は描画が特殊だからborder指定した瞬間、文字サイズ変更で崩れるのが確定。
2カラムも好きだが、基本1カラム。
3カラムとかなんですか……なんであんなごちゃごちゃしたものが好きなんだろう。
3カラム→2カラム→ほとんど1カラムになったよ
あれって作成者がアフィ貼り付けるのに便利ってだけじゃね？
これってCSSで可能ですか？
可能だとしたら、どうやってレイアウトすればいいのでしょうか？
特に下の両サイドあたりが、よくわからなくて。
どうかお願いします。
どうかお願いします。
後方互換は無視する。考えると面倒だ。
body {
margin:auto;
width:800px;
}
<body>
ここの中のものが中央ブロック揃えになりますよ
</body>
当たり前だが、後方互換を考えたらbodyではなくdivに指定する必要がある。
互換モードが発動するとbody要素ではセンタリングできないんだ。
この場合、メニュー部分は250pxで本文部分は500pxでいいだろう。
後方互換の場合は全体にtext-align:leftを指定して、
bodyにtext-align:centerを指定する。さらに中身は全部外側にdivで外側divにwidth指定とmargin:autoだ
え？ text-alignはボックス位置の指定ではなくテキストの位置指定だって？ MSの製造ミスですよ。
width: 500px;
float: right;
}
#MENU {
width: 250px;
float: left;
}
<div id="CONTENT">
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
</div>
<div id="MENU">
<p>関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報</p>
<p>関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報</p>
<p>関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報</p>
</div>
段組はこういう感じ。お粗末様
は、「このページの作り方」を聞いてるんじゃなくて
「このページで紹介されているテンプレート」の作り方を
聞いてるんじゃないかと思うんだ。
そのとおりでございます・・・
>>225さん
ありがとうございます。
いただいた内容も全部理解しきれていないのですが・・・
背景の写真とか、下のメニューの伸縮を考えると少し違うような？
中身のテンプレの作りを教えていただけるとありがたいです。
もし、私の勘違いだったらすみません・・・
どうかお願いいたします。
もしかしてflashの中身か……
上半分と下半分はまず最初にdivでグーピングして分割する。
別にフレーム使ってもいいけどさ。
上はタブメニュー部分をulリストにして丁寧にfloat
そこから内容は2カラム段組。さっき表示したパターンのdivを採用だ。
縦に表示が崩れると困る場合はここでoverflowを使う。
で外枠のdivに角丸背景画像を表示して上は完成
下は三カラム段組。一個ずつ丁寧にfloatしていく。
floatブロックの角丸は背景画像使うと楽だからそれ使え。
さらに外枠divにwidth指定。marginの指定も忘れるなよ。
で、あまった背景部分はおそらく別の背景画像を表示する。
下3カラムはおそらく固定だろう。上は伸縮しそうだけど。
がんがれ
背景色は#fffかな？
もしくは下三カラムは角丸+縦横の線を描いたものを背景画像で指定かな？
すると中身は固定だが、背景部分のお陰で大きく見ると伸縮しているように見える。
この容量だと1024よりも大きい解像度で見ることはまずないだろうから、気にしないでいいだろう。
気になるのなら真ん中だけ可変幅にするとか出来なくないんだけど、そうすると角丸のために余分なdivが二つ必要になる。
とりあえず四つのブロックに幅指定する。
上と下は別物として扱う。下はfloatする。
これだけね。すまんね。長々と。
俺と好みが近いな。
他のテンプレートも紹介してくれ！
side1、main、side2を間隔なく配置し、それをブラウザの中央に表示したいと考えています。
この３つの要素をfloat:leftで左寄せにし、contentsというdiv要素の中に記述しました。
marginは0px、paddingも0pxと指定し、各要素のwidthはside1が9px、mainが740px、side2が9pxに
設定しました。合計で758pxなのでcontentsのwidthを758pxにしましたが、side2がside1の真下に配置されてしまい困っています。
IE6で確認しただけなのですがなぜかわかる方いましたらご教授お願いします。
じゃないと崩れる
IEは横幅合計値とコンテナボックス横幅が同じだと下に落ちる有名なバグがある。
外側のdiv（この場合、contents）にpaddingかmarginを指定するのが定石だよ
で、さらに外側のbodyをセンタリングするといい感じ。
もしくはmainのみでpaddingかmarginを表示して幅指定しない
>>237
すばやい指摘ありがとうございます。
width761pxにしたらしっかりなりました。
>>238
<body>
<div class="contents">
<div class="side"><img src="aaa.jpg" width="9"></div><!-- end side-->
<div class="main">
<div class="t_logo"><img src="logo.jpg" width="220"></div><!-- end t_logo-->
<div class="t_photo"><img src="photo.jpg" width="520"></div><!-- end t_photo-->
</div><!-- end main-->
<div class="side"><img src="bbb.jpg" width="9"></div><!-- end side-->
</div><!-- end contents-->
</body>
こんな感じになっています。logoとphotoにもfloat:leftつけてきっちり配置しているので
（デザイン上1pxも空けたくないので・・・）こんな面倒なことになってしまって。
背景画像として組み込んだほうが、管理しやすいってことだよ
特にimgのみのdivってのはさほど意味がない
ごちゃごちゃとソースをいじるよりは一発なんだ
ご指摘ありがとうございます。
書き忘れましたが、背景に組み込みめばよかったのですが、デザイン上背景にすでに別の画像を組み込んでいたので
仕方なくこのような形をとりました。ブラウザによっては何個か背景画像を組み込めるらしいのですが通常は1つだけらしいので・・・
何か別の簡単なやり方などがあればご教授お願いします。
一つの要素に表示できる背景画像は一つ
旧IEを考えればhtmlはムリなので、
body以下の要素になる
つまり、bodyやdivなどがこの場合最有力候補
固定は旧IEのバグで一個しか固定できないが、普通に考えたら一個固定できれば十分
後は自分で考えろ。そうじゃないと成長しないぞ
contentsが内包するdiv三つの画像を合体させて、contentsに背景表示する
もし、side main logo photoに背景表示されている場合はもう諦めるしかないけどね
それに、ソースを見る限り内包しているのはimg要素であってテキストではない
この場合テキストを追い出すテクニックもあるが、確かにこりゃfloatしかないわ
おせっかいすまんね
これってpx指定でも崩れる？
どっか解説してるページとかあったら教えて。
どうもです。
参考になりました。自分なりにいろいろ試してみます。
dottedを指定しても、FirefoxとSafariでだけベタの直線になってしまいます。
スタイルシート適用時は点線の罫線で、非対応のときは通常の罫線を表示したいのですが、
うまくいきません。
画像付きボタンを img src= で書いたのですが、FireFoxだけちょっと横長で
小さくなりません、小さくするにはどうしたらいいのでしょうか？
やはりしかたないのですね。罫線の意味としては変わらないので、そのままでいくことにします。
じゃあ何なの? 検索してヒットする質問スレは上級者用だけだし、「スタイル」で探して辿り着いたのだが。
マジレスすると
ネ タ ス レ 。
「CSS初心者」で検索汁
間違ってここにきたとしてもCSSの質問じゃないことはあり得ない件
お前のほうが質問者よりスレタイ間違えてね？
カスケーディングスタイルシートではなく単にスタイルシートについて質問する人が
多いのではないかと。
JSSやXSLの質問なんてあったか？ｗｗｗ
そんなことよりも、どっちのスレもCSS用スレだから無関係。
「スタイルシート」で検索したあと、「シート」を削って再検索。
番号を順番に振っていきたいのですが，
こういうことってスタイルシートだけでできるのでしょうか？
<div class="title">たいとる</div>
<div class="naiyou">内容</div>
<div class="title">たいとる</div>
<div class="naiyou">内容</div>
<div class="title">たいとる</div>
<div class="naiyou">内容</div>
のような繰り返しがあるときに，title タグの中の
文字列の先頭に番号を振っていきたいのですが・・・・
今は連番を返してくる関数を書いて，
<div class="title">
<script type="javascript">
renban();
</script>
たいとる
</div>
のようにしているのですが，面倒で・・
ol
質問スレに行きなさい。ここはネタスレ
順に横に並べていって、横まで行きついたら改行するっていうのを
cssでやろうと思うのですがどのようにすればいいでしょうか？
ありがとうございます。
フロートでできたのですが、一つ一つのテーブルの縦の長さが違うため、ブラウザの端まで来て回り込む際にガタガタになってしまいます。
ブラウザの横サイズを決めちゃう以外で何かいい方法はあるでしょうか？
下記のような同じ構成のボックス（四角は画像など）を
回り込ませてレイアウトした際にIE6でまれにボックスの
文章の最後から5文字くらいが外にはみ出してしまうことが
あるのですが対処方法はないでしょうか？
■こうなるはずが・・・
┏━━┓ ┏━━┓
┃ ┃あいうえお ┃ ┃さしすせそ
┃ ┃かきくけこ ┃ ┃たちつてと
┗━━┛ ┗━━┛
┏━━┓ ┏━━┓
┃ ┃なにぬねの ┃ ┃まみむめも
┃ ┃はひふへほ ┃ ┃やゆよ
┗━━┛ ┗━━┛
■IE6でたまにこうなる
┏━━┓ ┏━━┓
┃ ┃あいうえお ┃ ┃さしすせそ
┃ ┃かきくけこ ┃ ┃たちつてと
┗━━┛ ┗━━┛
┏━━┓ ひふへほ←────左のボックス内の後ろ5文字くらいが
┃ ┃なにぬねの ┏━━┓ この辺に分身として現れる
┃ ┃はひふへほ ┃ ┃まみむめも
┗━━┛ ↑ ┃ ┃やゆよ
│ ┗━━┛
│
ここにきちん文章があるのに
IE6のfloat関連バグは山程あり、情報も山程あるんだからググレカス
最後に<br>入れてみ
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT-JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style>
div#foo { width: 100px; height: 100px; border: 5px solid #000; }
div#foo p { display: none; }
</style>
</head>
<body>
<div id="foo"><p>FOO<p><div><img src="./foo.gif" width="100" height="100" />
</body>
</html>
例が変で申し訳ないですが、
上記HTMLを出力すると、foo.gif のボトムに数ピクセルの隙間が必ずできてしまいます。
対応方法はあるのでしょうか？
この現象はIE6のみで発生します。
こんな風にしてみたらどうかな？
div#foo p {
display: none;
margin: 0px;
}
変わりませんでした。
img {vertical-align:bottom;}
色とか文字サイズを1つ1つ指定していくのは大変・・・
もっと効率よく使いたいので変数が使えればいいな〜
あああああああああああああああ
あああああああああああああああ
いいいいいいいいいいいいい（改行）<!-- 先頭2文字分あき -->
いいいいいいいいいいいいい（改行）
ううううううううううう（改行）<!-- 先頭4文字分あき -->
ううううううううううう（改行）
こういうのが作りたいんですが、p ではなくspanでできないでしょうか。
p.3 {
margin-left: 3em
}
padding
初心者な質問すぎて申し訳ないです！
（テンプレも読んだのですが上手く行かず）
<div style="text-align: center;"><img ほにゃ/></div>
ならうまくいくのですが、CSSを別ファイルにして
test.css:
.centering{text-align: center;}
test.html:
<div class="centering"><img ほにゃ/></div>
とすると左寄せになってしまいます。centering クラスの中に
margin: 0px auto;
display: block;
やら何やらいろいろ足してみてもだめです・・・何が間違っているのでしょうか？
・text:alignはインライン要素に有効
・imgはインライン要素
・divはブロックレベル要素
・IEは糞
お返事ありあとうございます！
上３つはわかったのですが、
一番したの「IEは糞」というのは・・・？
バグが多いと聞いたことがありますが、そういうことでしょうか。
もう３時間以上この問題で右往左往して疲れてしまったので、
作業は明日にします・・・ああ、どうして画像を中央に持ってくるだけで
こんなに面倒くさいのか・・・<center>タグとか<div align>とか
使いたいなあ、正直・・・
背伸びしても仕方ないのです。
非推奨のタグって使っても大丈夫なんですかね？
ある日からポンと使えなくなりそうで怖いです・・・
（現実問題大丈夫なんでしょうけどねー）
まず標準モードにしてみたらどうかな
filter:Alpha(opacity=70)
をかけているんだけど、
divの中の画像にはかからないようにするにはどうすれば良いですか？
img { position: relative; }
そんなのはIE独自プロパティでCSSじゃねえよスレチ。
解決しました。
即答ありがとう、すれ違いごめん
外部スタイルシートから呼び出すことはできないんですか？
目的のhtml文書のbodyに組み込むしかないんでしょうか。
外部スタイルシートから呼び出せるよ。
うまくいかないとしたら、どっか記述間違ってるんじゃないかな。
回答ありがとうございます。安心しました。
どっか間違ってないか見直してきます（｀・ω・´）
box1(div)のheightに固定値を指定すると「余白」の色が
box1で指定した背景色（仮に青とする）になるのですが、
autoにすると、青になったり白(box2とbox32の背景色）に
なったりします。
高さ以外に違いがないと思われるページで、違う色になります。
高さが関係するのかと思って調べたのですが、
高さの関係が、ｘ>ｙ>ｚになるｘとｚが青で、ｙが白になるので
関係ないような気がしています。
table1とbox31の高さは常に同じで、table1の高さの方がbox31の
高さより大きく、box32の高さが可変です。
どういう原因が考えられるのでしょうか。
ｂｏｘ１
ｔａｂｌｅ１ ｂｏｘ２
ｂｏｘ３１
余白 ｂｏｘ３２
よろしくお願いします。
ｔａｂｌｅ１とｂｏｘ２はｂｏｘ１の要素です。
ｂｏｘ３１とｂｏｘ３２はｂｏｘ２の要素です。
・boxの挙動がおかしいと思ったら、borderを付けて確認するのが基本
・ソース出せ馬鹿
現在は
onclick="window.open('view/research_capital_view.html')"
を使用しています。
これをスタイルシートで実現する方法はないのでしょうか
JAVAScriptで行うとHover設定がまったく反映されないのと
構造が綺麗にならない点が不満です。
JSだとかCSSだとか以前の問題だ
tableをaの中に入れるのは間違い
それは、分かっているから、JAVAScriptでやっているわけでして
とはいえIE、Opera、FireFoxで挙動は全然違いますが、
aの中にTableを無理やりぶち込んだほうが、
まだ求めている物に近い動作はするですよね。
特にFireFoxはそのものズバリの動作をしてくれてしまいます。
CSSで細工して、そのように動かすことが出来ないか？
という質問なのですが
ここはCSSの質問スレではないのですか？
htmlにはa要素にtarget属性がありますが、HTML4.01で非推奨、
xhtml1.1では廃止されました。
cssで動的な指定はできません。
Hover以外に動的な細工をする方法はないんですね
trやtdには出来てもTable自体にHoverが有効でない以上
手法はなしという事なんですね
ありがとうございました
<table class="box2">
<tr class="box3">
・・・・
って構造だとbox1にfont-size指定してもbox3内には利かない？
えっ
tableをaの中に入れてはいけないのか…。
table全体をa nameで囲んだりよくするのだけど。
a nameならcaptionやhxに付けた方がスマートではないかと
ヘッダやフッタを付けたいのですが可能ですか？
<link rel="stylesheet" type="text/css" href="print.css" media="print">
printcssは印刷のときだけ適用される。
a hrefだろうがa nameだろうが
インライン要素でブロック要素を囲むな
HTMLから勉強してこい
web初心者スレでも質問させていただいたのですが
あちらなんだか荒れてるみたいでスルーされてしまったので
こちらでも質問させていただく失礼をお許しください。
<STYLE TYPE="text/css">
<!--
TABLE {font-weight:bold;}
-->
</STYLE>
でページ全体の文字を太くしたのですが、一部分だけ細字に戻すことはできますか？
よろしくおねがいします。
細くしたい部分に
font-weight:normal;を指定
できました！ありがとうございます！
スタイルシートの効果を部分キャンセルする方法ばかり考えていました…。
後続が絶対上にしかならないのでしょうか？
<!-- 例HTML -->
<div id="satou">
<div id="sio"></div>
<div id="solt"></div>
</div>
/* 例CSS
++++++++++++++++ */
#satou{
width:45px;
}
#sio{
float: left;
width: 100%;
height:30px;
margin-bottom: -15px;
background-color: #FFF;
}
#solt{
float: left;
width: 100%;
height:30px;
background-color: #000;
}
というコードの時の、重なり方についてです。
#FFFが15px+#000が30px、#FFFが30px+#000が15pxとコントロールできないのでしょうか？
position+z-indexで可能
「padding-leftとかpadding-rightの値にautoとかねーよw」とか言われる…。
これって廃止になったの？使わない方がいいんだろうか？
div style="overflow:auto"を使って、サイドバーのようなものを作りたいのですが、
下のようにしたとき、
IEなら画面を小さくして、div.sidebarの中身がはみ出るときちんとスクロールバーが出るのですが、
firefoxで表示させると、divの中身が全部表示できるだけ大きくなってしまいます(スクロールしない)
うまくfirefoxで表示できる方法はありませんか?
<html><body>
<table style="width:100%;height:100%;">
<tr>
<td colspan="2" style="height:1;background-color:#f00"> </td>
</tr><tr>
<td style="width:20%;background-color:#ff0">
<div id="sidebar" style="overflow:auto;height:100%;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</td>
<td rowspan="2" style="background-color:#f0f"> </td>
</tr><tr>
<td style="height:1;background-color:#0ff">a</td>
</tr></table>
</body></html>
作った（といっても改変可サンプル変更）のおかしな部分を実際見てもらって
間違いの質問をしても大丈夫でしょうか？
もし、もっとふさわしいスレがあったら誘導して頂けるとありがたいです…
質問は、IEでは出るのにサファリ、火狐ではでないスクロールバーについてです
hoverで別の画像を表示したいのですがうまくいきません。
ご教示ください。
html
<div id="header">
<ul>
<li><a href="#"><img src="image/home.gif" alt="ホーム" name="home" width="160" height="50" id="home" /></a></li>
<li><a href="#"><img src="image/profile.gif" alt="会社概要" width="160" height="50" id="profile" /></a></li>
<li><a href="#"><img src="image/service.gif" alt="提供サービス" width="160" height="50" id="service" /></a></li>
<li><a href="#"><img src="image/faq.gif" alt="FAQ" name="faq" width="160" height="50" id="faq" /></a></li>
<li><a href="#"><img src="image/contact.gif" alt="お問い合わせ" width="160" height="50" id="contact" /></a></li>
</ul>
#header ul li a#home:hover という感じでそれぞれ指定するだけではダメなのでしょうか？
a#homeなんかどこにも存在してないだろ
id="home"を#homeで指定してもダメでした。
#header ul li #home:hover、#header ul li #home a:hoverも同じく・・・orz
可変？それとも固定？
が見れなくなってるよー
根本がおかしいだろ。なんで画像にID振ってるんだ。
javascriptの画像切り替えと混同してないか？
普通は
<ul id="Menu">
<li id="Test"><a href="#"><span>TEST</span></a></li>
</ul>
てな感じでタグ書いてcssは
#Menu ul li a { display:block; width:200px; height:30px; }
#Menu ul li span { display:none; }
li#Test a:link,li#Test a:visited { background:url("test1.gif") no-repeat 0 0; }
li#Test a:hover,li#Test a:active { background:url("test2.gif") no-repeat 0 0; }
CSSの画像切り替えは普通背景でやる。
347みたいにデフォ画像を画像タグでやるんなら
マウスオン時にデフォ画像をvisibilityで隠すなりして背景にマウスオン画像を敷く、でいけるかも。
どっちにしろ画像じゃなくliかaにid振るべき。
<meta http-equiv="Content-Style-Type" content="text/css">
これが記入されていれば
<link rel="stylesheet" href="hogehoge.css">
<style>〜</style>
これでかまわない。
<link rel="stylesheet" type="text/css" href="hogehoge.css" />
<style type="text/css">〜</style>
やはりこう書かないとだめだ。
さて、どっちが正しい？
<div class="box">
<a href="test.html"><img src="test.gif" ></a>
</div>
div.box {
background-image:url(test2.gif);
z-index:2;
}
img {
z-index:1;
}
divの中にある以上無理だろ。
z-indexは同階層のものに対して使う。親子関係に口は挟めない。
なんでそもそもそんな馬鹿げた事やろうとしてんだ。
divの中の画像を消してdivの背景出したいならvisibility:hiddenで消しゃいいだろ。
こんな感じです。
<div id="A">
<div id="B">hoge</div>
<div id="C">moge</div>
</div>
ブロックBの高さを100px、
ブロックCを残りの長さ(ブロックAの高さから100pxを引いた値)にしたい場合、
CSSではどのように指定したら良いでしょうか？
div#A{
height:80%;
}
div#B{
height:100px;
}
div#C{
position: absolute;
top: 100px;
bottom: 20%;
}
最後の属性だけfloat:noneを指定すれば、親ブロックにその分の領域が発生する
（全部floatだとheightがゼロになって背景などが描画されないので）
……と期待するのだけど、Firefoxなどで表示すると、まるでclear:leftが指定されたかのように、
そのブロックが右に流し込まれずに下に落ちてしまいます。
<ul><li>hoge</li><li>hoge</li><li>hoge</li><li class="end">hoge</li></ul>
li{width:100px; float:left;}
li.end{float:none;}
これは、ただしい描画なのでしょうか？ また、どういう解釈になるのでしょうか。
ブロック要素はfloatしない限り基本的に横に並ぶことはない。
なのでfloat:noneを指定されれば下に落ちるのは当然のこと。
だからそれで問題ない。
<div class="hogehoge">
<ul>
<li>hoge</li><li>hoge</li><li>hoge</li><li class="end">hoge</li>
</ul><span class="end"> </span>
</div>
.hogehoge { background:#fcc; }
li {width:100px; float:left; background:#ffc; }
span.end { display:block; height:1px; width:1px; overflow:hidden; clear:left; margin-top:-2px; }
body{border:5px solid; border-color:#000000 #0000ff;}
div{border:solid #000000; border-width:5px 3px;}
特に間違いは見当たらないが
何が問題なんだろうか
正しいかどうかはワカラン。別に問題は無さそうだけどな。
個人的には一括設定のトコでborderのtyoeの前にwidthが来てるトコとかが気になるがw
>borderの一括設定とborder-widthを同時にやってる
線の太さや色をtop、bottomなどで変えたいときはむしろ今回のように別に指定しなければならない
>一括設定のトコでborderのtyoeの前にwidthが来てるトコとかが気になる
値さえ合っていれば、順番はどちらでも大丈夫
あーごめんなさい、しなければならないはちょっと言い過ぎ
ベースをborderで指定して個別に上書きというやり方も可
<tr>
<td style="width:10px;">aaa</td>
<td style="width:10px;">bbb</td>
<td style="width:10px;">ccc</td>
・・・・
ってやると5個目のセルくらいからセルの左端の座標が1pxくらいズレ出すんだけど
borderのせい？
セルの左端の座標を全部正確に10の倍数にするにはどうしたらいい？
display:inline-block
あまりオススメはしないが、
状況によっては使い道もあるかもな
なんでお前がしきってるんだよおおおお！！！
ちゃんとスレタイに質問スレって書いてあるじゃんかよおおおおお！！！
仕方なく、id・classの名称を変えて二度書、三度書きをしています。
Markup Validation Serviceでエラーを出すことなく、効率よく書く方法が
あるのでしょうか。
なんでお前がしきってるんだよおおおお！！！
ちゃんとスレタイに質問スレって書いてあるじゃんかよおおおおお！！！
ﾂﾏﾝﾈ
10のいちが各ブラウザ安定しません
各<li>タグににパディングをいてれ調節しているのですが・・
テーブルのしかできませんか？
ここネタスレだから
なんでお前がしきってるんだよおおおお！！！
ちゃんとスレタイに質問スレって書いてあるじゃんかよおおおおお！！！
ちょっと気になったもんで
> 他人のｃｓｓ見て勉強中なんだけど、全体幅に780pxが多いのは何か理由があるのかね？
> ちょっと気になったもんで
IE6の標準設定でギリギリA4縦に収まる幅が770〜780px
そういうことだったのか！？
ありがと
無視すんなよ
サイドバーの幅はデフォなら
横スクロール出ず全部入るのが790pxくらいまで
<table border="1" cellspacing="0" cellpadding="20"><tr><td>あ</td>
<td><table border="1" cellspacing="0" cellpadding="0"><tr><td>あ</td></tr></table></td>
</tr></table>
<table border="1" cellspacing="0" cellpadding="0"><tr><td>あ</td>
<td><table border="1" cellspacing="0" cellpadding="20"><tr><td>い</td></tr></table></td>
</tr></table>
それで↓のようにしたのですが
■CSS
.hoge { border: 1px solid black; border-spacing:0; border-collapse:collapse; }
.hoge td { border: 1px solid black; padding:20px; }
.hage { border: 1px solid black; border-spacing:0; border-collapse:collapse; }
.hage td { border: 1px solid black; padding:0px; }
■HTML
<table class="hoge"><tr><td>あ</td>
<td><table class="hage"><tr><td>あ</td></tr></table></td>
</tr></table>
<table class="hage"><tr><td>あ</td>
<td><table class="hoge"><tr><td>あ</td></tr></table></td>
</tr></table>
テーブルの中のテーブルのpaddingが上位のpaddingが優先されてしまうみたいなんですけど
どうすれば良いのでしょうか？
だからここ質問スレじゃねーっての
なんでお前がしきってるんだよおおおお！！！
ちゃんとスレタイに質問スレって書いてあるじゃんかよおおおおお！！！
他のスレに移動します。
スレ汚して、申し訳ありませんでした。
a:hover { 〜 }
のように書いて、マウスが乗ったときに色かえたりできますけど、これを
<a style="〜">のように<head></head>に書かないでやることはできますか？
.css 外部ファイル
↑のファイルの中の「index.html」の右側のサイドメニューの横幅をかえたいんですが、
「style.css」の
/*サイド（一番右側）コンテンツ
------------------------------------------------------------------*/
#side {
float: right;
width: 176px;
margin-left: 8px;
padding: 10px;
この部分のwidth: 176px;の176pxの値を大きくすると大きくはならず、
形が崩れてしまいます。
どうすればサイズ変更できるでしょうか？
の上にあるボタンみたいに、開いたページに対応した所だけを変化させるにはどうすればいいのでしょうか？
http://fukia.6.ql.bz/
上記のサイトを作っているんですが、IEで見てみると、下のbottomの部分がなくなってしまいます。
どうしたらよいのでしょうか？
スレも読めない奴は仕様書でも読んでろ
どこが質問スレなんですか？
失礼しました
(上下の文字と文字の間隔を5pxや10pxと指定したいと思っています。)
<ul>
<li>あ</li>
<li>い</li>
<li>う</li>
</ul>
ですが自己解決しました。
・li内部の行間を調整するのは
li {line-height:xx } →単位無し整数指定が推奨
・li同士の間隔を調整するのは
li {margin-bottom:xx}
li {padding-bottom:xx} →px指定が安定だがemでもよい
推奨も何もない
用途によって変えなきゃならないに決まってるだろ
> 推奨も何もない
> 用途によって変えなきゃならないに決まってるだろ
line-heightに関しては「推奨」です
line-height の値には単位なしが良いとされる理由 - lucky bag
http://www.lucky-bag.com/archives/2006/04/unitless-line-heights.html
行間(行の高さ)を調節するなら単位はナシで - ［ホームページ作成］All About
http://allabout.co.jp/internet/hpcreate/closeup/CU20070222A/index.htm
line-heightに関しては、用途によって変えなきゃならないケースが
ほとんどないからな。pxでガチガチにデザイン決めたい場所でも
font-sizeの方でpx指定してそれに無単位でline-heightしておけばいいわけで。
>単位無し整数指定が推奨
整数？
そこの管理人が推奨してるとWeb全体に推奨なんてことはないｗ
理屈は知ってるが、知ってればこそ用途によって変えるべき
から推奨と言ってるだけで、常に推奨とは言ってないじゃん。
逆に言えば意図があれば別のものを使うという話をしてるだけだろ、
なのにその推奨を布教されてもその管理人に迷惑なだけと思うが。
http://www.d-spica.com/designcatalog/table/table211.html
上のページだと縦列の背景色に<col class="xxx">、<th scope="col">などとして一括設定していますが
背景色の変わりにcolor:red;などとしても文字色が変わりません。
（td全体なら文字色変更できましたが。）
上の方法だと文字色指定は無理なのでしょうか？
また別の方法があるのでしょうか？
最悪、該当セル全てにclass指定するつもりですができればやりたくない・・・
自動で振り分けさせる。
ttp://gihyo.jp/design/serial/01/jquery-site-production/0001
それが嫌なら全部にclass書いてやるしかない。
ちなみにcolはfontまわりのスタイルはいじれない。
SH903iのiﾓｰﾄﾞﾌﾙﾌﾞﾗｳｻﾞでは正常に動作したものの
SH-06Aのiﾓｰﾄﾞﾌﾙﾌﾞﾗｳｻﾞでは効きません
ブラウザ依存なら対象方法としてはJavaScript/onChangeで<select>ごとスタイルシートを変えるくらいしかないでしょうか？
下線がボックス幅を超えて描かれます。どうしてなのでしょうか？
幅240pxのサイドメニューボックスの中に下記のmenu_leftボックスを設け、
menu_leftボックスの中に、menu_titleを入れています。
下記の定義でmenu_titleの下線(border-bottom)が、menu_title幅(200px)をはみ出して（右側に20px）描かれます。
menu-tileの幅もmenu_leftのマージン幅も200pxなのに、なぜはみ出すのでしょうか？
.menu_left {
margin: 0px 20px 0px 20px;
padding: 0px 0px 20px;
}
.menu_title {
text-align:left;
color:#fff;
font-size:12px;
font-weight:bold;
background-image:url(http://hogehoge.com/sTitle.gif);
background-position:top left;
background-repeat:no-repeat;
border-bottom: 1px solid #961585; /*この下線が右にはみ出す*/
margin:25px 0 0 0;
padding: 6px 12px 2px 30px;
height: 25px;
width:200px;
}
-webkit-ってなんだろー
リンク文字にマウスを重ねた時に、背景色（ボックス形）を表示するようにしたいのですが、
背景ボックスの高さが変更できません。指定方法を教えて頂けませんでしょうか。
今のソースとスタイルシートは以下の通りです。よろしくお願いします。
（「HOGEmail」と「HOGEｕｒｌ」のところの背景色の高さです）
≪ソース≫
<ol class="ct_container">
<li><p class="ct_header"><a href="mailto:hoge1">HOGEmail</a> | <a href="http://hoge2.com">HOGEurl</a> |
<p class="ct_title"><a id="comment3" name="comment3"></a>タイトル</p>
<div class="ct_body">内容</div>
<div class="cnt_date">YYMMDD</div></li>
<li>/*次のタイトル、内容等*/</li>
</ol>
≪スタイルシート≫
.ct_header a , .ct_header a:visited {
color:#666;
text-decoration:none;
line-height:28px; /*(1)ここを変えても変わらない*/
padding:0.2em 0.5em;
border:1px dotted #fff; }
.ct_header a:hover {
color:#444;
/* (2)ここにline-heightを追加して変えても変わらない*/
border: 1px solid #ccc;
background:#f5f5f5; }
/* (3)下記を追加して変えても変わらない
li { line-height:28px; }*/
横一列のメニューリンクテキストを右詰めで、<ul><li>タグを使って再現したい。
ブラウザではきちんと表示されるが、DreamWeaverのデザイン表示が妙なことになる。
（5つのメニューが、途中3つで改行され2段表示。
うち1つはテキスト自体も4文字が全て改行され縦4文字に並んでしまう。）
テキストボタンでなく画像ボタンならば<li>にwidthを指定することで
回避できるのですが、テキストなのでwidth指定はしたくない。
また、納品後はクライアントが更新作業を行っていく体制を取るので
DreamWeaverのデザイン表示を混乱の少ない状態に整える必要がある。
これは仕方のないことなのでしょうか？
現在は<li>タグにfloat: leftを指定して横一列に表示しています。
これをやめて<li>タグにdisplay: inline;を指定すると
DreamWeaver上では改行無しで表示されるのですが、
ブラウザ上でトップマージン指定や背景画像の位置指定が効かなくなります。
何か解決策が分かりましたら教えてください。
こういう人多いのかなあ今
どうせ各ブラウザで確認するんだし、WYSIWYGの見た目なんて違って当然。
俺はhtmlもCSSもエディタでハンドコーダー派なんだけど
DWしかわからない子たちが「○○さんのデザイン崩れます」て言ってくる
IE・FF・Safari・Opera，全部検証してるっつの！
だね
あんまり意味ないんだけどね
IE9はまた独自仕様になりそうでこわいなあｗ
IEは6789でチェックとか、もうやめて＞＜
This is a [pen].
↑black
[pen]を基準にして「↑black」の位置を決めるにはどうすればいいですか？
positionというのを使うのかな、、と試しましたがよくわかりませんでした。
よろしくお願いします。
.pen { position: relative; display: inline-block; }
.black { position: absolute; top: 1em; left: 0; }
<p>This is a <span class="pen">[pen].
<span class="black">↑black</span></span></p>
ありがとうございます。
とても助かりました。^^
もちろん一冊で完結する訳はないんですが、皆さんどんな本で勉強されたのかなと。
ttp://imagepot.net/view/126314455414.jpg
今このようなCSSを組んでいるのですが、実際には以下の画像のような表示になってしまいます。
http://imagepot.net/view/126314476261.jpg
div#content {
position: relative;
width: 900px;
margin-left : auto;
margin-right : auto;
top: 40px;
text-align: left;
bottom: 40px
min-height: 90%;
height: auto !important;
height: 90%;
}
div.nakami {
background:#fff1c3;
border:solid 10px #c96c29;
overflow:scroll; padding:30px;
position: absolute;
bottom: 71px;
left: 0px;
top: 72px;
right: 0px;
z-index: 11;
}
<続きます>
div.copyright {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
background-image: url(images/copyright_2010.png);
background-repeat: no-repeat;
background-position: right bottom;
}
検索しているのですが、どうしてもわかりません。
どなたか、何が悪いか、御指南ください。お願いします。
それから、position="relative"にしておくと、margin-bottomは適用されないのでしょうか？
cssに
html,body { height: 100%; }
を書いてなさそう？
レスありがとうございます！
今急いで追加してみたんですが、変化なしでした。
どこか他におかしい所はないでしょうか？
<div id="content">
<div id="menucontainer">
メニュー
</div>
<div class="nakami">
テストテスト
</div>
<div class="copyright">
</div>
</div>
>>446-448と>>450コピペしてやってみたけど、div.copyrightを下に固定？することは出来たよ
ありがとうございました。
ここは質問スレじゃないぞ
クリックするとSarariで青い枠線が出ます。
Abobeのサイトのサンプルでも出るもの、出ないものがあります。
この違いは何なのでしょうか？
また消すためには、どう指定すれば良いのでしょうか。
お教えください。
ttp://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
a:visited { color: white; }
a:hover { color: red; }
いくら指定してもブルーのまま。
試しに<head>内をいろい消しても変わらず・・・
ドキュメント宣言とか文字コードとかも関係アルのかな？？
outlineはどこも設定してません・・
全てを消して
a:link { color: red; }
未訪問リンク
a:visited { color: red; }
訪問済みリンク
a:hover { color: blue; }
マウスカーソルを乗せたリンク
書いてみたけどマウス載せても色が変わらない・・
<body link="white" vlink="white" alink="white" >
<a href=" ">リンク</a>
結局これで解決・・・なんでできないんだろう。。
クリックしたとき出る枠線ってのはoutline:noneで消せたはず、と思って。
>>456は>>455ではないよな？
CSSだけだされても誰もわからんと思うよ。
HP作成ソフト使っても思うようにいかへん。
このサンプルページにある上のメニューだけど
メニュー数を増やさずに横巾いっぱいに表示することって出来ないんでしょうか？
font-size: 100%;
margin: 0;
padding: 50;
width: 100%;
}
.entrytext img {
margin: 0px;
padding: 0px;
border: 2px black solid;
}
写真は900pxで貼り付けてあるんですが、その下に流し込んでるテキストのみ
例えば幅600pxとかっていう指定はできないでしょうか？
<div>
それであってる。どっかの本にもdivisionとかいてあった
</div>
仕様書読め
いやじゃぼけ(´・ω・`)
具体的にはposition: relative; でずらしたテキストをマウスが離れるときにゆっくり元の位置に戻したい。
widthでサイズ指定してるのに関わらず、logoの画像が少し右に飛び出してしまい、
また、naviの画像が４つまでしか横並びにならず、最後の一つが二列目にまわってしまいます・・・
どこがいけないのか教えていただけないでしょうか。お願いします。
html
<div id="header">
<div class="logo">
<a href="index.html"><img src="img/logo.jpg" width="800" height="67"></a>
<!-- end .logo --></div>
<div class="navi">
<ul>
<li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li>
<li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li>
<li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li>
<li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li>
<li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li>
</ul>
<!--navi end--></div>
<!-- end .header --></div>
css
#page #wrapper #header {
width: 800px;
float: left;
height: 100%;
}
#page #wrapper #header .navi {
width: 800px;
float: left;
height: 100%;
}
#page #wrapper #header .navi ul li {
float: left;
width: 160px;
height: 100%;
}
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
具体的には
#content {
animation: move 10s linear 5;
transition: transform 5s linear;
}
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
#content.move {
transform: translateX(300px);
}
#content は keyframes move で 100px へ移動中
javascript で任意のタイミングで animation プロパティを削除、move クラスセレクタを #content に設定
希望する動きはそれまでの keyframes で移動した位置から transition の目標値まで移動してくれることなんですが、
animation プロパティを削除すると #contents は to または from の位置に飛んでしまいます。
任意のタイミングで keyframes の移動位置を取得する方法はありませんでしょうか？
印刷用のＣＳＳ（print.css）を用意しました。しかし、これを使って印刷すると、IEでもchromeでも全く同じように謎の余白ができてしまいます。
試しに通常のスタイルシート（usual.css）の代わりにprint.cssを印刷時以外にも適用するようにしてみたところ
この謎の余白は出てきませんでした。印刷して出てきません。
全く同じスタイルシートが適用されているはずなのに、media="print"を介して適用された時だけ謎の余白ができます。
ずいぶんはまってしまっているので、この原因がわかる方がいればご教授お願いします。m(_ _)m
input[type=search]要素のレンダリングがmac/safariでは独特ということで
CSSのレイアウトも無視されるとききました。
mac/safari独自のレンダリングを回避して自前のCSSを適用する方法は公開されていますが
その方法で対処の上、ちゃんと思う画面になっているか確認したいところです。
iPhoneのsafariでは効いてるようだったんですが、不安なので。
