Questa の回答履歴

全37件中21～37件表示
  • Opera（10.10）でのスタイルシートの表示について

    Opera（10.10）でのスタイルシートの表示について 　Operaでのスタイルシートの「border」の表示について質問させて下さい。 これは例ですが、HTMLとCSSを以下のとおりに設定しているとしますね。 ------------------------------------------------------------------ <body> 　<div id="layout"> 　　<div id="box1"> 　　　<p>ボーダーのテスト</p> 　　</div> 　</div> </body> ------------------------------------------------------------------ *{ 　　margin : 0px; 　　padding : 0px; } #layout{ 　　width : 800px; 　　height : 600px; 　　padding : 10px; 　　margin-left : auto; 　　margin-right : auto; 　　background-color : #FFF; } #box1{ 　　width : 780px; 　　height : 580px; 　　padding : 10px; 　　border-top : solid 1px #D1D1D1; 　　border-left : solid 1px #D1D1D1; 　　border-right : dashed 1px #D1D1D1; 　　border-bottom : dashed 1px #D1D1D1; 　　background-color : #FFF; } ------------------------------------------------------------------ 　このように設定した場合、「id="box3"」のボーダーは上と左が直線、 右と下が点線と表示されるのが正しい表示だと思います。 しかし、Operaで閲覧した場合なぜか「border-left」のみ表示されません。 「border-left」を「solid」から「dashed」に変更すると表示されます。 borderに合わせてwidthもちゃんと横に伸びているので、 CSSが適用されていないわけではないと思います。 　また、「border-left」を「dashed」から「solid」に変更した場合には、 「border-top」と「border-right」の両方が見えなくなってしまいます。 　どちらの問題も、IE6やFirefox（3.5.7）では指定通り正しく表示されました。 Operaでも同様に正しく表示させるにはどうすればよいのでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • inex
    • HTML
    • 回答数3
  • CSSの印刷について

    htmlとcssで構築したのですが印刷プレビュー時にcssで設定した背景が反映されません。cssでも反映させることは出来るのですか？？

  • 画像の上にテキストを重ねるためにＣＳＳスタイルシートをつくったのですが

    Ｄｒｅａｍweaver8にてＨＰをつくっております。 よく背景でない画像の上にテキストがかさなってあるのを見て それに挑戦しているのですが、 下記がＣＳＳのソースです。外部ファイル化しています。 .kasaneru {z-index: 2;} .kasaneru2 { z-index: 1; height: auto; width: auto; top: 300px; right: 120px; overflow: visible; position: absolute; } これをdivやclassでbody内に指定してみたのですが、画像はテキストの上に重なるのですが、肝心のテキストが上にでてくれません。 私の希望は画像の上にテキストを重ねたいのです。 z-indexで数字を大きくしているのにテキストが上にきてくれないのはなぜなのでしょうか？ よろしくお願いいたします。ｍ（_ _）ｍ

  • 画像の上にテキストを重ねるためにＣＳＳスタイルシートをつくったのですが

    Ｄｒｅａｍweaver8にてＨＰをつくっております。 よく背景でない画像の上にテキストがかさなってあるのを見て それに挑戦しているのですが、 下記がＣＳＳのソースです。外部ファイル化しています。 .kasaneru {z-index: 2;} .kasaneru2 { z-index: 1; height: auto; width: auto; top: 300px; right: 120px; overflow: visible; position: absolute; } これをdivやclassでbody内に指定してみたのですが、画像はテキストの上に重なるのですが、肝心のテキストが上にでてくれません。 私の希望は画像の上にテキストを重ねたいのです。 z-indexで数字を大きくしているのにテキストが上にきてくれないのはなぜなのでしょうか？ よろしくお願いいたします。ｍ（_ _）ｍ

  • CSSリスト表示-追加質問-

    http://oshiete1.goo.ne.jp/qa3414547.html で勢いあまって質問を締め切ってしまったあとに気がつきました（泣） widthを削除してしまうと、リンクの範囲がテキストの範囲だけになってしまうのです。 申し訳ないですが、180pxいっぱいにリンク範囲を指定したまま、背景が表示される方法をどなたか教えてください。 よろしくお願いします。

    • ベストアンサー
    • shizuku
    • HTML
    • 回答数2
  • 画像に背景色と境界線を付けたい。

    いつもお世話になります。 画像の周りに背景色その外側に線を引きたく思っています。 (1) <div style="border:solid 5px gray;padding:20px;background-color:lightcyan;" > <img src="**.jpg" alt="**"> </div> と、すれば可能ですが (2) <img src="**.jpg" alt="**" style="border:solid 5px gray;padding:20px;background-color:lightcyan;" > とすると境界線は表示されても背景色が表示されません。 (1)のように<div>タグを用いなくて、(2)のように<img>タグのみで(1)のようなことはできないものでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • rqg2010
    • HTML
    • 回答数2
  • cssでの幅の分割（固定・可変混合）がうまくできません

    画面左をコンテンツ（幅は可変）・右をメニュー領域（幅は固定）とするために２分割し，さらにコンテンツを２段に分けようとして，次のような構成にしてみたのですが思い通りになりませんでした． <div style="width:200px; height:600px; background-color:#ccf; float:right"> メニュー </div> <div style="width:auto; height:600px; background-color:#fcc;"> <div style="width:50%; height:550px; background-color:#6f6; float:right">コンテンツB</div> <div style="width:auto; height:550px; background-color:#ff6;">コンテンツA</div> </div> ２段組は丁度半分ずつにしたかったので，右（コンテンツBの部分）のwidthを50%，左（コンテンツAの部分）はautoにしました．ＩＥ６では希望通りコンテンツ領域の幅の50%で表示されているようですが，firefoxではメニュー領域も含めたウインドウ全体の50%と解釈されているようで，ＩＥとは表示が異なり困っています．どちらのブラウザでもコンテンツ領域をちょうど半分ずつにするにはどうすればいいでしょうか？ ちなみに，コンテンツ内の左右を共に50%とすると，どちらのブラウザでもレイアウトが崩れてしまいます．firefoxならそうなっても仕方ないと思いますが，ＩＥでも崩れてしまうのは疑問です．できればこの点にも配慮して両方とも幅を50%と指定しても崩れない方法をお教えください．

  • <div>と<div>の間の１０px程の隙間が消えなくて困っています。Firefox＆safari

    はじめまして。 現在movabletype3.35で初めてサイトを作成している者です。 宜しくお願いします。 下記にありますＨＴＭＬとＣＳＳでページを作っているのですが、 Firefoxやsafariで確認すると、 <div id="pankuzu">で囲んだボックスと、そのすぐ下に持ってきている <div id="introduction">で囲んだボックスの間に１０px程の隙間が出来てしまいます。 ※ＩＥ７では隙間は出来ませんでした。 <div id="keyvisual">　←　※<div id="pankuzu">のすぐ上のボックス <div id="pankuzu"> <div id="introduction"> これら３つのボックスには全てＣＳＳでmarginとpaddingを調整しているつもりなのですが、どうしてもＩＥ７と同じように表示されず隙間が出来てしまいます。。 ちなみに、試しに一度<div id="pankuzu">のボックスをまるまる削除して表示した所、<div id="introduction">のmargin-topに0pxと指定しているのにかかわらず、この場合も10px程の隙間が出来ました。。 ということは、<div id="introduction">の中のＨＴＭＬかＣＳＳの書き方か指定に何か問題があるのかと思っているのですが、どうしても解決できません。 是非ご指導、ご鞭撻宜しくお願い致します。 ---------------------------------------------------------------- 【ＣＳＳ】 * { margin: 0; padding: 0; border: 0; background-color:transparent; color: #333; font-size: 100%; font-weight: normal; font-style: normal; text-decoration: none; } div#keyvisual { width: 780px; height: 100px; margin: 10px 10px 0 10px; padding: 0; background: url("※※※.gif") no-repeat 0 0; } div#title { width: 500px; height: 50px; line-height: 350%; margin: 0 0 0 10px; padding: 0; } div#pankuzu { width: 780px; height: 20px; margin: 0 10px 0 10px; padding: 0; background-color: #999; } div#pankuzu p { font-size: 50%; } div#introduction { width: 780px; height: 50px; margin: 0 10px 0 10px; padding: 0; background-color: #999; } dl#site { margin: 0; padding: 0; } dl#site dt { display: block; float: left; clear: left; width: 160px; margin: 15px 5px 10px 5px; padding: 0; font-size: 90%; text-align: left; background-color: #fff; } dl#site dd { width: 600px; margin: 15px 5px 10px 5px; padding: 0; font-size: 80%; text-align: left; } --------------------------------------------------------------- 【ＨＴＭＬ】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> ※ヘッダー部分は省略しています。 <!-- サイトボディー部分ここから --> <body> <div id="container"> <div id="keyvisual"> <div id="title"> <h1><a href="<$MTBlogURL encode_html="1"$>" title"<$MTBlogName$>"><$MTBlogName$></a></h1> </div> </div> <!-- パン屑リスト --> <div id="pankuzu"> <p class="navi-link"><a href="<$MTBlogURL$>">TOPページ</a>><MTParentCategories glue=">" exclude_current="1"><MTIfNonZero tag="MTCategoryCount"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a><MTElse><$MTCategoryDescription$></MTElse></MTIfNonZero></MTParentCategories><MTHasParentCategory>></MTHasParentCategory><$MTCategoryDescription$> </p> </div> <div id="introduction"> <dl id="site"><dt>題名</dt><dd>説明</dd></dl> </div> ----------------------------------------------------------------

    • ベストアンサー
    • kenjinara
    • HTML
    • 回答数4
  • h3タグのCSS装飾

    おせわになります。 h3テキストの左横にアイコンを設置し、 下線としてドットラインをひこうと思います。 アイコンをh3背景画像で表示し、 ドットラインをh3タグの外にdivをおき表示させているのですが、 ドットラインを表示させる為のだけのdivタグなので、 あまり良い方法とは思わないのですが、 他に良い方法はありますでしょうか？ ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テスト</title> <style type="text/css"> <!-- h3 { font-size:14px; margin:0; padding:0; background: url(http://www.geocities.jp/ajax3210/arrow.gif) no-repeat 3px 2px; padding-left:25px; } .h3-dotline { padding-top:10px; padding-bottom:10px; background:url(http://www.geocities.jp/ajax3210/dotline.gif) repeat-x left bottom; --> </style> </head> <body> <div class="h3-dotline"> <h3>テキストテキスト</h3> </div> </body> </html>

    • ベストアンサー
    • moon333
    • CSS
    • 回答数5
  • h3タグのCSS装飾

    おせわになります。 h3テキストの左横にアイコンを設置し、 下線としてドットラインをひこうと思います。 アイコンをh3背景画像で表示し、 ドットラインをh3タグの外にdivをおき表示させているのですが、 ドットラインを表示させる為のだけのdivタグなので、 あまり良い方法とは思わないのですが、 他に良い方法はありますでしょうか？ ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テスト</title> <style type="text/css"> <!-- h3 { font-size:14px; margin:0; padding:0; background: url(http://www.geocities.jp/ajax3210/arrow.gif) no-repeat 3px 2px; padding-left:25px; } .h3-dotline { padding-top:10px; padding-bottom:10px; background:url(http://www.geocities.jp/ajax3210/dotline.gif) repeat-x left bottom; --> </style> </head> <body> <div class="h3-dotline"> <h3>テキストテキスト</h3> </div> </body> </html>

    • ベストアンサー
    • moon333
    • CSS
    • 回答数5
  • CSSハックについて・・・

    ホームページを作っていて、IEではちゃんと表示されるのですが、 FirefoxとOperaでは思い通りに表示されません。 これをどうにかしたいと思います。 前に、どこかのサイトでCSSハックという言葉を見たことがあるのですが、主にFirefoxに、CSSハックを利用したいです。 Firefoxのみ、またはFirefoxを含む様々なCSSハックの方法を教えてください！ 今は、OperaよりもFirefoxを優先してほしいです。

    • ベストアンサー
    • kabin2000
    • HTML
    • 回答数2
  • 罫線の横にテキストを表示

    携帯用コンテンツページで、 罫線の横にテキストを表示したいのですが うまくいきません。 ご教示いただけますでしょうか。。 イメージは下記です。 -----------□ XXXXXX XXXXXX XXXXXX -----------□ よろしくお願いいたします。

    • ベストアンサー
    • noname#128272
    • HTML
    • 回答数4
  • ＣＳＳについて

    CSSで下記のように記載すると高さ200pxのボーダ枠の中にaaaaaと記載されるのまでは、よいのですが、上詰めになってしまうのです。高さ200pxの中央に表示させるにはどうしたらよいのでしょうか。 どうぞよろしくお願いいたします。 ▼CSSソース -------------------------- #contents{ border: solid 1px #ccc; margin: 0; padding: 0; width: 500px; height: 200px; text-align: center; } -------------------------- ▼HTMLソース <div id="contents">aaaaa</div> --------------------------

  • CSSで、任意の場所に空白を入れたい時（考え方を教えて下さい）

    こんばんは、CSS初心者です。 例： Webページの上端 ↑ ↑ ↑ 任意の高さのスペース１ ↓ ↓ ↓ 見出し行１ ・細目１ ・細目２ ↑ 任意の高さのスペース２ ↓ 見出し行２ ・細目３ ・細目４ 　・ 　・ 　・ …といったスタイルのページを作りたいのですが、例のような任意の高さのスペースを入れたい所が随所にあります。 「見出し行の上部に○ピクセルのマージン」という設定方法はわかりますが、複数ある一番上の見出し行の上部のみ、スペースを入れたいのです。 この場合は他の見出し行とは別枠で、「一番上の見出し行」の設定を別枠で作り、マージンを指定しなければならないのでしょうか。 そうなりますと、ページの仕様上様々な高さの空白を入れたい箇所が結構な数になりますので、その都度設定すると作業がずいぶんと煩雑になってしまいます。 こちらの作業を簡便に行う手法はありますか？ また、初心者なので上記の思考そのものに勘違いがあるかもしれません。 もしかして「CSSとはそういうもの」なのでしょうか？

    • ベストアンサー
    • bari_saku
    • CSS
    • 回答数4
  • 文字をセル下部にぴったりくっつけたい

    お世話になります。 テーブル(の<td></td>)内に入れた文字を、セルの下部ボーダーにぴったりくっつけるように配置したいと思っているのですが、IE6でうまく文字の表示ができません。 その文字には font.●● {font-size:35px; font-weight:bolder; font-family:Verdana; color:#332600; letter-spacing:-2px; } とCSS指定し、またテーブルタグの方には <table cellspacing="0" cellpadding="0">　と <td valign="bottom">　を指定しています。 これで、Firefoxだときちんと表示されるのですが IEだと文字が潰れる、というか上下が欠けたように表示されてしまいます。 ためしに行間指定 line-height:100%; をつけくわえてみたところ、IEでの文字はきちんと表示されるようになったのですが、 テーブル下部のボーダーから浮いてしまい思ったようなレイアウトになりません。 (Firefoxも同様に浮いてしまいます) 文字を欠けなく表示し、また下部ボーダーにぴったりくっつけるやり方がありましたら教えてください。 よろしくお願いいたします。

  • CSSで見出し（タイトル）行の右端に日付を表示させる正しい方法は？

    みなさま初めまして。OKWebコミュニティに初めて登録したMxanaduと申します。 CSSを用いて、見出し（タイトル）行の右端に日付を表示させようと思い、以下のような設定をしています。 [スタイルシートの定義] <STYLE TYPE="TEXT/CSS"> <!-- H4 { PADDING: 5PX; WIDTH: 99%; COLOR: #FFFFFF; BACKGROUND-COLOR: #008080 } SPAN.DATE { FLOAT: RIGHT } --> </STYLE> [HTMLドキュメントへの適用例] <H4>タイトル<SPAN CLASS=DATE>&nbsp;&nbsp;&nbsp;Mon, Aug 8, 2005</SPAN></H4> この方法で、Safari 1.3 (v312)（Mac OS X(10.3.9)付属）とiCab 3.0 Beta 337では意図した通り表示できます。 しかし、IE 5.2.3 (5815.1)（Mac OS X版）では見出しタイトルと日付の行がつぶれてしまいます。（<SPAN></SPAN>を外すとつぶれなくなりますが、日付を右端に表示できません） また、Mozilla系のNetscape 7.1、Mozilla 1.7.11、FireFox 1.0.6J、Camino 0.7JおよびCamino 0.8.4（全てMac OS X版）では見出しタイトル行で日付が改行され、paddingの中に埋もれてしまいます。 Windowsのブラウザでどうなるかは、Windowsマシンを持っていないので分かりません。 意図した表示ができるブラウザが限られてしまうのは、私のCSSの使い方に間違いがあるのでしょうか？ それとも、意図した表示ができないブラウザのCSS実装に問題があるのでしょうか？ 私のCSSの使い方に間違いがある場合は、正しい方法を教えて戴ければと思います。 以上よろしくお願い致します。<(_ _)>

    • ベストアンサー
    • noname#164148
    • CSS
    • 回答数4
  • firefox表示でclear: both;を指定した要素のマージンは強制的に０？

    ヒントだけでも頂けると助かるのですが float:left; で段組をしていて、その直下の <address> 要素で clear: both; しています で、IE と Opera だと通常に段組解除 ＆ margin-top が取れるのですが firefox だと段組解除のみで margin-top がとれません。 これって回避方法ってありませんか？ 多分 <hr style="clear: both;" /> でもいいんでしょうが 極力要素は減らしたいので <address> で解除＋ margin-top を取りたいんです おわかりの方居ましたらよろしくお願いします

    • ベストアンサー
    • noname#11554
    • CSS
    • 回答数1