株式会社レクタス
ホームページアクセスログ解析
追跡・トラッキング機能
ページ閲覧解析システム
アンケートフォーム
認証付きダウンロード機能
会員制不要なオンライン展示会
メール配信システム
営業支援システム
ホームページ制作勉強会
ホームページ制作＆コンサル
商品企画コンサルティング
営業コンサルティング
ホームページメンテナンス【CSS】文字に下線(アンダーライン)の引く方法【HTML】
CSS で 文字に下線(アンダーライン)の引く方法
本文中のテキストや見出しに CSS で下線を付けたい時があると思います。アンダーラインは text-decoration や border を利用してとても簡単に実装できますので、1本の下線をはじめとして、二重線、点線、破線など用途別に応じて解説します。
下線を引く
まず、下線のサンプルを用意しました。
css を使った下線の引き方
サンプルのコードは以下の通りです。
サンプルコード： HTML
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./underline.css">
</head>
<body>
<p class="underline">css を使った下線の引き方</p>
</body>
</html>
サンプルコード: CSS
.underline {
text-decoration: underline;
}
text-decoration を使った下線を引き方
下線の位置を変えたい
文字と下線の間隔を調整します。余白を調整することで文字の読みやすさが変わってきます。デフォルトでは文字と下線がくっついているので、下線の位置を下にずらします。
css を使った下線の引き方
.underline {
text-decoration: underline;
text-underline-offset: 5px;
}
※text-underline-offset は2021年9月時点で InternetExplorer などの一部ブラウザでは未対応となっていますので使用時は注意が必要です。
下線の太さを変えたい
css を使った下線の引き方
.underline {
text-decoration: underline 5px;
}
下線の種類を変えたい
波線
css を使った下線の引き方
.underline {
text-decoration: underline wavy;
}
破線
css を使った下線の引き方
.underline {
text-decoration: underline dotted;
}
下線の色を変えたい
css を使った下線の引き方
.underline {
text-decoration: underline red;
}
カラーコードでも可。
.underline {
text-decoration: underline #ff0000; /* red のカラーコード*/
}
border を使った下線の引き方
下線の長さを調整したい
アンダーラインの引き方は text-decoration だけではありません。text-decoration では文字長よりも下線を長く(短く)することはできません。長さを調整したい時は border を利用します。
css を使った下線の引き方
.underline {
border-bottom: solid 1px;
width: 300px;
text-align: center;
}
padding-bottom を使用すれば border も text-decoration 同様にアンダーラインの位置を変更することができます。
css を使った下線の引き方
.underline {
border-bottom: solid 1px;
width: 300px;
text-align: center;
padding-bottom: 20px;
}
以上でアンダーラインの書き方の説明を終わります。
アンダーラインは簡単に実装できるということがお分かりいただけましたでしょうか。アンダーラインを引きたくなったらこちらの記事を思いだしていただければと思います。
