この記事では主にフォント周りのレスポンシブで便利な小技を紹介していきます。どの画面でも綺麗に表示されるように、細かくブレイクポイントを設定するの大変ですよね。なので、今回はそれを少しでも減らせるような小技を紹介していきます。
嫌な改行
皆さんも文章が変なところで改行されてしまうことが多くあると思います。すごい気持ち悪いけど無理やり<br>を使って改行したり、そのためだけにフォントサイズを変更したくないですね。そんなときに便利な小技です。
以下のコードのように、改行されても良い文章のかたまりをdisplay:inline-blockで囲ってあげましょう。
HTML
<h1>
<span>わたしはコーディングが</span><span>大好きです。</span>
</h1>CSS
span {
display: inline-block;
}これで、いい感じに改行されるようになるのでぜひ使ってみてください。
font-sizeと一緒にline-heightも変わって欲しい
みなさん、font-sizeの変更をするときにline-heightも手動で変えてたりしませんか。しかも、そのフォントサイズにあったline-heightの大きさってわかりませんよね。
そんな悩みを解決するのが、line-heightをemで指定することです。
でも、デザインカンプからline-heightの値がわかっても、emはどうやって計算すればいいのかわかりませんよね。そんなときに以下のURLのサイトが便利なのでぜひ利用してください。
いろんな計算が簡単にできるので、とても便利なサイトです。ぜひみなさんも利用してくださいね。
まとめ
この記事は文章のレスポンシブで便利な小技を紹介しました。少しでもみなさんのお役に立てれば幸いです。今回紹介した以外にも、まだまだ便利な小技がたくさんあるので紹介していきます。自分で実際に使ってみないと記憶に残らないので、忘れぬうちに使ってみてください。
「読んだだけでは100%身に付きません」
必ず行動に移してください。
そう言っても、
行動する人は20%
それを継続する人は5%
行動し続けるだけで、
上位5％に入ることができます。
今すぐ行動して上位5％に入り、
Web制作で本気で人生変えたい
そんな人は今すぐ登録してください
今行動しなきゃ、人生変わらないですよ
こちらの公式LINEではTwitter開始して1週間で案件獲得した勉強法、仕事の取り方などweb制作での収益化の方法を発信しています！
是非登録してみて下さい！
コメント