雑記ブログ

HTML&CSS リンク先のアンダーラインの消去とカラー変更

はじめに

2020年の3月からプログラミング学習を始めました、超シロートです。

 

プログラミングの有料コミュニティには参加していますが、基本は独学。

 

検索しても中々自分のしたい事を探し当てても、記事の内容を理解できない事が多く、

 

ググるのに時間を費やしています。

 

できてもその場だけで、時間が立つとなんやったけ?と思う事があり、

 

またググるの悪循環・・・・

 

という事で自分自身の検索時間の短縮とアウトプットの為に書きメモする事にしました。

 

間違って書いている事もあると思いますがその際はスキルアップの為に教えて下さい。

 

<a =href="リンクアドレス">サイト名</a>と書くとサイト名の下にアンダーラインがつきます。

 

コミュニティーの課題でページの模写をするのにアンダーラインを

 

消さないといけない場面がありググると沢山でてくるのですが、

 

いろんな方法があって頭がパニック・・・

 

a.no-color-change:link,

a.no-color-change:visited,

a.no-color-change:hover,

a.no-color-change:active {
  color: blue;
}

WHAT ???

non-color-change ? 英語の意味はわかるけど・・・

 

それってHTMLにも記述しなあかんの?

 

統一してくれたらいいのにと試行錯誤しながら

 

なんとか、アンダーラインの消去とカラー変更をクリアできました。

 

リンク先のアンダーラインをCSSを使って消す方法

 

CSSでリンクを指定しtext-decorationと言うプロパティを使って消します。

 

ちなみに、アンダーラインを引く際には<border>もよく見ますが、

 

border-bottom: none;では消えなかったです。

 

 

プロパティの値
プロパティ名説明
text-decorationnone装飾なし (初期値)
underlineテキストに下線を引く
overlineテキストに上線を引く
line-throughテキストに取り消し線を引く
blinkテキストを点滅させる

 

blinkの指定は、IE、Safari、Chromeでは対応していません。

 

装飾線の色は、colorプロパティで指定された色になります。

 

下記コード記載部分の右上のLOGOをクリックすると画面が大きくなり

 

コードを触る事ができますので確認してみて下さい

 

See the Pen
jObNVeQ
by tete_peace@HTML学習memo (@tete_peace)
on CodePen.

 

リンク先のアンダーラインをCSSを使ってカラーを変える方法

 

先の記述でリンク先のアンダーラインを消す事ができましたので、

 

今度アンダーラインに色をつけてみたいと思います。

 

1度アンダーラインを消してaタグにborder-bottomを使ってアンダーラインを追加します。

a{
text-decoration: none;
border-bottom: 2px solid red;
}

これで赤のアンダーラインが引かれるはずです。

 

もしアンダーラインと文字の距離を開ける場合はこのように記述します。

 

(padding-bottom:◯px  or  ◯%;)

a{
text-decoration: none;
border-bottom: 2px solid red;
padding-bottom:5px;
}

 

See the Pen
QWjLgPb
by tete_peace@HTML学習memo (@tete_peace)
on CodePen.


できていますかね?次は

 

CSSでリンク先のカラーの変更と疑似クラス

 

未訪問のサイトと訪問済のサイトでリンクの色が異なっていることや、

 

マウスカーソルを当てた際、マウスクリックした際にリンクの色が変わることがあります。

 

これらはaタグの:link, :visited, :hover, :active疑似クラスの設定が原因みたいです。

 

擬似クラスは指定したもの全体に影響を与えるもので、

 

文書構造の範囲外にある情報や単体セレクタで表現できないものを

 

選択するために導入されたもの。

(ある要素が特定の状態にある時に限定して適用するセレクタでclass属性との関連はない。)

 

主要な擬似クラス

 

リンク擬似クラス

・ink リンク先をまだ見ていない状態

 

・visited リンク先をすでに見た状態

 

ユーザーアクション擬似クラス

・hover: カーソルが上にある状態

 

・active :マウスのボタンなどが押されている状態

他にもあるようですが使った事がないのでここでは省略。

 

 

さて、リンク先をクリックした際に色が変わった状態になります。

 

これを文章と同じ色の状態にしたい場合は、

 

a {   } を使い文章と同じcolor指定(black)

 

すると、リンクの文字が指定した色になるはずです。

 

マウスにカーソルを当てたの場合に色を変える時は

 

a:hover{ }を使いカーソルを当てた際に変更したい色を指定

 

その際に、a の後ろに:を忘れないで下さい。

 

