#18ゼロからwebの基本「HTML」「CSS」編　〜18日目〜　『リンクについてやってみる』

「こんばんは」あるいは「おはようございます」それとも「こんにちは」

ゆーたろです。

今日も一緒に勉強して行きましょう。

今回は前回のリンクを少し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 などを指定します。イタリックは斜体ですね。

今回は、これらの CSSの指定について初歩的なことを説明しています。

前回リンクを作った〇〇.html を開いて、<head>部分のCSSを編集します。

<a>要素の指定を、下の画像の指定してあるところの様に入力してみてください。

出来たら保存してプレビューしてみましょう。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

リンクが青になって大きさも変わっていますね！

ちなみに基本リンクの下には線が入るのが普通らしいのですが、なしにしました。

次はリンクにマウスオーバーした時の文字色を変えてみましょう。

※マウスオーバー　→カーソルがリンクの上にいる、クリックする前の状態

これは PCサイトのみに使えます。スマホ用だと「マウスオーバー」できないからね。

下記のように「a:hover」を指定します。

※hover→「ホバー」と読みます。

次は文字の色を紫にして下線を入れてみました。

早速、保存してプレビューしてみましょう。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

出来ていますね！

今日はここまでにしましょう。

リンクまで作れるようになって最初とは見違えるようですね。笑

次回は→同じページ内でリンクをしてみます。

ゆるあわ自習室　ゼロから『HTML』『CSS』編