HTML行間が空いてしまう
- Wordpressの投稿欄を使用してHTMLを作成していますが、行間が空いてしまう問題があります。
- 特に、2018.4.8テスト公開2とテストですの間、およびテストですと日時:2018/04/06の間に行間が生じてしまいます。
- 解決策をお知りの方がいらっしゃいましたら、教えていただけると助かります。
- ベストアンサー
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か所の行間を空けないようにしたいです。 ただ、フォントの色指定や大きさの指定はしたいです。 解決策を分かる方がいましたら教えて頂きたくなにとぞよろしくお願いいたします。
- megumi199
- お礼率39% (36/91)
- Excel（エクセル）
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
関連する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> --------- この2か所の行間を空けないようにしたいです。 ただ、フォントの色指定や大きさの指定はしたいです。 もし、ご提案頂けるのであれば、 <p style="background-color:#414141"><font color="white">テストです</font></p> を具体的にどのように変えればよいか教えて頂ければ非常に助かります。 恐れ入りますがなにとぞよろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- テーブルのｈｔｍｌで、文章のサイズと行間を指定したいのですが、
テーブルのｈｔｍｌで、文章のサイズと行間を指定したいのですが、 サイズの設定は、下記のようにできました。 <span style=font-size:14px> それで、これに、行間が狭いので、広くしたいのですが、 line-hight:130%といれても、広がりません。また、２つを同時にいれる書き方が わかりません。 CSSは、使わないで書きたいのですが、書き方を教えてください。 よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- ページの下端に空白ができます。なぜかわかりません。
ページの最下端に接するように背景色を表示したいですが、 画像のように、空白ができてしまいます。 ・HTML <div class="shita"><p class="fontshitei">テキスト</p><div> ・CSS div.shita { background-color: red; width: 100%; } p.fontshitei { font-family: フォント名; } ちなみに、全体の指定は以下のとおりです。 body { background-color: white; color: silver; margin: 0px; } marginを0pxに設定したのですが、解決しません。
- ベストアンサー
- CSS
- ブログ 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; } この部分になにかいれるのでしょうか？ 全くんの初心者です。 宜しくお願い致します。
- 締切済み
- ブログ
- HTML/CSSに変数のようなものはありますか？
CSSで<p>タグ内の文字の色を設定しようと思ったら、設定したくない別の<p>タグ内の文字までその色になってしまい、それを直そうとしたら、HTML内に直接<font color="">と記述しなければならない…というのはなんとかならないのかと思って質問しました。 変数を定義できれば、HTMLにいちいち<font color="">と何度も入力せず、 a = <font color=""> <p>[a]～[/a]といった感じで簡単に記述できるので、楽だなーということです。
- ベストアンサー
- HTML
- 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>
- ベストアンサー
- ブログ
- font-sizeについて
ブログのレイアウトを私オリジナルのものに変えたくて、今のCSSの記述を読んでいたのですが、よくわからない記述がありました。 /*---------- CSS部分 ----------*/ body { background-color: 背景色; color: 文字色; text-align: center; font-family: フォントの種類; font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } わからない点は1点です。 1、上記でまず、「font-size: x-small;」と指定してあるのですが、最後に「font-size: small;」と指定しなおしています。これはどのような意味があるのですか？ なぜ2回も指定しているのでしょうか？ すいません、ご教授よろしくお願いします。
- ベストアンサー
- CSS
- 正しいHTMLを教えてください
下記の場合HTML確認ツールで「""」 の終了タグがありません。 と、表示されます。 <TABLE border="0"> <TBODY> <TR><TD><A href="mailto:○○○@△△△.ocn.ne.jp"><p><FONT color="#0000ff" size="+1">場所に合わせた商品構成が出来ますので、こちらからご相談ください。</font></p></td></tr></TBODY></TABLE> 正しいHTMLを教えてください。
- ベストアンサー
- その他(Windows)
- HTML、CSSに関して
HTMLの初心者です。いくつかご質問させていただきます。 ①段落と段落の間に行間を空けたい場合、必ずCSSを使わなければなりませんか？行間を空けたい場合、HTMLの本文中で段落と段落の間に行間を空けて記述するのは間違っていますか？例えば以下のような例文です。 〈p〉ここでは私が旅先で撮影した写真を掲載しています。日本列島津々浦々、特に温泉巡り、行く先々の海の幸、山の幸には目がありません。〈/p〉 〈p〉それでは当サイトをお楽しみください。〈/p〉 このようなHTMLでもブラウザ表示は行間が空いて表示されると思うのですが。 ②CSSの書式として以下のような書式があります。 p{font-size: 1.3em;} このpというのは何ですか？CSSの書式を記述するときに使うものということで深く考える必要はありませんか？また字間についてですが、:と1.3emの間に半角スペースを必ず入れるということは知っていますが（手持ちのホームページ作成入門本にそう書いてあります）、pと{の間にスペースを入れる必要はありませんか？ ③行間を調整するCSSを記述した以下のファイルを例文として記載します。上記の手持ちのホームページ作成入門本から抜粋しています。 〈html〉 〈head〉 〈title〉序文に変えて〈/title〉 〈style type="text/css"〉 p{line-height 150%;} 〈/style〉 〈/head〉 〈body〉 〈h1〉序文に変えて〈/h1〉 〈p〉ようこそ、このサイトではラーメンマニアの私が食べ歩いたラーメンを写真付きで紹介しています。 〈/body〉 〈/html〉 この150%という値ですとファイルをブラウザにドロップしたとき〈p〉タグの内容の行間が少し広くなります（と入門本に記載があります）。普通に本文の文字の大きさで1行分空けたい時はどうすればいいですか？つまり現在知恵袋で記載しているような1行分です。150%ではなく1emと記述すればいいですか？また、このCSS書式のp{line-height 150%;}ではline-heightと150%の間に質問②で記載したCSS書式のような:がありません。設定名と値の間は:で区切っても半角スペースでもどちらでもいいのですか？ 宜しくお願いします。( ｀・∀・´)
- 締切済み
- HTML
- ホームページに画像を貼りたい
ホームページを作成している初心者です。画像を貼りたいのですが、テキストを見ながらやってもうまく行かないので、みなさん良ければ貼り方を教えてください。 <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サービス）
お礼
申し訳ありませんでした。 添付ファイルを忘れてしまいました。 質問を締め切りまして再度投稿させていただきます。 ありがとうございました。