初心者「が」教える CSS 【 :hover 編】

CSS

今回使う言語(2つ)

  • HTML
  • CSS

※この記事はPC推奨です。

こんにちは、みかん星人です。

突然ですがこの文字を触ってみてください

違います。超絶高度な変態とかじゃないです。

触っている間だけオレンジ色になるかと思います。
そう、これが「:hover」の力。


では、早速HTMLとCSSを準備してコードを書いてみましょう。

まず最初に HTML CSS の2つのファイルを作りメモ帳などのテキストエディタで表示させます。
※HTML/CSS の始め方は別の記事に書いてあるのでそちらを参照していただけるとスムーズにできるかと思います。
HTML始め方】【CSS始め方
別タブで開きます。

ファイル名は「hover.~~」で統一しました。

HTMLの準備です。

HTML の準備はこんな感じです。

コピペも用意しておきました↓

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
 <meta charset="utf-8">
 <title>hover</title>
 <link rel="stylesheet" href="#.css">
</head>

<body>
	
</body>
</html>

そしてもうひと手間。

body部分にpタグを追加してください。

ここの色を変えるようにしたいと思います。

	<p>文字</p>

次に、CSSの準備をしていきます。

CSSの準備はこんな感じです。

コピペも用意しておきました↓

p {
	color: orange;
}

ですがこのままでは普通に色を変えただけになってしまいす。
マウスポインタ―を乗せた時だけに変えたいのでここに少し追加します。

注意点

記号は「:(コロン)」です。

:(コロン)の前にスペースキーなどで空白を開けないでください。

これが追加できましたら、保存をしてwebを開いて確認してみましょう。


確認をしてみる

できてた!!!


ということで今回はこれで終わりです。

文字の色を変える以外にも応用で他のコードを使えば色々できるので試してみてください!

文字回したり

文字の大きさ変えたり

できます。

これらの解説もいずれしたいと思いますのでお楽しみに!

コメント

  1. dwarf hamster より:

    I loved as much as you will receive carried out right here.

    The sketch is attractive, your authored subject matter
    stylish. nonetheless, you command get bought an impatience over that you wish be delivering the following.
    unwell unquestionably come more formerly again as exactly
    the same nearly a lot often inside case you shield this increase.

  2. nagpuri song より:

    I’m not sure why but this website is loading incredibly slow for me.
    Is anyone else having this problem or is it a problem on my end?

    I’ll check back later and see if the problem still exists.

  3. I was suggested this website by way of my cousin. I’m
    now not sure whether or not this publish is written via him
    as nobody else recognise such distinct approximately my trouble.
    You are amazing! Thanks!

  4. shelving rack より:

    Hi! I know this is kind of off topic but I was wondering if
    you knew where I could find a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having difficulty finding one?

    Thanks a lot!

  5. I’m amazed, I have to admit. Seldom do I come across a blog that’s
    both educative and entertaining, and without a doubt, you have hit the nail
    on the head. The issue is an issue that too few folks are speaking intelligently
    about. Now i’m very happy that I stumbled across this in my search for something concerning this.

  6. Thanks to my father who shared with me about this web site, this website is
    truly remarkable.

  7. You have made some good points there. I looked on the net
    to learn more about the issue and found most people will go along with your views on this site.

  8. Thanks in favor of sharing such a nice thought, paragraph is nice, thats why i have read
    it fully

  9. dugi wow より:

    Asking questions are genuinely fastidious thing if you are not understanding anything entirely, except this post provides fastidious
    understanding yet.

  10. If some one wants expert view concerning running a blog
    then i suggest him/her to pay a visit this webpage, Keep
    up the pleasant job.

トップへ戻る
タイトルとURLをコピーしました