- 締切済み
スタイルシート 見出しを区別させたい
kanokonokoの回答
- kanokonoko
- ベストアンサー率0% (0/2)
実際のソースを見ないことには何ともいえませんが、 一つの可能性として、「うんたらかんたら」と省略された部分のCSSの記述に 間違いがあるのではないでしょうか？（:や;の抜けなどの記述ミス） 基本的には間違えていないと思いますので…… 見当違いの回答でしたら、申し訳ありません；
関連するQ&A
- line-height
<html> <head> <title>test</title> </head> <body> <style type="text/css"> p.example1{ line-height:10em; } </style> <p class="example1">test1</p> <p class="example1">test2</p> </body> </html> line-heightを使うと、上の余白もあいてしまうのですが 行間だけ開けて、上下の余白は開けない方法はありますか？ 不可能だったら文字と文字の間に改行を入れたりした方がいいのでしょうか？
- ベストアンサー
- CSS
- HTML&CSS DIVをぴったりと縦に並べたい
HTML&CSS初心者です。 下記のソース様に、DIVで一つにまとめたBOXを縦に並べたいのですが、 「見出し002」の上のマージンがうまく取れずに困っています。 .box内のphoto00.jpgをフロートにしている為、フロートが悪さをしている事を考え、 「見出し002」の上のDIV内に<br style="clear: both;" />を入れると、余白が生まれるのですが、 MacのSafariとFirefoxでは、余白の差が出てしまいます。（Safariの方が余白が大きい） <br style="clear: both;" />を入れないと、上のマージンはほぼ消えてしまい、わずかにFirefoxの方では余白が生まれます。 ちなみにこの現象は「ここにテキストが入ります。」の行数を減らすと解決するのですが、 下記のソースでも、photo00.jpgの高さをはみ出す行数ではない為、この<div class="box">に 変な膨らみを持たせたくありません。 どなたか解決法を教えて下さい。よろしくお願い致します。 【HTML】 <div id="main"> <div class="mds01"><h3><em>見出し001</em></h3></div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p> </div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p><br style="clear: both;" /> </div> <div class="mds02"><h3><em>見出し002</em></h3></div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p> </div> </div> 【CSS】 /*メイン大枠部分*/ #main { margin: 0px; padding: 0px; width: 627px; float: right; background: #FFFFFF; height: auto; } /*各見出し*/ .mds01 h3 { background: url(img/mmds01.gif) no-repeat; margin: 25px 0px 15px; padding: 0px; height: 20px; width: 587px; font-size: 9px; color: #FFFFFF; clear: left; float: none; } .mds02 h3 { background: url(img/mmds02.gif) no-repeat; margin: 25px 0px 15px; padding: 0px; height: 20px; width: 587px; font-size: 9px; color: #FFFFFF; clear: left; float: none; } /*ボックス*/ .box { margin: 0px; padding: 0px; height: auto; width: 587px; clear: left; } /*ボックス内・画像とテキスト*/ #main .box img { float: left; padding-right: 10px; } #main .box h5 { font: bold 14px "ＭＳ Ｐゴシック", Osaka; color: #022962; margin: 0px 0px 10px; padding: 0px; } .txt { font: normal 13px/16px "ＭＳ Ｐゴシック", Osaka; color: #333333; margin: 0px; padding: 0px; } em { visibility: hidden; }
- ベストアンサー
- HTML
- 見出しの装飾についての質問です。
ＷＰで見出しの装飾をしたいのですが、うまくいきません 手順としては (1)子テーマに、ＣＳＳを追加（クラス） (2)本文をテキストモードで編集 詳細 (1) 外観⇒テーマの辺州 Simplicity2 child: スタイルシート (style.css) を表示 @charset "UTF-8"; /*! Theme Name: Simplicity2 child Template: simplicity2 Version: 20161002 */ /* Simplicity子テーマ用のスタイルを書く */ とあるので、最後の /* Simplicity子テーマ用のスタイルを書く */ の下に、見出し装飾タグの headline { background: #dfefff; box-shadow: 0px 0px 0px 5px #dfefff; border: dashed 1px #96c2fe; padding: 0.2em 0.5em; color: #454545; } を追加し、更新 (2) 本文の見出し（ｈ２）を修正 <h2>見出し</h2> を <h2 class="headline">見出しタイトル</h2> に変更 更新 どこがいけないのでしょうか・・・
- 締切済み
- CSS
- スタイルシートを使用したサイト作りで
サイトページの真ん中に４５０ｐｘの白の柱に本文を入れ、周りをすべて黒というスタイルにしたく思ってます。 柱をウィンドウの上から下まで表示したいのですが、どうしてもうまくいきません。どうぞ御指南下さい！！作ったタグを載せます。 *{margin:0; padding:0; font:normal normal normal x-small/1.5em Verdana,"ＭＳ ゴシック",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>
- ベストアンサー
- その他([技術者向] コンピューター)
- 見出し<h3>にリンクを追加すると背景画像が表示されない
h3の見出しに<a>を追加するとh3に設定していた見出し画像がIEで表示されなくなってしまいました。 FireFoxではきちんと表示されているので IEのバグかと思っているのですが、 もし解決方法がありましたら、アドバイスいただければ幸いです。 [HTML] <div class="contents"> <h3><a>見出し</a></h3> </div> [CSS] .contents h3 { background: url(../images/marker_blue_square.jpg) no-repeat 0 0.1em; padding:0 0 0 25px; margin-left:2.2em; margin-top:1em; font-size:medium;} 色々と試してみたんですが、 たとえば、以下のように見出しの文章の一部にリンクを張ると 見出しの背景画像がきちんと表示されました。 [HTML] <div class="contents"> <h3>見<a>出し</a></h3> </div> また、CSSに以下を追加してみたんですが 背景画像が二重になって表示されてしまいました。 [CSS] .contents h3 a { background: url(../images/marker_blue_square.jpg) no-repeat 0 0.1em; padding:0 0 0 25px; margin-left:2.2em; margin-top:1em; font-size:medium;} よろしくお願いします。
- 締切済み
- HTML
- marginを指定した見出し要素の後に段落要素をつけるとmarginが変なことになります。
CSSとHTMLでホームページを作っています。 ですがなぜかIEの表示のみ、妙な表示になります。 <h3>などの見出しタグで見出しを作り、そのあとに段落でいろいろ指定していると、なぜか見出しのマージンが後の段落に影響します（IEのみ）。 この対策法を教えていただけないでしょうか？ ソース（一部を抜粋、少し書き換え）は HTMLは4.01 Traditional（DTDあり）で、 <h3 class="st">ABOUT</h3> <p> ここは×××の管理する、・・・・サイトです。<br> ●●はメインからどうぞ。 </p> <h3 class="st">Update Log</h3> <p> 2009/03/24 ああああああああ<br> 2009/03/23 あああああああああ<br> ああ<br> </p> CSSは h3.st{color:#727171;background-color:#ffffff;font-size:95%;text-align:center;margin:0px 25px;padding:3px 0px;border-bottom:#87ccd4 1px dotted} p{text-align:left;margin:0px;padding:3px 32px;line-height:200%;font-size:90%;} です。 CSS内で、CLASS要素を指定した他のpタグにfloatを指定しましたが、それが影響しているかと思って消してみても変わりません。 どうかよろしくお願いします。
- ベストアンサー
- HTML
- スタイルシートを入れる場所
初心者です。 html文に ----------------------------------------------- <style> table { border-collapse: collapse; } td { border: solid 1px; padding: 0.5em; } </style> ----------------------------------------------- というスタイルシートを入れたいのですが、 <HTML> <HEAD> <TITLE>test</TITLE> </HEAD> <BODY> </BODY> </HTML> のどこの間に入れればいいのでしょうか？ <BODY>と</BODY>の間でしょうか？ それとも <HEAD>と</HEAD>の間でしょうか？
- ベストアンサー
- HTML
- 文末に「…」を追加するCSSの記述について
下記は、ブラウザのサイズが変更されても2行で表示するように記述したものです。 これに文末に「…」を追加するにはどのように記述すれば良いでしょうか？ 表示結果 現在 「ああああああああ ああああああああ」 このように表示したい 「ああああああああ あああああああ…」 CSS .AAA { margin:0; padding:0px; height:2.6em; line-height:1.4em; overflow:hidden; vertical-align:top; } HTML <p class=AAA>ああああああああああああああああああああああああああああ</p>
- 締切済み
- CSS
- メニューをスタイルシートで設定
画像を使用したメニューをULタグとLIタグで作成し、 スタイルシートで余白等の設定しましたが、画像の下に余白が入ってしまいます。 背景色をつけたところ、LIタグに余白がついていることは 確認できたのですが、これをなくす方法が分からずにいます。 HTML----------------------------------------------------- <UL> <LI><IMG src="img/img1.gif" width="265" height="21"></LI> <LI><IMG src="img/img2.gif" width="265" height="21"></LI> <LI><IMG src="img/img3.gif" width="265" height="21"></LI> </UL> CSS----------------------------------------------------- UL { list-style-type:none; margin:0px; padding:0px; } LI { padding:0px; margin:0px; } アドバイスを頂けると助かります。 どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- 見出しの複数行の対応について
見出しが複数行になった場合の対処法（自動で）をおしえてください | | AAAAAAAAAAAAAAAAAAAAAA |__________________________ 上記のようなL字？の見出しがあります。(本来は実線) これが複数行になると 下線の下に2行目が来てしまいます。 これを | | AAAAAAAAAAAAAAAAAAAAAA | AAAAAAAAAAAAAAAAAAAAAA |__________________________ とするにはどうすれば良いのでしょうか。 ここのコードは HTML <h3 id="item-2" class="ct_sltext">AAAAAAAAAAAAAAAAAAAA‥‥</h3> CSS .content h2, .content h3 { clear:both; font-weight:normal; margin:0; padding:0; } .content h3 { background:transparent url(../images/midasi_bar.gif) no-repeat scroll left 4px; height:40px; margin-bottom:10px; padding:10px 0 5px; } .content h3.ct_sltext { color: #カラー; font-size:17pt; font-style:italic; padding:0 0 5px 40px; } こんな感じになってます。
- ベストアンサー
- HTML
お礼
ありがとうございます。 省略したところは、 大手のテンプレートサイトから、 飾り枠をコピーしたもので、 ここが間違っていることはないだろうと思いまして まさかそこが間違っているとは・・（笑