HTMLでpタグやdivタグを書くと、特別な指定をしていなくても前後で改行されたように表示されることがあります。これは、ブラウザがそれぞれのタグをどのような表示形式として扱うかが関係しています。pタグやdivタグを改行させないためには、まず「なぜ改行されるのか」を理解することが大切です。
pタグとdivタグが改行される仕組み
pタグとdivタグはブロック要素として扱われます
pタグは文章の段落を表すためのタグで、divタグは複数の要素をまとめるためによく使われるタグです。どちらも初期状態では「ブロック要素」として扱われます。ブロック要素とは、画面上で横幅いっぱいに領域を取ろうとする要素のことです。
たとえば、pタグを2つ続けて書いた場合、それぞれが横幅いっぱいの領域を持つため、自然と縦に並びます。divタグも同じように、1つのまとまりとして横幅いっぱいに表示されるため、次に書いた要素はその下に回り込みます。この動きが、初心者の方には「勝手に改行された」と見えることがあります。
<p>これはpタグです</p>
<div>これはdivタグです</div>
<p>次の文章です</p>上記のように書くと、各要素は基本的に別々の行に表示されます。HTMLの中で実際に改行を入れていなくても、ブラウザ上では縦に並ぶため、見た目として改行されたようになります。
ブラウザにはタグごとの初期表示があります
HTMLタグには、ブラウザがあらかじめ決めている表示方法があります。これを初期スタイルと呼びます。初期スタイルとは、CSSを書かなくてもブラウザ側で自動的に適用される基本的な見た目の設定です。
pタグは段落を表すタグなので、上下に余白が付くことも多いです。この余白はmarginというCSSの設定によるものです。marginとは、要素の外側にできる余白のことです。そのため、pタグを使うと単に改行されるだけでなく、上下に少し間隔が空いて表示される場合があります。
divタグはpタグのように文章専用ではありませんが、初期状態ではブロック要素です。そのため、テキストや画像、ボタンなどを囲んだ場合でも、何も指定しなければそのdivタグ全体が1行分の領域を取ります。結果として、次の要素は横に並ばず、下に表示されます。
HTMLの改行と画面上の改行は同じではありません
HTMLファイルの中でEnterキーを押して改行しても、ブラウザ上でそのまま改行されるとは限りません。反対に、HTMLファイル内では同じ行に書いていても、pタグやdivタグのようなブロック要素を使うと、画面上では改行されて表示されます。
たとえば、次のようにHTML内で同じ行に書いたとしても、表示結果では縦に並びます。
<p>テキストA</p><div>テキストB</div>これは、HTMLの記述上の改行ではなく、要素の表示形式によって見た目が決まっているためです。つまり、pタグやdivタグを改行させないようにしたい場合は、HTMLの書き方だけで調整するのではなく、CSSで表示形式を変更する必要があります。
改行を防ぐには表示形式の変更が必要です
pタグやdivタグを横に並べたい場合は、CSSのdisplayプロパティを使います。displayプロパティとは、要素をどのような表示形式にするかを決めるCSSの指定です。初期状態でブロック要素として扱われるpタグやdivタグも、displayを変更すれば横並びにできます。
代表的な指定には、inline、inline-block、flexなどがあります。inlineは文章の一部のように横に並べる指定で、inline-blockは横に並べつつ幅や高さを指定しやすい表示形式です。flexは親要素の中にある子要素を横並びや縦並びに調整しやすい方法です。
p,
div {
display: inline-block;
}このように指定すると、pタグやdivタグは横幅いっぱいに広がる動きをやめ、内容に応じた幅で横に並びやすくなります。ただし、すべてのpタグやdivタグにまとめて指定すると、ページ全体のレイアウトが崩れる可能性があります。実際の制作では、特定のclass名を付けて必要な部分だけにCSSを適用するのが安全です。
pタグとdivタグを改行させない基本のCSS指定
pタグとdivタグを改行させないためには、HTMLタグそのものを変えるのではなく、CSSで表示のされ方を調整する方法が基本です。pタグやdivタグは初期状態では縦に並びやすい性質を持っていますが、displayプロパティを指定することで、同じ行に並べる表示へ変更できます。
displayプロパティで表示形式を変える
pタグやdivタグが改行される主な理由は、初期状態でブロック要素として扱われるためです。ブロック要素とは、画面の横幅いっぱいに広がろうとする表示形式のことです。そのため、次の要素が同じ行に入る余地があっても、基本的には下の行に表示されます。
改行させたくない場合は、CSSでdisplayプロパティを指定します。displayプロパティとは、要素をブロックとして表示するのか、文章の一部のように表示するのか、横並びの部品として表示するのかを決めるためのCSSです。
.no-break {
display: inline;
}上記のように指定すると、class名がno-breakの要素は文章の一部のように横へ並びます。inlineは「行内」という意味で、テキストと同じ流れの中に要素を配置する表示形式です。たとえば、短い文字列同士を自然に横並びにしたい場合に向いています。
<p class="no-break">名前：</p>
<div class="no-break">山田太郎</div>このように書くと、pタグとdivタグを同じ行に表示しやすくなります。ただし、inlineを指定した要素は幅や高さを細かく指定しにくい特徴があります。見た目の調整をしっかり行いたい場合は、inline-blockを使うほうが扱いやすいです。
inline-blockを使う基本パターン
pタグとdivタグを改行させずに、さらに幅や余白も調整したい場合は、display: inline-block; を使います。inline-blockとは、横並びにできる性質と、幅や高さを指定できる性質をあわせ持つ表示形式です。
.item {
display: inline-block;
margin-right: 12px;
}<p class="item">商品名</p>
<div class="item">HTML入門講座</div>この指定では、pタグとdivタグが横に並びます。さらにmargin-rightで右側に余白を付けているため、文字同士がくっつかず読みやすくなります。marginとは要素の外側に作る余白のことです。横並びにした要素同士の間隔を調整したいときによく使います。
inline-blockは、ボタン風の見た目やラベルと値の横並び、短い説明文の横並びなどで使いやすい指定です。pタグやdivタグをそのまま使いながら、見た目だけを横並びにしたい場合に便利です。
全体指定ではなくclass指定を使う
初心者の方がよく行う失敗として、pタグやdivタグ全体に対してdisplayを指定してしまうケースがあります。たとえば、次のようなCSSを書くと、ページ内のすべてのpタグとdivタグが横並びの対象になります。
p,
div {
display: inline-block;
}この書き方は短くて分かりやすく見えますが、実際のページ制作では注意が必要です。pタグは文章の段落として使われることが多く、divタグはレイアウトの大きなまとまりとして使われることが多いため、すべてを横並びにするとページ全体の配置が崩れる可能性があります。
安全に指定するには、横並びにしたい要素だけにclass名を付けます。classとは、HTML要素に名前を付けて、CSSで特定の部分だけを選ぶための仕組みです。
<div class="row">
<p class="row-text">住所：</p>
<div class="row-text">東京都新宿区</div>
</div>.row-text {
display: inline-block;
}このようにすると、row-textというclass名が付いた要素だけにCSSが適用されます。ページ内の別のpタグやdivタグには影響しないため、必要な場所だけ改行を防げます。
余白と縦位置も合わせて調整する
pタグには、ブラウザの初期スタイルとして上下にmarginが付いていることがあります。そのため、displayを変更して横並びにしても、上下の余白が原因で位置がずれて見える場合があります。
横並びにしたときに余白が気になる場合は、marginを調整します。特にpタグを横並びの部品として使う場合は、初期の余白を消しておくと見た目を整えやすくなります。
.row-text {
display: inline-block;
margin: 0;
vertical-align: middle;
}vertical-alignは、inlineやinline-blockの要素を横に並べたときの縦方向の位置を調整するCSSです。middleを指定すると、要素同士の中央付近をそろえやすくなります。文字サイズが違う要素や、テキストと画像を並べる場合にも役立ちます。
pタグとdivタグを改行させない基本は、displayを変更し、必要に応じてmarginやvertical-alignを調整することです。まずはinline-blockを使い、横並びにしたい要素だけにclassを付けて指定すると、初心者の方でも安全にレイアウトを整えやすくなります。
displayプロパティで横並びにする方法
displayプロパティは、HTML要素をどのように画面へ表示するかを決めるCSSです。pタグやdivタグは初期状態では縦に並びやすいため、改行させずに横並びにしたい場合は、displayの値を変更して表示形式を調整します。
displayの値によって並び方が変わります
CSSのdisplayプロパティには、block、inline、inline-block、flexなどの値があります。値とは、CSSで指定する設定内容のことです。同じpタグやdivタグでも、displayに何を指定するかによって、縦に並ぶのか、横に並ぶのか、幅を指定できるのかが変わります。
pタグやdivタグの初期状態に近い表示はblockです。blockは横幅いっぱいに広がる性質を持つため、次の要素は基本的に下に表示されます。文章の段落や大きなレイアウトの箱を作る場合には便利ですが、短い文字を横に並べたいときには向いていません。
<p class="label">名前：</p>
<div class="value">佐藤花子</div>.label,
.value {
display: block;
}上記のようにblockのままだと、「名前：」と「佐藤花子」は縦に並びます。画面上では、pタグのあとにdivタグが下の行へ移動して見えます。これはHTMLの改行ではなく、blockという表示形式による動きです。
横並びにしたい場合は、displayの値をinlineまたはinline-blockに変更します。短いテキストだけを横へ流したい場合はinline、幅や余白も調整したい場合はinline-blockが使いやすいです。
inlineを使って文章の一部として並べる
inlineは、要素を文章の一部のように表示する指定です。spanタグのように、文字列の流れに沿って横へ並びます。pタグやdivタグであっても、display: inline; を指定すると、次の要素と同じ行に表示されやすくなります。
.label,
.value {
display: inline;
}<p class="label">電話番号：</p>
<div class="value">090-0000-0000</div>この指定では、「電話番号：」と「090-0000-0000」が同じ行に並びます。文章中の一部として自然に続けたい場合には、inlineが適しています。たとえば、短いラベルと値を続けて表示したい場合などに便利です。
ただし、inlineには注意点があります。inlineの要素には、widthやheightを指定しても思ったとおりに反映されにくい場合があります。widthは幅、heightは高さを指定するCSSです。横幅をそろえたい、ボタンのように一定の大きさにしたい、といった場合にはinlineだけでは調整しづらくなります。
inline-blockを使って幅や余白を調整する
inline-blockは、横に並ぶ性質を持ちながら、幅や高さも指定しやすい表示形式です。inlineとblockの特徴を組み合わせたような指定だと考えると分かりやすいです。
.label,
.value {
display: inline-block;
margin: 0;
}
.label {
width: 80px;
}<p class="label">メール：</p>
<div class="value">sample@example.com</div>この例では、labelにwidthを指定しているため、ラベル部分の幅をそろえられます。複数行の情報を並べるときに、ラベルの位置をそろえたい場合に役立ちます。
<div class="profile-row">
<p class="label">名前：</p>
<div class="value">佐藤花子</div>
</div>
<div class="profile-row">
<p class="label">住所：</p>
<div class="value">東京都渋谷区</div>
</div>.profile-row {
margin-bottom: 8px;
}
.label,
.value {
display: inline-block;
margin: 0;
}
.label {
width: 80px;
}inline-blockを使うと、pタグの初期余白をmargin: 0; で消しながら、ラベルと値を横並びにできます。marginは要素の外側の余白を指定するCSSです。pタグには初期状態で上下のmarginが付いていることがあるため、横並びにするときは余白の調整もあわせて行うと見た目が整います。
display指定は必要な範囲だけに適用する
displayプロパティは便利ですが、指定する範囲が広すぎるとレイアウト全体に影響します。たとえば、すべてのdivタグにdisplay: inline-block; を指定すると、本来は大きなまとまりとして縦に並べたい部分まで横並びになってしまうことがあります。
div {
display: inline-block;
}このような指定は、ページ全体のdivタグに影響するため避けたほうが安全です。特定の場所だけ横並びにしたい場合は、親要素や子要素にclass名を付けて、対象を限定します。
<div class="info-row">
<p class="info-label">年齢：</p>
<div class="info-value">28歳</div>
</div>.info-label,
.info-value {
display: inline-block;
margin: 0;
}class名を使うと、横並びにしたい部分だけを選んでCSSを適用できます。classはHTML要素に付ける目印のようなもので、CSSから特定の要素を指定するために使います。初心者の方がレイアウトを安定させるには、タグ名だけで指定するよりも、class名で対象を絞る方法がおすすめです。
inlineとinline-blockの違いと使い分け
pタグやdivタグを改行させない方法として、displayプロパティのinlineとinline-blockはよく使われます。どちらも要素を横に並べるために使えますが、幅や高さの指定、余白の扱いに違いがあります。見た目を安定させるには、それぞれの特徴を理解して使い分けることが大切です。
inlineは文章の流れに沿って横並びにする指定です
inlineは、要素を文章の一部のように扱う表示形式です。通常のテキストと同じように、左から右へ自然に並びます。たとえば、短いラベルと短い文字列を続けて表示したい場合には、inlineを指定するとシンプルに横並びにできます。
<p class="text-inline">価格：</p>
<div class="text-inline">1,000円</div>.text-inline {
display: inline;
}この例では、「価格：」と「1,000円」が同じ行に並びます。pタグとdivタグは本来ブロック要素として縦に並びやすいですが、display: inline; を指定することで、文章の一部のように横へ続けて表示できます。
inlineは、文章の途中に短い要素を入れたいときに向いています。たとえば、「氏名：山田太郎」「在庫：あり」のように、文字だけを横に続けたい場合には扱いやすいです。ただし、inlineはあくまで文章の流れを優先する表示形式なので、レイアウトの部品として細かく調整したい場合には制限があります。
inlineは幅や高さの調整に向いていません
inlineを指定した要素は、widthやheightを指定しても思ったとおりに反映されにくい特徴があります。widthは要素の幅、heightは要素の高さを指定するCSSです。たとえば、ラベル部分をすべて80pxでそろえたい場合、inlineでは期待どおりにそろわないことがあります。
.text-inline {
display: inline;
width: 80px;
}このように書いても、inlineの性質上、幅の指定が効かない場面があります。文字の長さに応じて表示幅が決まるため、「名前：」「メール：」「住所：」のように文字数が違うラベルをきれいにそろえるには不向きです。
また、inline要素では上下の余白や高さの扱いも直感と異なる場合があります。marginやpaddingという余白の指定を使っても、上下方向の見た目が思ったほど変わらないことがあります。paddingは要素の内側の余白、marginは要素の外側の余白を指定するCSSです。
inlineは、簡単に横へ並べたいときには便利ですが、「幅をそろえる」「高さを持たせる」「ボタンのような見た目にする」といった目的にはあまり向いていません。
inline-blockは横並びとサイズ指定を両立できます
inline-blockは、inlineのように横へ並びながら、blockのように幅や高さを指定できる表示形式です。つまり、横並びにしたいけれど、要素の大きさや余白も調整したい場合に使いやすい指定です。
<div class="info-row">
<p class="info-label">住所：</p>
<div class="info-value">東京都千代田区</div>
</div>.info-label,
.info-value {
display: inline-block;
margin: 0;
}
.info-label {
width: 80px;
}この例では、pタグとdivタグを同じ行に並べながら、info-labelにwidthを指定してラベルの幅をそろえています。inline-blockを使うと、ラベルと値を横並びにしつつ、フォームやプロフィール表示のような整ったレイアウトを作りやすくなります。
inline-blockは、要素同士の間隔をmarginで調整したい場合にも便利です。たとえば、右側に少し余白を付けたい場合は、margin-rightを使えます。
.info-label {
display: inline-block;
width: 80px;
margin-right: 12px;
}margin-rightは、要素の右側に外側の余白を作る指定です。横に並ぶ要素同士が近すぎると読みにくくなるため、適度な余白を入れると見た目が整います。
目的に合わせて使い分けることが大切です
inlineとinline-blockは、どちらもpタグやdivタグを改行させないために使えますが、向いている場面が異なります。文章の一部として自然に横へ並べたいだけならinlineで十分です。一方、幅や高さ、余白を調整して見た目を整えたい場合はinline-blockが適しています。
使い分けの目安は次のとおりです。
- 短いテキストを続けて表示したい場合：inline
- ラベルの幅をそろえたい場合：inline-block
- ボタンのような見た目にしたい場合：inline-block
- 横並びにしながら余白を調整したい場合：inline-block
- 文章の途中に自然に入れたい場合：inline
pタグとdivタグを同じ行に表示するだけならinlineでも対応できますが、実際のWebページでは見た目の調整が必要になることが多いです。そのため、初心者の方が迷った場合は、まずinline-blockを使うと調整しやすいです。
.no-break-item {
display: inline-block;
margin: 0;
vertical-align: middle;
}vertical-alignは、inlineやinline-blockの要素を横に並べたときに、縦方向の位置をそろえるCSSです。middleを指定すると中央付近でそろえやすくなります。テキスト同士だけでなく、テキストと画像、テキストとボタンを並べる場合にも役立ちます。
flexboxを使ってpタグとdivタグを横並びにする方法
flexboxは、複数の要素を横並びや縦並びに整えるためのCSSの仕組みです。pタグやdivタグを改行させずに並べたい場合、親要素にdisplay: flex; を指定すると、子要素をまとめて横方向に配置しやすくなります。
親要素にdisplay flexを指定します
flexboxを使うときは、横並びにしたいpタグやdivタグそのものではなく、それらを囲む親要素にdisplay: flex; を指定します。親要素とは、ほかの要素を中に含んでいる外側の要素のことです。反対に、親要素の中に入っている要素を子要素と呼びます。
<div class="profile-row">
<p class="profile-label">名前：</p>
<div class="profile-value">田中一郎</div>
</div>.profile-row {
display: flex;
}
.profile-label {
margin: 0;
}この例では、profile-rowという親要素にdisplay: flex; を指定しています。そのため、中にあるpタグとdivタグが横並びになります。pタグやdivタグは初期状態では縦に並びやすいですが、親要素がflexboxになると、子要素は基本的に横方向に並びます。
pタグには初期状態で上下に余白が付くことがあるため、margin: 0; を指定しています。marginは要素の外側の余白を調整するCSSです。横並びにしたときに上下の位置がずれて見える場合は、pタグのmarginを確認すると原因を見つけやすいです。
align-itemsで縦方向の位置をそろえます
flexboxで横並びにしたとき、文字の大きさや要素の高さが違うと、縦方向の位置がそろっていないように見えることがあります。そのような場合は、align-itemsを使います。align-itemsとは、flexboxの中で子要素の縦方向のそろえ方を決めるCSSです。
.profile-row {
display: flex;
align-items: center;
}
.profile-label {
margin: 0;
}align-items: center; を指定すると、子要素が縦方向の中央にそろいます。たとえば、pタグの文字とdivタグの中にあるボタンや画像を横に並べる場合でも、中央でそろえやすくなります。
<div class="notice-row">
<p class="notice-text">お知らせ：</p>
<div class="notice-button">詳細を見る</div>
</div>.notice-row {
display: flex;
align-items: center;
}
.notice-text {
margin: 0;
}
.notice-button {
padding: 6px 12px;
}paddingは要素の内側の余白を指定するCSSです。ボタン風の表示ではpaddingを使って文字の周りに余白を作ります。pタグとボタン風のdivタグを横並びにする場合、align-itemsを使うと高さの違いがあっても見た目を整えやすくなります。
gapで要素同士の間隔を調整します
flexboxでは、gapを使って子要素同士の間隔を指定できます。gapとは、並んでいる要素のあいだに作るすき間のことです。marginを個別に指定しなくても、親要素側でまとめて間隔を調整できるため、横並びレイアウトでは便利です。
.profile-row {
display: flex;
align-items: center;
gap: 12px;
}
.profile-label {
margin: 0;
}この指定では、pタグとdivタグの間に12pxの間隔ができます。pxはピクセルと読み、画面上の長さを表す単位です。初心者の方は、まず8pxや12pxなどの小さめの値から試すと、自然な余白を作りやすいです。
gapを使うと、最後の要素だけ余白を消すような細かい調整をしなくても済みます。横並びの要素が2つだけの場合にも、3つ以上ある場合にも使いやすいです。
<div class="menu-row">
<p class="menu-item">HTML</p>
<div class="menu-item">CSS</div>
<div class="menu-item">JavaScript</div>
</div>.menu-row {
display: flex;
gap: 16px;
}
.menu-item {
margin: 0;
}このように、pタグと複数のdivタグを同じ行に並べることもできます。テキストメニューやタグ一覧のような表示を作るときにも、flexboxは扱いやすい方法です。
折り返しを防ぎたい場合はflex-wrapを指定します
flexboxでは、子要素の合計幅が親要素の幅を超えると、指定によっては折り返しが起こることがあります。折り返しとは、横に入りきらない要素が次の行へ移動することです。pタグやdivタグをできるだけ改行させたくない場合は、flex-wrapを確認します。
.profile-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
}flex-wrap: nowrap; は、子要素を折り返さずに横方向へ並べる指定です。nowrapは「折り返さない」という意味です。横並びを維持したい場合に役立ちますが、画面幅が狭いと内容がはみ出す可能性があります。
要素がはみ出すと、スマートフォンなどの小さな画面で読みにくくなる場合があります。そのため、常に改行させないことだけを優先するのではなく、画面幅に応じて折り返しを許可するかどうかも考える必要があります。
.profile-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}flex-wrap: wrap; を指定すると、入りきらない場合に次の行へ折り返します。完全に改行を防ぎたい場面ではnowrap、読みやすさを優先したい場面ではwrapを選ぶとよいです。pタグとdivタグを横並びにする目的が、見た目の整列なのか、絶対に1行で表示することなのかによって指定を変えることが大切です。
改行させないときに注意したいHTML構造
pタグやdivタグを改行させないようにする場合、CSSだけで見た目を調整するのではなく、HTMLの構造も確認する必要があります。HTML構造とは、どのタグの中にどのタグを入れるか、どの要素を親子関係にするかという組み立て方のことです。構造が適切でないと、CSSを正しく書いても思ったように横並びにならないことがあります。
pタグの中にdivタグを入れないようにします
pタグは文章の段落を表すためのタグです。一方、divタグは複数の要素をまとめるために使われる汎用的な箱のようなタグです。見た目だけを考えると、pタグの中にdivタグを入れて横並びにしたくなる場合がありますが、この書き方は避ける必要があります。
<p>
名前：
<div>山田太郎</div>
</p>上記のように、pタグの中にdivタグを入れる書き方は適切ではありません。pタグは段落を表す要素であり、その中に大きなまとまりを作るdivタグを入れる構造には向いていません。ブラウザがHTMLを解釈するときに、意図しない位置でpタグを閉じてしまうことがあり、結果としてレイアウトが崩れる原因になります。
このような場合は、pタグとdivタグを同じ親要素の中に並べる構造にします。親要素とは、ほかの要素を包んでいる外側の要素のことです。同じ親要素の中に子要素として並べておくと、CSSで横並びにしやすくなります。
<div class="profile-row">
<p class="profile-label">名前：</p>
<div class="profile-value">山田太郎</div>
</div>この構造では、profile-rowというdivタグが親要素になり、その中にpタグとdivタグが同じ階層で入っています。同じ階層とは、どちらかがもう一方の中に入っているのではなく、同じ親要素の中に並んでいる状態のことです。この形にすると、display: flex; やdisplay: inline-block; を使って横並びにしやすくなります。
親要素と子要素の関係をそろえます
横並びにしたい要素がある場合は、どの要素を親にして、どの要素を子にするのかを整理することが大切です。flexboxを使う場合は、親要素にdisplay: flex; を指定し、その中の子要素が横に並びます。つまり、横並びにしたいpタグとdivタグは、同じ親要素の中に入れておく必要があります。
<div class="row">
<p class="label">メール：</p>
</div>
<div class="value">sample@example.com</div>この書き方では、pタグとdivタグが同じ親要素の中にありません。rowの中にあるのはpタグだけで、valueのdivタグはrowの外にあります。そのため、rowにdisplay: flex; を指定しても、valueは横並びの対象になりません。
<div class="row">
<p class="label">メール：</p>
<div class="value">sample@example.com</div>
</div>このように、横並びにしたい要素を同じ親要素の中に入れると、CSSの指定が効きやすくなります。HTMLでは、見た目の並びだけではなく、要素同士の関係を正しく作ることが重要です。
.row {
display: flex;
align-items: center;
gap: 8px;
}
.label {
margin: 0;
}このCSSでは、rowの中にあるlabelとvalueが横に並びます。align-itemsは縦方向の位置をそろえるためのCSSで、gapは要素同士の間隔を指定するCSSです。HTML構造が整っていれば、CSSは短く分かりやすくなります。
意味に合ったタグを選びます
pタグとdivタグを改行させないことだけを目的にすると、本来の意味に合わないタグを使ってしまうことがあります。HTMLでは、タグごとに役割があります。pタグは段落、divタグは意味を持たない汎用的なまとまり、spanタグは短いテキストの一部を囲むためのタグです。
たとえば、文章の途中で一部の文字だけを横に並べたい場合、pタグやdivタグよりもspanタグが向いています。spanタグは初期状態でinlineの性質を持っているため、もともと改行されにくいタグです。
<p>
受講コース：
<span class="course-name">HTML/CSS基礎</span>
</p>このように、文章の中に短い文字を続けたい場合は、spanタグを使うと自然です。pタグやdivタグを無理に横並びにするよりも、HTMLの意味に合った構造になります。
一方で、ラベルと値を1行の情報として並べたい場合は、外側にdivタグを用意し、その中にpタグやdivタグを配置する方法が使えます。
<div class="info-row">
<p class="info-label">受講日：</p>
<div class="info-value">2026年6月18日</div>
</div>この構造では、1行分の情報をinfo-rowでまとめています。pタグはラベル部分、divタグは値の部分として使っています。用途に合わせてタグを選ぶと、CSSを書いたときの管理もしやすくなります。
横並びにする単位を明確にします
pタグやdivタグを改行させない場合、どこからどこまでを1行として扱うのかを先に決めることが大切です。たとえば、プロフィール情報で「名前」「年齢」「住所」を表示する場合、すべてを1行に並べるのか、1項目ずつ横並びにするのかでHTML構造が変わります。
<div class="profile">
<div class="profile-row">
<p class="label">名前：</p>
<div class="value">山田太郎</div>
</div>
<div class="profile-row">
<p class="label">年齢：</p>
<div class="value">30歳</div>
</div>
<div class="profile-row">
<p class="label">住所：</p>
<div class="value">東京都</div>
</div>
</div>この例では、profile-rowごとに1行の情報として扱っています。各行の中でpタグとdivタグを横並びにし、行同士は縦に並べる構造です。情報が整理されているため、あとからCSSを変更する場合にも分かりやすくなります。
.profile-row {
display: flex;
align-items: center;
gap: 8px;
}
.label {
width: 80px;
margin: 0;
}このように、横並びにしたい単位をclassで分けておくと、CSSの対象が明確になります。classは、HTML要素に名前を付けてCSSで指定しやすくするための仕組みです。タグ名だけで指定するよりも、どの部分にどのCSSが効いているのかを理解しやすくなります。
よくある失敗例と修正方法
pタグやdivタグを改行させないように指定しても、思ったとおりに横並びにならないことがあります。原因はCSSの指定漏れだけではなく、HTML構造、初期余白、親要素の幅、displayプロパティの指定範囲などさまざまです。ここでは、初心者の方がつまずきやすい失敗例と、実際にどのように修正すればよいかを確認します。
タグ名全体にCSSを指定してレイアウトが崩れる
よくある失敗の1つが、すべてのpタグやdivタグに対してdisplayを指定してしまうことです。pタグとdivタグを横並びにしたい気持ちから、次のようなCSSを書いてしまう場合があります。
p,
div {
display: inline-block;
}この指定をすると、ページ内にあるすべてのpタグとdivタグがinline-blockになります。inline-blockとは、横に並びながら幅や高さも指定できる表示形式です。一見便利ですが、ページ全体の大きなレイアウト用divタグまで横並びになってしまうため、ヘッダー、本文、フッターなどの配置が崩れる原因になります。
修正する場合は、横並びにしたい部分だけにclass名を付けます。class名とは、HTML要素に付ける目印のような名前で、CSSから特定の要素だけを選ぶために使います。
<div class="info-row">
<p class="info-label">氏名：</p>
<div class="info-value">山田太郎</div>
</div>.info-label,
.info-value {
display: inline-block;
margin: 0;
}このように指定すると、info-labelとinfo-valueだけが横並びの対象になります。タグ名だけで広く指定するよりも、class名で範囲を限定したほうが安全です。特にdivタグはページのさまざまな場所で使われるため、全体指定は避けるようにします。
pタグの初期余白で位置がずれる
pタグには、ブラウザの初期スタイルとして上下に余白が付いていることがあります。この余白はmarginというCSSで設定されています。marginとは、要素の外側にできる空白のことです。pタグをdivタグと横並びにしたとき、文字の位置が少し下がって見えたり、行の高さが不自然に広がったりする原因になります。
<div class="row">
<p class="label">住所：</p>
<div class="value">東京都新宿区</div>
</div>.row {
display: flex;
}この状態でも横並びにはなりますが、pタグのmarginが残っていると、上下の余白が目立つことがあります。修正するには、横並びに使うpタグのmarginを0にします。
.row {
display: flex;
align-items: center;
gap: 8px;
}
.label {
margin: 0;
}align-itemsは、flexboxで横並びにした子要素の縦方向の位置をそろえるCSSです。centerを指定すると中央にそろいやすくなります。gapは要素同士の間隔を指定するCSSで、pタグとdivタグの間に自然な余白を作れます。
pタグを横並びの部品として使う場合は、margin: 0; を指定する習慣を付けると、余白によるズレを防ぎやすくなります。
親要素の幅が足りずに折り返される
display: inline-block; やdisplay: flex; を指定しても、親要素の横幅が足りない場合は、要素が次の行へ折り返されることがあります。折り返しとは、横に入りきらない要素が下の行へ移動することです。これはCSSが効いていないのではなく、表示するための横幅が不足しているために起こります。
<div class="narrow-box">
<p class="tag">HTML基礎講座</p>
<div class="tag">CSS基礎講座</div>
</div>.narrow-box {
width: 160px;
}
.tag {
display: inline-block;
margin: 0;
}この例では、親要素の幅が160pxしかないため、2つの要素が横に入りきらず折り返される可能性があります。改行させたくない場合は、親要素の幅を広げるか、文字量を短くするか、折り返しを防ぐ指定を使います。
.narrow-box {
width: 320px;
white-space: nowrap;
}
.tag {
display: inline-block;
margin: 0;
}white-spaceは、空白や改行の扱いを指定するCSSです。nowrapを指定すると、テキストやinline-blockの要素ができるだけ折り返されないようになります。ただし、画面幅が狭い場合には横にはみ出す可能性があります。スマートフォン表示では読みにくくなることがあるため、使う場所を考える必要があります。
flexboxを使っている場合は、flex-wrapも確認します。
.row {
display: flex;
flex-wrap: nowrap;
}flex-wrapは、flexbox内の子要素を折り返すかどうかを指定するCSSです。nowrapを指定すると折り返しにくくなりますが、親要素の幅を超える場合ははみ出すことがあります。
pタグの中にdivタグを入れてしまう
HTML構造の失敗として、pタグの中にdivタグを入れてしまうケースがあります。pタグは段落を表すタグで、divタグは大きなまとまりを作るためのタグです。pタグの中にdivタグを入れると、ブラウザが意図しない形でHTMLを解釈することがあり、CSSが思ったように効かない原因になります。
<p class="text">
名前：
<div class="name">山田太郎</div>
</p>この書き方は避けたほうがよいです。見た目では単純にラベルと値を並べたいだけでも、HTMLとしては構造が不安定になりやすくなります。修正する場合は、pタグとdivタグを同じ親要素の中に並べます。
<div class="row">
<p class="text">名前：</p>
<div class="name">山田太郎</div>
</div>.row {
display: flex;
align-items: center;
gap: 8px;
}
.text {
margin: 0;
}この構造では、rowが親要素になり、その中にpタグとdivタグが同じ階層で並んでいます。同じ階層とは、片方がもう片方の中に入っているのではなく、同じ親要素の中に横並びで置かれている状態のことです。CSSでも扱いやすく、レイアウトの崩れを防ぎやすくなります。
inlineとinline-blockの違いを理解せずに使う
pタグやdivタグを改行させないためにdisplay: inline; を指定したものの、幅がそろわない、余白が調整しにくいという問題が起こることがあります。inlineは文章の一部のように横に流す表示形式で、幅や高さを細かく指定する用途には向いていません。
.label {
display: inline;
width: 100px;
}このようにwidthを指定しても、inlineでは期待どおりに幅が反映されにくい場合があります。ラベルの幅をそろえたい場合は、inline-blockを使います。
.label {
display: inline-block;
width: 100px;
margin: 0;
}inline-blockは、横に並ぶ性質を持ちながら、幅や高さも指定しやすい表示形式です。ラベルと値を横並びにしたい、複数行でラベルの位置をそろえたい、余白を調整したいといった場合は、inlineよりもinline-blockのほうが扱いやすいです。
<div class="profile-row">
<p class="label">電話：</p>
<div class="value">090-0000-0000</div>
</div>
<div class="profile-row">
<p class="label">メール：</p>
<div class="value">sample@example.com</div>
</div>.profile-row {
margin-bottom: 8px;
}
.label,
.value {
display: inline-block;
margin: 0;
}
.label {
width: 80px;
}このように書くと、各行のラベル幅をそろえながら、pタグとdivタグを改行させずに表示できます。目的が「ただ横に続ける」だけならinline、見た目を整えるならinline-blockと考えると選びやすくなります。
まとめ
pタグとdivタグを改行させないためには、HTMLタグの性質とCSSの指定方法をあわせて理解することが大切です。pタグやdivタグは初期状態でブロック要素として扱われるため、そのまま書くと縦に並びやすくなります。横並びにしたい場合は、displayプロパティやflexboxを使い、目的に合った表示形式へ変更します。
改行される原因はブロック要素の性質にあります
pタグは段落を表すタグで、divタグは要素をまとめるために使う汎用的なタグです。どちらも初期状態ではブロック要素として表示されます。ブロック要素とは、基本的に横幅いっぱいに広がり、次の要素を下の行へ送る性質を持つ要素のことです。
そのため、HTML上では同じ行にpタグとdivタグを書いていても、ブラウザ上では縦に並ぶことがあります。これはHTMLファイル内の改行が原因ではなく、ブラウザがタグの初期表示をもとに画面へ配置しているためです。
pタグには、初期状態で上下にmarginが付く場合もあります。marginとは要素の外側の余白のことです。横並びにしたときに位置がずれて見える場合は、displayの指定だけでなく、pタグのmarginも確認する必要があります。
横並びにはdisplayプロパティを使います
pタグとdivタグを改行させない基本的な方法は、displayプロパティを変更することです。displayプロパティとは、要素をどのような表示形式で扱うかを決めるCSSです。代表的な指定には、inline、inline-block、flexがあります。
inlineは、要素を文章の一部のように横へ並べる指定です。短いテキストを自然に続けたい場合に向いています。ただし、widthやheightなどの幅や高さの指定が効きにくいことがあるため、レイアウトを細かく整えたい場面にはあまり向いていません。
inline-blockは、横に並びながら幅や高さも指定しやすい表示形式です。ラベルと値を横並びにしたい場合や、複数行でラベル幅をそろえたい場合に便利です。初心者の方がpタグとdivタグを改行させずに整った見た目を作りたい場合は、まずinline-blockを試すと扱いやすいです。
.info-label,
.info-value {
display: inline-block;
margin: 0;
}このように、横並びにしたい要素だけにclass名を付けて指定すると、ページ全体のレイアウトに影響しにくくなります。class名とは、HTML要素に付ける目印のような名前で、CSSから特定の要素だけを選ぶために使います。
flexboxを使うと管理しやすくなります
pタグとdivタグを横並びにする方法として、flexboxもよく使われます。flexboxは、親要素の中にある子要素を横並びや縦並びに整えるためのCSSの仕組みです。親要素にdisplay: flex; を指定すると、その中にあるpタグやdivタグを横方向に並べやすくなります。
<div class="info-row">
<p class="info-label">名前：</p>
<div class="info-value">山田太郎</div>
</div>.info-row {
display: flex;
align-items: center;
gap: 8px;
}
.info-label {
margin: 0;
}align-itemsは、flexboxの中で子要素の縦方向の位置をそろえるCSSです。centerを指定すると、文字やボタンなど高さの違う要素を中央でそろえやすくなります。gapは、子要素同士の間隔を指定するCSSです。marginを個別に指定しなくても、親要素側で間隔を調整できます。
横並びにしたい要素が複数ある場合や、レイアウトをあとから変更する可能性がある場合は、inline-blockよりflexboxのほうが管理しやすいことがあります。特に、ラベルと値の組み合わせ、メニュー、プロフィール情報、ボタン付きのテキストなどではflexboxが役立ちます。
HTML構造を正しく作ることも重要です
CSSを正しく書いても、HTML構造が適切でないと思ったように横並びにならないことがあります。特に注意したいのは、pタグの中にdivタグを入れないことです。pタグは段落を表すタグであり、divタグのような大きなまとまりを中に入れる構造には向いていません。
<p>
名前：
<div>山田太郎</div>
</p>このような書き方は避け、pタグとdivタグを同じ親要素の中に並べる形にします。
<div class="info-row">
<p class="info-label">名前：</p>
<div class="info-value">山田太郎</div>
</div>この構造であれば、親要素にdisplay: flex; を指定したり、子要素にdisplay: inline-block; を指定したりして、横並びを作りやすくなります。同じ親要素の中に並べることで、CSSの対象が分かりやすくなり、修正もしやすくなります。
また、文章の途中で短いテキストだけを続けたい場合は、pタグやdivタグではなくspanタグを使う選択肢もあります。spanタグは初期状態で行内要素として扱われるため、文章の一部を囲む用途に向いています。見た目だけでタグを選ぶのではなく、内容の意味に合ったタグを選ぶことが、分かりやすく保守しやすいHTMLにつながります。
失敗を防ぐには指定範囲と余白を確認します
pタグとdivタグを改行させない指定で失敗しやすい原因には、CSSの指定範囲が広すぎること、pタグの初期余白が残っていること、親要素の幅が足りないことなどがあります。たとえば、すべてのdivタグにdisplay: inline-block; を指定すると、本来は縦に並べたい大きなレイアウトまで横並びになってしまいます。
安全に指定するには、横並びにしたい部分だけにclass名を付けます。さらに、pタグを横並びに使う場合はmargin: 0; を指定し、余白によるズレを防ぐと見た目が整いやすくなります。
親要素の幅が足りない場合は、inline-blockやflexを指定していても折り返されることがあります。どうしても1行に表示したい場合はwhite-space: nowrap; やflex-wrap: nowrap; を使う方法があります。ただし、画面幅が狭いと横にはみ出す可能性があるため、スマートフォン表示では読みやすさも考慮する必要があります。
.info-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
.info-label {
margin: 0;
}pタグとdivタグを改行させない方法は1つだけではありません。短い文章として続けたい場合はinline、幅や余白を整えたい場合はinline-block、複数の要素を管理しやすく並べたい場合はflexboxを選ぶとよいです。目的に合わせて指定を選ぶことで、見た目が安定し、あとから修正しやすいHTMLとCSSになります。
