実現したいこと
CSSで文字の行間を設定しようとしているのですが、
行間がかなり詰まってしまった状態で表示されてしまいます。
line-heightで調整しようかとしたのですが、反映されずです。
作業しようとしているモール内では、idのnewPageで囲わなくても、
他の効果は反映されていまして、行間のみ反映されません。
試しにnewPageで一度囲ってみましたが行間は変わらずでした。
line-heightをつける場所を間違えているのでしょうか。
どうかお力添えお願い致します。
html
<table width="700px"><tr><td> <p> 仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮 </p> <br> <img src="a.jpg" width="100%"><br><br> <center><p><font size="5"> 仮仮仮仮仮仮仮<br>仮仮仮仮仮仮!<br>仮仮仮仮仮仮仮仮仮 </font></p></center> <br> <p> <font size="3"> 仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮。<br> 仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮。<br> 仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮。<br> 仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮仮。<br><br> <br><br> </font> </p> <br><br> <img src="a.jpg" width="100%"><br><br> <br><br> </td></tr></table> <table width="700px" cellspacing="1" bgcolor="#cccccc" cellpadding="8" border="0"> <tr align="left"> <th bgcolor="#f3f3f3" colspan="3"> 仮仮仮仮仮仮仮仮仮 </th> </tr> <tr align="left"> <td bgcolor="#ffffff" width="30%"> <a href="#" target="_blank"> <img src="a.jpg" width="100%"> <p> 仮仮仮仮仮仮仮仮仮 </p></a> </td> <td bgcolor="#ffffff" width="30%"> <a href="#" target="_blank"> <img src="a.jpg" width="100%"> <p> 仮仮仮仮仮仮仮仮仮 </p></a> </td> <td bgcolor="#ffffff" width="30%"> <a href="#" target="_blank"> <img src="a.jpg" width="100%"> <p> 仮仮仮仮仮仮仮仮仮 </p></a> </td> </tr> </table> <br><br> <!-- シリーズ・カテゴリへのリンク --> <a href="#" target="_blank"> <img src="a.jpg" alt="仮仮仮仮仮仮仮仮仮" width="100%"> <p>→シリーズ一覧を見る</p> </a> <br><br>
CSS
@charset "UTF-8"; /* CSS Document */ #newPage { max-width: 700px; line-height: 1.8; color: #333333; margin: 0 auto 120px; font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Meiryo','Hiragino Sans','YuGothic','Yu Gothic','MS PGothic' sans-serif; } #newPage a{ color: #000000; text-decoration: none; } #newPage p,.caution { font-size: 16px; font-size: 1rem; padding: 0 10px; margin: 0; } #newPage p b { font-size: 32px; font-size: 1.875rem; font-weight: 100; } #newPage p b b { font-size: 24px; font-size: 1.5rem; font-weight: 100; } #newPage img { padding-bottom: 20px; } #newPage table, .specTable{ font-size: 14px; font-size: 0.875rem; width: 100%; border-collapse: collapse; } #newPage table a, .specTable a{ display: block; text-decoration: none; color: #333333; } #newPage table img, .specTable img{ width: 100%; padding-bottom: 10px; } #newPage table p, .specTable p{ padding: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } #newPage table tr, .specTable tr{ vertical-align: top; } #newPage table th, .specTable th{ font-weight: 600; text-align: left; background-color: #eee; } table.lineTable tr{ border: 1px solid #ddd; } table.lineTable td{ border-right: 1px solid #ddd; } table.lineTable img{ padding-bottom: 10px; } table.lineTable p{ line-height: 1.3; } table.whiteTable tr:not(:last-of-type) td{ padding-bottom: 20px; } table.whiteTable td:nth-of-type(odd){ padding-right: 8px; } table.whiteTable td:nth-of-type(even){ padding-left: 8px; } .itemBanner{ display: block; } .itemBanner img{ padding-bottom: 5px !important; } .itemBanner p{ text-align: right; } .arrow::before{ content: "\002192"; padding-right: 5px; } #commonIframe{ height: 1800px; overflow: hidden; } #container{ margin: auto; max-width: 700px; } #container a{ display: block; } .btn{ color: #ffffff; padding: 15px 0; width: 80%; margin: auto; text-decoration: none; text-align: center; background: #000000; } @media screen and (max-width: 640px) { #newPage center p b { font-size: 20px; font-size: 1.25rem; } #newPage p b b { font-size: 18px; font-size: 1.125rem; } #newPage p,.caution { font-size: 14px; font-size: 0.875rem; padding: 0; } table.whiteTable p{ font-size: 10px !important; font-size: 0.625rem !important; } #commonIframe{ height: 800px; } }
回答2件
あなたの回答
tips
プレビュー