フロントエンド皆さんこんにちは。フロントエンドエンジニアの片柳です。今回はフロンドエンドチーム内で行われた「CSSBattle」第1回目の様子をレポートします。CSSBattleとは?cssbattle.devCSSBattleとは、指定されたお題をCSSだけで、いかに早く・綺麗に模写できるかを競うウェブサイトです。Sassはもちろん、予測変換も使えないため、CSSの特性やプロパティをいかに覚えているかが勝負の鍵となります。完成してもSubmitボタンは押さず、最後に一斉に押して点数発表といったハウスルールで対戦します。「初めてだから簡単なものから始めたいね」なんて、悠長なことを話しつつ、くじ引き。映えある1回目のお題はoh...初回からかなり難しそうな絵柄に当たり、途端におよび腰になる一同。「ええ...」「うーん...」と不安げな唸り声が各所で上がる一方で、「pxは省略しても大丈夫」といったCSSBattle特有のハックを見つけるなど、あっという間に30分は過ぎて行きました。「ざっくり作ったのちに細部を整える」「初めから細かく整えつつ仕上げる」など、同じ会社の同じチーム内ですが、組み立て方に個性が出る結果となりました。今回のお題で難易度を上げていたのは、上下左右に広がったドクロの骨部分。辿り着けたのは7人中2人だけでした。丸・丸・四角と3つの形から構成される要素ですが、疑似要素をうまく使うことで<div>要素1つでも作ることができます。transformで角度をつけるとtopやleftの指定で動く向きが変わるため、微調整の際には注意が必要です。難しいお題に一同苦労しましたが、終わる頃には「別のお題でまたやってみよう!」などポジティブな声もあがり、チームの交流としては大成功でした。09:33関連記事2023-04-27半角英数が改行されない原因と対処方法フロントエンドチームの君田(きみた)です。2022の5日目です...2022-10-25トラストバンクのフロントエンドを支える(予定の)ESlintこんにちは。フロントエンドエンジニアの片柳です。»プロフィール「自立した持続可能な地域をつくる」というビジョンのもと、様々な事業・サービスを展開しているトラストバンク開発メンバーによるブログです。(1)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。