- 締切済み
CSSのcaption-side:・・・
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
caption-sideは、ＩＥではサポートされていません。 なので、ＩＥでは無視されます。 <caption align="top"|"bottom">は使えます （alignは非推奨ですけど＾＾；）
- steel_gray
- ベストアンサー率66% (1052/1578)
仕様としては前者だと思います。 後者でのleftやrightは caption{ caption-side:top; text-align:left/right; } と指定する事になると思います。
関連するQ&A
- 素朴なcaptionについて質問させてください。
幾つか悩みが浮上しているのでどれか1つでもアドバイスいただけたらと思います。 よく写真やテーブルの上下に説明等のキャプションを使うのですが、毎回align属性等にてtopやbottomの指定を行っています。 質問1 これはCSSで指定を行うには何を指定してやればよいのでしょうか？？またCSSで可能でしょうか？出来れば<caption>だけで、bottomの指定を行いたいです。 質問2 そもそも、captionはw3c的に推奨要素なのでしょうか？ 質問3 写真にcaptionをつけたい場合、毎回テーブルの中に画像を入れて、captionをつけているのですが正しいでしょうか？いきなり画像だけにcaptionつけることって不可能ですよね？？ 変な質問ばかりで申し訳ないのですが、悩んでいます。 どなたかアドバイスいただけたら幸いです～！
- ベストアンサー
- HTML
- CSSのposition値の上書き（打消）について
現在、スタイルシートにてサイトを制作中です。 トップページとその他のページでposition: absolute; で配置を変えたいDIV要素があり、 以下のようなCSSを記述してテスト中です。 （※トップページにはbodyに#topというIDを割り振ったとします。） <style> div#test {position: absolute; left: 10px; top: -20px; width: 980px; height:160px;} body#top div#test {bottom: 80px; right: 15px;} </style> <div id="test"></div> 上記のように、トップページのみに body#top div#test として上の要素のサイズなどを 継承していますが、 position の値のみを top → bottom に、left → right に変更して設定にしようとしております。 通常ページでは position を left と top からの位置で適用しておりますが、 トップのみ bottom と right から適用する必要がある場所に配置したいと考えています。 しかし上記のように継承して記述しても、 トップページではどうしても left と top からの指定となってしまい、 bottom: 80px; right: 15px; という新たなposition値は無視されてしまうようなのです。 横幅などは通常下にあるものが上書きされるのですが、この場合には駄目な様です・・・。 ここで難しいのは、top → bottom に、left → right に変更したいという点にあると思います。 つまり上書きは出来ないため、上の要素のtop 、 left はそのまま継承されてしまうようです。 top 、 left 、bottom 、 right のすべてを body#top div#test に記述しても駄目なので、 どうにかして継承元の top と left の設定を下位で継承させない （無効にする？）ような方法はありませんか？ 参考本やネット上の情報でも、このあたりの記述は無く、 今まであまりこのように position をページごとに別の方向から指定するように スタイルシートを書いたことが無いため、完全にわからない状態です。 お分かりになられる方がいらっしゃいましたら、アドバイスいただければ幸いです。
- ベストアンサー
- CSS
- CSSで枠線の太さを変えるとき
CSSでlistタグを使ってナビゲーションを作る練習をしています。 CSSで以下のように書いた場合、a:hover時の動作として、上の枠線のみが１pxから5pxに変わります。しかし、この方法だと、【上の枠線の下】が5pxとなり、その分、入力してある文字が下にずれます。 そこで、ずれないように、【上の枠線の上】に5px増やすにはどうすればいいでしょうか。 あるいは、そのように見せるための方法がありますか。画像は使用しないで作りたいです。 よろしくお願いします（CSSは初心者程度のレベルです）。 ================================================== ul{ list-style-type:none; } a{ text-decoration:none; } li a{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } li a:hover{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:5px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } ==================================================
- ベストアンサー
- CSS
- Cssで
次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し２</h2> <h2 class="sample1">見出し２</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }
- 締切済み
- HTML
- cssハックについて
googleとfirefoxでcssが聞かない箇所があります。 css--------- #operation { width: 420px; background-image: url(../picture/top/left_middle.jpg); background-repeat: repeat-y; background-position: center top; margin-top: 10px; } #operation img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #operation #ope_top { background-image: url(../picture/top/left_top.jpg); background-repeat: no-repeat; background-position: left top; height: 30px; padding-bottom: 0px; margin-bottom: 0px; } #operation #ope_top #ope_tit { font-size: 14px; line-height: 2; font-weight: bold; color: #FFFFFF; text-indent: 10px; float: left; width: 200px; margin-top: 0px; padding-top: 0px; height: 20px; } #operation #ope_top .ope_img { padding-top: 5px; float: right; margin-right: 10px; } #operation #ope_middle { margin-top: 0px; padding-top: 0px; width: 420px; margin-left: -200px;←ここがおかしいです！！ } #operation #ope_middle .content ul { margin-top: 5px; padding-left: 30px; list-style-image: url(../picture/list.jpg); } #operation #ope_middle .content li { margin-bottom: 5px; margin-top: 1px; } #operation #ope_middle .content .line01 { border: 1px dotted #CCCCCC; margin-top: 2px; margin-bottom: 2px; } というかんじなのですが、左右へとぶれてしまいます。 どのように修正したいいのか困っております。 参考になるようなことありましたらお願いします。
- 締切済み
- HTML
- cssによる配置の計算が合いません
cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSの優先順位について
うまく説明できるかわかりませんが・・・ XHTMLとCSSでページを作成しています。 デザインは全て外部CSSを参照しているのですが、 トップページだけ、一部個別設定したいと思っています。 リストメニューのデザインを現在このようにしています。（外部CSS） ul{ list-style-type:none; margin-left:0; padding-left:0; padding:0; margin-top:30px; width:120px; float:left } li{ padding-right:10px; font-size:0.75em; margin-bottom:10px; border-bottom:solid 1px #66aa66 } --------------------------------------- トップページだけ、 ul{ list-style-type:none; margin-left:0; padding-left:0; background-color:#efef77; padding:3px 20px; margin-top:0 } li{ display:inline; padding-right:10px; font-size:0.75em } ----------------------------------- この設定にしたいので、トップページヘッダーにこちらを入力しました。（外部CSSよりヘッダーを優先するとテキストに書いてありました） しかし、 li{ display:inline; } だけは、外部CSSを参照してしまいます。 なぜでしょうか？？ 優先させる為に li display:inline !important; } としてみましたが、ダメでした。 どなたかご教授願いますm(__)m
- 締切済み
- その他（プログラミング・開発）
- CSS3の新しい書き方教えてください。
ネットで見ていたところ以下の記述を見つけました。 どうやらCSS3の記述らしいのです。 border: 1px solid #333; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 3px; という記述は何となく分かるのですが、その頭にある・・・。 -webkit- という記述は何を意味するのでしょうか？？ -moz- もそうですね・・・。 先頭の、border: 1px solid #333; に付随する記述だよ！みたいな感じでしょうか？ どなたかお分かりになる方いらっしゃいましたらアドバイスをお願いします。 また、何か参考になるサイトなどもご存知であれば、合わせてお教えいただけますと幸いです。 どうぞ、宜しくお願いします。
- ベストアンサー
- CSS
- Opera、ネスケでcssが崩れます
DreamWeaverMXで作業しています。 ブラウザはLunascape（Netscapeから生まれたもの？）とIE6を使用、確認していましたが、 アップ後にOpera9、Netscape、Mozila Firefox1.5で確認したところ CSSが崩れていることに気づきました。 左右のフロートが崩れており、この回避方法を調べましたが よくわかりません。。。。 過去の教えて！から、下記URLを参考にしましたが それでも理解できません。涙 http://members.at.infoseek.co.jp/cssbug/detail/opera.html http://www.keynavi.net/ja/bugh/index.html どなたか制作に詳しい方、助けてください…！ ---------------------------------------- <link rel="stylesheet" href="web.css" type="text/css" media="screen"> --------------- #body{ margin:auto; width: 700px; padding-top: 0px; } #page{ background:#ffffff 700px; width:700px; font-size:11px; color:#585858; border-right: 1px solid #585858; border-bottom: 1px solid #585858; border-left: 1px solid #CCCCCC; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; } #left{ width:180px; float:left; text-align:left; padding-top: 5px; padding-right: 5px; padding-left: 5px; background-color: #797979; height: 100%; padding-bottom: 10px; margin-left: 1px; border-top-width: 10px; border-top-style: solid; border-top-color: #FFFFFF; } } #right{ width:480px; text-align:left; float: right; margin-right: 3px; padding: 15px; margin-top: 8px; } --------------------------------
- ベストアンサー
- HTML
- safariでの横並びリスト（List）CSSずれについて
CSSマスターの方にご質問させていただきます。 現在横並びリストを制作しようとしております。 リストに表示する文字の高さを中央揃えにし、カーソルが触れるまでは黒色画像、hover時に赤色画像のバックグラウンドをマイナス設定にてロールオーバー効果を演出しようとしています。 IEではきちんと表示されているのですがsafariではパディング分、赤色がズレてしまい、hover時には黒色がズレてしまいます。 <UL id="sitemenu"> <LI id="side">あいうえお <LI id="side">かきくけこ </UL> /***********LI設定***********/ #side A{ width:60px; //幅 height:40px; //高さ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; background-image : url(背景.gif); //背景 background-position : 0px 0px; no-repeat; text-align : center; //文字の位置 text-decoration : none; //文字飾り vertical-align : top; //文字の高さ padding-top : 10px; //パディング高さ float : left; } #side A:hover{ background-position : 0px -40px; no-repeat; } /***********UL設定***********/ #sitemenu{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; border-width : 0px 0px 0px 0px; vertical-align : top; text-align : left; list-style-type : none; float : left; } #sitemenu LI{ float : left; } なんとか背景画像がずれない様に表示させていので、どなたかわかる方がいらっしゃいましたら大変申し訳ないのですがご教授お願いいたします。
- ベストアンサー
- HTML
補足
回答ありがとう。 しかし、 ------------------------------------- top 表ボックスの上に標題ボックスを配置する。 bottom 表ボックスの下に標題ボックスを配置する。 left 表ボックスの左に標題ボックスを配置する。 right 表ボックスの右に標題ボックスを配置する -------------------------------------- の解釈だと左右は表の側面に標題ボックスが存在しなくてはならないはずなのですが・・・