[css] 大きいフォントサイズの文字を表示すると縦にズレてしまう対処方法の話

2021年8月15日

テクノロジー

eyecatch 最近、自分の作ったライブラリなどを、ランディングページ(以下LP)で構築するのがマイブームの、ユゲタです。 ランディングページは、デザインが良いという条件が必至ですが、 同時に、内容をまとめるという、非常に重要な要素もあります。 MarkDownファイルに、文字で書き込むだけでなく、見やすくそれをLPにすると、 なんか、商売できる感じになってきて、それを見る人も、思わず使いたくなってくる・・・かも・・・とか、 勝手に思いながら、LPを作り続けているんですが、 LPを作っていると、とびきり大きな文字を表現する場面があり、その時に、文字の配置がヘンになるということに気がついて、 色々と調べてみました。

ホームページにおけるフォントの表示ずれ

<div class="area"> <div class="a">1</div> <div class="b">2</div> <div class="c">3</div> <div class="d">4</div> <div class="e">5</div> </div> <style> .area{ position:relative; } .area > *{ display:inline-block; margin:10px; padding:0; position:absolute; top:0; } .a{ font-size:30px; left:0px; } .b{ font-size:50px; left:30px; } .c{ font-size:70px; left:80px; } .d{ font-size:100px; left:150px; } .e{ font-size:150px; left:250px; } </style> はじめに、今回の基本となるサンプルコードを用意しました。 これをブラウザで表示すると、 エレメントの上を揃えると、文字が大きくなるにつれて、下にズレてしまっています。 このエレメントに、枠線をつけてみるために、次のstylesheetを追加します。 .area > *{ border:1px solid red; } すると・・・ こうすると、1文字あたりの枠が大きくなっていて、下にずれるポイントがなんとなく理解しやすいのですが、 フォントを植え揃えにして、サイズを変更すると、結構痛い目を見てしまうことが想定されます。

サイズの違う文字フォントの揃え方

デフォルトで文字を並べるときは、フォントのベースラインで揃えてくれます。 そして、一番簡単に揃えたいのであれば、真ん中揃えにするといいでしょう。 これは、positionの指定をなくして、"vertical-align:middle;"を付け加えると整列することができます。 でも、多くの場合、エレメントサイズで画面レイアウトを配置することが多いので、試しにdisplay:flexをセットすると、次のようになってしまいます。 もうこうなってしまうと、手直しできる気がしません。 でも、line-heightをセットすると、若干ズレが、緩和されます。 .area{ line-height:1.0; }

結論

違うサイズのフォントを扱う場合は、inlineまたはinline-blockの関係性で使うことをおすすめします。 固定の文字でどうしてもピクセル単位で揃えたい場合は、画像として配置するという奥の手も忘れてはいけません。 HTMLとCSSコーディングで、たまに苦労するこうした事を、地道に知っておくと、 無駄な時間を過ごさずに済むので、効率重視を考えると、備忘録も重要だと感じました。 また、気になる事があれば、ブログに備忘録したいと思います。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。