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

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

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

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

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

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

にほんブログ村 にほんブログ村へ
クリックいただけると嬉しいです!
PVアクセスランキング にほんブログ村
クリックいただけると嬉しいです
目次

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件)

今回の記事はこの辺で以上になります!

それでは次回のブログ記事で!

ブログ日記始めました!

masakiの日記

完全感覚programmerという日記を始めたのでよかったら読んで欲しいです!

なるべく多く更新できるようにブログより更新していきます!

それでは次回の記事で!

にほんブログ村 にほんブログ村へ
クリックいただけると嬉しいです!

個人的にオススメ記事になります!!

あわせて読みたい
プログラミング言語のハテナ?! 〜Rubyとはどんな言語?〜 どうも!フラッターブログ管理人のmasakiです! プログラミングの記事を作ることが多くなってきました。 今回はRubyについて書いて参ります! 記事途中で出るかもしれま...
あわせて読みたい
看護師が教える?!医療関係者のおしごと 〜臨床工学技士とはどんな仕事なの?〜 みなさんこんにちわ、koukiです。 今回のテーマは「臨床工学技士」です。 これまた、なじみがない方が多いと思います。 ただ、病院ではとても大切な職業です。 イメージ...
あわせて読みたい
現役ABAPエンジニアが教える!! ABAP言語について① フラッターブログの住人Hikkeyです!! 先日ですが自分の仕事で使用しているABAPという言語を取り上げたところ想像以上の反響がありました! この言語はマイナーな言語のた...

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる