こんにちは。ワタナベです。
最近変な寝方のせいなのか寝つきが悪いです。
どうしたら朝ちゃんと決まった時間に起きられるのかを模索中です…^^;
時に、コーディングをしていて、レスポンシブをしたときに、たまにこんなことってありませんか？
「なんか１文字落ちてる！！！！！！！！」
上の図のように左寄せだったらまだ許容範囲ですが、真ん中寄せだったり、デザインによっては左寄せでも１文字落ちているとデザインのバランスが悪く見えてしまいます（特に見出し）。
特に真ん中寄せは厄介で、見出しなどで真ん中寄せで統一したいときにこうなってしまうととっても悲しいです(´･ω･｀)
1文字落ちじゃなくても、文章の区切りの悪い場所でバランス悪く改行されていると気持ちが悪いです。
変なところで改行してしまうのは嫌…
そんな時どうしたらいいのか何か方法は無いかと探してみたら……ありました！
文節ごと（改行されてもおかしくない文ごと）に<span>で囲って、その<span>をcssでdisplay:inline-block;する
です！
これで、レスポンシブしても変なところで改行されずに、区切りのいいところで改行されます。
※ただし、<span>で囲む文が長いと、画面幅によっては改行されてしまいます。長い単語などを区切らずに囲ってしまうと意図せぬ場所で改行されてしまう可能性もあります。
このやり方だけでは万能ではないですが、文字サイズ、文字間なども駆使して調節すれば、レスポンシブしても見栄えをよくすることができるのではないかなと思いました！（特に真ん中寄せ）
Webデザインにおけるタイポグラフィの考察
今回参考にさせていただいた記事です。
文字のレイアウト、見せ方は難しいのでとても参考になります!(^^)!
ところで、皆さま、お台場にはもう行かれましたか？
お台場でガンダム立像が見られるのは3月（3月5日撤去予定）までなので、観に行かれる方はお早めに！
自分はちょいちょい観に行っては写真を撮っています(笑)
後姿が好きです(∩´∀｀)∩
それでは、ご閲覧ありがとうございました(^^)/~~~
