CSSだけで作るホバーアクション｜CODEGYM
こんにちは、CODEGYMのまろんです。
今回は、HTMLとCSSで作るおしゃれなホバーアクションを作り方を解説します。
この記事の想定読者様は、
HTML・CSSをすこし勉強したけど、何が作れるかわからない人
HTML・CSSの勉強に少し飽きてきた人
HTML・CSSでかっこいい作品を作ってみたい人
です。
初学者でも楽しみながら作れるように詳しく解説していきますので、
どうぞご覧ください！
完成イメージ
今回、作っていくのはおしゃれなネオン風のホバーアクションメニューです。
実は、すべてCSSだけで作られていて、難しいテクニックは一切不要。
初学者の方でも簡単に作れて達成感を感じられる作品になっています。
制作の流れ
この記事では、ただ制作物を作っていくのではなく、制作過程もイメージできるように、順序立てて解説していくことを意識しています。
大まかな制作順序は、
仕様の確認をする
ツールの準備をする
コーディングをする
Web上に公開またはテストをする
の4つです。
制作物を作る時に、いきなり手を動かしてしまうと手戻りが発生してしまったり、効率良くコードを書いていくことができなくなってしまいます。
ですので、順序に沿って制作を進めていきましょう。
仕様の確認
まずは、完成イメージの要素分解をします。
ざっくりでよいので、完成イメージを観察して、特徴をあげてみてください。
特徴のピックアップには、正解はありません。
とにかく数を上げます。
5行のテキストが並んでいる。
テキストの左にバーがある。
バーの色はテキストの色と同じ。
背景が黒い
カーソルを乗せたら左のバーが右にスライドする。
「青」「赤」「黄色」「緑」「ピンク」の5色のテキストがある。
通常、テキストの色は透明で、テキストには枠線がある。
カーソルを離すとバーが右から左へスライドし、テキストの色が消える。
バーのスライドに合わせて、テキストに色がつく。
テキストに色がついたり、消えたりするスピードは、全て同じ。
制作手順の検討
上記で挙げた、特徴をどの順番で制作していくか整理していきます。
以下の項目で整理していきます。
テキストに関する特徴
5行のテキストが並んでいる。
「青」「赤」「黄色」「緑」「ピンク」の5色のテキストがある。
通常、テキストの色は透明で、テキストには枠線がある。
デザインに関する特徴
背景が黒い
テキストの左にバーがある。
バーの色はテキストの色と同じ。
挙動に関する特徴
カーソルを乗せたら左のバーが右にスライドする。
バーのスライドに合わせて、テキストに色がつく。
カーソルを離すとバーが右から左へスライドし、テキストの色が消える。
テキストに色がついたり、消えたりするスピードは、全て同じ。
ここまで整理できると、スムーズに制作できる気がしてきませんか！
いざ、制作開始！
制作ツールの準備
今回の制作では、無料のコードエディタ「Visual Studio Code」を使用していきます。
Visual Studio Code（VSCode）はコードエディタで、拡張機能がとても豊富なのが特徴です。
便利な機能を追加することで、快適なコーディング環境を整えましょう。
「Visual Studio Code」のダウンロードは、以下のURLから行えます。
もし、すでに使用しているエディタがある場合は、そちらを使用してください。制作結果になんら影響はありません！
ファイルの準備
HTMLとCSSを記述するためのファイルを作成しましょう。
ファイル名は「index.html」「style.css」とします。
ファイルは、一つのフォルダにまとめておくと良いでしょう。
フォルダ構成の例
hover-action-tutorial
+-- index.html
+-- style.css
HTMLの基本設定
index.htmlをVSCodeで開き、HTMLの基本設定をします。
ちなみに、VSCodeで「!」「tabキー」と続けてタイプすると、一気に記述することができます。
「<!DOCTYPE html>」から始まるHTMLの基本構成が記述できたら、言語は日本語なので「ja」を設定してください。
英語「en」に設定すると、「翻訳しますか？」のアラートがでてきてしまいます。
文字コードは「UTF-8」を設定し、タイトルは「CSS Hover Action」とします。
下記にサンプルコードを用意しているので、ご参考までに。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Hover Action</title>
</head>
<body>
</body>
</html>HTMLの基本設定が記述できたら
HTMLの基本構成が記述できたら、リスト「li」タグで5つの要素を作っていきます。
ここでは、「ul」タグと「li」タグに「a」タグを組み合わせて表現していきます。
以下のように、記述します。
この時、一つリストを作成したら、4回コピぺしてテキストだけ修正することで、効率よく記述できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Hover</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li>
<a href="#">LABOT</a>
</li>
<li>
<a href="#">CODEGYM</a>
</li>
<li>
<a href="#">PROGRAMMING</a>
</li>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
</ul>
</body>
</html>記述したコードをブラウザで確認してみると、以下のようになっているはずです。
5つのテキストが作成できたら、「a」タグの「data- 」属性を使用して、ホバーする前の透明なテキストを作っていきます。
HTML5では、「data-」属性を使うことで、HTML要素に追加情報を付与することができます。なお、「data-」から始まる属性、例えば「data-text」「data-article」など、を「data-」属性と言います。
data 属性については、本noteの最後にまとめていますので、そちらを参照してください。
今回は、「a」タグの属性に「data-text」を追加して、透明なテキストを表現していきます。
各「li」に記述している、LABOT、CODEGYMなどのテキストに合わせて、「data-text」属性にも追加情報を格納してください。
また、これからCSSも記述していきますので、「head」タグ内でCSSファイル「style.css」を読み込んでください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Hover</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li>
<a href="#" data-text="LABOT">LABOT</a>
</li>
<li>
<a href="#" data-text="CODEGYM">CODEGYM</a>
</li>
<li>
<a href="#" data-text="PROGRAMMING">PROGRAMMING</a>
</li>
<li>
<a href="#" data-text="HTML">HTML</a>
</li>
<li>
<a href="#" data-text="CSS">CSS</a>
</li>
</ul>
</body>
</html>GoogleFontsの設定
外部フォントを使用できるようにするために、CSSファイルの最上部にimportの設定をしていきます。
今回は、GoogleFontsの「Poppins Bold 700」を使用するので、以下のページにアクセスして、import するコードをコピーしてください。
CSSの上部、@import から始まるコードが書けたら、外部フォントを読み込むための準備が完了です。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');以下からGoogleFontsが確認できます。
全体の共通設定
ブラウザには、CSSで指定しなくても最初から設定されている初期値があります。
これをデフォルトスタイルシートと言います。
全てのセレクタの「margin」「padding」の初期値をそれぞれ0に設定し、ブラウザを確認してみましょう。
なお、全ての要素にCSSを適用させるには、「* アスタリスク」を使います。
ブラウザで確認すると、余白がなくなっていることがわかりますね。
次に、「box-sizing」には「border-box」を指定します。
「box-sizing」を「border-box」に設定しておくことで、要素の幅や高さの扱いがとても楽になります。
「border-box」と同様に「content-box」という値もあるのですが、詳しい違いや使い方はこちらの記事を参考にしてください。
なお、先ほど import したフォントは「font-family」で指定しすることができます。
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}ここまでの実行結果を確認すると、以下のようになっています。
余白とフォントが変わりましたね。
テキストの位置と背景色を設定する
次に、body 要素にCSSを適用して、テキストの位置と背景色の調整をします。
テキストの位置については、フレックスボックスを活用していきます。
「justify-content」を「center」に設定し、コンテンツを横軸において中央寄せしてください。
そして、「align-items」は左右の値を取らないため、「center」と指定することで、縦軸において中央に寄せることができます。
そして、「min-height」を「100vh」とすることで、コンテンツが画面の中心にまとまります。
あとは「background」を「#252839」に設定すれば、bodyタグ のスタイリングは完了です。
では、ブラウザで確認してみましょう。
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #252839;
}ulの設定
次にリストのレイアウトを整えていきましょう。
「ul」にFlexboxを適用させて、「flex-direction」を「column」で指定して縦並びに設定します。
「gap」プロパティを使って各テキストの余白を設定していきます。
「gap」プロパティは、CSS GridやFlexboxで利用できるプロパティです。
ul
{
position: relative;
display: flex;
flex-direction: column;
gap: 30px;
}ブラウザで確認してみると、問題なく余白の設定ができていました。
ul li の設定
「li」の「・」を消す処理をしていきます。
「・」を消すには、「list-style」で「none」を指定します。
ul li
{
position: relative;
list-style: none;
}ブラウザで確認すると「・」が消えていますね。
ul li a の設定
いよいよ、透明のテキストを作っていきます。
まずは、フォントサイズを4emで指定し、「a」タグのアンダーラインを消すために「text-decoration」を「none」に設定します。
そして、「color」プロパティでテキストの色を透明「transparent」にします。
ただ、このままだと何も見えない状態になってしまいます。
なので「-webkit-text-stroke」を用いて、テキストに枠線を入れていきます。
値は「1px rgba(255,255,255,0.5)」とします。
あとは、デザインを整えるために、「letter-spacing」を2pxに、「line-height」を1emとしてください。
今回のデザインでは、全てのテキストが大文字のため、CSSでテキストを大文字表記するために「text-transform」を用いて、「uppercase」を指定します。
ここまで記述したコードは下記になります。
ul li a
{
position: relative;
font-size: 4em;
text-decoration: none;
color: transparent;
letter-spacing: 2px;
line-height: 1em;
text-transform: uppercase;
-webkit-text-stroke: 1px rgba(255,255,255,0.5);
}それでは、ブラウザを確認してみましょう。
問題なく、透明のテキストが表示されていますね。
カーソルを乗せた時の動きを作っていく
「ul li a::before」の設定をします。「::before」は、疑似要素で、選択した要素の先頭に子要素を生成します。
一般的に、「content」プロパティを使用して、要素に装飾的な内容を追加するために用いられます。（MDN Web Docs引用）
今回装飾する内容は、「a」タグに設定した「data-text」なので、「attr(data-text)」を指定します。
しっかり反映されているか確認しやすいように「color」を「#FFF」に指定しておいてください。
テキストカラーを白くしたところで、ブラウザを確認してみましょう。
疑似要素が生成されているのが確認できますが、文字が重なっていません。 「position」を「absolute」指定することで、疑似要素を親要素の位置に合わせることができます。
再度確認してみましょう。
無事、疑似要素を重ねることができました。
次に、マウスカーソルに合わせて動くバーに色を付けます。 準備として、重ねる部分「width」を30％に指定して、「overflow」を「hidden」にします。
ul li a::before
{
content: attr(data-text);
position: absolute;
color: #fff;
width: 30%;
overflow: hidden;
}すると、部分的に文字を重ねることができました。
ただ、この状態では、カーソルを乗せても色が変わらないため、「ul li a:hover:before」をスタイリングします。
また、「width」は100％と指定してください。
ul li a:hover:before
{
width: 100%;
}すると、ホバーしたテキストが白くなることが確認できます。
ここまでできたら、色が変わる時間を調整し、バーを作成していきます。
色が変わる時間は、「transition」で調整できます。
今回は、1s（1秒）で設定してください。
バーについては、「border-right」で作成します。
バーの色は、わかりやすいように白（#fff）にしておいてください。
ここまでのCSSは、下記の通りです。
ul li a::before
{
content: attr(data-text);
position: absolute;
color: #fff;
width: 30%;
overflow: hidden;
transition: 1s;
border-right: 8px solid #fff;
}ここまで書けたら、ブラウザで確認してましょう。
問題なく動きましたね。
また、テザインを整えるために、「ul li a:hover:before」にも「ul li a 」と同様に、1pxの枠を設定しておきましょう。
ul li a:hover:before
{
width: 100%;
-webkit-text-stroke: 1px #fff;
}ここからは、文字の前後に半角スペースを入れて、デザインを整えましょう。半角スペースを入れるときには、「 」を使います。
<body>
<ul>
<li>
<a href="#" data-text=" LABOT"> LABOT </a>
</li>
<li>
<a href="#" data-text=" CODEGYM"> CODEGYM </a>
</li>
<li>
<a href="#" data-text=" PROGRAMMING"> PROGRAMMING </a>
</li>
<li>
<a href="#" data-text=" HTML"> HTML </a>
</li>
<li>
<a href="#" data-text=" CSS"> CSS </a>
</li>
</ul>
</body>問題なくスペースが空いているか、確認してみましょう。
ここまでできたら、あとは色を調整していくだけです。
「li」に「style」属性を用いてCSSを直接記述していきますが、
今回は、カスタムプロパティを用いて、色をしていきます。
カスタムプロパティは、ハイフン2つ (--) で始まるカスタムプロパティ名と、何らかの有効な CSS 値になるプロパティ値を使用して書きます。（MDN Web Docs引用）
1番上のテキストに色付けをしてみましょう。
<body>
<ul>
<li style="--clr:#00ade1">
<a href="#" data-text=" LABOT"> LABOT </a>
</li>
<li>
<a href="#" data-text=" CODEGYM"> CODEGYM </a>
</li>
<li>
<a href="#" data-text=" PROGRAMMING"> PROGRAMMING </a>
</li>
<li>
<a href="#" data-text=" HTML"> HTML </a>
</li>
<li>
<a href="#" data-text=" CSS"> CSS </a>
</li>
</ul>
</body>CSSを反映させるために、リストに設定した色をvar ()関数を使用して、連携させます。
ul li a::before
{
content: attr(data-text);
position: absolute;
color: var(--clr);
width: 30%;
overflow: hidden;
transition: 1s;
border-right: 8px solid var(--clr);
}「ul li a:hover:before 」にも同様に連携させます。
ul li a:hover:before
{
width: 100%;
-webkit-text-stroke: 1px var(--clr);
}var()関数の設定ができたら、ブラウザで確認してみましょう。
だいぶ完成に近づいてきましたね。
しかし、完成のデザインと比較するとベタ塗りな印象があります。
先ほど指定した「-webkit-text-stroke: 1px var(--clr);」に原因があるようです。
そこで、「filter」プロパティに書き換えることで解決できます。
「filter」プロパティは、ドロップシャドウなどのグラフィカルな効果を付けることができます。
さっそく、「filter」プロパティに、「drop-shadow(0 0 25px var(--clr))」を指定してみましょう。
ul li a:hover:before
{
width: 100%;
filter: drop-shadow(0 0 25px var(--clr));
}ブラウザを確認してみると、ネオン風なデザインになりました。
テキストの大きさを合わせるために、「ul li a::before 」に「-webkit-text-stroke: 1px var(--clr);」を指定してください。
そして、テストで設定していた「width」を0％に戻してください。
ul li a::before
{
content: attr(data-text);
position: absolute;
color: var(--clr);
width: 0%;
overflow: hidden;
transition: 1s;
border-right: 8px solid var(--clr);
-webkit-text-stroke: 1px var(--clr);
}最後に、他のテキストの色を調整して完成です。
<body>
<ul>
<li style="--clr:#00ade1">
<a href="#" data-text=" LABOT"> LABOT </a>
</li>
<li style="--clr:#ff6493">
<a href="#" data-text=" CODEGYM"> CODEGYM </a>
</li>
<li style="--clr:#ffdd1c">
<a href="#" data-text=" PROGRAMMING"> PROGRAMMING </a>
</li>
<li style="--clr:#00dc82">
<a href="#" data-text=" HTML"> HTNL </a>
</li>
<li style="--clr:#dc00d4">
<a href="#" data-text=" CSS"> CSS </a>
</li>
</ul>
</body>完成
記述したコードを確認してみましょう。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Hover</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li style="--clr:#00ade1;">
<a href="#" data-text=" LABOT"> LABOT </a>
</li>
<li style="--clr:#ff6493;">
<a href="#" data-text=" CODEGYM"> CODEGYM </a>
</li>
<li style="--clr:#ffdd1c;">
<a href="#" data-text=" PROGRAMMING"> PROGRAMMING </a>
</li>
<li style="--clr:#00dc82;">
<a href="#" data-text=" HTML"> HTML </a>
</li>
<li style="--clr:#dc00d4;">
<a href="#" data-text=" CSS"> CSS </a>
</li>
</ul>
</body>
</html>CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #252839;
}
ul
{
position: relative;
display: flex;
flex-direction: column;
gap: 30px;
}
ul li
{
position: relative;
list-style: none;
}
ul li a
{
position: relative;
font-size: 4em;
text-decoration: none;
color: transparent;
letter-spacing: 2px;
line-height: 1em;
text-transform: uppercase;
-webkit-text-stroke: 1px rgba(255,255,255,0.5);
}
ul li a::before
{
content: attr(data-text);
position: absolute;
color: var(--clr);
width: 0%;
overflow: hidden;
border-right: 8px solid var(--clr);
transition: 1s;
-webkit-text-stroke: 1px var(--clr);
}
ul li a:hover:before
{
width: 100%;
filter: drop-shadow(0 0 25px var(--clr));
}完成
お疲れ様でした！
いかがだったでしょうか。
「HTMLとCSSで何ができるんだろう、、、」そう思っていた方も、実際に手を動かして、かっこいいアウトプットができると楽しくなりませんか？
これからも、見て楽しい書いて学べるコンテンツを発信していきます。
今回使用したタグとプロパティ
今回の制作で使用したタグやプロパティは、下記にまとめているので、わからないタグが出てきた人は確認してくださいね。
HTML
a
CSS
display
justify-content
flex-direction
text-transform
box-sizing
align-items
overflow
gap
text-decoration
::before
content: attr(data-text);
letter-spacing
-webkit-text-stroke
filter
--clr
var()
運営サービス
CODEGYM
協力
Online Tutorials
免責
本noteは、Online Tutorialsの運営者様に許可を取って制作しております。
無許可の転載・複写・複製などはご遠慮ください。
本noteの内容について、正確な記述になるよう努めておりますが、コードの内容および制作順序に関して、なんらの補償をするものではありません。また、誤りや不正確な記述がある場合も、一切の責任は負いません。
本noteに関するご意見などがございましたら、LINEにてお知らせください。
もしこのnoteで楽しめた方は、CODEGYMのTwitterフォローよろしくお願いします。
https://twitter.com/CODEGYM_JP
https://twitter.com/_kurimaron