質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

タグ

特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1044閲覧

cssで行間を広げたいのですが広がりません。

kimu05

総合スコア23

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

タグ

特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/07/14 05:26

実現したいこと

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; } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2021/07/14 05:40

ご提示のコードを試してみましたが、行間は空いていました。 ご提示いただいていない部分に原因があると思われます。 そもそも、sans-serif で指定しているのに、明朝体のフォントが使われているのが怪しい感じがします。
Lhankor_Mhy

2021/07/14 05:44

というか、そもそも、#newPageがないような……?
kimu05

2021/07/14 05:46

ご回答ありがとうございます! なるほど、別の場所ですね。。調べてみます。 はい、私もそう思い、#newPageで囲ってみたのですが、反映されずでして。。
kimu05

2021/07/15 03:18

調べますと、仰られた通り、モール内の別の場所にcssが散りばめられていて、 効かせたいcssが効かなくなっておりました!ありがとうございました。
Lhankor_Mhy

2021/07/15 03:45

ご解決されて何よりです。
guest

回答2

0

line-heightが指定されているはCSS内に2カ所ありますが、どちらもセレクタの指定によりどの要素にも適用されていません。

最初の方はIDセレクタで"newPage"を指定してますが、HTMLにこのIDはありません。
一部省略されているようなので、祖先の要素から継承されるのかもしれませんが。

2番目の方は"lineTable"のクラスセレクタが指定されていますが、HTMLにこのクラスがありません。

いらないものが多いように見えるので、一度すっきりさせてみては。

投稿2021/07/14 09:54

yossie

総合スコア106

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kimu05

2021/07/15 03:21

ありがとうございます! モール内で別の場所にcssが散りばめられていて、cssが無効になってしまっていたので 別場所のcssを消去したら解決いたしました。また、ご指摘いただいた通り、使われていないcssが多かったので整理しました。ありがとうございました。
guest

0

自己解決

モール内の別場所にcssが入力されていて、そちらが優先されておりました。
優先されていたcsswp消去したところ、記述のcssが効きました。
Lhankor_Mhy様、yossie様ありがとうございました。

投稿2021/07/15 03:24

編集2021/07/15 03:26
kimu05

総合スコア23

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問