ホームページ制作・集客スクール

aタグ|ゼロからのWeb制作 Vol.10|SSCのホームページ制作・集客スクールブログ

こんにちは、鈴木です。
今回は、リンクに関するHTMLとCSSについて書いていこうと思います。

目次

  1. リンクを貼る
  2. リンクの装飾

1.リンクを貼る

リンクを貼る際に使うタグはaタグです。
一つ例を挙げて説明したいと思います。

<a href="http://ss-complex.com/" target="" rel="" title="" >スマートスタイルコンプレックス></a>

これをブラウザで表示すると以下のようになります。
資料25

 

タグには属性がたくさんありますが、ここでは基本的な属性について説明しようと思います。

href

リンク先のファイルを指定する時に使います。
上記のコードのように指定したURLを記述します。

target

リンク先のファイルの表示の方法について指定します。
例えばtarget=”_blank”と記述すると指定したURLは別画面を開いてリンクします。

rel

リンク元ページから見たリンク先ページとの関係を示します。
例えば外部スタイルシートを使用する時は タグの属性にrel=”stylesheet”と記述します。

title

リンクの説明をします。
マウスをリンクの上に乗せるとtitleで記述したテキストが表示されます。
リンク名だけではどんなサイトが分からないときにユーザーに情報を提供することができます。

これらを踏まえて最初のリンクを書き直すと

<a href="http://ss-complex.com/" target="_self" rel="nofollow" title="スマートスタイルコンプレックス" >スマートスタイルコンプレックス></a>

このような感じになります。

2.リンクの装飾

例えば、リンクをクリックした時やリンク訪問後のリンクの色をCSSを使うことで指定することができます。

スタイルシートに以下のタグを記述します。

a:link {color:カラーコード;}

リンクにまだ訪問していない状態の色を指定します。

a:visited {color:カラーコード;}

リンクにすでに訪問した後の状態の色を指定します。

a:hover {color:カラーコード;}

リンクにカーソルが乗った時の状態の色を指定します。

a:active {color:カラーコード;}

リンクをクリックしたときの状態の色を指定します。

 

※ 色の指定をlink,visited,hover,activeの順番で書かないと
意図した色にならないことがあります

SSCのホームページ制作・集客スクール

当社では、WordPress講座を中心としたホームページ制作・集客スクールを運営しています。
教室は、さいたま市の浦和駅から徒歩5分。

SSCのホームページ制作・集客スクール

Webサイト制作から運用まで幅広いプロのスキルやノウハウを、 目的に合せてピンポイントで習得できるマンツーマン形式のWebスクールですので、
・個人事業主、中小企業の経営者
・企業内のWeb担当者
・起業(フリーランス)する予定のある方
・Webのスキルを活かしたダブルワークをしていきたい方
・Webのスキルを習得したい学生
などなど、様々な方に幅広い目的で受講していただくことが可能です!

SSCのホームページ制作・集客スクールはこちら。