CSSでテキストに下線を引く方法｜text-decorationプロパティの使い方

CSSでテキストに下線を付ける基本

CSSでテキストに下線を引きたい場合は、text-decoration プロパティを使用します。値として underline を指定することで、対象のテキストに下線を表示できます。

このプロパティは、リンクの下線を消したり、逆に通常のテキストに装飾を加えたりする際にもよく使われる、CSSの基本的かつ重要なプロパティです。

以下のコードでは、インラインスタイルを使って段落内のテキスト「India」に下線を付けています。実際にブラウザで実行して、動作を確認してみてください。

<html>
   <head>
   </head>
   <body>
      <p style = "text-decoration:underline;">
         India
      </p>
   </body>
</html>

text-decoration プロパティには、下線以外にも以下のような値を指定できます。

状況に応じてこれらの値を使い分けることで、テキストの見栄えを柔軟にコントロールできます。

CSSでテキストボタンのスタイルを設定する方法をわかりやすく解説
テキストボタンとは、背景色を持たずに文字色だけで視覚的な印象を与えるボタンのスタイルです。Google マテリアルデザインなどでも採用されている洗練されたデザインで、CSSを使えば簡単に実装できます。テキストボタンのスタイリングのポイントテキストボタンを作る基本は、border: none; でボタンの枠線とデフォルトの背景を消し、color プロパティで文字色を指定することです。さらに :hover 疑似クラスを組み合わせると、マウスオーバー時に薄いグレーの背景を表示でき、クリックできる要素であることが直感的に伝わります。以下のコードでは、Success・Info・Warning・Dange
CSSで光るテキスト（グロー効果）を作成する方法
CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {