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

Bloggerブログのシンプルテーマのモバイルでの表示がスマホの画面の大きさによってばら付きが出易くて文章の行間や文字間を調節したけれども訪問者によってデザインが変わらないようにもうちょっと何とかなると有り難かった。そして見付けた方法がCSSのfont-sizeにcalc()を使う。レスポンシブ対応の文字サイズを指定するこれからのテクニックに載っていてcalc関数にはCSSの属性値を調節する機能があるので、デバイスの相違、スマホの画面幅などに合わせてサイトのデザインを付けるのに役立つ。font-size:calc(100% + 0.055vw)ブログの些細な日常に取り入れたソースコードだけれどもCSSの文字サイズを決めるfont-size属性にcalc関数を指定して左側の「100%」に対して右側の「0.055vw」を足して一列の文章がスマホの画面の両端になるべく揃うように整えたわけなんだ。追記：スマホやタブレットで画面幅を基準にすればfont-size:calc(100vw / 一行当たりの文字数)のようなマークアップ――サイトの横幅を一行当たりの文字数で割って一文字分の文字サイズを算出する――で両端にぴったり合わせられる。手持ちの幾つかのモバイルのデバイスで確かめると完全には合わないし、難しいままなのは確かだけれどもやらないよりは間違いなく良いと思う。 CSSのfont-sizeのcalcで文章の両端を合わせた些細な日常の画面

画面サイズが5.2インチと5インチのスマホでまずまずで、4インチのウォークマンで記事本文の右端が少し開いた。一列の文章のデザインが合わないけど、しかしながらスマホは5インチ前後の画面が多いからそこに向けてブログでの文章の両端が揃うように表示したいと願っている。Bloggerのシンプルなどのウィジェットバージョン2のテンプレート（htmlタグに「b:version='2'と記載される）のモバイルで取り入れる場合はHTMLのbody要素に「mobile」のクラスを付けてCSSに記載すると全ての文字サイズに反映してデザインが画面幅によって調節されるようになる。その他、スマホ向けのデザインを付ける場合は一般的に@media screen and (max:width:480px){ソースコード}のようなCSSのメディアクエリによる画面幅の振り分けを使って行われる。文章を左寄せで組んで両端を揃えるにはtext-align属性のjustifyを使えば手早いけれども全角の日本語と半角の英数字が混ざった場合に文字間にばら付きが出てしまうんだ。font-sizeのcalcは文字間を変えずにスマホの様々な画面幅でのデザインの崩れを減らせる。

コメント