「行の右端じゃなく、インライン要素内で改行させたい!」aタグやspanなどインライン要素を横並びする方法を解説します。画像を横並べしたい場合は下記もご参照ください。(基本的に同じ方法です。)htmlやCSSで画像の横に文字を並べる方法6種【複数行OK】htmlやCSSで画像と文字テキストを横並びにする方法を6つ紹介します。レスポンシブ対応できます。この記事を読むCSSやhtmlで画像を横並びにする方法3選CSSやhtmlで画像を横並び2列にする方法を3つ紹介します。レスポンシブ対応と中央寄せの方法も解説します。【方法1】何もしなくても横並びインライン要素同士は何もしなくても横に並びます。href="#">aタグ2テキストテキスト</a><span>spanタグ2テキストテキスト</span>1行で収まるならいいですが、2行になったときふつうに右端で折れますね。インライン要素内で改行させたいなら下記の方法を使いましょう。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【方法2】tabletableは表を作るためのhtmlタグですが、これを使うことで要素を横並びにできます。</tr></table>tableの場合td内で改行されるためインライン要素内で改行させることができます。cellspacingやcellpadding属性を使うことで隙間の調整も可能です。いえ、tableでは細かい調整は難しいため、凝ったデザインをしたいかたは下記の方法にしましょう。【方法3】display:flexdisplay:flexは子要素の位置調整ができるCSSです。これを指定すると子要素は横並びします。<span>spanタグ2テキストテキスト</span></div>tableのとき同様、子要素内で改行されます。display:flexはインライン要素だけでなく、ブロック要素が混ざっても横並びできます。その他、様々な調整ができます。詳しくは下記記事をご覧ください。display:flexで解決できること9選!display:flexは便利らしいがどんなときに使えるのか。横並べを中心に、いろいろなことができるので覚えておきましょう。【方法1】何もしなくても横並び→ただ並べばいいなら【方法2】table→インライン要素内で改行させたいなら【方法3】display:flex→複雑なデザインをしたいなら以上、aタグやspanなどインライン要素を横並びする方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。