【css】テキストに下線をつけるやり方を解説します

css

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、10年目エンジニアです。

この記事では、 cssテキストに下線をつけるやり方について、書き方サンプルをまじえながら解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10

cssでテキストに下線をつけるやり方を解説

cssでテキストに下線をつけるやり方を解説します。

下線をつけるには

を下線をつけたいタグに直接書くか、またはcssで指定します。

では、次の章で実際に使い動作を確認します。

テキストに下線をつけるサンプルの概要

テキストに下線をつけるサンプルでは、

  • HTML
  • css

の2ファイルを使います。

2つdivタグを用意します。
1つのdivタグのみ下線をつけるよう指定して、指定しなかったdivタグとの表示の確認をします。
フォルダ構成は以下のようになっています。
外部css読み込みを解説するフォルダ構成

HTMLで外部のcssを読み込むやり方はこちらの記事をご参考ください。

HTMLサンプル

cssサンプル

実行結果

作成したHTMLをブラウザで開くと、指定したdivタグのみ下線が引かれていることが確認できました。

まとめ:テキストに下線をつけてみよう

以上がcssでテキストに下線をつけるやり方についての解説でした。

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました