最近、自分の作ったライブラリなどを、ランディングページ（以下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;
}
すると・・・
こうすると、１文字あたりの枠が大きくなっていて、下にずれるポイントがなんとなく理解しやすいのですが、
フォントを植え揃えにして、サイズを変更すると、結構痛い目を見てしまうことが想定されます。
サイズの違う文字フォントの揃え方
デフォルトで文字を並べるときは、フォントのベースラインで揃えてくれます。
そして、一番簡単に揃えたいのであれば、真ん中揃えにするといいでしょう。
これは、positionの指定をなくして、"vertical-align:middle;"を付け加えると整列することができます。
でも、多くの場合、エレメントサイズで画面レイアウトを配置することが多いので、試しにdisplay:flexをセットすると、次のようになってしまいます。
もうこうなってしまうと、手直しできる気がしません。
でも、line-heightをセットすると、若干ズレが、緩和されます。
.area{
line-height:1.0;
}
結論
違うサイズのフォントを扱う場合は、inlineまたはinline-blockの関係性で使うことをおすすめします。
固定の文字でどうしてもピクセル単位で揃えたい場合は、画像として配置するという奥の手も忘れてはいけません。
HTMLとCSSコーディングで、たまに苦労するこうした事を、地道に知っておくと、
無駄な時間を過ごさずに済むので、効率重視を考えると、備忘録も重要だと感じました。
また、気になる事があれば、ブログに備忘録したいと思います。
