初心者「が」教える 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. keo bong da より:

    I’m amazed, I must say. Seldom do I encounter a blog that’s
    both equally educative and engaging, and without a
    doubt, you have hit the nail on the head. The issue is something too
    few people are speaking intelligently about. I’m very
    happy I found this in my search for something concerning this.

  2. If you wish for to obtain a good deal from this post then you have to apply
    such strategies to your won webpage.

  3. I have read so many posts on the topic of the blogger lovers however this post is truly a
    fastidious piece of writing, keep it up.

  4. What’s up, after reading this remarkable paragraph i
    am as well glad to share my familiarity here with colleagues.

  5. Hello! I could have sworn I’ve visited this web site before but after going through many of the posts I realized it’s new
    to me. Regardless, I’m certainly delighted I discovered it and I’ll
    be book-marking it and checking back regularly!

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