1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 画像を中央の位置でトリミングするまずはこの縦長の画像、横長の画像を並べ、縦横 250px の正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSS でこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで

普段はプログラマーとしてお仕事をしている。過去に SIer でプロジェクトマネジメントにも携わっていた経験があるため、状況によって顧客との折衝を行ったり、開発のマネジメントも行ったりはする。 エンジニアの中には、自分は技術のみでキャリアを築き、マネジメントは一切しないと固く決めている人もいるが、私はそういうタイプではない。技術は好きだが、業務で必要に迫られたり状況次第で臨機応変にマネジメントもしていくといった考え方で働いている。 最近マネジメントに関して話す機会があった。私がマネージャーとしてお仕事をするとしても唯一諦めている人たちがいる。 スキルもやる気もない年配の方はマネジメントできない。 こんな話をして聞いている人はだいたい苦笑いをしているし、説得力のある反論をこれまで聞いたこともない。もちろんこんな年配の方は滅多にいない。もし私がマネージャーだったらそういった人は絶対に自分のチーム

Webフォームのバリデーションをするのって面倒ですよね。どうせサーバサイドでバリデーションするのに…。 といいつつも、利用者を苛つかせないためにも、無駄な通信を減らすためにもフロントサイドのバリデーションは重要です。 何か良いライブラリが無いかなと思ってgithubを漁っていたら、良さげなライブラリを見つけました。 validatorjs "A data validation library in JavaScript for the browser and Node.js, inspired by Laravel's Validator."とあるとおり、LaravelのValidatorに似た感じになっているのが特徴です。 Laravelといえば、JSはreact.jsではなくてvue.jsだろうということで、Vueのコンポーネントでのサンプルです。(CSSはBootstrap) もちろ