Sass(SCSS)とTransform、z-indexを用いて背景色がスライドするボタンを作成する(HTML/CSS)
Sass(SCSS)を用いて、以下リンク先のように背景色がスライドするボタンを作成してみます。https://gyazo.com/efc8f1c551fa796e05040200b8e5d802
SassというものはCSSを効率よく記述するためのものです。プロパティの値を変数に入れたり、セレクターを入れ子構造にして記述したりすることが出来ます。Sassで記述したものをCSSに変換することでスタイルを適用する事ができます。では実装にあたり準備をしていきます。
・使用するもの
Visual Studio Code(テキストエディター)
Live Sass Compiler(拡張機能)
Live Sass Compilerというものが、Saas(SCSS)をCSSに変換するためのツールです。
Visual Studio Codeの拡張機能で用意されていますのでこちらをインストールしてください。
それではコーディングにあたり準備をしていきます。
index.htmlを編集して以下のように記述してください。
index.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>ボタン練習</title>
</head>
<body>
<div id="container">
<button class="btn">孤独の鳥居</button>
</div>
</body>
</html>そしてCSSファイルではなく、SCSSファイルを作成し以下のように記述してください。
style.scss
$cWhite: white;
$cBlack: black;
#container {
text-align: center;
}
.btn {
background-color: $cWhite;
color: $cBlack;
border: 1px solid $cBlack;
padding: 10px 40px;
margin-top: 40px;
cursor: pointer;
transition: all 0.3s;
}「style.scss」の上部に早速見慣れない記述がありますが、特定の値を変数に格納することで.「btn」の「background-color」といったプロパティの値に指定しています。即ち「background-color: $cWhite;」は、「background-color: white;」ということになります。しかし、Scssファイルに記述をしただけではHTMLにスタイルが適用されません。ここで、先ほど導入した「Live Sass Compiler」というものを用いてCSSに変換します。Visual Studio Code下部に「Watch Sass」というボタンがあるので、こちらをクリックすると自動でScssを変換したCSSファイルが作成されます。
変換が完了しますと、以下画像のようにCSSファイルが追加されているのがわかります。そしてHTMLの<link rel="stylesheet" href="style.css">という記述で変換されたCSSファイルを参照します。
この状態でindex.htmlを見てみましょう。
以上のような表示になりましたら準備完了です。カーソルのhover時に黒の背景色がスライドしてボタンの色が変更されるという仕様のものをコーディングしていきます。HTMLを以下のように編集します。
index.html
<body>
<div id="container">
<button class="btn btn-back"><span></span>孤独の鳥居</button>
</div>
</body>btnクラスに「btn-back」を追加し、その中にspanタグを追加します。HTMLはこれで以上です。後はScssを編集してスタイルを適用していきます。
style.scss
$cWhite: white;
$cBlack: black;
#container {
text-align: center;
}
.btn {
background-color: $cWhite;
color: $cBlack;
border: 1px solid $cBlack;
padding: 10px 40px;
margin-top: 40px;
cursor: pointer;
transition: all 0.3s;
// 追加
&.btn-back {
// 相対位置(親要素に指定)
position: relative;
& span {
display: inline-block;
width: 100%;
height: 100%;
background-color: $cBlack;
// 絶対位置(親要素の位置を起点とした子要素の位置)
position: absolute;
top: 0;
left: 0;
// transform: translateX(-100%);
}
}
}一度上記のように記述します。まずは、見慣れない記述である「&.btn-back」や「& span」から見ていきましょう。「.btn」の{}に入れ子のようにして記述します。「&」というものが上にある入れ子の基のセレクターを指します。この場合の「&」は「.btn」を指します。これを変換されたCSSを確認すると「.btn.btn-back」ということになります。ちなみに、「& .btn-back」と半角を開けると、CSSは「.btn .btn-back」というように変換されます。そのため、「& span」とすると、CSSでは「.btn.btn-back span」となります。つまりは、btn-backの中にあるspanに対してスタイルを適用できます。このようにSassでは入れ子構造を取ることで効率よくプログラムを記述する事ができます。そうしますと、ボタンが真っ黒に塗り替えられたかと思います。親要素であるボタンを基準位置として「position: relative;」を指定します。そこに子要素に「position: absolute;」と記述して「top」、「left」を0にする事で基準となる親要素の左上からスタイルを適用するということになります。
そして上記コードのコメントアウトしている
「transform: translateX(-100%);」を適用させますと、spanに適用しているスタイルの位置を左側に一つ分ずらす事ができます。translateXというのがX軸つまりは横方向に-100%とマイナスの値で左側にずらすという事です。
確認できましたら親要素に「overflow: hidden;」を適用して現在のボタンの枠外にある黒い枠を非表示とさせます。
style.scss
&.btn-back {
position: relative;
overflow: hidden; // 追加それでは、hover時のスタイルを記述していきます。
style.scss
&.btn-back {
(省略)
& span {
(省略)
transform: translateX(-100%);
}
// 追記
&:hover span {
transform: none;
}
}上記を追加してください。「&:hover span」とすることでbtn、btn-backというクラスが付与されているボタンがhoverされた際のspanのスタイルを適用できます。「transform: none;」とすることでspanのtransformに指定されてある「 translateX(-100%)」という値が打ち消されます。これでhoverした際にボタンが黒く塗り潰されるはずです。
それではhover時のアニメーションを記述していきます。まずはspanのtransformにtransitionを付与します。
style.scss
& span {
(省略)
transform: translateX(-100%);
transition: transform 0.3s; // 追加
}「transition: transform 0.3s;」でtransitionの値が変わる時(hover時にnoneになる時)、0.3秒かけて変化させるということになります。以下リンク先の挙動になれば成功です。
https://gyazo.com/50667fdd020438fa4de876a1e727ca2a
完成品はボタンの文字が白色となっておりますので、そのようなスタイルを適用させます。一度スタイルを以下のように編集します。
&.btn-back {
(省略)
& span {
(省略)
}
&:hover {
color: $cWhite
& span {
transform: none;
}
}
}このようにして、ボタンがhoverされた際に文字色が白になるはずですが、現状はうまく動作しません。どこに問題があるのか、検証ツールを用いて確認します。
検証ツールで確認した結果、「btn btn-back」クラスにはhover時にcolorプロパティが適用されていることがわかりますので、問題があるとすればspanタグがbuttonタグの中の文字列よりも全面に出ているため文字列が浮かび上がらないのだと考えられます。そのため、spanタグを背面に持っていくようにします。その場合に「z-index」を用います。「z-index」が有効となる条件はpositionが「absolute」など初期値である「static」以外のものとz-indexの値が数字など「auto」以外のものです。この条件を満たした場合(z-indexが適用される場合)、その要素は「スタックコンテキスト」を生成することになります。スタックコンテキストを形成している要素内でz-indexの値が高いものは前面に、低いものは背面にということになります。ですので、実際のコードにz-indexを適用させる場合は以下のように記述します。
style.scss
&.btn-back {
(省略)
z-index: 1;
& span {
(省略)
z-index: -1;
}spanタグの親にあたるクラスに対してz-indexを、そして子にあたるspanに対してもz-indexを付与することでスタックコンテキストを形成します。今回は前面に出ているspanを背面にしたいので「& span」に対して「z-index: -1;」を、そして前面に出したい「&.btn-back」の要素に対して「z-index: 1;」と指定することでスタックコンテキスト内での重なった要素の順番が入れ替わり、一番初めのリンク先に記した通りの挙動を示すようになります。これで完成となります。
スタックコンテキストに関して詳しいことを知りたい場合はこちらの記事が参考になります。
[CSS] z-index とスタックコンテキスト
https://qiita.com/hoto17296/items/42e62989193504d512c7
以上です。今回は私自身のアウトプットとして記事を投稿しました。参考になりましたら幸いです。
この記事が気に入ったらサポートをしてみませんか？