スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

最近海外のサイトなんかを見ているとテキストリンクにボーダーを使っているサイトが多い気がします。普段だと「text-decoration: underline;」のところ「border-bottom: 1px solid #003f8e;」って感じです。

link-border2.png

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

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

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

点線にしてみたり。

色を濃くしたり。

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

link-border.png

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

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

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

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

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

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。