span要素で改行させる方法をサンプルコード付きで紹介!

この記事では、span要素で改行させる方法を紹介します。span要素はインライン要素なので、それをブロック要素に変更させる必要があります。サンプルコードも用意してますので、皆さんも参考にしてください!

コンテンツ [表示]

  1. 1span要素で改行させたい
  2. 2span要素で改行させる方法
  3. 3まとめ

span要素で改行させたい

WEBサイトを制作している際、div要素やp要素では前後で改行が入りますが、span要素でも改行したいという場面が起こると思います。

この記事ではspan要素で改行させる方法をサンプルコード付きで解説いたします。

span要素で改行させる方法

span要素で改行させる方法は簡単で、CSSの要素にdisplay: block;を適用すると改行されるようになります。

これはspan要素はインライン要素なので、テキストの流れを分断せずにそのまま一行になってしまうことが原因です。

この改善方法としてspan要素にdisplay: block;ブロックレベル要素を適用させることで、折返しされ改行ができるようになります。

下記のサンプルコードを参考にして下さい。

まとめ

いかがだったでしょうか?

このようにインライン要素をブロック要素に変換させることで簡単に改行できるようになりました。

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

shu
ライター

shu

主にHTML & CSS、Bootstrap の記事を執筆します。皆さんがわかりやすく、記憶に残る情報を発信していきます。