スタイルシートについてお尋ねします

このQ&Aのポイント
  • スタイルシートを使用する際、フォントサイズや位置指定によって表示が異なることがあります。
  • <div style="font-size:70px;"<p align="center"><font face="HGS行書体" color="#993333">文章 </font></p></div>とすると、文字がページの一番上のセンターに表示されます。
  • <div style="font-size:70px;"><p align="center"><font face="HGS行書体" color="#993333">文章 </font></p></div>とすると、文字がページの上から2cmほど下がった位置に表示されます。
回答を見る
  • ベストアンサー

スタイルシートについてお尋ねします

<div style="font-size:70px;"<p align="center"><font face="HGS行書体" color="#993333">文章 </font></p></div> とすると、「文章」のところに入力した文字はページの一番上のセンターにちゃんと表示されるのですが、 <div style="font-size:70px;"><p align="center"><font face="HGS行書体" color="#993333">文章 </font></p></div> と、70pxの後ろに>を入れると、ページの上から2cmほど下がったところに文字が表示されてしまいます。 形式としては後者の方が正しいと思うのですが、なぜ表示が下がってしまうのでしょう。 よろしくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

確かに 下は、数センチ下がった場所に表示されます。 下は、 <DIV>の中に、<p> 段落を入れて記載され、それが <p align="center"><font face="HGS行書体" color="#993333">文章 </font></p> で、正しく認識されているからと思います。 上は、</p>の記載が無いため、<p align="center">は、<DIV>の命令の一部と見做され、段落とは見做されない。 上の記載は本来、下記と思います。 <div style="font-size:70px;" align="center"><font face="HGS行書体" color="#993333">文章 </font></div>

Braeswood
質問者

お礼

ありがとうございます。上にも</p>は入っているのですが。いずれにせよ、#2さんが書いてくださった記載にすると、ちゃんと表示されました。ありがとうございました。

その他の回答 (1)

  • pasocom
  • ベストアンサー率41% (3584/8637)
回答No.1

私の環境でIE8とGoogle Chrome で確認しましたが、「>」を入れようと入れまいと両方とも表示は同じ(変化しない)です。 質問者様は、どのような環境とブラウザでお試しですか。確認下さい。

Braeswood
質問者

お礼

そうですか。環境とブラウザによるのですね。 あまりPCに詳しくないうのですが、環境というとOSでよいのでしょうか。Windows7を使っています。ブラウザはIE8です。

