spanでレスポンシブでもいい感じに改行できる!

noteで書く
アイ・クリエイト かおる です。 ブログを書いているときや、コーディングしていて
見出し部分が下の画像のように
1文字だけ改行されて気持ち悪い!
となったことはありませんか?
今まで<br class=”pc_only”>などのように
<br>を使ってスマホとパソコンで改行の位置を変更していたのですが、
<span>を使うといい感じに改行できることを知りました。 Wordpressで記事を投稿する際の
タイトルや見出しにも使える技なので
ぜひご一読いただければと思います。

spanを使った改行の仕方

【HTML】
  1. <h2>
  2.   <span>spanを使えば、</span>
  3.   <span>レスポンシブでも</span>
  4.   <span>いい感じの位置で</span>
  5.   <span>改行できる!</span>
  6. </h2>
HTMLでは見出しなどに使うテキストを
意味が通じるように区切って、それぞれ<span>で囲みます。
【CSS】
  1. h2 {
  2.     text-align: center;
  3. }
  4. h2 span {
  5.     display: inline-block;
  6. }
CSSではspanに display: inline-block; を指定するだけです。

(今回はh2にtext-align: center; を指定していますがデザインによって変わります。)

spanで区切るといい感じに改行される!

1番の「レスポンシブだと改行位置が…」は
<br>や<span>を使っていないバージョン。 2番の「brで改行すると画面幅に応じて…」は
brに class=”pc_only” などの可視・不可視の切り替えを指定したバージョン。 そして3番の
「spanを使えば、いい感じの位置で改行できる!」が
実際にspanを使って改行させたものです。 デザインによって2番の
brに可視・不可視の切り替えを指定するやり方がいい場合もありますが
3番のspanを使って改行させるやり方でもOKな場合は
手間が少し減らせるのでおすすめです。

WordPressのタイトルや見出しにも使える!

ちなみにこの記事のタイトル
「spanでレスポンシブでもいい感じに改行できる!」
にもspanで区切る技を使っています。
  1. <span style="display: inline-block;">spanで</span>
  2. <span style="display: inline-block;">レスポンシブでも</span>
  3. <span style="display: inline-block;">いい感じに</span>
  4. <span style="display: inline-block;">改行できる!</span>
Wordpressで記事を投稿する際、
上記のコードをタイトルにコピペして文を変えるだけでOK! ぜひPCでこの記事をご覧の方は
ブラウザの幅を色々と変えて、どんなふうに改行されるかお試しください!
noteで書く

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です