CSSを使って見栄えの良いサイトを作ろう？！〜サイトリンク編〜

コンバンワ！
フラッターブログ管理人のmasakiです！

今回はフラッターブログで初めての試みの内容にしたいと思っています。

内容ですがプログラミングのCSSについて書きます！

もし、これから勉強しようと考えている方に参考になれば幸いです！

それでは参りましょう！！

a:link

a:link{ color: red; }

上記は閲覧者が訪問していないリンクにスタイルを適用するcssになります！

:activeセレクター、:hoverセレクターなどと併用する時はそれらを指定したスタイルを上書きしてしまわないように必ず先に記述する必要がある！！

上記は閲覧者が訪問していないリンクを対象にスタイルを適用して赤の文字で表示しています。

visited

visited { color:gray }

閲覧者が訪問済みのリンクにスタイルを適用します。

:activeセレクター、:hoverセレクターなどと併用する時は上書きしないように先に記述する必要があります。

上記では訪問済みのリンクを対象にスタイルを適用し文字色をグレーで表示する。

any-link

any-link{ color:green; }

閲覧者の訪問の有無に関係なくリンクにスタイルを適用します。

:linkまたは、;visitedに一致する全てのリンク要素が対象です。
上記の例では全てのリンクを対象にスタイルを適用し文字色を緑で表示させてます。

active

:active{ background-color:#ffe4b5; }

閲覧者の操作によってアクティブになった要素にスタイルを適用する。

:link、:visitedセレクター、:hoverセレクターと併用する時は、スタイルを上書きされないように必ず後ろを記述します。

閲覧者がリンクををクリックした瞬間のリンクテキストを適用し、背景色の薄いオレンジで表示します。

最後に

いかがでしたでしょうか。

プログラミングを勉強する方で最初にやる方が多いのがHTMLやCSSが多いと思います！

その際に少しでも役に立てたら良いなと思っています！

今後、少しづつ上げていきますので良かったらたまに覗きに来てください！

今回紹介させていただくのがHTML&CSSの本になります。

こちらはかなりの数売れている本で正直有名すぎるかもしれません！

有名なのもありやはりわかりやすい内容で本に記載してあり初心者の方にはオススメです！

この本を読んでから本格的に始めても良いかもしれません！

ぜひ一度読んでみてください！
初心者の方にはオススメです！

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ] 価格:2,486円 (2021/6/27 23:53時点) 感想(23件)