公開日 2020/11/26
更新日 2020/11/27
リンクタグを勉強。
言葉をクリックすると 読みと意味に 飛ぶようにしてみました。
目次
↓↓ まとめページはこちら ↓↓
wasurenai0.hatenablog.com【無料】はてなブログ 作り方【HTML】いろんなリンクタグ a タグ
いろんなリンク
同じ画面や タブで 開く方法
【HTML】
<a href="https://wasurenai0.hatenablog.com/" >「me日々のメモmo」のトップページ</a>
【表示】
「me日々のメモmo」のトップページ
新しい画面や タブで 開く方法
【HTML】
<a href="https://wasurenai0.hatenablog.com/" target="_blank" rel="noopener">「me日々のメモmo」のトップページ</a>
- targetの前に半角スペースが必要
- relの前に半角スペースが必要
【表示】
「me日々のメモmo」のトップページ
画像で リンク方法
【HTML】
<a href="https://wasurenai0.hatenablog.com/"> src="https://cdn-ak.f.st-hatena.com/images/fotolife/w/wasurenai0/20201107/20201107121439.jpg" alt="「me日々のメモmo」のトップページ"></a>
「家の 山茶花(さざんか)を撮っていたら たまたまミツバチが 蜜を吸っていました」
ページ内リンク
先に
飛ばしたい場所に id をつけておく
<p id="目次">目次</p>
次に
idを指定して リンクを貼る
【HTML】
<a href="#目次">目次に 戻る</a>
【表示】
目次に 戻る
リンクの下線を消す
【CSS】
a {
text-decoration:none;
}
リンクの色を変える
【CSS】
a {
color: black;
}
カーソルをのせたとき リンクの色を変える
【CSS】
a:hover {
color: blue;
}
特定のリンクのデザインのみ変える
aタグにclass(id)名をつける
【CSS】
.noline {
text-decoration:none;
color: black;
}
.noline:hover{
text-decoration:none;
color:blue;
}
【HTML】
<a class="noline" href="https://wasurenai0.hatenablog.com/">「me日々のメモmo」のトップページ</a>
【表示】
「me日々のメモmo」のトップページ
*はてなブログの パソコン画面では 下線が表示されてしまう!!
ページ内リンクを使って 問題から答えに 飛ばす
クリックすると 読み方と意味に 飛ぶ
【HTML】
<p id="笑止千万1"><a href="#笑止千万">笑止千万</a></p>
【表示】
飛んだ先から戻らせる
【HTML】
<p id="笑止千万"><a href="#笑止千万1">笑止千万(しょうしせんばん)<br>非常にばかばかしいこと、おかしいこと。<br>戻る</a> </p>
【表示】
笑止千万(しょうしせんばん)
非常にばかばかしいこと、おかしいこと。
戻る
四字熟語
ことわざ
クリックすると 読み方と意味に 飛ぶ
慣用句
クリックすると 読み方と意味に 飛ぶ
故事成句(故事成語)
クリックすると 読み方と意味に 飛ぶ
羮にこりてなますを吹く(あつものにこりて なますをふく)
失敗にこりて、用心をしすぎること
熱い飲み物で口をやけどした者が、その後、冷たい飲み物まで吹いて冷やしてから飲むということからこの語ができた。
戻る