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

Bloggerブログのシンプルテーマのモバイルでの表示がスマホの画面の大きさによってばら付きが出易くて文章の行間や文字間を調節したけれども訪問者によってデザインが変わらないようにもうちょっと何とかなると有り難かった。そして見付けた方法がCSSのfont-sizeにcalc()を使う。レスポンシブ対応の文字サイズを指定するこれからのテクニックに載っていてcalc関数にはCSSの属性値を調節する機能があるので、デバイスの相違、スマホの画面幅などに合わせてサイトのデザインを付けるのに役立つ。文字サイズを画面の横幅に揃えるマークアップ CSSのfont-sizeのcalcで文章の両端を合わせた些細な日常の画面

font-size:calc(100% + 0.055vw)ブログの些細な日常に取り入れたソースコードだけれどもCSSの文字サイズを決めるfont-size属性にcalc関数を指定して左側の「100%」に対して右側の「0.055vw」を足して一列の文章がスマホの画面の両端になるべく揃うように整えたわけなんだ。追記：スマホやタブレットで画面幅を基準にすればfont-size:calc(100vw / 一行当たりの文字数)のようなマークアップ――サイトの横幅を一行当たりの文字数で割って一文字分の文字サイズを算出する――で両端にぴったり合わせられる。手持ちの幾つかのモバイルのデバイスで確かめると完全には合わないし、難しいままなのは確かだけれどもやらないよりは間違いなく良いと思う。画面サイズが5.2インチと5インチのスマホでまずまずで、4インチのウォークマンで記事本文の右端が少し開いた。一列の文章のデザインが合わないけど、しかしながらスマホは5インチ前後の画面が多いからそこに向けてブログでの文章の両端が揃うように表示したいと願っている。BloggerのモバイルのテンプレートのCSSに適用するにはBloggerのシンプルなどのウィジェットバージョン2のテンプレート（htmlタグにb:version='2'と記載される）のモバイルで取り入れる場合はHTMLのbody要素に「mobile」のclassを付けてCSSに記載すると全ての文字サイズに反映してデザインが画面幅によって調節されるようになる。その他、スマホ向けのデザインを付ける場合は一般的に@media screen and (max:width:480px){ソースコード}のようなCSSのメディアクエリによる画面幅の振り分けを使って行われる。BloggerのContempoなとのウィジェットヴァージョン3のテンプレート（htmlタグにb:defaultwidgetversion='2'と記載されるもの）はモバイルとデスクトップのCSSはclassで分けられてなくて全て@media screenだけでデザインを振り分ける。文章を左寄せで組んで両端を揃えるにはtext-align属性のjustifyを使えば手早いけれども全角の日本語と半角の英数字が混ざった場合に文字間にばら付きが出てしまうんだ。font-sizeのcalcは文字間を変えずにスマホの様々な画面幅でのデザインの崩れを減らせる。

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

コメント

最近の投稿

Googleドライブの空にしたゴミ箱を復元する方法

人気の投稿

細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス

宜保愛子は本物の霊能力者だと考えられる三つの真実

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

アドセンスのGDPRに日本でも対応しなくてはならない場合がある

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

日本人がジャニーズ事務所で行われた性加害よりも恐れていること

玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ

沖雅也の涅槃への自殺と双極性障害

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

Googleの誕生祝いでプロフィールアイコンに風船と紙吹雪が飛んで来た