今回はそんな問題をてっとり早く解決する方法を紹介します。background-colorを応用するspanタグを使用する一番手っ取り早いのはspanタグを使用することです。コードを実際に見てみましょう。下線を引きたい部分をspanタグで囲みます。border-bottomで下線を引きpaddingで高さを調整します。このコードを実行すると以下のようになります。これで、好きな範囲で好きな位置に下線が引けました。background-colorを応用するこちらは応用編で、HTMLを一切いじらずにCSSコードだけで下線を引きます。HTMLは手を加えません。結果はこちらの通りです。CSSで、pの後ろに擬似要素を付け加え、background-colorやheightを指定します。これにより、背景が1pxの要素を表示させることで、擬似的に下線を作ります。この方法のメリット・HTMLをいじる必要が無い・widthで長さを自由に指定できる擬似コンテンツは色々応用することができるので、これを機に使用して見てはいかがでしょうか。コメントをキャンセルメールアドレスが公開されることはありません。東京都内でWebコーダーとして活動中。ブログではプログラミングやガジェット、お役立ちツールなんかを発信していくつもりです。Web制作のご依頼はお問い合わせから承っております。