• ベストアンサー

line-heightが利いてない

下記のように指定しましたが、line-heightだけ利いてないと 思います。行間があきません。 #new { width:160px; text-align: left; line-height: 150%; float:left; margin: 10 10 10 0; padding: 5; border:1px solid #800000; clear : left; } HTML <div id="new">コラム<br>{$tag}</div> $tagはphpを使っています。 line-heightが利かないことはあるのでしょうか？

  • HTML
  • 回答数2
  • ありがとう数2

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

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

<div id="new">コラム<br>{$tag}</div> 上記の表示の場合、line-heightは<br>には適用されません。 別に<br>の指定も必要になってきます。 例えば・・・ table { font-size: 14px; 　　　　color: #2F4F4F; 　　　　letter-spacing: 1px; 　　　　line-height: 18px; } br {letter-spacing: 0;} ↑ これを足して一度お試しください。

Scotty_99
質問者

お礼

回答ありがとうございました。 ほぼおっしゃるとおりの方法でできました。 また、よろしくお願いします。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

＞行間があきません。 とくに問題ないかとおもいますが、具体的に何がちがうと思うのでしょうか？ とりあえず見た目がわかりにくいようであればもっと大きな数字 （たとえば1000%とか10emとか）を入れれば行の高さが設定 されていることは確認できると思います。 ちなみに変数$tagが空だった場合は、行がないので１行分としてカウント されるようですが、そのことをいいたいのですか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 行間があかない

    PHPでプログラムを組んでいます。 Firefoxでは行間（line-height）があくのですが、IEではあきません。 行間があかない、つまり指定なしの行間となってしまいます。 $tag_new .= $i . ".<a href =./index.php?mode=diary&id=' . $row[id] . '>" . $title . "</a><img src = ./images/new.gif><br />\n"; とプログラムを組んで、 <div class="new">新着コラム<br /> {$tag_new}</div> と表示しています。 ふしぎなことに、新着コラムとつぎの行だけ行間があきます。 Firefoxではすべてあきます。 Cssでは .new { width:210px; text-align: left; line-height: 24px; float:left; margin: 10 10 10 0; padding: 5; border:1px solid #800000; clear : left; } としています。 解消法あれば教えてください。

    • ベストアンサー
    • HTML
  • Firefoxでheight:100%がきかない？

    ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。 よろしくお願いいたします。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定・IE6のハック*/ #wrapper { width: 1000px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FF0000; } body > #wrapper { height:auto; } /*ヘッダの設定*/ #header { width: 1000px; height: 123px; clear: both; } /*メインコンテンツの設定*/ #container { width: 1000px; clear: both; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#00FF00; } /*左カラム外側（2カラム内包）*/ #container_left01 { width: 732px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（左側）*/ #container_left02 { width: 268px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（右側）*/ #container_left03 { width: 463px; float: right; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height: 100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FFFF00; } /*右カラム*/ #container_right01 { width: 267px; float:left; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>

  • Fire foxで2カラムの表示が乱れる

    こんにちは。 閲覧していただいてありがとうございます。 現在会社のサイトをコーディングしています。 IEでは問題なく表示されるのですが Fire foxで確認したところ、2カラムの部分の表示が乱れてしまいます。 具体的に言うと、 メニュー（左側）の横にメイン（右側）が並ぶ状態が メニュー（左側）の下に回り込んでしまう状態です。 floatの設定に問題があるのかなと思うのですが どうも分かりません； 以下がソースになります。 申し訳ないのですが、少し急いでいるので お早めにご教授いただけると助かりますm(_ _)m ＜HTMLソース＞ <div id="layout"> <div id="header">ヘッダー</div> <div id="contents"> <div id="menu">メニュー（左側）</div> <div id="mein">メイン（右側）</div> </div> <div id="footer">フッター</div> </div> ＜CSSソース＞ #layout{ margin:0px; padding:0px; width:762px; text-align:left; background-color:#fff; border-right:1px solid #ccc; border-left:1px solid #ccc; } #header{ margin:0px; padding:0px; } #contents{ margin:0px; padding:0px; width:760px; } #menu{ margin:0px; padding:0px; width:190px; line-height:1.5em; float:left; background-color:#f4f4f4; border-right:1px dotted #ccc; border-left:1px dotted #ccc; border-bottom:1px dotted #ccc; } #mein{ margin:0px; padding:15px; width:550px; float:left; } #footer{ margin:0px; padding-left:195px; width:760px; clear:both; border-top:1px dotted #ccc; line-height:1.3em; }

    • ベストアンサー
    • HTML
  • floatとclearを使ったレイアウト作成について

    http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。

    • ベストアンサー
    • HTML
  • ブログを３カラム右右から左右両サイドにしたい。

    現在CSSは下記のようになっています。 どこをいじれば右右から左右両サイドにできるのか教えていただけたら嬉しいです。 宜しくお願い致します。 /** 03. Layout - レイアウトの設定 */ /* ----------------------------------------------- */ body { margin: 0; padding: 0; min-width: 960px; text-align: center; background-image: none; background-repeat: repeat; background-position: 50% top; } div#containerWrap { width: 960px; margin: 0 auto 5px; } div#container {} div#content { padding: 10px 0; border-width: 1px; border-style: solid; } div#main , div#sub , div#extra { overflow: hidden; } div#main { float: left; display: inline; width: 538px; } div#main div.column-inner { padding: 0 10px 10px; } div#sub { float: left; display: inline; width: 210px; } div#sub div.column-inner { padding: 5px 10px 0; overflow: hidden; border-width: 1px; border-style: none none none solid; } div#extra { float: left; display: inline; width: 210px; } div#extra div.column-inner { padding: 5px 10px 20px; overflow: hidden; border-width: 1px; border-style: none none none solid; }

    • ベストアンサー
    • HTML
  • ＣＳＳのフッター部分について

    ＣＳＳ初心者です 今回外部ＣＳＳで作成したのですが途中まではうまくいきました しかし最後のフッターを入れるとレイアウトが崩れるのです。 今回の形状はページに上から「ページ(ホームページタイトル)」「ヘッダー(サブタイトル)」「同域上に左右に分けて「submanu」「main」」として最後にfootで「コピーライトなどを書いて」閉めたいのです 作ったCSSは以下の通り(どこが悪いのでしょう(foot入れるまで理想に近づいていたのですが)) *{ margin: 0px; padding: 0px; } div#page { text-align: left; border: 1px solid #333333; background: #66FFFF; width: 720px; margin: 0px; } div#head { width: 720px; padding: 5px 5px 0px 0px; margin: 0px; background: #FF00FF; } div#main { margin: 0px; border-left: 1px solid #FF; padding: 20px 0px; background: #00CCFF; width: 560px; height: 5000px; float: left; } div#submenu { width: 160px; height: 5000px; margin: 0px; padding: 20px 0px; float: left; background: #00FF33; } div#foot{ clear:both; text-align:center; font-size:10px; background:#FFFFFF; width:720px; height:20px; }

    • 締切済み
    • CSS
  • レイアウト、フッターが崩れてしまいます。

    横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">&copy;＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main　p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }

  • 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>

  • なぜ2重に囲うやり方をするのか

    CSSの勉強のためにいろんなサイトのソースを見ていますが、ちょっと疑問に思う点がありました。よくコンテンツが書いてあるエリアを左や右へ寄せたい場合、divタグでコンテンツをくくり、そのdivにfloatの値を入れます。普通これだとdivでくくるのは1回だけでいいはずですが、多くのサイトでは2重にdivで囲っています。例えば外側はoutside_border、中はinside_borderとし、outside_borderにfloatやmarginを設定し、inside_borderにはpaddingやborderの属性が与えられていました。これって１つのdivでくくってしまえば、1つで済むと思うのですが、なぜこういったやり方をしているんでしょうか？ ///////////////////////////////////////// #outside_border { float: left; margin: 0px; } #inside_border { margin: 0px; padding: 3px; border: solid 1px #CCCCCC; }

  • CSS　左右違う大きさのボックスでheightを合わせたい

    外部CSSでHPを作成しています。 基本的なことかと思いますが、調べてもどうしてもうまくいかないので 皆さまのお力をお貸しください。 左右にボックス（で良いのでしょうか？）を置き、その中にテキストを入れています。 それぞれ文字数が違うためheightのサイズがばらばらのため、現在指定していません。 固定すれば解決しそうですが、縦には数十個のボックスを並べているのでできません。 どのようにしたら文字数の少ないボックスを、文字数の多いボックスに合わせられるのでしょうか？ また、テキストを何も入れていない状態で、左右のheightがずれているのはなぜなのでしょうか？ どうぞご教授ください。 よろしくお願い致します。 /*CSSファイルの記述*/ .waku1{ border : solid 1px #999999; border-bottom: none; width :150px; float : left; background-color : #e8e8e8; line-height: 160%; } .waku2{ border : solid 1px #999999; border-left: none; border-bottom: none; width :335px; line-height: 160%; word-break: break-all; } .waku3{ border : none; border-bottom: solid #999999 1px; border-top: solid #999999 1px; width :150px; float : left; background-color : #e8e8e8; line-height: 160%; } .waku4{ border : none; border-bottom: solid #999999 1px; border-top: solid #999999 1px; border-left: none; border-bottom: none; width :335px; line-height: 160%; word-break: break-all; } .clear{ clear : left; } /*HTMLファイルの記述*/ <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku3"></div> <div class="waku4"></div> <div class="clear"></div>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する