初めましてこんにちは。
モンブランで主にコーディングやその他諸々を日々こなしている江藤です。
いきなり私見に入りますが、
素晴らしいことに年々Webデザイナーさんのデザインレベルが上がってきているように感じます。
それはつまり、コーダーにはそのデザインを表現しつつレスポンシブにも対応していく技術の向上が求められます。
そしてデザイン上ではサッと流してみる部分でも、
コーディングで実装するには意外と大変な部分があります。
僕の記事ではその「えっ？ここがそんなに大変なの！？」「意外とここ苦労してるんだね～」といった箇所をご紹介できればと思います。
あめいろ工務店の隠れた技術
今回ご紹介するのは先日公開した、「あめいろ工務店」様から。
コーディングはRENDANの松高くん。
若くして僕の100倍はコーディングを理解しているプロフェッショナル。
個人的に先生とお呼びしており、マジ尊敬してます。
自社案件ながら恐ろしくクオリティーが高いサイトです。
ヘッダーからフッターまで余すことなくデザインされています。
それはつまり、ヘッダーからフッターまで余すことなくコーディングの技術が詰まっているサイトということ。
派生ページに至っても同じページはなく、
全ページTOPページのようなコーディングが必要になります。
そんな技術の結晶「あめいろ工務店」を初めて見た時衝撃を受けた箇所がここ。
え？普通のボタンじゃないの？ちょっとだけ形が変わってるけど・・・
そう思いましたか？
いやいや。これ実は正攻法じゃ実装できません。
僕は見た時こう思いました。
「え！？ここ画像じゃない？？どうなってんの？？？？平行四辺形みたいな形なのに左側は真っ直ぐだし角丸でしかも枠線のみのボタンもあるし…..わからん！！」
ちなみに後日ボスが松高君へこの箇所について聞いたところ
ボタン１つに1日費やし、書いたコードは1000行弱
（背景塗りつぶし、枠線のみ、サイズなど全パターン合わせて）
これで凄さ…もといヤバさが伝わるかと思います。
ボタンひとつで1日費やす。
納期もある中、1つのボタンにそこまで技術を詰め込めるって本当にすごいですよね。
仕組みをざっくり説明
このボタンの仕組みをざっくり説明します。
まずボタン全体を平行四辺形状へ傾けます。
そうすると下記のような形のボタンに
ここからが匠の工程。
ボタン要素に対して擬似要素（:before）を生成し、
傾きを元に戻し角丸を設定、そしてasboluteで要素の一番左へ配置。
赤で塗りつぶした箇所が擬似要素で追加した箇所
なるほど～。
足りない部分を擬似要素で生成・配置することでhoverでのアクションも実現しているんですね。
1つの要素で形が作れないなら、擬似要素を継ぎ足して１つの形にすれば良い。
たった一つのボタンですが、とても柔軟な発想で生成されていて、個人的にすごく勉強になりました。
こういうのって調べても出てこないので、自分で作らないと表現できないんですよね。
コーディングにおいても「ひらめき」ってすごく大事なことだと改めて思いました。
そんなあめいろ工務店様のサイトはこちら。
是非実際にご覧になってください！