スキップしてメイン コンテンツに移動

スマホの画面の文字サイズをfont-sizeのcalcで文章の両端がなるべく揃うように整える

Bloggerブログのモバイルでの表示がスマホの画面の大きさによってばら付きが出易くて文章の行間や文字間を調節したけれども訪問者によってデザインが変わらないようにもうちょっと何とかなると有り難かった。


そして見付けた方法がcssのfont-sizeでcalcを使う。レスポンシブ対応の文字サイズを指定するこれからのテクニックに載っていてcalc属性にはcssの属性値を調節する機能があるので、デバイスの相違、スマホの画面幅などに合わせてサイトのデザインを付けるのに役立つ。


font-size:calc(100% + 0.055vw)

ブログの些細な日常に取り入れたソースコードだけれどもcssの文字サイズを決めるfont-size要素にcalcを指定して左側の「100%」に対して右側の「0.055vw」を足して一列の文章がスマホの画面の両端になるべく揃うように整えたわけなんだ。


手持ちの幾つかのモバイルのデバイスで確かめると完全には合わないし、難しいままなのは確かだけれどもやらないよりは間違いなく良いと思う。


cssのfont-sizeのcalcで文章の両端を合わせた些細な日常の画面

画面サイズが5.2インチと5インチのスマホでまずまずで、4インチのウォークマンで記事本文の右端が少し開いた。一列の文章のデザインが合わないけど、しかしながらスマホは5インチ前後の画面が多いからそこに向けてブログでの文章の両端が揃うように表示したいと願っている。


Bloggerのデフォルトのテンプレートで取り入れる場合はhtmlのbody要素にモバイルならば「mobile」のクラスを付けてcssに記載すると全ての文字サイズに反映してデザインが画面幅によって調節されるようになる。


文章を左寄せで組んで両端を揃えるにはtext-alignのjustifyを使えば手早いけれども全角の日本語と半角の英数字が混ざった場合に文字間にばら付きが出てしまうんだ。


font-sizeのcalcは文字間は変わらず、スマホの様々な画面幅でのデザインの崩れを減らせる。

コメント

些細な日常の人気の投稿

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

Imgurで画像URLと埋め込みコードを取得する方法

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策