概要
アンカー要素(a)にスタイルを適用して、ボタンの様な形にする。
HTML/CSS
HTML
HTMLではa要素をdivタグで囲んでクラス定義している。
|
1 2 3 4 5 |
<body> <div class="button_like_anchor"> <a href="#">ボタンのようなアンカー</a> </div> </body> |
CSS
CSSの例は以下のとおり。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/* 関係要素のスタイルのリセット */ a, body, div { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* body要素の背景色を設定 */ body { background-color: #e8e8e8; } /* ボタン風でラップしたアンカーのスタイル */ .button_like_anchor a { display: inline-block; box-sizing: border-box; margin: 10px; padding: 8px 12px; border: 1px solid #000; border-radius: 5px; text-decoration: none; color: white; background-color: #a0a0a0; } /* アンカー上に */ .button_like_anchor a:hover { background-color: #acacac; cursor: pointer; |
前段のブロックで関係要素のスタイルをリセットし、bodyの背景色をセットしている。
アンカーのスタイル設定については以下のとおり。
.button_like_anchorクラスの中のa要素のスタイル
marginやpaddingの設定のためにdisplay: inline-blockを指定box-sizingの設定はここでは影響しないが、サイズ指定してボタンを並べるときなどに関係border-radiusで角を丸くしているtext-decoration: noneとcolor設定でデフォルトのアンカーの装飾を変更
Hover時の変化
- 元の背景を
background-colorで設定 - 疑似クラスhoverでカーソルが領域に入った時のスタイルを設定
- 背景色を少し明るくしている
cursorでカーソル形状を変更(デフォルトがpointerのため、ここでは影響しない)
Rails/SCSS
html.erb
Railsではアンカータグをヘルパーで実装している。
|
1 2 3 |
<div class="button_like_anchor"> <%= link_to('ボタンのようなアンカー', '#') %> </div> |
SCSS
リセットCSSはreset.cssファイルとして切り分けている。
また、疑似クラスhoverの記述をSCSSに合わせて変更している。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// body要素の背景色を設定 body { background-color: #e8e8e8; } // ボタン風でラップしたアンカーのスタイル .button_like_anchor a { display: inline-block; box-sizing: border-box; margin: 10px; padding: 8px 12px; border: 1px solid #000; border-radius: 5px; text-decoration: none; color: white; background-color: #a0a0a0; // Hover時のスタイル変化 &:hover { background-color: #acacac; cursor: pointer; } } |