CSSのborderプロパティでページネーションに枠線を追加する方法
Webサイトのページネーション（ページ送り）は、CSSのborderプロパティを使うことで、簡単に枠線を追加できます。破線・実線の選択や色の変更、角丸の調整なども自由に行えるため、サイトのデザインに合わせた洗練されたナビゲーションを作成できます。
実装例
以下のコードでは、各ページリンクにオレンジ色の破線ボーダーを設定しています。さらに、現在表示中のページを示すactiveクラスには背景色を適用し、マウスオーバー時には背景色がゆっくりと変化するトランジション効果も加えています。
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
display: inline-block;
}
.demo a {
color: red;
padding: 5px 12px;
text-decoration: none;
border-radius: 5px;
transition: background-color 2s;
border: 1px dashed orange;
}
.demo a.active {
background-color: orange;
color: white;
border-radius: 5px;
}
.demo a:hover:not(.active) {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Our Quizzes</h2>
<div class = "demo">
<a href = "prev.html">&lt;</a>
<a href = "quiz1.html">Quiz1</a>
<a href = "quiz2.html">Quiz2</a>
<a href = "quiz3.html">Quiz3</a>
<a href = "quiz4.html" class="active">Quiz4</a>
<a href = "next.html">&gt;</a>
</div>
</body>
</html>コードのポイント
- border: 1px dashed orange; — 各リンクに太さ1pxのオレンジ色の破線ボーダーを設定します。実線にしたい場合は「dashed」を「solid」に変更してください。
- .active クラス — 現在閲覧中のページ番号を背景色で強調表示し、ユーザーが現在地を把握しやすくなります。
- :hover:not(.active) — アクティブなページ以外にマウスを乗せたときだけ背景色を変えることで、自然なインタラクションを実現しています。
このようにborderプロパティを活用すれば、シンプルなページネーションでも視認性とデザイン性を大きく向上させることができます。
-
CSSで境界線（ボーダー）を作成・スタイリングする方法をわかりやすく解説
CSS borderプロパティとは？CSSを使えば、HTML要素に境界線（ボーダー）を定義し、さまざまな方法でスタイリングすることができます。その中心となるのが borderプロパティ です。これはショートハンド（省略記法）として機能し、以下の3つの個別プロパティを一度にまとめて指定できます。border-width：境界線の太さborder-style：境界線の種類（実線、点線など）border-color：境界線の色さらに、border-imageプロパティ を使えば、単色の線ではなく画像を境界線として表示することも可能です。基本構文CSSのborderプロパティの基本的な書き方は以下のと
-
CSSのユニバーサルセレクター（*セレクター）とは？使い方を実例付きで解説
CSSの *（アスタリスク）セレクターは「ユニバーサルセレクター」と呼ばれ、HTML DOM内のすべての要素をまとめて選択するためのセレクターです。タグ名やclass名を個別に指定しなくても、ページ上の全要素に同じスタイルを一度に適用できるため、リセットCSSやデフォルトスタイルの統一などによく使われます。 構文 CSSユニバーサルセレクターの基本構文は以下のとおりです。 * { /* スタイル宣言 */ } それでは、具体的な使用例を見ていきましょう。 例1：すべての要素に共通のスタイルを適用する <!DOCTYPE html> &