activeも同様に記述すれば反映されます。

 

CSS部分に書かれているコードの色や線の太さ変えたり、消して試してみて下さい。

 

他にもアニメーション機能などもあるみたいですが、

 

まだ使ってないので次回にしたいと思います。

 

See the Pen
zYvOdxP
by tete_peace@HTML学習memo (@tete_peace)
on CodePen.

 

疑似クラスの記述順について

 

今回ご紹介した疑似クラスは以下の順で記述する必要があります。

a : link
a : visited
a : hover
a : active

この順以外ですと、各設定が正しく機能しなくなります。

正確にいうと、同じ要素、セレクタに適用するときに守るべき順番です。

 

後に記述されたスタイルが優先される

 

なぜかというと、疑似クラス同士はもちろん異なりますが、

 

<a>タグに作用するという点は同じになります。

 

CSSルールでは、同じグループ(セレクタ)の中では後に記述された

 

スタイルが優先されるというものがあります。

 

まず、hover は link と visited の後に記述しなければいけません。

 

逆になると、hoverで設定したcolor プロパティ等がlink等の設定に上書きされます。

 

ユーザーがマウスオーバーしても、テキストの色が変わらないようです。

 

同じように、active の順番は hover の後ろです。

 

hover = マウスオーバー の後に active = クリック となります。

 

後に記述されたクラスを優先するので、

 

[ hover = マウスオーバー した後、active = クリック のプロパティが有効になるように記述 ]

 

しなければならないわけです。

 

逆に記述すると、hover=マウスオーバー のプロパティが優先されて

 

active=クリックの(color)プロパティが無効となります。(クリックした際に色の変化なし)

 

どうですか?できていますか?

 

 

あらゆる事をわかりやすく解説するメディアサイトです。

プログラミング学習を初めてよく参考にしています。

 

もっと専門的により複雑なコードを書いていくとこの方法だと問題があるのかもしれませんが、

 

現状は私のメモとしては問題ない感じです。

 

わからない事ばかりなので、私のメモを記事として増やしていきたいと思います。

スポンサーリンク

よく読まれている記事

1

デザイン&クオリティ 時代の最先端を走り続けるために生まれ変わった伝統のデザイン 精緻に磨き上げられた、スクエアなフォルムとアイコニックなディテール 広くモダンに進化を遂げた、独創のインテリア そこにあるのは、時代の先端を走り続けるために、すべてが生まれ変わった伝統のデザイン   ...

2

  ・HAMANN Motor Sport社よりX5 G05 / X4 G02 / X3 G01とSUVモデルに続き、BMW X6 G06 M Sport用エアロプログラムが発表されました!日本での価格と納期はまだ未定ですが、エアロを装着した車両を見てみたいです。 G06モデルのエアロパー ...

3

コーナーの先に、驚きがある。 都市で暮らす喜びを味わい尽くす一台、MINI  3Door / 5Door。 MINI ならではのゴーカート・フィーリングに胸を躍らせ鋭いコーナーや狭い路地を軽快に、流れるように走り抜けるーその個性溢れるスタイルに、街中で視線を集めながら。 最新のMINI  Conne ...

4

Date : 1st. 2020-03-01 2020年の年内には日本でも発売されるだろうと言われているメルセデスベンツGLB 個人的には以前に発売されていたGLKを思い出すデザインで凄く好きなSUVらしさがある形だと思っています。メルセデス・ベンツGLBクラスは、現在販売されているGLAクラスとG ...

5

  2016年にフルモデルチェンジになった5代目W213 E-Class。 発売当初はメルセデスの最先端技術が搭載されていましたが、そんなW213 E-Classも2016年に発売されてもうすぐ4年を過ぎマイナーチェンジを迎えました。 新車価格が700万〜だった車も中古車市場では300万前 ...

6

  THE ICON REBORN アイコンは唯一無二である必要があると考えます。そして絶え間ない挑戦こそが新しいAventador を生み出したのです。 Miura、Islero、Countach、Urraco から続く、歴史的なランボルギーニの哲学は、新しい Aventador S C ...

7

Lorinserが新型Sクラス W223にホイールを装着した画像が公開されました。おそらくエアロパーツの開発も順調に進んでいる事でしょう( ̄▽ ̄) テレビで紹介!Oisixの美味しい野菜を配達で購入。 目次1 Lorinser Wheel for Mercedes-Benz W2232 Lorins ...

-雑記ブログ
-,

© 2021 輸入車カスタムパーツ調査室 Powered by AFFINGER5