テキストに下線を引く方法としては「text-decoration: underline」を使用しますが、装飾的な下線としては使い勝手が悪いです。そのため「border-bottom」を使用したりします。けれども、これも決して使い勝手の良いものではありません。 今回は疑似要素を使用して下線を引く方法です。この方法なら二重線、三重線にも対応できます。 疑似要素で下線を引く方法 「::before」と「::after」にそれぞれ新しい要素を作成してそれに対して線を引く仕組みです。 疑似要素で下線を引くサンプル このサンプルではh1要素に疑似要素「::before」と「::after」を使用して「content: “”」で空の要素をひとつ作ります。 「left:0」「right:0」にすることで要素にUAの幅いっぱいを指定します。そしてその空の要素に下線を引きます。 このままだと「::before

AndroidでChromeを使ってサイトを閲覧したときに、一部の文字が非常に大きく表示されることがあります。 ※確認した限りでは、Androidの「標準ブラウザ」では大丈夫だったので、おそらくChromeに固有のバグなのだと思います。 最初なぜこんなことが起こるのか分からなかったのですが、 色々調べた結果、意外とあっさりと解決しましたので、メモしておきます。 私の手元にある環境でしか調べられていないのですが、発生するのは、meta要素の「viewport」が設定されていないか、content属性の「width」が「width=760」のような数字になっている場合のようです。 <meta name="viewport" content="width=760">以下のキャプチャは、Google Chromeのエミュレータを使って、当ブログで再現したものですが、こんな風に非常に大きなフォントサ