はじめに
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-decoration | none | 装飾なし （初期値） |
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)プロパティが無効となります。（クリックした際に色の変化なし)
どうですか？できていますか？
あらゆる事をわかりやすく解説するメディアサイトです。
プログラミング学習を初めてよく参考にしています。
もっと専門的により複雑なコードを書いていくとこの方法だと問題があるのかもしれませんが、
現状は私のメモとしては問題ない感じです。
わからない事ばかりなので、私のメモを記事として増やしていきたいと思います。
