HTMLで改行しない表示方法を教えてください

質問

HPを自分で作ろうと，最近HTMLの勉強を始めた全くの初心者です．

文字を表示させようとして
<h3>１行目です</h3>
<h3>2行目です</h3>
とすると，
＝＝＝＝＝＝＝＝＝
1行目です

２行目です
＝＝＝＝＝＝＝＝＝
のように，１つ目の表示と２つ目の表示に１行の空白行が入ってしまいます．
（１）続けて（空白行なしで）表示する方法を教えてください．
（２）ついでに，２つの表示実行で
＝＝＝＝＝＝＝＝＝
１行目です２行目です
＝＝＝＝＝＝＝＝＝
という表示はできるのでしょうか？

全くの初心者の質問で申し訳ありません．
よろしくお願いします．

回答No.2

麻野 なぎ（@AsanoNagi） · ベストアンサー

結論から言えば、それはできません（できてもやらない方が良いです）ということになります。

よく言われることですが、htmlで使うタグは、単に、「これを使うとこういう見栄えになる」という意味のものではありません。
この例の、<h1> <h2> などは、「ヘッダ」というもので、文章（あるいは、章や節）のタイトルを記述するものです。

なので、そもそも、<h3> （３レベルのヘッダ）が２つ（その間に何もなく）連続することはないのですね。
（まるで、「第２節」と「第３節」が、間に何の文章もなく続いているようなものです。

というわけで、文字の修飾をするのが目的なら、それなりのタグ（<font とか、今でも普通に使えるのかな？）を使うか、あと、スタイルシートというものを学ぶと良いかもしれません。

お礼

早速　回答をいただき，ありがとうございました．

h1~は「文字サイズを変えて，テキストを表示する」と思いこんでいました．
「h　はヘッダー」という説明をしていただいて，何を勘違いしていたか，よくわかり，納得しました．
（参考書には回答いただいたような説明ではなく？，表示文字の大きさの種類の説明でした）
　＊＊＊　やはり初心者は怖いです　　＊＊＊

内容と意味を初心者にもよくわかるように説明していただき，ありがとうございました．
「こういうものだ」という頭ごなしの説明ではなく，「こういう理由だから，こうした方がいい」
という説明をいただき，内容がすっきり頭に入りました．感謝しています．

また，初歩的な質問があるかもしれませんが，どうぞよろしくお願いいたします．
ありがとうございました．

回答No.3

ORUKA1951

すでに本質は、No.2さんの回答があるようですが、あえて説明しておきます。とっても時有用なことなので、耳が痛くてもこれを理解しておかないと先に進めないですから。
　HTMLは、その名前-Hyper Text Markup Language--が示すように、文書を構成要素に分解して、それぞれがどんな要素であるかをマークアップしていくメタ言語の一種です。
　h1～h6は、heading --見だし--を表します。これらは、HTML4.01ではあまり明確には示されていませんでしたが、文書やセクションの見出しを表します。ワープロなどでは、少し大きめな太字で指定する部分ですが、HTMLはそれが機械にもわかるようにその階層--レベル--によって<h1>～<h6)でマークアップしておきます。
　それをどのように表現--プレゼンテーション--するかは、利用しているブラウザなど別の仕組みに負かされています。たとえば、読み上げソフト--スクリーンリーダー--でしたら、ちょっと強い語調で読み上げるでしょう。

　本題に移ります。本来は、見出しが複数並ぶことはありません。HTML5の書き方だとわかりやすいのでそれで示しますが
<section>
　<h2>見だし</h2>
　<section>
　　<h3>見だし</h3>
　　この項の記事
　</section>
　<section>
　　<h3>見だし</h3>
　　この項の記事
　</section>
</section>
と、同じレベルでしたらセクションも並列なはずです。
本来はありえないのですが、
<section>
　<h2>HTMLについて</h2>
　<h3>要素とは</h3>
　　この項の記事
</section>
<section>
　<h2>HTMLについて</h2>
　<h3>属性とは</h3>
　　この項の記事
　</section>
</section>
のようにしたい場合はあるでしょう。HTML5では、わざわざ
<section>
　<hgroup>
　　<h2>HTMLについて</h2>
　　<h3>属性とは</h3>
　</hgroup>
　　この項の記事
　</section>
</section>
<section>
　<hgroup>
　　<h2>HTMLについて</h2>
　　<h3>属性とは</h3>
　</hgroup>
　　この項の記事
　</section>
</section>
としなければならなくなります。
(注)HTML4.01では、<section>は、<div class="section">と書きました。

質問への回答です。
　ふたつの見出しがひとつの見出しであって、かつ強制改行したい場合は、
<h3>見だし<br>見出しの続き</h3>
　でしょう。

<h2>見だし</h2>
<h3>小見だし</h3>
でしたら、スタイルシートで
h2+h3{margin-top:0;}
h2にすぐ続いた隣接したh3に関してはマージンをゼロにする。
(注)HTML4.01では、セクションと言う考え方がないので、この様な書き方をしても良い。

時々あるのですが

<h3>見だし</h3><!-- 内容はまだ書いていない -->
<h3>次の章の見だし</h3>
記事

と言う場合は、h3+h3{margin-top:0;}です。

★本題とはまったく別ですが、ブラウザで日本語を表示する場合の特性があります。
　英文では日本語のように段落の変わり目で、段落最初の文字をインデントさせる(字下げする)ことはありません。
　変わりに段落の変わり目で、最初の文字を大文字にしたり、ドロップキャップさせたり、スペースをとりますね。
p:first-letter { font-size: 200%; float: left }

　一方日本語では、段落間にはスペースをとりませんから行間が詰まってとても読みにくくなります。そこで
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
のように、マージンはゼロにして、line-heightとtext-indentで指定するほうが日本語の文章には好まれるでしょう。

質問タイトルの、本来はブロックである要素を改行させない方法・・
(注) ブロックと行内要素の区別は重要です。( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )
は、もちろんあります。HTML上--文書構造上はふたつの見出しなのですが、あえて並べて表示させたい場合は、
<h3>見だし</h3>
<h3>つづく</h3>
<p>記事</p>
というHTLに対して
h3{margin:0;line-height:1.6em;float:left;}
h3+p{clear:left;}
とすれば、可能ではあります。

お礼

早速　回答をいただき，ありがとうございました．

h1~は「文字サイズを変えて，テキストを表示する」と思いこんでいました．
丁寧な回答例と，日本文字，英文字の表示方法も教えていただき，ありがとうございます．

基本的に私は間違った使い方をしようとしていたので，初心者らしくまともな方法を勉強
していきます．

後半の回答記事も，今後の改行のコントロールに使えるかもしれませんので？，参考に
させていただきます．（初心者なので，十分理解できていませんが）

　また，初歩的な質問があるかもしれませんが，どうぞよろしくお願いいたします．
ありがとうございました．

回答No.1

barusu0126

========================
<h3>1行目<br>2行目</h3>

<h3>１行目です2行目です</h3>
========================

こういうことですか？