お疲れ様です。Ryujiです。
数日間ブログ投稿を止めていましたが、本日は投稿します。
そろそろ暑くなってきましたね。季節の変わり目は風邪に注意しましょう。
今日はRubyに戻って、数独アプリを進めたので、そこで学んだことを共有します。
今日やったこと
数独を複数クライアントで円滑にできるようにするため、以下改良しました。
- ルーム選択画面の再作成
- アソシエーション再調整
- 数独画面スタイリング
ルーム選択画面
最終的にこうなりました！
マウスでホバーした際にエフェクトをつけることで、選択している感
を出すことができたと思います。
もともとがこんな感じだったので、すごく改善できました。
あとは日本語のところのフォントがWeb全体の雰囲気と合っていないですね。後日変更します。
ソースコード
今日はscssのコードです。ポイントを下で紹介するので、以下は読み飛ばしてください。
ul{
padding:0;
width: 90%;
margin: 0 auto;
a,a:after{
text-decoration: none;
}
li{
position: relative;
color: $main-color;
padding: 5px 30px;
line-height: 60px;
margin: 0 10px 30px;
font-size: 20px;
list-style: none;
width: 250px;
height: 250px;
float: left;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color:lighten($bg-color,20%);
opacity: 0.2;
transition: all 0.3s;
}
.btn:hover::before {
opacity: 0 ;
transform: scale(0.5,0.5);
}
.btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s;
border: 1px solid $main-color;
transform: scale(1.2,1.2);
}
.btn:hover::after {
opacity: 1;
transform: scale(1,1);
}
}こんなアニメーションの付け方ですね。
htmlはこんな感じです。
-- html --
<ul>
<li>
<btn>
<p>Room No.58</p>
<p>部屋作成者：mike</p>
必要な項目を列挙しました。
- 親要素にposition:relativeを設定
- 子要素はbeforeとafterにposition:absoluteを設定
- 内側のデザイン – 子要素のbeforeにマウスホバーする前のスタイルとtransitionを設定
- 外側のデザイン – 子要素のafterにマウスホバーする前のスタイルとtransitionを設定
- 内側のアニメーション – before::hoverにtransformや変えたい属性を設定
- 外側のアニメーション – after::hoverにtransformや変えたい属性を設定
1.
li{
position: relative;
}
2.
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
}
.btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
}
3.
.btn::before {
background-color:lighten($bg-color,20%);
opacity: 0.2;
transition: all 0.3s;
}
4.
.btn::after{
opacity: 0;
transition: all 0.3s;
border: 1px solid $main-color;
transform: scale(1.2,1.2);
}
5.
.btn:hover::before {
opacity: 0 ;
transform: scale(0.5,0.5);
}
6.
.btn:hover::after {
opacity: 1;
transform: scale(1,1);
}この記事を参考にさせていただきました。
https://dev.to/webdeasy/top-20-css-buttons-animations-f41
今日学んだこと
今日はもう一つ学んだことがあります。
Rubyの配列は引き算できる
これ知らなかったです。実際にこんな場面で使えました。
@all_rooms = Room.all
# TODO @all_roomsからcurrent_userが所属済みの部屋を除く
@rooms = current_user.roomsTODOにあるように@all_roomsから除きたいデータがあったんですよね。
Rubyは配列でも引き算できるので、とても簡単にかけました。
@rooms = current_user.rooms
@all_rooms = Room.all - @rooms知っている人にとっては当たり前かもですけど、拍子抜けしました。
まとめ
今日は数独の画面もスタイリングして綺麗になりました。
数独の問題自体も割といい具合の難易度なんですよね！
まだまだ不十分なところはありますが、アウトラインはできたので、デプロイもしたいですね！
