- 締切済み
子<DIV>で定義したのに、親<DIV>の定義が優先表示
kirin_55の回答
- kirin_55
- ベストアンサー率16% (1/6)
下記を参考にして1emが何ptにあたるのか調べてみました。 16px=12pt=1em となります。 > AAAAA と BBBBB は同じ文字サイズ 指定する文字サイズが間違っているのではないかと思います。 px > em へ変換 http://riddle.pl/emcalc/ pt,pxについて http://www.geocities.jp/gakaibon/tips/others/pt2px.html
関連するQ&A
- divの継承について
次のような場合、<font color=red>テスト</font>の文字だけ小さくなってしまいました。フォントサイズが継承されなかったようなのですが、どのようにしたら同じ大きさで表示できるでしょうか？ <div class="sample"><a href="http://www.sample.com/"><font color=red>テスト</font>リンクです</a></div> 以下は外部CSSファイルに記載 .sample{ font-size: 12pt; color:#0000FF;} .sample{ font-size: 12pt; color:#0000FF;} .sample a:link{ font-size: 12pt;} .sample a:visited{ font-size: 12pt;} .sample a:hover{ font-size: 12pt;} .sample a:active{ font-size: 12pt;}
- ベストアンサー
- CSS
- スタイルシートの優先順位について
以下のようなHTMLとCSSを記述したとします。 <p>タグに囲まれた「test」という文字に対して、Bodyタグから font-size:10emと、PタグからFontChangeクラスを指定して、 font-size:0.1emを適用しています。 一見、優先順位の高いFontChangeクラスの0.1emが「test」に対して適用されそうに見えますが、 実際には両方のスタイルが適用され、中途半端なフォントサイズになります。 優先順位を無視してスタイルが2重適用されるのは何故でしょうか？ ご教授下さい。 宜しくお願いします。 <html> <head> <style type="text/css"> <!-- body { font-size:10em; } .FontChange{ font-size:0.1em; } --> </style> </head> <body> <p class="FontChange" >test</p> </body> </html>
- ベストアンサー
- HTML
- 文字のサイズを大きくしつつ、中央に表示させるには？
ファイアフォックスで、文字のサイズを大きくしつつ、中央に表示させるには？ <BODY> <div style="text-align:center;" style="font-size:300%;">test1</div> <div style="font-size:300%;">test2</div> </BODY> これをすると、test1は中央に表示されるけど文字は小さいままで test２は、文字は大きく表示されるけど中央には表示されません。 どちらも行うにはどうすればいいでしょうか？ IEでは<div style="text-align:center;" style="font-size:300%;">test1</div>で、 中央に表示されつつ、文字も大きくなります。
- ベストアンサー
- HTML
- htmlのAタグおよびその下位のDIVを移動できるソフトありませんか
いつもお世話になります。 htmlファイルを作成していて ａタグに付帯する情報をdivタグで記載します。 例えば。 <a1 id="1001">aaaaa</a1> <div>あああああああ</div> <a1 id="1002">bbbbb</a1> <div>いいいい</div> <a2 id="2001">ccccc</a2> <div>ううううううう</div> ・・・・・・・・・・・ と、この情報を階層表示して、アイデアプロセッサに良くあるようにツリー表示をしてドラッグでその位置を入れ変えられるようなソフトはないものでしょうか。 つまり、上記のようなタグ構成を ビジュアル的に編集して、 <a2 id="2001">ccccc</a2> <div>ううううううう</div> <a1 id="1002">bbbbb</a1> <div>いいいい</div> <a1 id="1001">aaaaa</a1> <div>あああああああ</div> ・・・・・・・・・・・ と、いうようにしたいのです。 順番を入れ替えたとき、id=""の番号を新たにふり直して <a2 id="2001">ccccc</a2> <div>ううううううう</div> <a1 id="1001">bbbbb</a1> <div>いいいい</div> <a1 id="1002">aaaaa</a1> <div>あああああああ</div> ・・・・・・・・・・・ と、順番に番号を振り直してもふり直さなくても良いです。 並び替えたhtmlファイルが作成されれば良いのです。 アイデアプロセッサ関係でできないものかと探しましたが、見つけることができませんでした。 ご存じの方見えましたらよろしくお願いいたします。
- ベストアンサー
- フリーウェア・フリーソフト
- cssとhtml内のdiv要素だけで画像を表示するには
こんばんは。昨日からcssを始めてみたのですが、 早速壁にぶつかってしまいました。 くだらない質問と思われるかもしれませんが、お暇なかた よろしければご回答ください。 ほとんどのブログでは、htmlをいじることはできず、 css編集のみとなっています。 cssのみで画像を表示させたく、div要素を定義して、 それにcssを設定しようとしたのですが、うまくいきません。 以下失敗したままのサンプルを提示しますので、 間違っている箇所がありましたら、ご指摘ください。 /*cssだお*/ body.imiji { background-image:url(画像のurl); } .image { background-image:url(画像のurl); ←問題の箇所 } p.color { color:blue; font-family:"メイリオ" !important; } <!--html--> <html> <head> <title>ふぁぶ </title> <link rel=stylesheet type="text/css" href="fab.css"> </head> <body class="imiji"> <div class="image"></div>←←問題の箇所 <p class="color"> もうホントに勘弁して </p> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- fontタグとスタイルシートの相対値
CSSでこういう使い方はありえないかもしれませんが、 １は60ptですが、２，３は何ptですか？ このようにfontタグは一つ上のdivのスタイルシートに影響せずにfont sizeで完結していますが 値を相対的に変化させる（例えばdivの値の20%とか）ことはスタイルシートのしくみでありますか？ <style type="text/css"> <!-- .a { font-size:60pt; } --> </style> <!-- １ --> <div class="a">60pt</div> <!-- ２ --> <div class="a"><font size="-1">？px</font></div> <!-- ３ --> <div class="a"><font size="1">？px</font></div>
- ベストアンサー
- HTML
- CSSで文字指定：あるセレクタで指定した値を他のセレクタへ継承させることは出来ますか？
文字サイズをCSSで指定する方法についての質問です。 同一の文字サイズ指定でも、OS・ブラウザ間で表示にギャップがあります。 そのギャップを調整するために、JavaScriptを使用して OS・ブラウザごとにそれぞれ異なった外部CSSファイルを読み込むようにしています。 macintosh.css windows.css windowsIE.css ...このような振り分けCSSファイルでそれぞれ文字サイズ指定をしています。 CSSファイルの中身は、 macintosh.css .small { font-size: 10px; } /* 小さめ */ .middle { font-size: 12px; } /* 中くらい */ .large { font-size: 14px; } /* 大きめ */ windowsIE.css .small { font-size: 0.8em; } /* 小さめ */ .middle { font-size: 0.9em; } /* 中くらい */ .large { font-size: 1em; } /* 大きめ */ ...といった具合です。 このやり方では、h2の文字サイズを全て中くらいの大きさに指定したい場合、 全てのh2タグに <h2 class="middle"> と記述することになってしまいます。 これは煩雑なので一括指定したいと考えます。 すぐ思いつく方法は、振り分けCSSファイルにh2の文字指定も含めることです。 macintosh.css h2 { font-size: 12px; } windowsIE.css h2 { font-size: 0.9em; } ...のようなことです。 そうではなく、h2に .middle（＝中くらい）で指定した文字サイズをそのまま受け継がせる方法はないでしょうか？ h2 { class="middle" } 変な書き方ですが、意図を汲み取っていただけるでしょうか。 このように指定出来れば、かなり省力化出来るように思います。方法があればぜひお教え下さい。
- ベストアンサー
- HTML
- CSS2.1とCSS３の違いを教えて下さい。
HTMLの勉強中の作家です。 色々悩んだ末にサイトをHTML5に移行作業中です。 テキストを読んでもCSS３の書式がイマイチよく分かりません。 (CSS2.1の)指定は背景色、文字色(１部文字色変更含む)、フォントの種類、背景色etcetc…と言った至ってシンプルな文字のみのサイトです。 あちこちのサイトを見ながら悪戦苦闘をしていますが、CSSのチェックをかけるとエラーが出ます。 CSS2.1を３にするためにはどこをどう変えれば良いのでしょうか？ ちなみに @charset "UTF-8"; .ryoko { color : #407133;} .kazumi { color : #336070;} div,p { color : #222222;} p { font-family: Arial, Helvetica, sans-serif;} body { background-color:#e0ffe0;} a:link { color : #0000ff;} a:visited { color : #003333;} a:hover { color : #660000;} a:active { color:#660066;} p{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%;} div { color : #222222;} div { font-family: Arial, Helvetica, sans-serif;} div{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%;} .akeru{ line-height:1em; } ↑これです。テキストとCSS3について説明されているＨＰと各マチマチなもので戸惑っています。
- ベストアンサー
- HTML
- このCSSの意味を教えてください！
この前見ていたホームページのCSSで今まで見たことのないCSSを見つけました。 body { font: normal 11pt/14pt "ＭＳゴシック", "Osaka"; color: #000000; letter-spacing: 0.3px} この意味を知りたいのですが、一番気になっているのは一番上のフォント設定なのです。 この場合11ptの文字で表示するということなのか、16ptの文字で表示するということなのか、いまいちよくわからないので、このCSSを使った場合にどのような設定になるかを教えてください。よろしくお願いいたします。
- ベストアンサー
- CSS
- IE6だと表示がおかしく表示される。
添付写真の上がIE9での表示で、下はIE6(IETesterで表示)ですが。 殆んど同じ記述で「写真」の無いページは、正しく表示しています。 必要と思われるタグは、下記の内容です。なお親ホントは100%です。 <div style="width:32%;float:left;"><img src="省略></a></div> <div style="width:59%;float:left;"><img src="省略"></a></div> <div style="font:1em/2.8em 'ＭＳ 明朝',serif;width:27.9em;float:clear:both;"> <div style="margin-left:9.52em;font-weight:bold;clear:both;">九月十八日</div> <div style="clear:both;width:27.9em;"> <div style="width:11.63em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;">省略</div> <div style="width:5.81em;font:1em/1.4em 'ＭＳ 明朝',serif;float:left;">省略</div> <div style="width:10.34em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;">省略</div> 省略 </div> <div style="font:1em/2.8em 'ＭＳ 明朝',serif;width:27.9em;float:"> <div style="clear:both;width:27.9em;"> <div style="width:11.63em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;margin-top:1.5em;">省略</div> <div style="width:5.81em;font:1em/1.4em 'ＭＳ 明朝',serif;float:left;margin-top:1.5em;">省略</div> <div style="width:10.34em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;margin-top:1.5em;">省略</div> 省略 </div> 誤り内容を教えて下さい。 http://ryuso.info/test/ryu180_250.htm
- ベストアンサー
- CSS