HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのリンクの下線を削除する方法｜CSS text-decorationの使い方

HTMLのリンクから下線を削除するには、CSSのtext-decorationプロパティを使用します。style属性と組み合わせることで、要素にインラインスタイルを適用できます。

style属性に「text-decoration: none;」を指定すれば、リンクの下線を簡単に消すことが可能です。ただし、style属性によるインラインスタイルは優先度が高いため、<style>タグ内や外部スタイルシートで設定したスタイルを上書きしてしまう点には注意しましょう。

HTMLのリンクの下線を削除する方法｜CSS text-decorationの使い方

実装例

以下のコードを実行すると、リンクの下線が非表示になったページを確認できます。

<!DOCTYPE html>
<html>
<head>
    <title>HTML Text Decoration</title>
</head>

<body>
    <h2>About</h2>
    <p>
        Our <a href="/about/about_team.htm" style="text-decoration: none;">Team</a>
        comprises of programmers, writers, and analysts.
    </p>
</body>
</html>

外部スタイルシートでまとめて管理する方法

ページ内にリンクが多数ある場合は、個別のstyle属性ではなく、CSSファイルや<style>タグで一括指定する方が効率的です。

a {
    text-decoration: none;
}

マウスオーバー時の工夫

下線を消すと、テキストがリンクであることが分かりにくくなる場合があります。そのようなときは、hoverセレクターを併用し、カーソルを合わせたときだけ下線を表示させると、ユーザーにとって分かりやすいデザインになります。

a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

  1. HTMLページからリダイレクトする方法を解説！metaタグの使い方

    ページリダイレクトとは？ ページリダイレクトとは、あるURLをクリックしてページXにアクセスしたにもかかわらず、内部的に別のページYへ自動的に転送される仕組みのことです。サイトの移転やURLの変更、メンテナンス中の一時的な誘導など、さまざまな場面で活用されています。 HTMLページでリダイレクトする基本：METAタグを使う HTMLページから別のページへリダイレクトさせるには、<meta>タグを使用します。<head>内に記述したmetaタグのhttp-equiv属性でHTTPヘッダーに相当する値を指定し、content属性で転送までの待機秒数と転送先URLを設定しま

  2. HTMLでダウンロードリンクを作成する方法をわかりやすく解説

    HTMLでダウンロードリンクを作成するには、<a>タグにdownload属性を追加します。この属性を指定すると、リンク先のファイルがブラウザで開かれる代わりに、クリックした時点でダウンロードされるようになります。コード例以下は、画像をクリックするとその画像ファイルがダウンロードされるサンプルコードです。<!DOCTYPE html> <html> <body> <h1>Download Link example</h1> <a href="https://i.picsum.photos/id/225/800