aタグにおける､hoverを使ったデザイン

CSSの基本になるるかもですが､今日は､aタグにおける､hoverについて書きます｡簡単ですので､お付き合いください｡

なお､ボタンを作り､マウスの矢印をボタンの上に置くと､背景と文字を変更します｡

完成形

完成系は以下になります｡

aタグはリンクで使うものですね｡どのサイトでも､何かしら､マウスの矢印をボタンやリンクに乗せると変化します｡その方が､分かりやすいですね｡

HTMLは以下になります｡

HTML

<a href="#" class="btn-hover">ホバーすると背景と文字が変わる</a>

aタグに､｢btn-hover｣を書いています｡クラス名ですね｡分かりやすい名前でいいです｡絶対ではありません｡CSSは以下になります｡

CSS

.btn-hover {
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 100px;
  background: rgb(0, 103, 187);
  color: #fff;
}
.btn-hover:hover {
  background: rgb(247, 207, 207);
  color: #000;
}

上記のうち､デザインをしています｡ホタンを仮想としているので､widthとheightを書き､背景と文字色を書きます｡

ちなみに､下のものは､文字を中央に置く形で書いています｡

  display: flex;
  justify-content: center;
  align-items: center;

なお､aタグはインライン要素のため､場合によっては､｢display:block｣を書く必要があります｡ここでは､flexを書いているため､それは必要､ありません｡

あとは､hoverにデザインをあてます｡ここでは､背景と文字色を変えています｡

これをSCSSで書くと､こうなります｡

SCSS

.btn-hover{
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 100px;
background: rgb(0, 103, 187);
color: #fff;
&:hover{
background: rgb(247, 207, 207);
color: #000;
}
}

SCSSは最終的にCSSにコンパイルする必要があります｡vscodeであれば､プラグインで可能です｡どう見ても､SCSSで書いた方が楽ですね｡

時代はSCSSだと思うので､この機会にお試しあれ｡

CSSの進化版なので､CSSを知っている人は難なく理解できるかと思います｡

さいごに

CSSの基本的なことについて､書かせて頂きました｡それなりに難しくないと思いますので､お時間ある方はお試しあれ｡