スマホでは任意の位置で改行し、PCでは改行しない見出し:メモ

大したやり方ではないのですが、結構便利かなと思うので記事に残します。

スマホ、といいますか狭い画面では見出しの改行位置は融通が効かせづらいですし、柔軟性を考慮すると諦めた方が良い場合も多々あります。

改行にこだわること自体は意味ある行為だと考えていますが、スマホではどう頑張ってもtableが使いにくいのと同様に、やるべきかやらざるべきかの判断が必要だとも思いますので。

実現したいこと

目指すのは以下の状態です。

• PCでは1行の見出し
• スマホでは任意の位置で改行させ2行の見出し
• メディアクエリによるレスポンシブデザイン

PCとスマホの改行は逆転しても問題ありません。
PCとかスマホとか書いてますが、メディアクエリによる数値指定なので「そういうサイズ」での場合分けとお考えください。

PCで3カラム、スマホ1カラムとなる場合、スマホの方が横幅が大きくなる場合もあるでしょうから、そういうことも当然あるかなと。

実現する方法

実は大層な話ではありません。以下のようにbrタグを操作するだけです。

<h2>見出しを任意の位置で改行し、<br>見映えを整えたい</h2>

@media only screen and (min-width: 481px){
 h2 br{
  display:none;
 }
}

作り込んだコピーであるために今後の変更の可能性が低い場合は、デバイスの幅を基準とせずにもっと厳密に分岐点となる幅を決定してもよいと思います。

この場合はスマホかどうかではなく、コピーがどういう状態なら一番映えるか、という点から考えるとスムーズでしょう。

画像の見出しを改行する

蛇足的ですが、画像の見出しを改行する方法も書いてみます。

• 改行したい位置で画像を分ける

これもまた単純な話ですね。画像自体を最初から分割してしまえば問題ありません。

inline要素のため勝手に改行（実際は下に落ちるのですが）できますし、「display:block;」などを指定して切り替える方法もありです。

極端な話、一文字ずつ画像にしてしまえばテキストと同様に勝手に改行させることも可能です。

ただしalt属性の問題もありますので、一文字づつの画像化はあまりオススメできませんが。

結び

全く目新しさも何もない記事でしたが、案外こういう単純な表示非表示を利用した仕組みがレイアウトの質を向上させるかも知れません。