Excelで表を作っていたあの頃のように、Rmarkdownで作った表にも自由に色を塗りたい...。そんな方へkableExtraパッケージのご紹介です。 　ちなみに、このパッケージは、基本的にはHTMLやLatex形式での出力向けの関数のようです。Wordにも出力できるようですが、コピー&ペーストで少々めんどくさそう。ですので、今回はHTML形式で出力する場合やRでiosスライドを作成する場合を想定しています。 　 パッケージのインストール install.packages("kableExtra") 表の作成 　Rのirisのデータを使って作成します。 library(kableExtra) table.1 <- iris kableExtra::kbl(table.1) 　これだけだとシンプルすぎて見づらいので、テーマの設定をします。様々なテーマがありますが、個人的にお勧めなテーマを今回は設定します。パイプ（%>%）を使って、設定を追加していきます。 table.1 %>% kableExtra::kbl() %>% kable_styling( bootstrap_options = c("striped"), full_width = T) 行に色を塗る 　row_spec関数を使用します。row_spec(塗りたい行, color = "文字の色",bold = TRUE/FALSE ,background = "塗りつぶす色")のように指定します。 table.1 %>% kableExtra::kbl() %>% kable_styling( bootstrap_options = c("striped"), full_width = T)%>% row_spec( 1, #塗りたい行 color = "black", #文字の色 bold = TRUE , #文字の太字 background = "lightblue") #塗りつぶす色 　一行目が黒い文字の太字で、青色の背景で塗られていますね。 列に色を塗る 　列の場合は、column_spec関数です。引数の指定もrow_spec関数とほとんど一緒です。しかし、画像をセルに挿入するimageなどの面白い引数がありますので、詳しくはhelp関数で見てみてください。 table.1 %>% kableExtra::kbl() %>% kable_styling( bootstrap_options = c("striped"), full_width = T)%>% column_spec( 2, color = "black", bold = TRUE , background = "lightblue") 条件を指定して色を塗る 　条件に応じてセルの色を塗り分けたい場合があると思います。条件の指定は様々だと思いますが、今回はこちらの記事を参考に指定しました。 table.1 %>% kableExtra::kbl() %>% kable_styling( bootstrap_options = c("striped"), full_width = T) %>% column_spec(2, #色を塗る列を指定 background = ifelse(table.1$Sepal.Width > 3, "lightblue", "lightgreen")) 　機能がかなり多いので今回はごく一部の機能の紹介です。ぜひこのパッケージの作成者のページ（参考資料）をご覧ください。沢山の機能が丁寧に説明されています（英語です）。 参考資料： 1. Create Awesome HTML Table with knitr::kable and kableExtra 2. Conditional formatting with column_spec within a dplyr chain

現状の問題 トップページ（HTML）の画像が歪む 以下の画像のように横幅が合わせるため画像が歪む 理想 adobe XDで作成した以下画像のように歪まないようにしたい 理想に近づけるために インストラクターの方に方法と参考サイト両方を教わり、以下方法を実行 figureタグにoverflow:hidden imgタグに[object-fit: cover;]（中央でトリミングしてくれるらしい） 以下コード <div class="contents_item"> <figure class="item_img"><!--overflow:hidden--> <img src="images/event_yamagata.png" alt=""><!--object-fit: cover;--> </figure> <div class="item_title"> <p> グッズ展開催in山形 </p> </div> <div class="item_genre"> <div class="genre_flex"> <p>開催場所：</p> <p>山形県</p> </div> <div class="genre_flex"> <p>期間:</p> <p>2021/4/5~5/5</p> </div> </div> <div class="item_botton"> <a class="item_click" href="#"> <p>詳細はこちら</p> </a> </div> </div> .item_img { width: 252px; height: 214px; overflow: hidden; /*ここ*/ margin: 0 0 20px 0; display: flex; justify-content: center; } .item_img img { width: 100%; height: 100%; object-fit: cover; /*ここ*/ } 結果 歪みがなくなりました！ （以下HTMLファイルの画像） 参考サイト 1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー

古いサイトや他人様の書いたコードを見ると 知らないメディアクエリの書き方が結構あったので念のため調べてみた。 結論 @media(max-width:500px){} といった一般的な書き方でＯＫ。 他の色々な書き方 @media screen and @mediaの後に screen and とか all and と書いてあるのをたまに目にする。 実は、「結論」に載せた @media(max-width:500px){} という書き方は、 @media all and (max-width:500px){} を省略したものらしい。 allの部分はデバイスの種類を指定できるようになっており、 all（すべてのデバイス）の他に、print（プリンター）やspeech（スピーチシンサイザ）や screen（printやspeechを除いたもの全て。一般的なＰＣやスマホ。）がある。 なので、例えば @media screen and (max-width:500px){}は デバイスの種類がscreenでなおかつその幅が500px以下の場合を表す。 つまり、プリンタやスピーチシンセサイザを無視するなら allもscreenもほぼ変わらないはずなので やはり「結論」に書いたとおり @media(max-width:500px){}でＯＫということになる。 max-widthとmax-device-width max-widthはブラウザの幅。max-device-widthはデバイス自体の幅。 なので、@media (max-device-width:1000px)と指定した場合 デバイス自体の画面幅が1001px以上ならブラウザの幅を手動で小さくしても効かない。 @media only 古いcss等だと@media only screen and ～　といった感じで only　が付く場合がある。 これは詳しくは割愛するが 古い時代に使っていたものなので、現在では必要なし。 ただしあっても邪魔にはならない。 改めて結論 @media(max-width:500px){}でOK

古いサイトや他人様の書いたコードを見ると 知らない@mediaの書き方が結構あったので念のため調べてみた。 結論 @media(max-width:500px){} といった一般的な書き方でＯＫ。 他の色々な書き方 @media screen and @mediaの後に screen and とか all and と書いてあるのをたまに目にする。 実は、「結論」に載せた @media(max-width:500px){} という書き方は、 @media all and (max-width:500px){} を省略したものらしい。 allの部分はデバイスの種類を指定できるようになっており、 all（すべてのデバイス）の他に、print（プリンター）やspeech（スピーチシンサイザ）や screen（printやspeechを除いたもの全て。一般的なＰＣやスマホ。）がある。 なので、例えば @media screen and (max-width:500px){}は デバイスの種類がscreenでなおかつその幅が500px以下の場合を表す。 つまり、プリンタやスピーチシンセサイザを無視するなら allもscreenもほぼ変わらないはずなので やはり「結論」に書いたとおり @media(max-width:500px){}でＯＫということになる。 max-widthとmax-device-width max-widthはブラウザの幅。max-device-widthはデバイス自体の幅。 なので、@media (max-device-width:1000px)と指定した場合 デバイス自体の画面幅が1001px以上ならブラウザの幅を手動で小さくしても効かない。 @media only 古いcss等だと@media only screen and ～　といった感じで only　が付く場合がある。 これは詳しくは割愛するが 古い時代に使っていたものなので、現在では必要なし。 ただしあっても邪魔にはならない。 改めて結論 @media(max-width:500px){}でOK

１．はじめに RailsのHTML/CSSに対して、GoogleFont適用する2つの方法を学んでもらうのが この記事のゴールだよ！ 2. まずは、GoogleFontのサイトから使用するFontを選ぶ GoogleFontのサイト ↑ ここからサイトへ飛びます そしたら上記のページに行くと思います。 この中から使用したいフォントを選択します。 今回は変化がわかりやすいように"Comforter Brusho"を使います。 選んだフォントをクリックします。 そうすると、以下のようなページになると思います。 そしたら、右上にある"View your selected families"をクリックします。 そうすると、以下の画像が現れると思います。 これで、GoogleFontを適応させる準備は整いました。 3. ここからはGoogleFontの導入方法を2つ紹介します。 1. application.cssを使って導入する方法からやります。 上記の<link>に選択して画像でドラッグしているところをコピーします。 コピーができたら、 <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Comforter+Brush&family=Gloria+Hallelujah&family=Mochiy+Pop+P+One&family=Reenie+Beanie&display=swap" rel="stylesheet"> これをapplication.html.erbにペーストします。 app/views/layouts/application.html.erb <!DOCTYPE html> <html> <head> <title>Pra</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> #追加箇所 <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Comforter+Brush&family=Gloria+Hallelujah&family=Mochiy+Pop+P+One&family=Reenie+Beanie&display=swap" rel="stylesheet"> #ここまで <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> </html> これでcssでfont-family指定をしてあげれば、完了です。 font-familyはgooglefontのサイトからコピペすれば大丈夫です。 app/assets/stylesheets/application.css body { font-family: 'Comforter Brush', cursive; } と記述してあげると適応されます。 2. application.scssを使って導入する方法からやります。 1つ目の導入方法と大きく違う点はscssに記述をすることです 導入方法はcssの時と違うのは@importの方をコピーします。 そうしましたら、そのコードをapplication.scssに記述します。 app/assets/stylesheets/application.scss // /* // Place all the styles related to the tweets controller here. // // They will automatically be included in application.css. // // You can use Sass (SCSS) here: https://sass-lang.com/ */ #追加箇所 @import url('https://fonts.googleapis.com/css2?family=Comforter+Brush&family=Gloria+Hallelujah&family=Mochiy+Pop+P+One&family=Reenie+Beanie&display=swap'); #ここまで header { background-color: #cef0ff; height: 80px; display: flex; justify-content: space-between; align-items: center; } これでscssでfont-family指定をしてあげれば、完了です。 font-familyはgooglefontのサイトからコピペすれば大丈夫です。 app/assets/stylesheets/application.scss // /* // Place all the styles related to the tweets controller here. // // They will automatically be included in application.css. // // You can use Sass (SCSS) here: https://sass-lang.com/ */ @import url('https://fonts.googleapis.com/css2?family=Comforter+Brush&family=Gloria+Hallelujah&family=Mochiy+Pop+P+One&family=Reenie+Beanie&display=swap'); header { background-color: #cef0ff; height: 80px; display: flex; justify-content: space-between; align-items: center; font-family: 'Comforter Brush', cursive; } これで適応されます。 4.完成図 このようにフォントが変更されていたら成功です。 ５．これで以上です！！！ みなさんここまでお疲れ様でした！ これからGoogleFontを使ってより良いwebサイトを作っていってください！！！！！

はじめに 画像をクリックして選択できる web ページを作成する機会がありました。 選択出来ていることをユーザーに示すため画像に枠線を付けようと考えたのですが、この時に普段バックエンドばかりのエンジニアが苦労して実装した方法を記載します。 画像が丸角なのが悪いよ 基本とするページ 本題ではないのでとりあえず画像が選択できる状態まで一気に行きます index.html <head> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <input type="radio" id="img_1" name="selectable_image" value="dummy_value_1"> <label for="img_1"> <img src="./sample.jpg"> </label> <input type="radio" id="img_2" name="selectable_image" value="dummy_value_2"> <label for="img_2"> <img src="./sample.jpg"> </label> </body> index.css img { border-radius: 14px; } 同じ neme のラジオボタンをそれぞれの画像の前において、画像は対応させたいラジオボタンの id を for に指定した <label> に入れています。 これで画像をクリックするとラジオボタンがチェックされます。 複数の画像を選択したい場合はチェックボックスを対応させましょう。 今ラジオボタンを隠すと画像が選択できているか分からなくなるので、選択された画像に視覚的な効果を付けてから非表示にすることにしましょう。 画像に枠線を付ける やりたいことは選択された画像に枠線を付けることですが、まずは <img> に枠を付けることを目指します。 0. border を指定する <img> タグには枠線を付ける border という属性がありますが色の指定など細かいところに手が届かないし HTML5 で廃止らしいので、css の border の方が良いと思います。 まずはこれを使ってみましょう。 後述しますが、今回の需要ではあまり良い方法ではありません。 興味が無い場合この項は斜め読みしましょう。 index.html <head> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <input type="radio" id="img_1" name="selectable_image" value="dummy_value_1"> <label for="img_1"> <img src="./sample.jpg"> </label> <input type="radio" id="img_2" name="selectable_image" value="dummy_value_2"> <label for="img_2"> <img src="./sample.jpg"> </label> </body> index.css img { border-radius: 14px; border: 5px #FF0000 solid; } 枠線が付きました。 選択された要素のみに枠線を付ける 疑似クラスセレクタ :checked と隣接セレクタ + を使ってチェックされた要素のみに枠線を付けてみましょう。 ついでに枠線が付くようになって選択状態が見えるようになるのでラジオボタンを隠します。 index.html <head> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <input type="radio" id="img_1" name="selectable_image" value="dummy_value_1"> <label for="img_1"> <img src="./sample.jpg"> </label> <input type="radio" id="img_2" name="selectable_image" value="dummy_value_2"> <label for="img_2"> <img id="img_2" src="./sample.jpg"> </label> </body> index.css img { border-radius: 14px; } input[type=radio] { display: none; } input[type=radio]:checked + label img { border: 5px #FF0000 solid; } 選択すると border の分要素のサイズが変わってしまいました。 クリックした瞬間にニュッっと要素が成長する動きは上の静止画で見る以上に違和感がありますし、要素のサイズが変わることでページ全体のレイアウトに影響を与えるかもしれません。 今回はこの方法は避けましょう。 (要素のサイズを変えずに)画像に枠線を付ける 外側に要素を置いて、そちらに border をかける box-shadow を使う 概ね上記の2手法をネット上では見かけました。 順にやってみます。 1. 親要素に枠線を付ける <div> に入れてみます。 <div> に入れても横に並んでもらうために全体がさらに flex な <div> に入れられたり、その都合でこの後の画像では <img> 間のスペースが消失していますがあまり気にしないで行きましょう。 <img> の親要素の <div class="container"> に border を指定している その分子要素の <img> にマイナス margin をかける ボーダーが裏回るので <div class="container"> を overflow: hidden; 辺りが勘所です。 index.html <head> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div id="media_area"> <input type="radio" id="img_1" name="selectable_image" value="dummy_value_1"> <label for="img_1"> <div class="container"><img src="./sample.jpg"></div> </label> <input type="radio" id="img_2" name="selectable_image" value="dummy_value_2"> <label for="img_2"> <div class="container"><img id="img_2" src="./sample.jpg"></div> </label> </div> </body> index.css #media_area { display: flex; } div.container { overflow: hidden; } img { border-radius: 14px; } input[type=radio] { display: none; } input[type=radio]:checked + label div { border: 5px #FF0000 solid; } input[type=radio]:checked + label div img { margin: -5px; } さて無事に要素のサイズが変わらないまま画像に枠線が付きました。 嘘です。無事ではないですね。 角が立ってしまっていますし、わかりにくいですが border を <img> の上にかぶせて表示した分、画像を覆い隠してしまっています。 お客さんに入稿してもらった画像を表示するサービスだったので、「端っこ隠れちゃう。ゴメンね♡」とは言いたくありません。 2. box-shadow じゃあ今度はこっち。 <div> に入れておく必要は無いはずだが、せっかく flex にしたのでそのまま。 むしろ <input type="radio">, <label>, <img> は１塊の要素なのでまとめて <div class="container"> に放り込んでみました。 index.html <head> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div id="media_area"> <div class="container"> <input type="radio" id="img_1" name="selectable_image" value="dummy_value_1"> <label for="img_1"> <img src="./sample.jpg"> </label> </div> <div class="container"> <input type="radio" id="img_2" name="selectable_image" value="dummy_value_2"> <label for="img_2"> <img id="img_2" src="./sample.jpg"> </label> </div> </div> </body> index.css #media_area { display: flex; } img { border-radius: 14px; } input[type=radio] { display: none; } input[type=radio]:checked + label img { box-shadow: 0 0 0 5px rgb(255, 0, 0); } box-shadow の各値を簡単に説明すると左から順番に <offset-x>: 影の横方向位置、正の値で右に現れる。 <offset-y>: 影の縦報告位置、正の値で下に現れる。 <blur-radius>: 影のぼかしの強度。負は無い。 <spread-radius>: 影の拡散、正の値で要素より大きな影ができる。 <color>: 影の色。<color> の仕様に従う。 つまりこれは要素の真裏にぼかしの無い赤い影を置き、5px だけ周囲に拡散させています。 結果が以下 枠線も丸く、大きくなっているように見えますが影は要素のサイズとは別計算のようで画像もその要素も同じサイズのままです。 ただ、これは隣の要素に干渉するようでこんなことになります。 間を空ける というわけで画像の間を空け直します。 画像の境界もわかりにくくなっていたのでちょうどいいですね。 <div class="container"> に padding を指定するだけです。 要素の間に 5px 欲しいので半分の 2.5px index.html <head> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div id="media_area"> <div class="container"> <input type="radio" id="img_1" name="selectable_image" value="dummy_value_1"> <label for="img_1"> <img src="./sample.jpg"> </label> </div> <div class="container"> <input type="radio" id="img_2" name="selectable_image" value="dummy_value_2"> <label for="img_2"> <img id="img_2" src="./sample.jpg"> </label> </div> </div> </body> index.css #media_area { display: flex; } div.container { padding: 2.5px; } img { border-radius: 14px; } input[type=radio] { display: none; } input[type=radio]:checked + label img { box-shadow: 0 0 0 5px rgb(255, 0, 0); } さいごに 以上、画像を選択できるようにする方法と画像に枠線を付ける3つの方法でした。 余談ですが 結果的に仕様に適ったので画像と画像の間を空け最後の方法を使用しましたが、 自分自身に被ってもいいので画像と画像はくっつけておきたい、でも角を丸くするという方法は見出せませんでした。 親要素にも角の丸い要素を指定してみたりいろいろやってみたのですが、うまく合わせきれませんでした。 微妙な隙間が空いてしまうんですよね 私と同じような、角の丸い画像を選択して枠を付けたいという状況の場合、間を空けるか、丸角をやめるか選択をしなければならないと思います。 追記 勉強会で発表したところ <img> 要素のサイズを維持するには「box-sizing: border-box;でうまくいきませんか？」との指摘を受けた。 せっかくなので折を見て調査したい。 なんとなく border が画像に被るようにしないとその分画像が小さくなる気配を感じるが。 参考資料 画像サイズを変更せずにCSSのborderで画像に枠をつける方法 CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる

概要 最近react,vueを触る機会が多いので、メモするほどのことでもないのですが、 初心者やreact,vueってどんな感じなの？って人用に書かせてもらいます。 (シリーズ化して、小出しに記事にしていくかも？) vueでの条件によって表示させる方法 vueでは表示したい要素のタグの属性にv-ifを追加することで 要素を表示するか、しないかを表現できます。 <template> <div> <span v-if="flag">表示されます</span> <span v-else>表示されません</span> </div> </template> <script> export default { data() { return { flag: true } } } </script> vueでの出しわけ方法は分かりやすく、 タグにv-if="~~"というディレクティブ(※)を追加することで、簡単に出しわけができます。 もちろん、v-else-ifも使えます。 ※ DOM要素に対して何かを実行することをvue側に伝えるものと覚えておくといいかもしれないです。 jsxでの条件によって表示させる方法 jsxの場合は以下になります。 const flag = true; return ( <div> {flag && <span>表示されます</span>} // or {flag ? <span>表示されます</span> : <span>表示されない</span>} </div> ) jsxの場合は{}を記述して、中に条件を書くことでタグの出しわけができます。 flagの管理などはstateと呼ばれるものを使用したりしますが、それはまた別の機会に。

押したくなるボタンとは 「これリンクだな」と押してもらえそうなボタン。 スマホでもパソコンでも、リンクが大きいと押しやすくて便利なので使っています。 特にパソコンサイトでは、マウスホバーしたときに押してる感があると楽しい気がします。 見た目 HTMLとCSSをタップすると、ボタンを構成するコードを見られます。 Resultをタップすると、ボタンの見た目を確認できます。 特徴 押せる感を出す→影をつけて浮き上がらせた ぬるっと感を出す→マウスホバー時に0.3秒かけて変化させた 押し戻された感を出す→マウスを外したときも元のスタイルにぬるっと戻した See the Pen Untitled by meri96bockn (@meri96bockn) on CodePen. HTML <a href="#">ボタン押せるよ</a> <a href="#">Push this button!</a> <a href="#">押した？</a> CSSメインの説明をするため、必要最低限の要素のみ記述しています。 CSS 大まかな流れ paddingでaタグに肉付けしてボタンを作る box-shadowで立体感を出す transitionでぬるっと動かす /*マウスホバー前のスタイル*/ a { display: block; text-decoration: none; text-align: center; width: 160px; margin: 24px; padding: 16px; border-radius: 8px; color: rgb(255, 255, 255); background-color: rgb(85, 197, 0); box-shadow: 8px 4px 1px rgba(0, 0, 0, .6); transition: .3s; } /*マウスホバー後のスタイル*/ a:hover { background-color: rgba(85, 197, 0, .9); box-shadow: none; transform: translate(4px, 2px); } マウスホバー前 display: block; aタグをブロック要素にします。 またはdisplay: inline-block;と書いて、インラインブロック要素にしてもOKです。 aタグは本来インライン要素として機能していますが、 ブロック要素に変えることで適用できるスタイルがあります。 例えばtransformを適用でき、マウスをかざしたときに要素を移動できます。 ほかにも要素を折り返したときに、要素同士が重なることを防げます。 text-decoration: none; aタグの下線を消します。 情報量が増えると分かりづらいので省きました。 ただし、「下線＝リンクだ」という認識もあるので状況によって選びます。 今回は「押せそうなボタン＝リンクだ」と伝わることを想定した判断です。 text-align: center; aタグ内の文字を真ん中に持っていきます。 width: 160px; aタグをブロック要素に変えると、widthが目一杯広がってしまいます。 そのためwidthに具体的な値を指定して、ちょうどいい幅にします。 一方、インラインブロック要素にした場合は、 文字量に合わせた幅になるのでwidthの指定をしなくても問題ありません。 margin: 24px; 3つのaタグがそれぞれくっつかないように、余白を設けます。 padding: 16px; 文字のまわりに肉付けして、aタグの領域を広げます。 領域は、このあと指定するbackground-colorの色になります。 前述したように、aタグの領域が広がるとボタンが押しやすくなります。 border-radius: 8px; aタグの領域の角を丸くしています。 color: rgb(255, 255, 255); aタグの文字色を指定しています。 background-color: rgb(85, 197, 0); aタグの背景色を指定しています。 前述したpaddingの大きさによって、この色がどれくらい広がるか決まります。 box-shadow: 8px 4px 1px rgba(0, 0, 0, .6); aタグに四角い影をつけています。 影がつくことで、「押せると分かる」見た目になります。　 8px：aタグのよこ(X軸)方向に影を広げます。 4px：aタグのたて(Y軸)方向に影を広げます。 1px：数字が大きいほど、影がぼんやり広がります。 rgba(0, 0, 0, .6)：影の色を指定します。.6＝0.6は透明度です。 透明度を上げるには、値を小さくします。（=色が薄くなる。） その度合いによって影の濃さが決まります。 背景色が濃いほど透明度を上げ、背景色が薄いほど透明度を下げるとしっくりきました。 transition: .3s; マウスホバー前からマウスホバー後へ、なにをどのように変化させるか定義します。 .3s＝0.3sは「0.3秒の時間をかけて指定したプロパティーを変化させる」という指定です。 これは「どのように」にあたる部分です。 一方「なにを」にあたる部分は、マウスホバー後のプロパティーから指定します。 今回はbackground-color、box-shadow、transformと3つあり、 これらすべてを0.3秒かけて変化させたいです。 そのため具体的なプロパティー名の代わりに、allと指定したいところですが、 そもそもtransitionの「なにを」にあたる初期値はallなので、 わざわざ記述する必要はありません。 結果、transitonに.3sと記述するだけですべてのプロパティーが0.3秒かけて変化します。 マウスホバー後 a:hover aタグに:hoverと追記し、マウスをホバー（かざした）ときのスタイルを指定します。 background-color: rgba(85, 197, 0, .9); マウスホバー前との違いは最後の.9の部分です。 背景色の透明度を少し上げることで色を明るく見せ、 ボタンを選択していることが伝わるようにします。 box-shadow: none; ボタンの影を消します。 同時に後述のtransformで要素を移動することで、 「ボタンを押し込んでいる」感じのスタイルにします。 transform: translate(4px, 2px); transformは要素を回転させたり移動させたりできます。 そこにtranslateと追記し、aタグを移動させます。 さらに()内に値を2つ追記し、どれだけ移動するか指定します。 4px：aタグをよこ(X軸)方向に移動します。 2px：aタグをたて(Y軸)方向に移動します。 今回はbox-shadow（マウスホバー前）で指定した値と比べて、半分の値を指定します。 もし影と同じ値だけ移動させると、ボタンが深めに沈み不自然かつ大袈裟に変化します。 影の大きさと比べて、半分くらいの移動におさめるとしっくりきました。 あとがき 大まかな流れを振り返ります。 paddingでaタグに肉付けしてボタンを作る box-shadowで立体感を出す transitionでぬるっと動かす この3点が押したくなるボタンを作る基本的なスタイルです。 そのほかに記述している、 角を丸めたり色を変えたりするスタイルはお好きに変更してください。 また、今回はHTML要素がaタグだけなのでブロック要素に変更する必要がありました。 インライン要素のままだと、 要素を折り返したときにaタグ同士が重なってしまう traansformが効かない という困ったことが起こります。 これらを防ぐためにaタグをブロック要素に変えました。 しかし、もしaタグ全体をフレックスボックス化するならば、 aタグ自身がフレックスアイテムに変わるため、ブロック要素に変更する必要はありません。 このボタンを作るときの多くは、 aタグ全体をdivタグなどで囲ってフレックスボックス化することが多いです。 そのため、aタグをブロック要素にしていることは実は少ないです。 今回はaタグのみに集中したスタイルのためブロック要素に変更しました。