こんにちは、阿久梨絵です！
ウェブサイトでリンクを訪問すると、そのリンクが 訪問済み であることを示すために、アンダーバーや他のスタイルを適用することがあります。この記事では、HTMLとJavaScriptを使用して、訪問済みのリンクにアンダーバーを追加する方法をご紹介します。
訪問済みリンクのスタイルを変える理由
訪問済みリンクを視覚的に区別することにより、ユーザーはどのリンクを既にクリックしたかを簡単に判断できます。これにより、ユーザーエクスペリエンスが向上し、ナビゲーションがしやすくなります。
基本的な仕組み
訪問済みリンクをスタイル変更するためには、ブラウザのローカルストレージを利用し、訪問したリンクの情報を保存します。次回以降のアクセスでその情報を使ってリンクのスタイルを変更します。
HTML 部分
まず、 HTML で基本的なリンク構造を作成します。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>訪問済みリンクの例</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<a href=”https://xxxx” class=”link” id=”link1″>リンク1</a>
<a href=”https://xxxx” class=”link” id=”link2″>リンク2</a>
<a href=”https://xxxx” class=”link” id=”link3″>リンク3</a>
<script src=”script.js”></script>
</body>
</html>
CSS部分
次に、CSSを使用してリンクの基本スタイルと訪問済みリンクのスタイルを定義します。
/* 通常のリンクスタイル */
.link {
color: blue;
text-decoration: none;
}
/* 訪問済みリンクのスタイル */
.link.visited {
text-decoration: underline;
}
JavaScript 部分
最後に、 JavaScript を使用してリンクの訪問状況を保存し、表示を更新する機能を実装します。
// ページロード時に訪問済みリンクをチェック
window.onload = function() {
let links = document.querySelectorAll(‘.link’);
links.forEach(link => {
// ローカルストレージに保存された訪問履歴を取得
let visited = localStorage.getItem(link.id);
if (visited) {
// 訪問済みであれば、visitedクラスを追加
link.classList.add(‘visited’);
}
// リンククリック時に訪問履歴を保存
link.addEventListener(‘click’, () => {
localStorage.setItem(link.id, ‘true’);
});
});
};
このコードでは、ページがロードされるときに各リンクの訪問履歴をローカルストレージから取得し、訪問済みであればvisitedクラスを追加します。リンクをクリックすると、そのリンクのIDをローカルストレージに保存し、次回のアクセス時に訪問済みとして表示されます。
まとめ
HTMLと JavaScript を使用して、訪問済みリンクをアンダーバーで表示する仕組みは非常に簡単に実装できます。これにより、ユーザーはどのリンクを既に訪問したかを視覚的に確認でき、より快適なナビゲーションが可能になります。
阿久梨絵でした！
