今回のきっかけ
11月最終週。
束の間の無職期間を割と無為に食いつぶしていることを見破られたのか、馴染みのスタッフさんから、
スクール運営側のモチベ向上のために撮っている、受講生からのメッセージ動画の撮影に協力してもらいたい、との依頼が飛んできました。
暇だったので あまりにも暇だったので即決したところ、2時間後くらいに撮影するので内容を考えておくように指示が。
2時間……なんか作れるかも……。
習ったことを活用して、達者ではないおしゃべりを捕捉するものをつくろう。
今回の制作物
div class="thanks"
社員の皆様へのメッセージ動画用に作ったページ。感謝全部盛り。
※個人名多数出ちゃってるんで隠してます。牡蠣食べたいなあ
作りとしては簡単なもので、HTMLとCSSだけです。
HTML
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="div-thanks.css">
<title>div class="thanks"</title>
</head>
<body>
<div class="thanks">
<div class="wrapper">
<h1>Thanks!</h1>
<ul class="staff-list">
<li>*** : """"" 神 """""</li>
<li>*** : 1分話しただけでも元気になる不思議。</li>
<li>*** : 非常に実践的なアドバイスに助けられました！</li>
<li>*** : モチベ維持のための舵取りの腕が光ってました...｡ﾟ+.</li>
<li>*** : いろいろがんばれ元同期。</li>
<li>All Staff! : コードレビュー、オリアプ試遊、励ましのお言葉 etc...</li>
</ul>
</div>
</div>
</body>
CSS
body {
background-image: url("symphony.png");
}
.thanks {
width: 100vw;
padding-top: 10px;
}
.wrapper {
width: 500px;
margin: 0 auto;
}
.thanks h1 {
text-align: center;
background-color: #00306e;
color: #fff;
}
.thanks ul {
text-align: center;
margin: auto;
padding: 0;
}
.thanks li {
list-style: none;
font-weight: bold;
margin-bottom: 5px;
}
li:hover {
background-color: #00306e;
color: #fff;
}
マウスポインタをホバーしたとき色つけられるようにして、各人について言及した際に示せるようにしたいなあ、
でもそのためにJSファイル用意するのもなあ、
とグズグズしていたら、CSSだけでそれが叶う方法を見つけました。
:hover
この擬似クラスを定義すると、マウスポインタで要素をホバーさせた時の挙動を設定できる。
→li要素など、複数の並列な要素があっても、ポインタを当てている要素にのみ変更を適用できます。
タッチスクリーンだと挙動がやばいみたいですが……。
:hover - CSS: カスケーディングスタイルシート | MDN
CSSで実装する擬似クラス(:hover)を使ったマウスオーバー | webfeelfree
ちなみに、変色後の文字が見づらい&ポインタ動かす時下向いちゃうといった理由で、ホバー時のアクションはお蔵入りに……。
そういうものだ。
あとは特筆すべきようなものもないような……メッセージを宛てた方々に見られたらがっかりされそうなハリボテ感。
でもお世話になった方々へ感謝の意をお伝えできる場をいただけて嬉しかったです。
本当に何もかもありがとうございました！！！
そんなこんなでドタバタと11月が終わり、スクールを卒業してしまいました。
半年以上はお世話になっていたため、非常に感慨深いです。
TECH::EXPERT卒業でした 目標にここまで打ち込むこと、発想を形にすること、頑張っている人々をちゃんと見つめること、負けたくないと思うこと、そのどれもが人生で初めてのことでした ただ出来る人になんかなれるはずのない私なので、ここでの経験は大きな財産になると思っています pic.twitter.com/bCTVI3RDZn
— 夜戦 (@1plus1plus1plus) 2018年11月30日
深まりかたのキモさに定評があります。
しかし、深みに嵌る間も無く、明日から新しい職場でのお仕事が始まります。
たぶん色々大変であろうが、自我を保つことを忘れないように頑張っていきたい……。
