魅力的な円形メニューでユーザーインタフェースをレベルアップ！CSS、ツールチップ、CSSシェイプを活用した実装方法
CSSで円形メニューを作成する方法
円形メニューの構造
円形メニューは、通常、中央の円形ボタンと、その周りに配置されたオプションボタンで構成されます。中央ボタンをクリックすると、オプションボタンが展開または非表示になり、ユーザーが選択できるようにします。
CSSで円形を作成する
CSSの border-radius プロパティを使用して、円形を作成できます。このプロパティは、要素の角の丸みを指定します。 border-radius を 50% に設定すると、要素は正円になります。
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f00;
}
オプションボタンを作成する
オプションボタンは、通常、円形メニューの周りに配置された小さなボタンです。CSSを使用して、オプションボタンを配置し、スタイルを設定できます。
.option-button {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
オプションボタンを円形に配置するには、CSSの transform プロパティを使用できます。 transform-origin プロパティを使用して、回転の中心点を設定し、transform: rotate() プロパティを使用して、各ボタンを所定の角度で回転させることができます。
.option-button:nth-child(1) {
transform: rotate(0deg);
}
.option-button:nth-child(2) {
transform: rotate(36deg);
}
.option-button:nth-child(3) {
transform: rotate(72deg);
}
/* ... など */
ツールチップを追加する
オプションボタンにホバーすると、ツールチップが表示されるようにすることができます。ツールチップには、ボタンの機能に関する説明を表示できます。
.option-button:hover::after {
content: "オプション [n]";
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -5%);
background-color: #000;
color: #fff;
padding: 5px;
border-radius: 3px;
z-index: 10;
}
円形メニューをアニメーション化する
オプションボタンが展開または非表示になるときにアニメーション化するには、CSSトランジションを使用できます。
.option-button {
transition: transform 0.5s ease-in-out;
}
.circle:hover .option-button {
transform: rotate(n * 36deg);
}
カスタマイズ
この基本的な円形メニューを、ニーズに合わせてカスタマイズできます。次の例では、メニューの色、サイズ、アニメーションをカスタマイズする方法を示します。
- アニメーション
transitionプロパティを使用して、アニメーションの速度とタイミングを変更できます。 - サイズ
widthとheightプロパティを使用して、メニューとオプションボタンのサイズを変更できます。 - 色
background-colorプロパティを使用して、メニューとオプションボタンの色を変更できます。
- メニューをより魅力的にするために、ドロップシャドウや境界線を追加できます。
- タッチスクリーンデバイスでの使用を考慮して、オプションボタンを十分に大きくしてください。
- アクセシビリティのために、オプションボタンに
aria-label属性を追加してください。
このチュートリアルが、CSSで独自の円形メニューを作成するのに役立つことを願っています。
リソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS円形メニュー</title>
<style>
/* 円形メニューのスタイル */
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f00;
position: relative;
}
/* オプションボタンのスタイル */
.option-button {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s ease-in-out;
}
/* ホバー時のオプションボタンのスタイル */
.option-button:hover {
background-color: #0f0;
}
/* オプションボタンの配置 */
.option-button:nth-child(1) {
transform: rotate(0deg);
}
.option-button:nth-child(2) {
transform: rotate(36deg);
}
.option-button:nth-child(3) {
transform: rotate(72deg);
}
/* ... など */
/* ツールチップのスタイル */
.option-button:hover::after {
content: "オプション [n]";
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -5%);
background-color: #000;
color: #fff;
padding: 5px;
border-radius: 3px;
z-index: 10;
}
/* メニュー表示時のオプションボタンのスタイル */
.circle:hover .option-button {
transform: rotate(n * 36deg);
}
</style>
</head>
<body>
<div class="circle">
<button class="option-button"></button>
<button class="option-button"></button>
<button class="option-button"></button>
</div>
</body>
</html>
このコードは、基本的な円形メニューを作成するための出発点です。ニーズに合わせてメニューをカスタマイズするには、CSSを編集する必要があります。
説明
このコードは次のとおりです。
- CSS (
style.css) ファイルは、円形メニューとオプションボタンのスタイルを定義します。 - HTML (
index.html) ファイルは、円形メニューを含む単純な構造を定義します。
CSSの詳細
.option-button:hoverセレクターは、ホバー時のオプションボタンのスタイルを定義します。background-colorプロパティは、
.option-buttonクラスは、オプションボタンのスタイルを定義します。widthとheightプロパティは、ボタンのサイズを定義します。border-radiusプロパティは、ボタンを丸くします。background-colorプロパティは、ボタンの色を定義します。position: absoluteプロパティは、ボタンをメニュー内に配置できるようにします。topとleftプロパティは、ボタンの位置を定義します。transform: translate(-50%, -50%)プロパティは、ボタンを中央に配置します。transitionプロパティは、ボタンのホバー時のアニメーションを定義します。
.circleクラスは、円形メニューのスタイルを定義します。
Flexboxを使用して、オプションボタンを円形に配置することができます。この方法は、オプションボタンの数が固定の場合に適しています。
.circle {
display: flex;
flex-direction: circle;
width: 50px;
height: 50px;
background-color: #f00;
}
.option-button {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
margin: auto;
}
CSS Grid を使用する
.circle {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
width: 50px;
height: 50px;
background-color: #f00;
border-radius: 50%;
}
.option-button {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #ccc;
}
上記以外にも、CSSを使用して円形メニューを作成する方法はいくつかあります。たとえば、SVGを使用してオプションボタンを作成したり、JavaScriptを使用してアニメーションを作成したりすることができます。
css tooltip css-shapes
