CSSでツールチップの下に矢印を追加する方法
ツールチップに矢印を追加すると、吹き出しのような見た目になり、どの要素に対する説明なのかがひと目でわかるようになります。CSSの top プロパティと :after 疑似要素を組み合わせることで、ツールチップの下側に矢印を簡単に表示できます。
実装のポイント
- 疑似要素の活用：
:afterを使うことで、HTMLを追加せずに矢印部分を描画できます。 - borderによる三角形状：4辺のうち上のみに色を指定し、他の3辺を
transparentにすることで三角形を作ります。 - 位置指定：
top: 100%を設定することで、矢印をツールチップ本体の下端に配置します。 - ホバー時の表示切替：
:hoverでvisibilityを変更し、マウスカーソルを重ねたときだけツールチップを表示させます。
サンプルコード
以下のコードを実行すると、下向きの矢印が付いたツールチップを実際に確認できます。テキストの上にマウスカーソルを重ねてみてください。
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
bottom: 100%;
left: 60%;
margin-left: -90px;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
margin-top: 50px;
}
.mytooltip .mytext:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border-width: 7px;
border-style: solid;
border-color: blue transparent transparent transparent;
}
.mytooltip:hover .mytext {
visibility: visible;
}
</style>
<body>
<div class = "mytooltip">Keep mouse cursor over me
<span class = "mytext"> My Tooltip text</span>
</div>
</body>
</html>
このように、border-color の指定順序や top・left の値を調整すれば、矢印の位置や大きさも自由にカスタマイズできます。ぜひ自分のサイトに合わせて試してみてください。
-
CSSでボタンのパディングを変更する方法
CSSでボタンのパディングを変更するには ボタンのパディング（内側の余白）を変更するには、CSSの padding プロパティを使用します。パディングを調整することで、ボタンのテキストと境界線の間のスペースを自由にコントロールでき、ボタンの見た目やクリック領域の大きさを変えることができます。 padding プロパティには、px、em、% などの単位で値を指定します。値を1つだけ指定すると、上下左右すべてに同じ余白が適用されます。 サンプルコード 以下のコードでは、黄色い背景のボタンに 10px のパディングを設定しています。実際に動作を確認してみましょう。 <!DOCTYPE html
-
CSSでボタンの幅を設定する方法【widthプロパティの使い方を解説】
CSSでボタンの幅を設定するには、widthプロパティを使用します。widthプロパティにピクセル（px）やパーセント（%）などの値を指定することで、ボタンの横幅を自由にコントロールできます。widthプロパティの基本的な使い方ボタンにクラスを割り当て、そのクラスに対してwidthプロパティを指定するのが一般的な方法です。以下のサンプルコードでは、幅120pxのボタンを作成しています。コード例以下のコードを実行して、ボタンの幅がどのように設定されるか確認してみましょう。<!DOCTYPE html> <html> <head> <st