ブログ

1行で使える、レスポンシブ
Webデザインで使える改行テクニック

最近、レスポンシブWebデザインのお仕事はやっていますが記事は書いていないので、ちょっとしたネタとして、レスポンシブWebデザインのお仕事で使える改行テクニックを紹介します。

レスポンシブWebデザインで考慮すべき「改行」とは?

レスポンシブWebデザインで考慮すべき「改行」とはなんでしょう?
レスポンシブWebデザインでは、画面に最適化された状態でコンテンツが表示されます。そのため、従来と違い、任意の位置で改行を入れる、ということが難しいです。

もちろん、1カ所くらいならいいかもしれません。しかし、時と場合により、改行をある程度制御したいときがあると思います。
また、ブレイクポイントに依存せず、画面サイズに応じた改行制御もおこないたいということもあるでしょう。

実際に使っている、1行で使える、レスポンシブWebデザインで使える改行テクニック

一番分かりやすいのはコピーライトでしょう。

うちのサイトの場合、上記のように、コピーライトの部分の後ろ半分を<span>タグでくるんでいます。その<span>タグの部分にCSSを1行で指定すればおしまいです。

span要素に「display:inline-block;」を指定します。
ポイントはタグを改行したい部分、後ろ側に指定することで、画面とテキストの量に応じて自動的に改行してくれます。
使い道としては、見出し・コピーライトなどに使うと最適です。使い過ぎなどはよくありません。

まとめ

2年くらいこのテクニック使っているけど、誰も何も言わないんだもん。
ちなみに、もう一つ改行テクニックがあるんですけどそれは別の機会で。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。