HTMLのリンク＜aタグ＞の書き方
外部リンクタグの基本
HTMLはハイパーテキストですので他のページに飛んだり画像や動画を格納している場所から呼び出すことができます。
それらのタグについては簡単に解説しておきましたが。
今回はリンクタグのデザインをCSSつかって変えるやり方についてまとめてみます。
他のページに飛ばす場合には
<a href=”リンクしたいページのURL”>コンテンツ</a>という形で埋め込むんでした。
リンクページを新しいタブで開く場合には例えば
<a href=”https://maliajoy.com/” target=”_blank” rel=”noopener”>サイトのトップページ</a>
のようにURLのあとに
” target=”_blank” rel=”noopener”
を付け加えるんでした。
するとブラウザには以下のように表示され。
サイトのトップページ
クリックするとサイトのトップページに飛びます。
画像をリンク
画像をクリックすると他のページに飛ぶようにすることもできます。
その場合はコンテンツ内容が画像ですから
<a href=”リンクしたいページのURL”>
<img src=”貼り付けたい画像の保管場所”>
</a>
で行います。
例えばおじさんの画像をクリクすると新しいタブでこのサイトのトップページに飛ぶようにするには
<a href=”https://maliajoy.com/” target=”_blank” rel=”noopener”><img src=”/画像/おじさん.jpg”></a>
クリックするとサイトのトップページに飛びます。
ちなみに画像の保管場所ですが、サーバーにアップしておかなくてはなりません。
よくわからないという方は以下の記事を参照してください。
CSSでリンクタグを変える
CSSでを使うことによってHTMLを汚さずに簡単にデザインを変えられます。
CSSを使ってリンクの色を変えたりアンダーラインを消す
アンダーラインを消す場合には
aタグに対して
text-decoration: none
を指定します。
text-decorationは、テキスト傍線のつけ方・色・スタイルをまとめて指定プロパティです。
値をnoneに指定すると線を消すことができます。
もとに戻してアンダーラインを付けたい場合は
text-decoration: underline
と値を指定してあげます。
また色をつけるには
colorプロパティを使用し。
値で色を指定します。
先程の
をCSS を使ってアンダーラインなし、色は赤に指定してみます。
HTML
<a href="https://maliajoy.com/"> トップページへ </a>
CSS
a {
text-decoration: overline;
color: red
}
すると以下のようにブラウザ表示されます。
擬似クラスを使ってカーソルを当てたときやその後のデザインを変える
前知識として。
誤字要素と擬似クラスの違い
CSS の擬似クラスは、セレクターに付加するキーワードで。
セレクタ：擬似クラス｛｝
という形で特定の状態のときのデザインを指定します。
例えば今回使う :hover ではカーソルが当たったときのみにリンクの色を変えたりすることができます。
つまり擬似クラスを使うことで同じ素材であっても条件の違いによって違うCSSを当てることができます。
それに対して 擬似要素は擬似クラスとは対照的に特定の状態ではなくて。
要素の特定の部分にスタイルを適用するために使用します。
そのため指定したらなにか条件が変化したとしてもそのスタイルが変わることはありません。
疑似要素については以下の記事に詳しく書きました。
aタグと一緒によく使われる擬似クラスとして
a:hover
a:visited
があります。
a:hoverはリンクにカーソルを当てた時にデザインが変わる疑似クラスで、当てている最中はそのデザインのままです。
a:visitedは訪問済のリンクのデザインを変える疑似クラスです。
先程のリンクのCSSを以下のように変えてみます。
a {
text-decoration: none;
color:blue;
}
a:visited{
color: red;
}
a:hover{
color: green ;
font-size:40px;
font-weight: bold;
}
これはどうしたかというともともとのリンクはアンダーラインなし。色はブルーですよ、という指定です。
先程の記述では全く動きがない状態でリンクの色を赤にしましたんで。
リンクが赤くなっています。
今回はそれを青にしてみました。
次にクリックした後のリンクの色を赤に指定しました。
そして今度はカーソルを当てた時の状態をはっきりわからせるために
リンクの文字を太字にし、かつ40pxとかなり大きくし色は緑色にしてみました。
注意点が一つありまして。CSSの場合あとで記述するもののほうが前のものを上書きしていくので。
重なり合わない場合にはどんな順番でも構わないんですが。
疑似クラスを使う場合には同じ素材を状況に応じて変えていくものなので。
順番を違えるとうまく表示されない場合があります。
今回の場合は
まずもともとのリンクに対する指定→visited指定→hover指定の順番にします。
GIFではすでにクリックしてしまったものだったので最初からリンクの色がピンクになっていますがあしからず^^;
ブラウザ表示は以下。
画像リンクの場合
画像リンクにカーソルを当てた時にデザインを変化させるにはCSSで
a:hover img {
}
使用します。
先程のおじさん画像を使って試しにカーソルを当てた時にデザインが変わるようにしてみます。
CSSでセレクタに擬似クラスを加えてを
a:hovor
にすると、カーソルを当てた時のデザインを変えることができます。
例えばおじさん画像をHTML に。
<a href="https://maliajoy.com/"> <img src="おじさん.jpg"> </a>
CSSにはにカーソルを当てると赤い枠ができるように記述。
a:hover img {
border: solid 4px red;
}
すると以下のようにブラウザで表示されます。
よくカーソルを当てると半透明になる画像がありますが。
これはa:hovorのセレクタに、透過を行うopacityというプロパティを加えます。
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
などと多くのCSSの解説には書かれていますが。
これはブラウザに対応するためです。
filter: alphaはIE向けの指定です。
opacityはSafariやOpera向けの指定。
mozはFirefox（Mozilla）向けの指定だったんですが、Firefoxではこの使用をやめたみたいですねえ。
「moz-opacityはGecko 1.9.1 (Firefox 3.5) 以降では、-moz-opacity のサポートをやめてしまっているので、opacityを使用せよ」
とありましたので-moz-opacityは書かなくても良いです。
filter: alpha(opacity=○％)
opacity: 0.○;
丸のところに例えば50％とか0.5などと
ということでカーソルを当てると半透明になるように記述を加えて以下のようにしました。
a:hover img {
border: solid 4px red;
filter: alpha(opacity=50);
opacity: 0.5;
}
ブラウザ表示
確かに半透明になりました^^;
リンクボタンの作り方
CSSを使えば様々なリンクボタンを簡単に作ることができます。
一例だけ。
<a href=”URL”>トップページに移動</a>
というHTMLで端に丸みのあるボタンを作ってみます。
a{
font-weight: bold;
text-decoration: none;
background:red;
color:white ;
padding:5px ;
border-radius: 20px;
}
a:visited {
color: white;
}
a:hover{
background:silver;
color :red;
}
まず
セレクタaにて。
文字を太字にし。
アンダーラインを消し。
背景を赤に指定し。
文字の色を白にしました。
（とはいえ一回クリックしてしまうとこの色は出てきません。）
余白を設け文字が真ん中に寄るようにしました。
また4隅に丸みをつけるようにしました。
a{
font-weight: bold;
text-decoration: none;
background:red;
color:white;
padding:5px ;
border-radius: 20px;
}
次に
セレクタa:visitedにて。
文字の色だけ変えてみました。
a:visited {
color: green ;
}
更に
カーソルを当てたときに背景と文字色を変えるため
a:hover{
background:silver;
color :red;
}
としました。
もしセレクタaに対して数種類別々のデザインを与えたい場合にはaの後に。
<a class=”link _button” href=”URL”>トップページに移動</a>
などとclass名などを付けます。
試しに同じページに2つボタンを作ってみます。
pタグで囲んだのは横並ぶにならないようにするためです。
aタグなどはinline要素で何もしないと横に流れてしまいます。
またそれぞれlink_button1とlink_button2と名前をつけました。
<p> <a class="link_button1" href="https://maliajoy.com/"> トップページに移動 </a> </p> <p> <a class="link_button2" href="https://maliajoy.com/"> 同じくトップページに移動 </a> </p>
CSSは以下。
ホタンごとに色や形を少し変えて見ました。
.link_button1{
font-weight: bold;
text-decoration: none;
background:red;
color:white;
padding:5px ;
border-radius: 20px;
}
.link_button1:visited {
color: green ;
}
.link_button1:hover{
background:silver;
color :red;
}
.link_button2{
font-weight: bold;
text-decoration: none;
background:black;
color:white;
padding:5px ;
}
.link_button2:visited {
color: yellow;
}
.link_button2:hover{
background:gold;
color :red;
}
繰り返しの説明は省きます。
すると以下のようにブラウザ表示されます。
このようにして複数のボタンを作リます^^;
ページ内や他ページ途中にジャンプさせるためのリンクの書き方
記事を記事内の途中にジャンプさせたいときなどどうすればよいのでしょうか。
目次などはその代表例かと思います。
また違うページの途中に飛びたい場合もあります。
ページ内リンクの作り方
ページ内リンクはまずここに飛びたいという場所に目印を付けます。
目印は必ずid名にします。
例えば先程の見出し１のジャンプさせたいということであれば
<h1 id="test">ページ内や他ページ途中にジャンプさせるためのリンクの書き方</h1>
<h1 id=”test”>
というように記述をします。
次にジャンプボタンを作ります。
ジャンプボタンは通常のリンクと同じように
aタグで作ります。
ただしURLのかわりにhref=”#ジャンプ先のid名”を使います。
先程の例で行くと<a href=”#test“>見出し１に飛びます</a>
というように必ず＃を付けて記述をします。
<a href="#test">見出し１に飛びます</a>
これ↑をクリックすれば確かに見出し１「ページ内や他ページ途中にジャンプさせるためのリンクの書き方」がトップにきます。
違うページの途中に飛ぶ方法
これも２つの手順から成り立っていまして。
飛びたいページの飛びたい部分に目印をつける
先ほどと同じようにジャンプしたい場所にid=”目印名”を付けます。
今回は以下のページの
「CSSの基本文法」という見出し２<h2>に以下のように目印をつけました。
<h2 id="test2">CSSの基本文法</h2>
“ページのURL#id名”をリンク先としたaタグを作る
次にジャンプボタンですが。CSSの基本文法
リンクを作るときと同じカタチではありますが、
これはそのページのURL＋＃目印名
を付け加えます。
今回は指定したページのアドレスが
https://maliajoy.com/css-minimum-writing-basics
それとid名をtest2 にしましたので。
<a href=”https://maliajoy.com/css-minimum-writing-basics#test2″>「CSSの基本文法」に飛びます</a>
としました。
確かに指定の場所にジャンプすることが確認できると思います。
以上でリンクタグについての解説を終わります。
この記事へのコメントはありません。