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

ブラウザにはデフォルトの設定があり、リンク部分の色など、あらかじめ決められています。
特に指定がなければ、ブラウザはデフォルトで表示しますし、サイト側の指定があれば、ブラウザはそれに従って表示します。

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

今回から、サンプルファイルをダウンロードできるようにしました!
前回までに使ったaaa.htmlなどが入ったフォルダを、ZIP形式で圧縮したものです。
★下のリンクで、ダウンロード用のページが別ウィンドウで開きます。
11-2サンプル ダウンロードページ
★別ウィンドウで開きたくない方は、コチラから

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

font-sizeは、読んだとおり、文字のサイズを指定するプロパティです。
ピクセルやems、%などの単位で指定します。

単位については 「CSSレイアウトメモ:TIPS [単位について] 」を参考にしてみてください。

font-weightは文字の太さ。boldやnormalなどを指定します。
text-decorationは文字の装飾。アンダーライン・オーバーライン・取り消し線などがあります。
font-styleは様式というか型というか。italicやnormalなどを指定します。イタリックは斜体ですね。

「font-weight、font-style、text-decoration」は「CSSレイアウトメモ:FONT指定見本」を参考にしてみてください。

colorは文字の色。これだけ「font-」とか「text-」が付いていませんね。
HTMLにとって文字の色指定は基本中の基本なので、fontやtextプロパティ族から独立してるんでしょうなあ。(って勝手に解釈しています。違ってたらごめんなさい)

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

まずは前回の aaa.html を開きましょう。
このファイルの<head>部分に書かれたCSSを編集します。
a要素に、下記の青バック部分のような指定をします。コピペで追加してみてください。

<!DOCTYPE html>
<html>
<head>
<!--省略-->
<style>
div {
color: #666666;
width: 500px;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
span {
color:#009900;
}
h1 {
color:#006600;
font-size:30px;
}
img {
float:left;
}
a {
font-size: 150%;
font-weight: bold;
color: #FF6666;
text-decoration: none;
}
</style>
</head>
<!--以下省略-->

ここでは変化がわかりやすいように、普通は使わないような大げさな指定をしてますよ。
まず、サイズは150%ででっかく表示。
font-weight: boldで文字を太くしました。
カラーはピンク色(#FF6666)に。
そしてtext-decoration: noneで装飾を一切なしにします。ブラウザのデフォルトだとリンクテキストにアンダーラインが入るのが普通ですが、text-decoration: noneで、それを取る事もできます。

Web上の「色指定」に関しては、こちらを参考にしてください。
●[14-4] 色指定について(16進数、色名、10進数、パーセント)
●CSSレイアウトメモ:TIPS「色の指定」
そして「文字のサイズ、font-style、text-decoration」は「CSSレイアウトメモ:FONT指定見本」を見ていただくと、
ざっとイメージがつかめると思います。

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

リンクの文字の色などを設定してみた

言い忘れていましたが、この↑プレビュー画像(今までの分も含めて)は文字が全部ゴシック体ですが、 お使いのブラウザによっては明朝体で表示される場合もありますよ。
いまのところHTMLファイルにフォントファミリー(書体)の指定をしていませんので、
お使いのブラウザのデフォルトの書体で表示されています。

ロールオーバーしたときの色の変化を指定しよう

次は、カーソルがリンクのテキストにロールオーバーした時の文字色を変えてみましょう。

下記のように、さっきのa要素の指定の後に、「a:hover」(a要素の「疑似クラス」といいます)を指定します。
hoverは「ホバー」と読みます。ホバークラフトとかヘリコプターのホバリングのホバー。浮いてるって意味。ここではロールオーバー(カーソルがリンクの上にいる、クリックする前の状態)時のことです。

<!DOCTYPE html>
<html>
<head>
<!--省略-->
<style>
div {
color: #666666;
width: 500px;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
span {
color:#009900;
}
h1 {
color:#006600;
font-size:30px;
}
img {
float:left;
}
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)にして、さきほどの a指定で「なし」にした underline を再び付けることにしました。 そして font-style を italic(斜体)にしてみましたよ。

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

リンクの文字のロールオーバ時の変化を設定してみた

いかがでしょうか。ちゃんとプレビューできましたか?
ほかの色や大きさに変えて実験してみてください。

CSSでの、a要素の疑似クラスは、「a:hover」のほかに「a:link」「a:visited」「a:active」があります。 「a:link」は訪問前のスタイル、「a:visited」は訪問済み、「a:active」はマウスクリック時のスタイルです。
4つ全部をCSSで指定する時は、a:link→a:visited→a:hover→a:activeの順番で書くというルールがあります。
CSSのリンクの指定については「CSSレイアウトメモ:TIPS [リンクの指定] 」をご覧ください。(まとめすぎちゃってあまり詳しくないですけど。)

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

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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.