関連するQ&A

  • スタイルシートを使用したサイト作りで

    サイトページの真ん中に450pxの白の柱に本文を入れ、周りをすべて黒というスタイルにしたく思ってます。 柱をウィンドウの上から下まで表示したいのですが、どうしてもうまくいきません。どうぞ御指南下さい!!作ったタグを載せます。 *{margin:0; padding:0; font:normal normal normal x-small/1.5em Verdana,"MS ゴシック",Osaka,Gothic,sans-serif;} body{ height:100%; background-color:#000000; color:#000000; cursor:default;} br{ letter-spacing:normal;} #body{margin:0px auto; width:450px; height:100%; background:#ffffff;} #header{padding:0px} #menu{padding:0px 0px 5px; text-align:center;} #main{padding:0px 10px;} #navi{text-align:right; padding:0px 10px;} #foot{height:123px; background:url(img/img2.gif) no-repeat 0% 0%;} .text{padding:0px 0px 10px;} p{padding:1px 0px;} h1,h2{font-weight:bold;} h1{text-align:center; color:#666666; font-size:190%; padding:10px 0px 0px;} h2{ text-align:left; color:#000000; font-size:100%; padding:0px 2px; margin:5px 0px;} サイトページ <body> <div id="body"> <div id="menu"> <h1 id="TOP">- ABOUT - </h1> </div> <hr class="none"> <hr class="none"> <div id="main"> <h2>test</h2> <div class="text"> <p>test</p> </div> <h2>test</h2> <div class="text"> <p> test </p> </div> </div> <div id="navi"> <p>INDEX // <a href="#TOP">PAGE TOP</a> // </p> </div> </div> </body> </html>

  • div style 簡素化するには?

    <div style="text-align:center;" style="font-size:50%;"> を簡素化するにはどうすればいいでしょうか? <div style="text-align:center;" "font-size:50%;"> にしたら、うまく表示されませんでした。

    • ベストアンサー
    • HTML
  • divにも同じフォントスタイルを適用したい

    現在 p { color : #222222;} p { font-family: Arial, Helvetica, sans-serif;} p{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%; } このような指定をしてあります。 しかしセンタリングなどに <div style="text-align:center;">のタグを使用するとセンタリングはされますけれど、上記CSSが反映されませんよね。 あちこちのHPを参考に色々試行錯誤をしていますけれど上手く反映されません。 div { color : #222222;} div { font-family: Arial, Helvetica, sans-serif;} 以下略 div.test 等に変えても同じです。 どこがダメなのでしょうか?

    • ベストアンサー
    • HTML
  • タグに直接書き込むスタイルシートを、外部あるいはページ内にわけるには?

    下記テンプレートソースですが、タグに直接書き込むスタイルシートになっています。 このソースを、外部あるいはhead内に設定するには、どういうわけ方をしたらいいですか? いろいろ自分で試したのですが、うまく表示されません宜しくお願いします。 <table><tbody><tr><td> <div style="border:1px solid #ff6699;background:#ffcccc;font-size:13px"><div style="padding:3px" align="center"> * ここにタイトル * </div><div style="border-top:1px solid #ff6699;background:#fff;padding:10px" align="left"> * ここに本文 * </div></div> </td></tr></tbody></table>

    • ベストアンサー
    • HTML
  • スタイルシートでのデザイン

    HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。

    • ベストアンサー
    • CSS
  • スタイルシートの文字のサイズを変更したいのにできません・・・

    今小説サイトを作っていて、小説ページに外部スタイルシートを呼び出しているかたちにしています。 スタイルシートはホームページのテンプレートについていたものなのですが、基本設定は下のような感じになっています。 /* 基本設定 */ body,td,th{ font-size:65%; color:#333333; font-family:Verdana,Osaka,'MS P Gothic'; font-weight:normal; margin:0px; padding:0px; } body{ text-align:center; } ここのfont-sizeのところを変えれば文字のサイズを変えられるのかと思ったのですが、%の数字を変えてもmediumやlargeにしてもアップした小説ページを見てみると変わっていません。 スタイルシートの変更の仕方がおかしいのでしょうか。 それとも直す部分が違っているのでしょうか。 教えていただけると助かります。

  • スタイルシートが反映されない。

    htmlに <link rel="stylesheet"type"text/css" href="style.css" media"all"> と記入 style.cssに <style type="text/css"> <!-- body{ text-align:center; padding-top:20px; h1{ text-align:center; font-size:1.5em; color:♯800000; backgraund-color:♯FFFFFF; padding-top:20px; padding-bottom:20px; } --> </style> と記入 bodyは反映されるのにh1が反映されません。 原因がまったくわかりません。 なにが悪いのでしょうか?。 よろしくお願いします。

  • スタイルシートの書き方を教えてください!

    各文章の字間を空けるために部分的に <FONT style="line-height:150%"color="#c0c0c0"> </FONT> このようにしていしていたのですが、ページ全体にスタイルシートを使用して字間を調整するにはどのようなタグを書けばいいのでしょうか?色々と書き方があると思うのですが、素人にもわかりやすいように教えていただけますでしょうか、今現在使っているスタイルは以下の通りです。それをどのように書き換えればいいのでしょうか?どなたかおしえていただけますでしょうか。 <style type="text/css"><!-- body{ font-size : 10pt;color : #cccccc; background-color: #000000;} body{ font-face="MS UI Gothic, ヒラギノ明朝 Pro W3;} body{ font-style : "line-height:150%"; } TABLE { font-size : 10pt;color : #cccccc; } TABLE { font-face="MS UI Gothic, ヒラギノ明朝 Pro W3; } TABLE {font-style : "line-height:150%";} td{font-size : 10pt;color : #cccccc; } td{font-face="MS UI Gothic, ヒラギノ明朝 Pro W3;} td{font-style : "line-height:150%"; } --> </style>

    • ベストアンサー
    • HTML
  • スタイルシート

    #Area_Login table .tbl { margin-left: auto; margin-right: auto; border: solid 1px #FFFFFF; background-color: #000000; } #Area_Login table .tbl th { text-align: center; font-size: 12pt; background-color: #AFB4DB; height: 15px; } #Area_Login table .tbl td { text-align: center; font-size: 11pt; background-color: #AFB4DB; border: solid 1px #FFFFFF; } <div id="Area_Login"> <table class="tbl"> <tr> <th><th> <tr> <td></td> </tr> </table> </dib> 上記ソースなのですが、テーブルが中央に配置されなくて困っています。 どなたか教えていただけませんか?

    • 締切済み
    • CSS
  • HP作成初心者です。詳しい方誰か教えて下さい!

    HP作成初心者です。 Mobile Spaceで作成しています。 リアルタイムを編集しているのですが、親記事自由表示の所が合っているのか分かりません。 チェックして頂けるとありがたいです。 どうぞよろしくお願いします。 (チェックしてほしい内容です↓) <br><div align="center"><div align="center"><table width="90%" bgcolor="black" cellspacing="1"><tr><td bgcolor="white"><font color="black"> <font style="font-size:10px"><DIV align="left"></a> <blockquote> <blockquote style="margin:3px 3px 5px 5px;"><font style="letter-spacing:1px;line-height:10px">#body#</Font> #photo3# </blockquote></DIV><DIV align="right"><font color=#000000>( #td#/#etm#/#ty# #th#:#ti# </font>&nbsp;#tbody# </a>&nbsp;</a><font color=#000000>) </font> </DIV></font></td></tr></table></div>

専門家に質問してみよう