cssでチェックボックスとラジオボタンの装飾


よく使うので忘備録を兼ねてご紹介します。

■チェックボックス

See the Pen
checkbox
by matsu (@pochi__2828)
on CodePen.


HTML

  • ラベルをクリックした際もチェックされるように、<input>を<label>で囲む。
  • <input>の後に<span>を追加してクラス名を付与。

CSS

  • display:none;で元のチェックボックスを非表示に。
  • .check::beforeでチェックされる前の枠を装飾。
  • input[type=”checkbox”]:checked + .check::beforeでチェックされた後の枠を装飾。
  • input[type=”checkbox”]:checked + .check::afterでチェックマークを装飾。
  • マークはボーダーで生成。
  • safariは全体が下にずれるので、枠とチェックマークのtopを上方向にずらす。

■ラジオボタン

See the Pen
radio
by matsu (@pochi__2828)
on CodePen.


HTML

  • ラベルをクリックした際もチェックされるように、<input>を<label>で囲む。
  • <input>の後に<span>を追加してクラス名を付与。

CSS

  • display:none;で元のラジオボタンを非表示に。
  • .radio::beforeでチェックされる前の枠を装飾。
  • input[type=”radio”]:checked + .radio::afterでチェックマークを装飾。
  • safariは全体が下にずれるので、枠とチェックマークのtopを上方向にずらす。

新入社員座談会

 



私がエイブリッジを選んだ理由

S.S:就職活動中に求人サイトを見て、初めて「エイブリッジ」を知りました。(すみません^^)
その後、企業研究する中で、沖縄本社を置きながら、海外や県外に拠点があることや、社員に「ナナメを上を目指す」など、社員個々の挑戦を歓迎する社風に惹かれました。

I.S:進路指導の先生に就職について相談させて頂いた際に、「めっちゃ良い企業があるよ!」と薦められ、”めっちゃ”と言う言葉にそこまで推す企業ってどういう企業なのだろうと?コーポ―レートサイトを見て企業研究をしていく中で、興味を持ち、IT企業に進みたい希望があったため、応募しました。
S.Sさんと比較すると志望動機が弱くてすみません^^

U.I:中学生の頃からIT業界で働きたい思いがあり、沖縄県内のIT企業を探している際に、私もI.Sさんと同じく進路指導の先生に奨められました。もしかすると、進路指導の先生ではお薦めしたい企業沖縄No.1(笑)

S.Y:進学せずに就職をすると決め求人票を見ていると、漠然としていますが、幼少の頃から人の役に立つシステムを作りたいという願望があり、「農業 × IT」や海外など幅広く様々な挑戦をしているエイブリッジであれば、その夢を叶えられると思い応募しました。


全員が知らなかった「エイブリッジ」、知れば知るほどその魅力に惹かれたようです。


内定から入社までの気持ち

I.S:採用面接の際に、面接官の方に伝えたいことが伝えられずに、お見送りを覚悟していました(笑)どうして採用して頂いたのか聞いてみたいです^^
そのこともあり、ミスマッチが生じか無いか不安でしたね。ここだけの話、直ぐ辞めると思っていました。

S.Y:皆さん同じかと思いますが、やはり、社会人未経験及び、未知の世界であるIT業界で、これから一生続けられるか不安でした。その時に友人が気にかけてくれて、東京旅行に行きました。(周りから見ても、不安そうだったのかな)
そこで、電車内やカフェなどで技術書を読みながらプログラミング学習や資格試験の勉強をしている高校生などを見て、「不安に思うくらいなら、まずは行動しよう」と思い、それから、自身に何が足りないのかを問うて、社会人スキルについての本を買いました。

S.S:そりゃ、もう不安で不安でした。大学が文系ということもあり、IT知識ゼロで業界に入ることがとってもとっても不安でした。
また、面接から内定までTさん・Sさんのお2人しかお会いしていないため、会社で働いている方々の雰囲気が分からないため不安でした。
ただ、その不安は、入社して3日後程度して解消されました^^その当時の私に「大丈夫!心配しないで!」と言いたいですね。
とにかく親身になって私たちに寄り添って頂きました。研修スペースの隣のスペースでは、経理の皆さんが業務されていらっしゃいますが、皆さん全員でお顔合わせの練習に付き合って下さいました。
改めて、Tさん、Uさん、Oさんありがとうございます!

U.I:不安?無かったです。

S.Y:ないんか~い!

I.S:その自信はどこから。

U.I:悩んでも仕方ないことなので、根拠ないです(笑)


それぞれの不安を抱えながら入社。今現在の4人を見ているとその不安は解消されたように感じます。


エイブリッジの雰囲気

U.I:オフィスの皆さんが優しい!社会人として分からない・知らないことが多い、私たちに対して、「こんなことも分からないの?」ではなく、「なぜ、ダメなのか?」を含め、丁寧にご指摘頂きました。
そのご指摘がなかったら、恐らく、お客様の前で恥をかいたと思います。

I.S:そうですね、「なぜ、それがいけないのか?」と丁寧に指摘して頂けるので理解しやすかったです。また、顔合わせの練習を通常は1日に2時間程度ですが、6時間ほど練習にお付き合いして頂きました。

S.Y:上司のお2人(Tさん・Sさん)は厳しいですが、研修を終えて振り返ると私たちのことを思ってのこと分かり、とても感謝しています。もし、エイブリッジにご入社頂いた際には、真摯に受け止めて改善して欲しいなと思います。
(補足です、お2人は業務終了すると気さくな方なのでご心配には及びません。)

I.S:しっかりフォロー(笑)初めの1ヶ月は怖かったー。

S.S:皆さんと同じで、言葉が正しいのか分かりませんが、ファミリーのように「時に厳しく、時に優しく」でした。


エイブリッジは社員をファミリーとして考えているようですね。初耳です。


就活生の皆さんへ伝えたい

S.S:就職活動は様々な企業を見ることが貴重な機会です。その機会を利用して、企業研究は必ずしてください。その際にご自身がその企業でやりたいこと、成し遂げたいことを見つけて満足の行く将来設計ができるよう頑張ってほしいです。エイブリッジは挑戦し続ける皆さんをサポートします!

S.Y:企業を探すうえで、まずは好きなことを中心に探すことも良いかと思います。会社に入るとやりたくない仕事もやらなければならないケースが出てきます。好きなことであれば、何とか続けることができると私は思っています。

U.I:恥じることを恐れずに、とりあえず挑戦してほしいです。やってしまえば、大したことないことが殆どです。会社訪問などやオンラインインターンシップをエイブリッジは随時開催しておりますので、是非、ご参加頂きたいです。

I.S:私もそうでしたが、なんとなくIT業界で働きたいなど、まだ明確になっていない方もいらっしゃと思います。怒られるかもしれませんが、仕事をしながらどのような人生を送りたいのかで選ぶという方法もあります。エイブリッジに入社して行く行くは起業したいなど、エイブリッジはご自身のステップアップも大歓迎です。

全員:大変ですが、楽しみ・悩みながら悔いのないよう、頑張ってください!