CSS

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

Sponsored Link

Sponsored Link

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>

クリックするとサイトのトップページに飛びます。

ちなみに画像の保管場所ですが、サーバーにアップしておかなくてはなりません。

よくわからないという方は以下の記事を参照してください。

HTMLで動画や画像を埋め込みする方法を詳説

CSSでリンクタグを変える

CSSでを使うことによってHTMLを汚さずに簡単にデザインを変えられます。

CSS セレクタとプロパティと値の基本まとめ

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を当てることができます。

それに対して 擬似要素は擬似クラスとは対照的に特定の状態ではなくて。
要素の特定の部分にスタイルを適用するために使用します。
そのため指定したらなにか条件が変化したとしてもそのスタイルが変わることはありません。
疑似要素については以下の記事に詳しく書きました。

CSS 擬似要素beforeとafter 使い方基本

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名にします。

例えば先程の見出し1のジャンプさせたいということであれば

<h1 id="test">ページ内や他ページ途中にジャンプさせるためのリンクの書き方</h1>

<h1 id=”test”>

というように記述をします。

次にジャンプボタンを作ります。

ジャンプボタンは通常のリンクと同じように
aタグで作ります。
ただしURLのかわりにhref=”#ジャンプ先のid名”を使います。
先程の例で行くと<a href=”#test“>見出し1に飛びます</a>
というように必ず#を付けて記述をします。

<a href="#test">見出し1に飛びます</a>

見出し1に飛びます

これ↑をクリックすれば確かに見出し1「ページ内や他ページ途中にジャンプさせるためのリンクの書き方」がトップにきます。

違うページの途中に飛ぶ方法

これも2つの手順から成り立っていまして。
飛びたいページの飛びたい部分に目印をつける

先ほどと同じようにジャンプしたい場所にid=”目印名”を付けます。

今回は以下のページの

CSS最低の書き方の基本 CSSはどこにあるの?

「CSSの基本文法」という見出し2<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>

としました。

「CSSの基本文法」に飛びます

確かに指定の場所にジャンプすることが確認できると思います。

以上でリンクタグについての解説を終わります。

Sponsored Link

Sponsored Link

関連記事

  1. HTML・CSSを実際に記事を作りながら覚えていこう
  2. CSS セレクタとプロパティと値の基本まとめ
  3. CSS 幅と高さの指定方法 widthとheightプロパティ基…
  4. HTMLの学習の前に環境を整える(Windows版)エディタとブ…
  5. CSS positionの使い方
  6. CSS レスポンシブデザインに欠かせないmax-widthとmi…
  7. HTMLの勉強で押さえておくべきこと②HTMLリンクタグ基本
  8. CSSで要素を横並びにする方法(floatとdisplay)とd…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. WordPressのフォルダ構成とバックアップの仕方
  2. Windows10 でフォルダの拡張子を表示するには?
  3. WordPress新エディタ「Gutenberg」の使い方
  4. 【Basics of site construction】多すぎる選択肢 ホームページ作成方法  HTMLとCMSの長所と短所を知るべし
  5. WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 
  6. Windows10でブルーライトカットの設定 コントロールパネルの使い方
  7. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  8. HTMLで動画や画像を埋め込みする方法を詳説

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
Windows10でブルーライトカットの設定 コントロールパネルの使い方
HTMLで動画や画像を埋め込みする方法を詳説
AviUtl 便利で楽しい カスタムオブジェクトの使い方
AviUtil カメラ制御の基本の基本を詳しく解説
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク
AviUtlのすべてのエフェクトについての解説⑤透過・透明化エフェクト クロマキー・カラーキー・ルミナンスキー
HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

ソフト・アプリの使い方

PAGE TOP