[11-2] リンクの文字の色を変えよう(CSS使用)

最終更新日:2017年09月15日  (初回投稿日:2010年11月02日)

今回は、リンクテキストの色や大きさを変えてみましょう♪
CSSを使いますよ。

ブラウザにはデフォルトのスタイル設定があります。
ブラウザは、特に指定がなければデフォルトスタイルで表示します。HTML文書側でスタイルの指定があれば、それで表示します。

使用する
CSSプロパティ
font-size
font-weight
color
text-decoration
font-style

font-sizeプロパティは文字のサイズを指定します。
font-weightプロパティは文字の太さ。bold や normal などを指定します。
colorプロパティは文字の色を指定します。
text-decorationプロパティは文字の装飾。アンダーライン・オーバーライン・取り消し線などがあります。
font-styleプロパティはテキストの italic や normal などを指定します。イタリックは斜体ですね。

リンクの文字の色・太さ・サイズを変える指定をしてみよう

前回の [11-1] 他のページにリンクしようindex.html を開いて、<head>部分のCSSを編集します。
<a>要素の指定を、コピペで追加してみてください。

<!DOCTYPE html>
<html>
<head>
<!--省略-->
<style>
div {
	color: #666666;
	width: 80%;
	margin-top:20px;
	margin-right:auto;
	margin-left:auto;
	}
span {
	color:#660000;
	line-height:3em;
	}
h1 {
	color:#009900;
	font-size:30px;
	}
img {
	float:left;
	margin-right:1em;
	margin-bottom:1em;
	}
.clear {
	clear:both
	}
a {
	font-size: 150%;
	font-weight: bold;
	color: #FF6666;
	text-decoration: none;
	}
</style>
</head>
<!--以下省略-->

毎回言ってますが、CSS は HTML内に書かずに「独立した外部CSSファイル」にして HTMLに読み込ませる方法のほうが便利すし、一般的です。
ここでは簡単に説明するために HTMLファイル内に書く方法でやってます。

せっかくの実験なので、けっこう大げさな指定をしてます(念のためww)
サイズは150%で大きく、文字を太く、カラーはピンク色(#FF6666)に。
text-decoration: none で装飾を無しにします。ブラウザのデフォルトではリンクテキストにアンダーラインが入るのが普通ですが、これを取ってます。

「色指定」に関しては、こちらを参考にしてください。
●[14-4] 色指定について(16進数、色名、10進数、パーセント)

さて、それではファイルを保存して、ブラウザでプレビューしてみましょう。

マウスオーバーしたときの文字色の変化を指定しよう

次はリンクテキストにマウスオーバーした時の文字色を変えてみましょう。
これは PCサイトのみに使えます。スマホ用だと「マウスオーバー」できないからね。

下記のように「a:hover」(a要素の「疑似クラス」といいます)を指定します。
hoverは「ホバー」と読みます。
マウスオーバー(カーソルがリンクの上にいる、クリックする前の状態)時の指定です。

<!DOCTYPE html>
<html>
<head>
<!--省略-->
<style>
div {
	color: #666666;
	width: 80%;
	margin-top:20px;
	margin-right:auto;
	margin-left:auto;
	}
span {
	color:#660000;
	line-height:3em;
	}
h1 {
	color:#009900;
	font-size:30px;
	}
img {
	float:left;
	margin-right:1em;
	margin-bottom:1em;
	}
.clear {
	clear:both
	}
a {
	font-size: 150%;
	font-weight: bold;
	color: #FF6666;
	text-decoration: none;
	}
a:hover {
	color: #9900FF;
	text-decoration: underline;
	font-style: italic;
	}
</style>
</head>
<!--以下省略-->

a:hover で文字色は紫色(#9900FF)にして、さきほどは「無し」にしたアンダーライン を再び付けました。 そして font-style を italic(斜体)にしてみた。

では、ファイルを保存して、ブラウザでプレビューして確認してください。

いかがでしょうか。ちゃんとプレビューできましたか?

こんなかんじで変化します(マウスオーバーしてみて)
次のページへ

スタイルが変わると「あ、ここはリンクね」とハッキリわかりますね。
ほかの色や大きさに変えていろいろ実験してみてください。

次回予告

次回は、同じページ内の特定の箇所にリンクさせる方法を紹介します。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.