テキストリンクの差別化にborder-bottomを使ってみる

ボーダーにすることで何ができるかというと、テキストの色と違う色の下線にできたり、点線にできたりします。

例えばこんな感じ。下線の色のみ変えています。

テキストリンクってなかなか差別化できなかったけどこれだと色々できそうです。

点線にしてみたり。

色を濃くしたり。

しかし、フォントがメイリオの場合はテキストと下線の間隔が開きすぎて変な感じがします。

気にならないという方もいるかもしれませんが、私は気になります。色々試しましたがいい方法が見つかりませんでした。

MS Pゴシックやヒラギノなんかは違和感がないと思います。

行間を取った場合、テキストの下を基準に上へ間隔を取っていくMS Pゴシックなどと違い、メイリオはテキストの真ん中を基準に上下に間隔を取っていくため（多分。。）テキストと下線の間隔が開きすぎるのだと思います。

紹介しておきながら、このブログではwindowsの場合メイリオで表示されますので一旦保留です。

メイリオでも気にならない方やメイリオを使っていないサイトをお持ちの方は試してみてはどうでしょうか。

最近軽いネタばかりですが、ちょっと余裕が出てきたの来週あたりからボチボチ更新していきたいと思います。