こんにちは、Autumn（オータム）です。
「文章をキレイに改行をしたい！」
そう思った勉強始めたての頃の私は、エディタ上で文章を改行するも、全く反映されないWEBページを見て絶望したものです。。
「HTMLで改行する方法を知りたい！」
「欲を言えばレスポンシブで改行を付けたり消したりしたい！」
そんなプログラミングの勉強を始めたばかりの方向けに、今回はHTMLで文章を改行する方法を解説します！
また実践編として、レスポンシブに改行を付けたり消したりする方法も合わせてお伝えします。
この記事を最後まで読んでいただければ、あなたは「改行マスター」になれること間違いなしです。笑
それでは一緒にプログラミングの勉強を始めて行きましょう！
HTMLで改行する方法
結論から言うと、改行する方法は以下の２パターンを覚えておけば問題なしです。
・改行位置にbrタグを使う
実例も交えつつ解説していきますね！
pタグで段落ごとに分ける
一番シンプルで基本となる方法ですが、改行したい部分で文章を分割し、段落ごとにpタグを並べるだけです。
下記の実例を元に解説していきます。
要素幅に合わせて少し不自然な部分で改行されています。
それでは、文章をpタグで分けてみます。
すると、下記のようにキレイに改行することができました。
改行位置にbrタグを使う
コードの記述量を少なくしたい場合は、brタグを使えばより簡潔に改行ができます。
使い方は超シンプル、文章中の改行したいポイントにbrタグを入れるだけです。
すると先ほどと同じように改行できました。
実践編：レスポンシブ対応するには
ここからは実践編です。
レスポンシブ対応の作業をする際、
「パソコンでは改行したいけど、スマホの時に改行を消したい」
なんて時がたまに出てきます。
例えば、下記のようにパソコン上だとキレイに改行されていますが、、
画面幅が小さくなると逆に改行したことで変になってしまうことがあります。
こんな時に使用するのがCSSの「メディアクエリ」です。
※メディアクエリに関しては今後別記事で解説しようと思います。
brタグにクラス名を追加し、CSSで改行のオンオフの切り替えをします。
すると755px以下では改行がオフになりました。
もちろん、逆にすればオンオフのタイミングも切り替わりますので、場面に応じて使い分けてみてください！
ポイントおさらい＆まとめ
最後に今回のポイントをおさらいします。
・改行位置にbrタグを使う
・メディアクエリを使用することでレスポンシブ対応も可能
今回のポイントを押さえれば、エディタでただ文章を改行するようなミスはなくなります。
あとは自分でコードを書いて復習することも忘れずに。
最初は今回の実例のソースコードをそのまま真似るだけでも良いので、ぜひご自身のエディタで書いて、ちゃんと作動するか確認してみてくださいね。
継続こそ最短でプログラミングを上達させる方法です。少しずつで構いませんので、コツコツスキルアップしていきましょう！
「なかなか継続できない」という方はこちらの記事も参考にしてみてください。
関連記事：プログラミングの勉強を継続できない理由【答え：「継続する基礎練習」が足りないだけ】
読んでいただき、ありがとうございました！
