HTMLで行間が空く問題の解決方法を教えてください
- Wordpressの投稿欄を使用してHTMLを作成していますが、特定の箇所で行間が2か所空いてしまいます。行間を空けずにフォントの色や大きさを指定する方法を教えてください。
- 行間が空く問題を解決するために、WordPressの投稿欄で使用しているHTMLを修正したいです。具体的には、特定の箇所で行間が2か所空いてしまう問題が発生しています。フォントの色や大きさはそのままに、行間を空けずに表示する方法を教えてください。
- Wordpressの投稿欄を利用してHTMLを作成していると、特定の部分で行間が2か所空いてしまう問題が発生しています。行間を空けずにフォントの色や大きさを指定する方法はありますか？
- ベストアンサー
HTMLで行間が空く問題の解決方法をおしえてくだい
Wordpressの投稿欄を使ってHTMLを作成しています。 下記記載していますが、添付したイメージファイルのように行間が2か所空いてしまいます。 ※「テストです」行の上下の空行の所です。 --------- 2018.4.8テスト公開1 2018.4.8テスト公開2 <p style="background-color:#414141"><font color="white">テストです</font></p> <small>日時:2018/04/06</small> --------- この2か所の行間を空けないようにしたいです。 ただ、フォントの色指定や大きさの指定はしたいです。 もし、ご提案頂けるのであれば、 <p style="background-color:#414141"><font color="white">テストです</font></p> を具体的にどのように変えればよいか教えて頂ければ非常に助かります。 恐れ入りますがなにとぞよろしくお願いいたします。
- megumi199
- お礼率39% (36/91)
- ホームページ作成ソフト
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<p> タグは上下にmarginが設定されているので行間が空きます。 <div> タグにすればmarginが無いので行間は空きません。 もしくは<p>タグのスタイルでmarginを無くせば行間は空きません。
関連するQ&A
- HTML行間が空いてしまう
Wordpressの投稿欄を使用してHTMLを作成しています。 下記のように書いていますが、添付ファイルのように行間が2か所空いてしまいます。 --------- 2018.4.8テスト公開1 2018.4.8テスト公開2 <p style="background-color:#414141"><font color="white">テストです</font></p> <small>日時:2018/04/06</small> --------- 行間１：「2018.4.8テスト公開2」と「テストです」の間。 行間２：「テストです」と「<small>日時:2018/04/06</small>」の間 以上の2か所の行間を空けないようにしたいです。 ただ、フォントの色指定や大きさの指定はしたいです。 解決策を分かる方がいましたら教えて頂きたくなにとぞよろしくお願いいたします。
- ベストアンサー
- Excel（エクセル）
- テーブルのｈｔｍｌで、文章のサイズと行間を指定したいのですが、
テーブルのｈｔｍｌで、文章のサイズと行間を指定したいのですが、 サイズの設定は、下記のようにできました。 <span style=font-size:14px> それで、これに、行間が狭いので、広くしたいのですが、 line-hight:130%といれても、広がりません。また、２つを同時にいれる書き方が わかりません。 CSSは、使わないで書きたいのですが、書き方を教えてください。 よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- float: leftで横に並べたら、サファリだけ
float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。 ＩＥやファイヤーフォックスではピッタリ表示できています。 問題の箇所は以下です。 <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-001.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト１</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-002.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト２</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-003.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト３</span> </p> </div> どうすればサファリの隙間を消せるでしょうか？
- ベストアンサー
- HTML
- ホームページの行間設定について
ホームページの行間設定について質問です。 ページ全体の行間指定は<style type="text/css"> <!-- body,th,td {line-height : 180%;} --> </style> にしています。その中で一部行間を変えたいのですが<p style="line-height: 150%;"> </p> と入れて見ても変わりません。入れる場所が違うのか何が間違っているのかわかりません。どなたか教えてください。
- 締切済み
- その他（インターネット・Webサービス）
- DreamWeaver CS3でメールマガジン用のHTMLを作業してま
DreamWeaver CS3でメールマガジン用のHTMLを作業してます。 前任者が作ったベースで作業してるので、制御がさっぱりわかりません。 CS以前のゴーライブでの作業は普通に出来ます。 今、格好悪いなぁと思っているのは フォントをさわるたびにStyleが増えてしまっているんです。もうすぐ100近い。 それがメールで一斉に配信されるのがやりきれません。 CSS?、スタイルシート？ できれば、タイトル、見出し、本文、色変え文字3パターンくらいに納めたいのです。 headのコピペを途中までですが下に貼ってみました。 教えて下さい。よろしくお願いします。 <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> body { font-size: 0.9em; } font { font-size: inherit; font-weight: normal; font-style: normal; line-height: normal; text-decoration: none; } p { font-weight: inherit; font-style: inherit; } a, a:link, a:visited { color: #f00; text-decoration: none } a:hover, a:active { color: #fff; background-color: #f00; text-decoration: none; } td {text-align:left;} .bunsho { padding: 4px;text-align:left; } .hard13txt { font-size: 13px; } .hardstandardtxt { font-size: 15px; } .hard12txt { font-size: 12px; } .style17 {font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"} .style1 { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: small; } .style2 {font-size: small} .style3 { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: bold; font-size: small; } .style4 { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: medium; } .style22 { color: #FF0000; font-weight: bold; } .style24 { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 12px; font-weight: bold; color: #FF0000; }
- 締切済み
- ホームページ作成ソフト
- HEAD・HTMLの行間改行が上手くいかないです
携帯サイトの『ナノ』のノベル機能を使い、HEAD内に下記の様に記入しました。 すると携帯では打った通りに打った通りに改行してくれたのですが、PCの方から見ると上手く改行をしてくれません。2回改行すると1行空くので、多分1回分をカウントしてくれていないのだと思われますが…。 PCに合わせると携帯画面では改行しすぎてしまうし、携帯画面で合わせるとPCではひどくキツキツになってしまいます。 HEADを弄るのは余り得意でないため、一体どこを直せば良いのかと頭を抱えています。 どこらへんが悪いに違いないというのも絞りきれないためにHEAD内に記入した物まるっと載せさせて頂きました。 不得意なまま色々と弄ったため、色々と必要ない物がくっついているかもしれませんが、 『どこを直せばPC画面と携帯画面で改行数が同じになるか』というのをお教えください。 ※因みに、改行して欲しいと思った文そのものに<br>を入れても同じ結果になりました。 言葉足らずや用語を知らないために分かりにくい質問内容になっていたら申し訳ありません…。 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS"/> <style type="text/css"> * { font-family:Arial,Osaka,Verdana,Helvetica,sans-serif;} body { scrollbar-track-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-arrow-color:#cccccc; scrollbar-shadow-color:#cccccc; scrollbar-highlight-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-3dlight-color:#cccccc; text-align: center; <pc>font-size: 90%; line-height: 1.7;</pc> padding:5px;} a:link,a:visited { text-decoration:none; border-bottom:dotted 1px #555555;} a:hover { text-decoration:none; color:#bbbbbb; border-bottom:dotted 1px #bbbbbb;} a:active { text-decoration:none; border-bottom:dotted 1px #555555;} input,textarea { margin:2px; padding:1px; color:#111111; background-color:#ffffff; font-size:85%; border:solid 1px #cccccc;} select,option { color:#555555; background-color:#ffffff; font-size:85%;} img { border:0;} /*1番目のbox*/ .all {<pc> width: 690px;</pc> margin: 0 auto; padding: 5px; text-align: left; border:solid 1px #dddddd; background-image:url('#mtr●_url#'); /*●の部分に素材番号を入れると敷き詰めの背景になります*/ background-repeat:repeat; background-position:right top;} /*2番目のbox*/ .header { <pc> width:700px;</pc> margin: 0 auto; padding:0px; <pc>line-height: 1.2;</pc> letter-spacing:3px; font-size:150%; font-family:'Century Gothic',sans-serif;} .content { <pc> width:690px;</pc> margin: 0 ; <pc>line-height: 1.2%;</pc> font-size:80%; padding-top:0px; padding-bottom:0px;} .footer { <pc> width: 690px; clear:both;</pc> margin: 0 auto; padding:3px; <pc>line-height: 1.2%;</pc> letter-spacing:3px; text-align:right; font-size:70%;} /*3番目の枠(幅を設定しないこと)*/ .menu { border-top:solid 1px #dddddd; border-bottom:solid 1px #dddddd; <pc> height:1.2em;</pc> text-align:center; margin-bottom:20px; background-color:#ffffff;} .menu a:link,.menu a:visited{ <pc> display:block; line-height:1.2em; text-align:center; float:left; </pc> border:none; color:#333333; letter-spacing: 2px; padding-left: 15px; padding-right: 15px;} .menu a:hover { <pc> display:block; line-height:1.2em; text-align:center; float:left; </pc> border:none; color:#ffffff; letter-spacing: 2px; background-color: #dddddd; padding-left: 15px; padding-right: 15px;} .main{ margin: 0 auto; padding:0px; <pc>line-height: 1.2; </pc> letter-spacing:1px; /*以下三行(}は除く)背景の色が濃いとき用の白のフィルター背景です。いらない場合は消してください*/ background-image:url('#tmpImg11174-11_url#'); background-repeat:repeat; background-position:right top;} /*特殊*/ .f1{ <pc> width:150px; float:left;</pc>} .clear{ <pc> clear:both;</pc>} /*場所関係なし(好みで増減)*/ .text {margin:1px; padding: 0px; font-size: 100%; font-weight:normal; font-style:normal;} .box1{ padding:5px; margin:5px; border:solid 1px #ffffff;} .uline { border-bottom:solid 1px #dddddd;} .midashi1{ letter-spacing:3px;} .midashi2{ font-weight:bold;} .midashi3{ font-size:120%;} .big { font-size:120%;} .small{ font-size:70%;} </style>
- ベストアンサー
- ブログ
- ブログ HTML
グーグルでブログをしています。 公式のテンプレートを使用しているのですが、 記事の内容を自動的に真ん中にしたいのですがどうしたらいいでしょうか？ body { background:$bgcolor; margin:0; color:$textcolor; font:x-small "Trebuchet MS", Trebuchet, Verdana, Sans-Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; } この部分になにかいれるのでしょうか？ 全くんの初心者です。 宜しくお願い致します。
- 締切済み
- ブログ
- ホームページに画像を貼りたい
ホームページを作成している初心者です。画像を貼りたいのですが、テキストを見ながらやってもうまく行かないので、みなさん良ければ貼り方を教えてください。 <head> <meta charset="utf-8"> <div><title>日本語</title> <link rel="stylesheet"href="style.css"> </head> <body> <h1>初めてのホームページ作成<em>頑張っています☆</em>クレヨンしんちゃん</h1> <h2>camera </h2> <h3>peoples <em>photo</em></h3> <p id="def"> train<br></p> <p class="abc"><strong>yamagata</strong><br></p> <div><p><q>consent</q> <small>town</small> tea<br></p> <p><a href="http://www.yahoo.co.jp">日本語</a> <a href="http://ch.441108.com">楽しい<br></a> <a href="http://www.biccamera.com"/>何でも揃う、ビックカメラ</a> <p id="sample1">HEART</p> <p id="sample2">たれぱんだ</p> 桜が咲く</div> </p> <p1>コロコロ</p1> </body> </html> ↑これがHTMLです。 html,body{font-size:30px;line-height:1.5;} {margin:0; height:100%;} body{ background-image:url(myfile/original.jpg); background-repeats:no-repeat; background-position:center;} h1{ text-decoration: underline; text-shadow: -3px 3px 3px #f0f; color:#000000;opacity:0.7; text-align:left;color:yellow; } h1 em{color:blue;} h2{ text-decoration: overline; font-size:60px; font-style:italic; text-shadow: -3px 2px 3px red; color:pink; text-align:center;} h3{ font-size:60px; letter-spacing:-1px; text-transform:capitalize;} h3 em{color:red; font-style:normal;} p {text-indent:1em;font-size:30px;color:black; } p:nth-child(odd){ color:black; background-color:blue;} #def{color:purple;} p:nth-child(even) {color:white; background-color:lime;} p::first-letter{ color:white; background-color:black;} .abc{color:orange;} p{color:maroon !important;} a:link{color:black;} a:visited{color:green;} a:hover{color:orange;} a:active{color:aqua;} #sample1{border-style:solid;} #sample2{border-style:double;margin:30px;padding:20px;text-align:center;font-weight:bold;} p1{padding:3em; color:white; background-color:silver; border-radius:10px;} ↑これがCSSです。
- 締切済み
- その他（インターネット・Webサービス）
- IE7で行間 助けてください
行間の差がありすぎます。IE7で１行程度の行間が出来ます。行間の差を少なくしたいです。 検証お願いします。 ul{ margin:0; padding:10px 0; font-size:85%;} li{ display: block; float:left; margin:0; padding: 0px 8px; white-space:nowrap; list-style:none;} <div style="width:400px;"> <ul> <li>あああああああああ</li> <li>いいいい</li> <li>ううううううううう</li> <li>ええええ</li> <li>おおおおおおおおお</li> <li>かかかか</li> <li>ききききききききき</li> <li>くくくく</li> <li>けけけけけけけ</li> <li>こここここここここ</li> </ul> <br style="clear: both;" /> </div>
- ベストアンサー
- HTML
お礼
ご連絡ありがとうございます。 恐れ入ります、divタグを使う場合には下記のHTMLをどのように記載すればいいでしょうか？ <p style="background-color:#414141"><font color="white">テストです</font></p> 前回も同様の質問をさせて頂いて、Divを使用したらというアドバイスを頂いたのですが、上手くいかず再度質問させて頂いた次第です。